Recently I was looking for an framework that I can use together with jointjs. So far I tried react/angular/angular2.
I do wanna try out it with Cycle.js. But putting them together so 'old' stuff (jointjs) and cycle.js just overheads me. I know that I should create a driver to interact with jointjs. If someone can help me to get starter with simple example of joint(e.g.: http://www.jointjs.com/tutorial#hello-world) + cycle, that would be amazing.
Basic points that need to be included is:
JointJS required an container NODE element
Whenever users makes some changes (drag&drops elements around or resize them) it will broadcast an event. Something like this:
graph.on('all', function(eventName, cell) {
console.log(arguments);
});
Related
I have a surface with some shapes. I use
dojox.gfx.utils.toJson(surface)
to generate a json from it, and then
dojox.gfx.utils.fromJson(surface, json)
to get the data and append it to the surface.
The problem comes when I create a moveable node. After saving it to json and then appending it to the surface, the node is no longer moveable. I found no way of making the node moveable again. Is there a way to do this?
I want to be able to save and load svg data in my page and after load, move the elements around. Using dojo seemed easy enough before i stumbled on this problem. If I can't do this easy, is there a better library I can use, to achieve my goal?
Edit: here is the actual code: http://pastebin.com/2qLCTw8B
I found the answer to my problem.
First of all, when you require a dojo module it is good to assign it to a variable, which i didn't know. This way when assigning the on module, you can use the on function, used to add event listener, anywhere in the code. From there it is easy to create a moveable node, when you click on it.
It seemed though that this is a useless operation, as you could just iterate over the surface - children array, and make every node moveable.
Here is the improved code: http://pastebin.com/wAvSnZpN
The code needed, if you decide to use events anyway:
function HandleMouseDown(e) {
var foo = new dojox.gfx.Moveable(e.gfxTarget);
}
on(surface, 'mousedown', HandleMouseDown);
I have a site using jQuery and ScrollMagic. When the user scroll to a specific element ScrollMagic captures that and trigger an animation using TweenMax.
In jQuery the code looks like this
var scene = new ScrollScene({
triggerElement: '#animation_start'
}).setTween(TweenMax.from('#demo', 0.5 ,{opacity:0}));
controller.addScene([scene]);
In the new version of the site, there is a part of the page that contains much more complex animation that can be handled easily by AngularJS' two way data blinding and I want to take advantage of that. I am new to AngularJS, but I have written a couple apps in AngularJS. I am trying to wrap my head around what's the right way to approach this. Essentially, this is what I want to happen. When the user scroll to #animation_start, the AngularJS powered animation starts. In pseudo jQuery, it looks something like this:
var scene = new ScrollScene({
triggerElement: '#animation_start'
}).setTween(**AMAZING ANIMATION TO BE HANDLED BY ANGULARJS**);
controller.addScene([scene]);
I know I am thinking the wrong way because I am still thinking jQuery. How should I approach this problem and how should I structure the code?
Any help is appreciated.
As mentioned in Jan's answer the "proper" way to do this is with a directive that wraps ScrollMagic allowing you to define your behaviours in the markup.
I recently came across this problem myself and couldn't find an existing directive so wrote my own. It's very new and as yet undocumented but features an example, I hope to add more soon. Any feedback appreciated.
https://github.com/homerjam/angular-scroll-magic
In brief this allows you to do the following:
<body sm-scene="mainScene" duration="100%" trigger-hook="0.1">
<div class="stylish-animation" sm-tween="mainScene" duration="1" to-vars="{opacity: 1, yoyo: true, repeat: 5}">
<h1>Look at me go</h1>
</div>
</body>
Well it depends on how the AMAZING ANIMATION HANDLED BY ANGULARJS is organized...
But you could for example use ScrollMagic's events to run a callback that handles the angular animation.
For example like this:
var scene = new ScrollScene({
triggerElement: '#animation_start'
}).on("enter", amazingCallback);
In that callback you could trigger the animations.
The PROPER AngularJS way though would be this:
You'd need to write a module that uses directives that allow you to supply all options of a scene (and controller) as attributes of an element (i.e. your trigger element) and internally creates ScrollMagic objects accordingly.
That's a big challenge and if you decide to get into that, please share your results, because a plugin like this is on the long-term TODO list of ScrollMagic.
Mind that ScrollMagic 2.0 (currently in BETA) features a plugin architecture.
Alternatively you can have a look at skrollr which uses data-attributes to configure its animations and thus is already a lot closer to "the angular way".
I am developing a simple website for a client using Rails and I want to give them an easy way to create and manage their top navigation menu. Wordpress has a great tool (see example below) for this but I haven't found anything like it that is generally available.
So far I am thinking that Jquery Sortable would be the best place to start but to make it handle nested data (like trees), adding and removing elements, and add rules such as limiting the depth of nested elements seems like a lot of work.
How have you guys gone about solving this problem?
Have you tried this
You can initialize like
$(function () {
$("ol").sortable()
})
It also supports animation.
You can also take a look into the alternatives provided
USECASE: I am starting with a project which involves a lot of client side scripting. It is similar to a mini CMS where user can drag and drop html components. Somewhat similar to this. Now I am in a situation where I have to choose a MVC framework for defining the components that the user will be working on. (performing operations like drag, resize, delete etc).
Now the problem I am facing is,in choosing a framework which would be easy to learn and implement. I have the basic knowledge of Javascript and jQuery and have been using it for some time,but no experience with MVC.
My research from past 2 days says backbone.js is good to start,but I would like comments/suggestions over the flexibility it gives on handling html components and DOM elements. How can I store the initial content of the HTML components? (Outer boxes and structure).
Also, how can I handle multiple components of same type? Generating Id's dynamically is an option, but it becomes difficult to manage multiple elements with dynamic ids. Is there any other way they can be handled?
Which framework would it be easy to handle events on these components?
i use backbone for a web app which involves dragging and dropping, and i use jquery ui to implement the drag and drop features. They integrate pretty well imo, when you want to implement a droppable backbone view, for example
render: function(){
var $el = this.$el,
over = false,
origWidth;
if (!this.$el.is('.ui-sortable'))
this.$el.sortable({
revert: false,
axis: 'y',
placeholder: 'placeholder',
items: '.load-order',
containment: this.el,
receive: this.onOrderDrop,
over: this.onOrderOver
out: function(e, ui){
// Resize back to original width
if (over && ui.helper)
ui.helper.stop().animate({width: origWidth}, 'fast');
over = false;
}
update:
with backbone views, you have a skeleton html structure which is then incremented with backbone views.
Each view has a template which is rendered with model data
you can read more about it at Backbone Essentials
also i made a small todolist to demonstrate draggable event with backbone
http://www.github.com/joaoxsouls/todolist
Why do you want to use BackboneJS?
If its not a necessity, and you simply want a drag drop interface, you might want to look at this: http://omshankar.kodingen.com/engine-1.73/
The JavaScript has been minimised only to make it single line. Functions and variables are all intact, which in Chrome can be seen by clicking on {} in Sources
If its an extreme necessity, you can definitely have drag drop in backbone. Only thing is that you might have to initialize a drag drop again in the item's render function, every time its called.
Regarding having an HTML structure, outer box and components, make your HTML the way you want. It can be done. A sample Backbone application: http://omshankar.kodingen.com/exp/backbone-html5-dd/
It also has a drag-drop, but that's dragging image files from your OS into browser, not of your relevance
If you want to store HTML, you can do via local storage, or have that simply in your HTML file. Apply/Make Backbone view only to those parts that are dynamic
I suggest Angular JS? It has great binding and directive features.
AngularJS is great, especially if you couple it with something like ConversationJS:
https://github.com/rhyneandrew/Conversation.JS
I'm not a big fan of how "spaghetti" angular feels, and Conversation allows you to decouple quite a bit of it without changing the way it works. It makes the code base quite a bit cleaner.
I'm trying to create a multi-leveled list that is sortable by drag and drop. The user can grab an element and move it up and down the tree or drop it into other elements and have it become a child.
Are there off the shelf JS solutions? The jQuery sortable/draggable worked fine for a single level list but less so on nested solutions.
You can also try https://github.com/dbushell/Nestable (demo: http://dbushell.github.io/Nestable/).
Works with mouse and touch and this plugin is compatible with jQuery and Zepto.
I am using johnny's jquery-sortable plugin, which can be found here http://johnny.github.io/jquery-sortable.
It seems to work pretty well.
I was also trying to get it to send back the sorted structure of the list via AJAX. See this topic if you want to see my working solution, as the official documentation on serialization seemed slightly unsatisfactory (at least for nested lists).
Hope this is helpful.
So while you can use https://github.com/dbushell/Nestable or http://johnny.github.io/jquery-sortable
You probably want to move to something like React these days so you can use packages like this: https://www.npmjs.com/package/react-drag-sortable
Try not to use jQuery for this sort of thing any more. By the time you have drag/drop interfaces you have the makings of a webapp, not a web page, and you're going the wrong direction.
I have came to see a package named react-nestable and it works to create nested drag and drop. I am putting a link for that package below - react-nestable npm