Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

added ability to click on two elements to swap their position

  • Loading branch information...
commit 2bb7169cc02ba0c7b9f427fb68f480b433f8e497 1 parent e407877
@subhaze subhaze authored
View
8 demos/Fx.Sort/demo.css
@@ -7,10 +7,16 @@
margin: 3px;
padding: 2px;
border: 1px solid #333;
+ cursor: pointer;
}
.red {background-color: #C17878;}
.purple {background-color: #A87AAD;}
.green {background-color: #78BA91;}
.orange {background-color: #E79D35;}
.blue {background-color: #6B7B95;}
-strong{color: #C17878;}
+strong{color: #C17878;}
+
+#note{
+ font-size: 10px;
+ color: #A87AAD;
+}
View
4 demos/Fx.Sort/demo.details
@@ -6,7 +6,7 @@ name: Fx.Sort
description: With Fx.Sort you can reorder a group of items with a transition.
authors:
- - The MooTools Developer Team
+ - subhaze
docs:
- name: Fx.Sort
@@ -20,4 +20,4 @@ docs:
*/
<p>With <code>Fx.Sort</code> you can reorder a group of items with a transition.</p>
-<p><strong>Note:</strong> <code>Fx.Sort</code> does not, by default, reorder the DOM; it just puts the elements into x/y locations that imply the sort, but their location in the DOM remains unless you execute <a href="http://mootools.net/docs/more/Fx/Fx.Sort#Fx-Sort:rearrangeDOM"><code>Fx.Sort:rearrangeDOM</code></a>.</p>
+<p><strong>Notice:</strong> <code>Fx.Sort</code> does not, by default, reorder the DOM; it just puts the elements into x/y locations that <em>imply</em> the sort, but their location in the DOM remains unless you execute <a href="http://mootools.net/docs/more/Fx/Fx.Sort#Fx-Sort:rearrangeDOM"><code>Fx.Sort:rearrangeDOM</code></a>.</p>
View
2  demos/Fx.Sort/demo.html
@@ -22,6 +22,7 @@
<input type="text" id="duration" value="1000" style="width: 60px;" />
<input id="mode" type="checkbox" value="vertical" checked />
<label for="mode">vertical sort</label>
+<div id="note">*you can click on any two elements below to swap their position</div>
<hr />
<div id="container" >
<div class="red sort">red</div>
@@ -38,6 +39,5 @@
<a href="#" id="swap" title="Swaps the position of one item with another">Swap first and last child</a> |
<a href="#" id="order" title="Retrieves the current sort order">Current order</a> |
<a href="#" id="reorderDOM" title="Rearranges the DOM to the current sort order">rearrangeDOM</a>
-<hr />
<h3> Current DOM order </h3>
<code id="output"></code>
View
39 demos/Fx.Sort/demo.js
@@ -1,23 +1,24 @@
window.addEvent('domready', function() {
- var container = document.id('container'), // cache sort container
- sorter = new Fx.Sort($$('#container .sort'), { // setup sort object
- "duration": document.id('duration').value,
- "transition": Fx.Transitions[document.id('fxTransition').value][document.id('fxEase').value],
- "mode": "vertical",
- onComplete: function() {
- displayDOM() ;
- }
- });
+ var container = document.id('container'), //cache sort container
+ queuedElems = [], //used to track what elements to swap on click
+ sorter = new Fx.Sort($$('#container .sort'), { //setup sort object
+ "duration": document.id('duration').value,
+ "transition": Fx.Transitions[document.id('fxTransition').value][document.id('fxEase').value],
+ "mode": "vertical",
+ onComplete: function() {
+ displayDOM();// update the UI DOM visual on each sort
+ }
+ });
- displayDOM();
+ displayDOM();//update the UI DOM visual on domready
+ //sort based on text of element that was clicked (forward, backward, reverse)
$$('.fireSort').addEvent('click', function(e) {
e.preventDefault();
- //sort based on text of element that was clicked (forward, backward, reverse)
sorter[this.get('text')]();
}
);
-
+
document.id('order').addEvent('click', function(e) {
e.preventDefault();
alert(sorter.currentOrder);
@@ -27,7 +28,7 @@ window.addEvent('domready', function() {
document.id('reorderDOM').addEvent('click', function(e) {
e.preventDefault();
sorter.rearrangeDOM();
- displayDOM();
+ displayDOM();//onComplete isn't fire so update UI DOM visual manually
}
);
@@ -35,9 +36,9 @@ window.addEvent('domready', function() {
sorter.rearrangeDOM(); //rearrange DOM first so that elements stack properly
sorter.options.mode = (this.checked) ? "vertical":"horizontal";
container.toggleClass('container');
- displayDOM();
+ displayDOM();//onComplete isn't fire so update UI DOM visual manually
});
-
+
document.id('swap').addEvent('click', function(e) {
e.preventDefault();
var elems = container.getChildren();
@@ -62,12 +63,18 @@ window.addEvent('domready', function() {
document.id('duration').addEvent('keyup', function() {
sorter.options.duration = this.value.toInt();
});
+
+ //allows users to click on elements to swap their positions
+ $$('.sort').addEvent('click', function(){
+ if(queuedElems.length > 0) sorter.swap(queuedElems.pop(), this);
+ else queuedElems.push(this);
+ });
//helper function, displays the DOM visually to see how the sort effects it
function displayDOM() {
var str = '';
container.getChildren().each( function(item) {
- str += '<div style="'+item.style.cssText+'">'+item.get('text')+'</div>\r\n';
+ str += '<div style="'+item.style.cssText+'">'+item.get('text')+'</div>\n';
});
document.id('output').set('text', str);
}
Please sign in to comment.
Something went wrong with that request. Please try again.