Comments (11)
Oh, I see what's going on. The packaged version defines dependencies like classie
as AMD modules but the bower install draggabilly source version does not.
from draggabilly.
And finally the actual, real root cause. Bower is pulling in the dependencies correctly, but the default AMD path doesn't match where bower puts them. What about changing the current define:
if ( typeof define === 'function' && define.amd ) {
// AMD
define( [
'classie',
'eventEmitter',
'eventie',
'get-style-property',
'get-size'
],
draggabillyDefinition );
} else { /* ... */ }
Why not change it to this, so that the paths work by default?
if ( typeof define === 'function' && define.amd ) {
// AMD
define( [
'../classie/classie',
'../eventEmitter/EventEmitter.min',
'../eventie/eventie',
'../get-style-property/get-style-property',
'../get-size/get-size'
],
draggabillyDefinition );
}
from draggabilly.
Why not change it to this, so that the paths work by default?
I recommend setting up paths in your RequireJS config. This allows better flexibility.
from draggabilly.
Done, but I've never seen a library require me to config the paths for its dependencies. Looks like this. Have to add a whole section for draggability deps. Smells funny:
define [], () ->
require.config
paths:
# 3rd Party Bower Libraries
Handlebars: "bower_components/require-handlebars-plugin/Handlebars"
underscore: "bower_components/underscore-amd/underscore"
jquery: "bower_components/jquery/jquery"
jqueryui: "bower_components/jquery-ui/jqueryui"
backbone: "bower_components/backbone-amd/backbone"
syphon: 'bower_components/backbone.syphon/lib/amd/backbone.syphon'
text: "bower_components/requirejs-text/text"
toastr: "bower_components/toastr"
draggabilly: 'bower_components/draggabilly/draggabilly'
# draggabilly deps
classie: 'bower_components/classie/classie'
eventEmitter: 'bower_components/eventEmitter/EventEmitter.min'
'get-style-property': 'bower_components/get-style-property/get-style-property'
'get-size': 'bower_components/get-size/get-size'
eventie: 'bower_components/eventie/eventie'
# 3rd Party non-Bower Libraries
nested_view: "scripts/vendor/nested_view"
bootstrap: "scripts/vendor/bootstrap"
chart: "scripts/vendor/Chart"
# Convenience Folder Mapping
assessments: "scripts/views/assessments"
dashboard: "scripts/views/dashboard"
components: "scripts/views/components"
results: "scripts/views/results"
routers: "scripts/routers"
models: "scripts/models"
controllers: "scripts/controllers"
collections: "scripts/collections"
helpers: "scripts/helpers"
messages: "scripts/views/messages"
shim:
bootstrap:
deps: ["jquery"]
exports: "jquery"
chart:
exports: "Chart"
from draggabilly.
I agree this is not an ideal solution. We're still working out the best practices with Bower integration with AMD. What would be ideal for you? Using relative paths in the draggabilly source?
from draggabilly.
It would be great a version with all dependencies inside it, and another version minified, both would be interesting.
from draggabilly.
@andreu86: If you include all the depencencies inside a dependency, this means the client will have to download too much. For example, say that:
`SprocketMaster` depends on `jQuery`
and
`Lightbox` depends on `jQuery`
In a "all dependencies inside it" model, the client would actually have to download jQuery two times.
The trick is to come up with a convention so that everything that depends on jQuery
(or anything else) has a standard place to look for it. I think Bower/jam/etc are the closest thing we have to a convention like that.
from draggabilly.
I understand your point of view, maybe a Grunt task to generate a full version would be enough, as an extra option.
Thanks for replying!
from draggabilly.
Yeah, it does smell funny. Have you tried the Bower+RequireJS Grunt task? It might be the missing piece of the puzzle.
from draggabilly.
I'm looking for feedback on how to best set up RequireJS dependencies in my components. Help me out! See https://github.com/desandro/requirejs-bower-homework
from draggabilly.
draggabilly.pkgd.js is now generated with RequireJS. So you can require the packaged file. Or you can manage dependencies with Bower. See http://draggabilly.desandro.com/#requirejs
from draggabilly.
Related Issues (20)
- cannot drag vertically when container's height get very large
- Draggabilly drop target with Packery is always the first item's size HOT 1
- PointerCancel being called after dragMove
- click inside draggable container doesn't work on mobile devices HOT 1
- pass handle as element???... HOT 2
- Dragging not working properly when the containment is inside an Iframe. HOT 1
- Scalled container position issue HOT 1
- TinyMCE and Drag Conflict Issues
- Possible to retain the modified layout HOT 1
- npm import not find Draggabilly
- Avoid element to be dragged and define fixed height HOT 2
- I really need the function pause drag and continue drag with conditions
- Ths library rocks! Thanks
- Ability to set priority of style properties HOT 1
- Two or more sets of draggable items? HOT 1
- (Emitted error) Ignored attempt to cancel a touchstart event with cancelable=false, for example because scrolling is in progress and cannot be interrupted. HOT 1
- how to turn off prevend default on touch start?
- 移动过程中会改变元素大小
- Prevent div from scrolling when dragging an item
- Drag with lerp
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from draggabilly.