Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Add links to the docs for each demo

  • Loading branch information...
commit 6e8992816c6e1fe76b1362ee3385ab1c6ef637c9 1 parent 32e3b23
@arian arian authored
View
2  demos/Accordion/demo.details
@@ -1,7 +1,7 @@
/*
---
-name: Accordion Demo
+name: Accordion
description: A really simple example of an accordion
View
14 demos/Drag.Cart/demo.details
@@ -8,6 +8,20 @@ description: A shopping cart demo
authors:
- The MooTools Development Team
+docs:
+ - name: Drag.Move
+ url: http://mootools.net/docs/more/Drag/Drag.Move
+ - name: Drag
+ url: http://mootools.net/docs/more/Drag/Drag
+ - name: Element:addEvent
+ url: http://mootools.net/docs/core/Element/Element.Event#Element:addEvent
+ - name: Event:stop
+ url: http://mootools.net/docs/core/Types/Event#Event:stop
+ - name: Element:getCoordinates
+ url: http://mootools.net/docs/core/Element/Element.Dimensions#Element:getCoordinates
+ - name: "Fx.Tween element methods: Element:highlight and Elementtween"
+ url: http://mootools.net/docs/core/Fx/Fx.Tween#Element
+
...
*/
View
6 demos/Drag.Drop/demo.details
@@ -8,6 +8,12 @@ description: Another simple Drag example showing droppable areas
authors:
- Djamil Legato
+docs:
+ - name: Element:makeDraggable
+ url: http://mootools.net/docs/more/Drag/Drag.Move#Element:makeDraggable
+ - name: Element:morph
+ url: http://mootools.net/docs/core/Fx/Fx.Morph#Element:morph
+
...
*/
View
6 demos/Drag.Move/demo.details
@@ -7,7 +7,11 @@ description: A drag example showing how to manage droppable areas
authors:
- Djamil Legato
-
+
+docs:
+ - name: Drag.Move
+ url: http://mootools.net/docs/more/Drag/Drag.Move
+
...
*/
View
12 demos/Effects/demo.details
@@ -8,6 +8,18 @@ description: Effects
authors:
- Darren Waddell
+docs:
+ - name: Fx.Tween
+ url: http://mootools.net/docs/core/Fx/Fx.Tween
+ - name: Fx.Morph
+ url: http://mootools.net/docs/core/Fx/Fx.Morph
+ - name: Element:tween
+ url: http://mootools.net/docs/core/Fx/Fx.Tween#Element:tween
+ - name: Element:morph
+ url: http://mootools.net/docs/core/Fx/Fx.Morph#Element:morph
+ - name: Element:erase
+ url: http://mootools.net/docs/core/Element/Element#Element:erase
+
...
*/
View
6 demos/Element.Event/demo.details
@@ -1,7 +1,7 @@
/*
---
-name: Element.Event Demo
+name: Element.Event
description:
@@ -11,6 +11,10 @@ authors:
keywords:
- Elements, Events
+docs:
+ - name: Element.Event
+ url: http://mootools.net/docs/core/Element/Element.Event
+
...
*/
View
5 demos/Element.Event/demo.js
@@ -17,7 +17,7 @@ window.addEvent('domready', function() {
focus: function() {
// When focusing, if the textarea contains value "Type here", we
// simply clear it.
- if (textarea.value.contains('Type here')) textarea.value = '';
+ if (textarea.value.contains('Type here')) textarea.set('value', '');
},
keyup: function() {
@@ -34,7 +34,8 @@ window.addEvent('domready', function() {
burn: function(text) {
// When the textarea contains one of the magic words
// we reset textarea value and set the log with text
- textarea.value = ''; log.set('html', text);
+ textarea.set('value', '');
+ log.set('html', text);
// then we start the highlight morphing
highlight.start({
View
4 demos/Fx.Morph/demo.details
@@ -11,6 +11,10 @@ authors:
keywords:
- Fx
+docs:
+ - name: Fx.Morph
+ url: http://mootools.net/docs/core/Fx/Fx.Morph
+
...
*/
View
3  demos/Fx.Morph/demo.js
@@ -4,8 +4,7 @@ window.addEvent('domready', function(){
var lis = $$('#idList LI');
lis.set('morph', {
- duration: 200,
- wait: false
+ duration: 200
})
lis.addEvents({
View
10 demos/Fx.Slide/demo.details
@@ -1,14 +1,18 @@
/*
---
-name: Effects
+name: Fx.Slide
-description: Effects
+description: With Fx.Slide you can slide elements in and out, or even toggle them!
authors:
- The MooTools Developer Team
+docs:
+ - name: Fx.Slide
+ url: http://mootools.net/docs/more/Fx/Fx.Slide
+
...
*/
-<p>Slide elements in and out, or even toggle them!</p>
+<p>With Fx.Slide you can slide elements in and out, or even toggle them!</p>
View
6 demos/Periodical/demo.details
@@ -12,7 +12,11 @@ keywords:
- Function
- Periodical
-requires: [Core/Fx]
+docs:
+ - name: Function:periodical
+ url: http://mootools.net/docs/core/Types/Function#Function:periodical
+ - name: MDC clearInterval
+ url: https://developer.mozilla.org/en/DOM/window.clearInterval
...
*/
View
6 demos/Periodical/demo.js
@@ -4,20 +4,26 @@ window.addEvent('domready', function(){
var effect = new Fx.Tween('box', {duration: 800}),
periodical;
+ // Create the function wich will run the effect
var fx = function() {
effect.start('background-color', '#6684a0').chain(function() {
effect.start('background-color', '#bcd965');
});
+ // return this function, so you could do fx() which returns fx,
+ //or fx()()() which still returns fx and runs the function 3 times
return fx;
};
$('start').addEvent('click', function(event){
event.stop();
+ // We call the fx function once directly, which returns the fx function again, and set the periodical to 1.7 seconds
+ // We store the reference to the peridical in the peridical, so we can stop it later
periodical = fx().periodical(1700);
});
$('stop').addEvent('click', function(event){
event.stop();
+ // With the JavaScipt function clearInterval we can stop the interval
clearInterval(periodical);
});
View
4 demos/Request.HTML/demo.details
@@ -12,7 +12,9 @@ keywords:
- Request
- HTML
-requires: [Core/Request]
+docs:
+ - name: Request.HTML
+ url: http://mootools.net/docs/core/Request/Request.HTML
...
*/
View
4 demos/Request.JSON/demo.details
@@ -12,7 +12,9 @@ keywords:
- Request
- HTML
-requires: [Core/Request.JSON]
+docs:
+ - name: Request.JSON
+ url: http://mootools.net/docs/core/Request/Request.JSON
...
*/
View
8 demos/Request.JSON/demo.html
@@ -1,9 +1,9 @@
<p>
- Use a JSON request when you have complex data which you would like to send in a JavaScript-readable format to a handling method on the client side. The first method passed to a Request.JSON onComplete method is the data object represented in the JSON code which was returned by the server. For more information on the JSON format, see <a href="http://json.org" target="_top">json.org</a>.
+ Use a JSON request when you have complex data which you would like to send in a JavaScript-readable format to a handling method on the client side. The first method passed to a Request.JSON onComplete method is the data object represented in the JSON code which was returned by the server. For more information on the JSON format, see <a href="http://json.org" target="_top">json.org</a>.
</p>
<p>
- <a href="#" title="Start loading data" id="loadJson">load JSON Data</a> |
- <a href="#" id="clearJson" title="Clear data">clear JSON Data</a> |
- <a href="demos/Request.JSON/data.json" title="Json: data.json">see <strong>data.json</strong></a>
+ <a href="#" title="Start loading data" id="loadJSON">load JSON Data</a> |
+ <a href="#" id="clearJSON" title="Clear data">clear JSON Data</a> |
+ <a href="demos/Request.JSON/data.json" title="JSON: data.json">see <strong>data.json</strong></a>
</p>
<div id="gallery"></div>
View
4 demos/Request.JSON/demo.js
@@ -20,7 +20,7 @@ window.addEvent('domready', function() {
});
};
- $('loadJson').addEvent('click', function(e){
+ $('loadJSON').addEvent('click', function(e){
e.stop();
var request = new Request.JSON({
@@ -31,7 +31,7 @@ window.addEvent('domready', function() {
}).send();
});
- $('clearJson').addEvent('click', function(e){
+ $('clearJSON').addEvent('click', function(e){
e.stop();
gallery.empty();
});
View
6 demos/Request/demo.details
@@ -6,12 +6,14 @@ name: Drag.Move
description: A drag example showing how to manage droppable areas
authors:
- -
+ -
keywords:
- Drag
-requires: [Core/*, More/Drag.Move]
+docs:
+ - name: Request
+ url: http://mootools.net/docs/core/Request/Request
...
*/
View
6 demos/Slider/demo.details
@@ -6,12 +6,14 @@ name: Slider
description: Slider demo
authors:
- -
+ -
keywords:
- Effects
-requires: [Core/*, More/Slider]
+docs:
+ - name: Slider
+ url: http://mootools.net/docs/more/Drag/Slider
...
*/
View
4 demos/Sortables/demo.details
@@ -11,7 +11,9 @@ authors:
keywords:
- Effects
-requires: [Core/*, More/Sortables]
+docs:
+ - name: Sortables
+ url: http://mootools.net/docs/more/Drag/Sortables
...
*/
View
8 demos/Transitions/demo.details
@@ -11,6 +11,14 @@ authors:
keywords:
- Transitions, Fx
+docs:
+ - name: Fx.Transitions
+ url: http://mootools.net/docs/core/Fx/Fx.Transitions
+ - name: Fx.Morph
+ url: http://mootools.net/docs/core/Fx/Fx.Morph
+ - name: Event page property
+ url: http://mootools.net/docs/core/Types/Event#Event:constructor
+
...
*/
View
8 demos/Transitions/demo.js
@@ -1,12 +1,14 @@
window.addEvent('domready', function(){
+ // First we create a Fx.Morph instance which we will use to move the red box
var target = $('target');
var fx = new Fx.Morph(target, {
duration: 1000,
link: 'chain'
});
+ // The big gray erea
var box = $('box');
target.setStyles({
@@ -19,9 +21,11 @@ window.addEvent('domready', function(){
durationInput = $('duration'),
result = $('result');
+ // Run the event if one of the select boxes has changed
$$(selectEase, selectTransition).addEvent('change', function(){
var transition = selectTransition.get('value');
+ // This is where we set the transition option to the selected value
if (transition == 'linear'){
fx.options.transition = Fx.Transitions.linear;
transition = 'Fx.Transitions.linear';
@@ -34,15 +38,19 @@ window.addEvent('domready', function(){
});
+ // Run the above event on once on startup
selectEase.fireEvent('change');
+ // Set the duration option if it has changed
durationInput.addEvent('keyup', function(){
fx.options.duration = parseFloat(durationInput.get('value'));
});
+ // If you click anywhere on the gray box, the red box should morph to the clicked coordinates
box.addEvent('mousedown', function(event){
event.stop();
fx.start({
+ // The clicked coordinates are stored in the event.page property
top: [event.page.y - 25],
left: [event.page.x - 25]
});
Please sign in to comment.
Something went wrong with that request. Please try again.