Request is the basic XHR request class in MooTools. While not extremely useful on its own, it provides the basic functionality for both Request.HTML and Request.JSON.
Request is the basic XHR request class in MooTools. While not extremely useful on its own, it provides the basic functionality for both Request.HTML and Request.JSON.
Request is the basic XHR request class in MooTools. While not extremely useful on its own, it provides the basic functionality for both Request.HTML and Request.JSON.
This demo will show you how to: add a single event to a parent element and have it delegate that event to it's children based on a selector, even elements that were created after the event was setup.
The Drag.Move class in MooTools More makes it easy to make an element draggable, and define 'droppable' elements which can interact with the dragged element. This is a simple example showing how you define these elements and add the relevant events.
Back in the 90s you sorted items in a list with arrows up/down or maybe even with input-fields where you specified the item's position. But now you have the Sortables-Plugin, which comes in handy when you are using one or more lists and need the user to sort them.
2 | Use a JSON request when you have complex data which you would like to send in a
3 | JavaScript-readable format to a handling method on the client side. The first
4 | method passed to a Request.JSON onComplete method is the data object represented
5 | in the JSON code which was returned by the server. For more information on the
6 | JSON format, see json.org.
7 |
24 | For the left list the styles are defined in a JavaScript object. For the right list the styles are defined in the
25 | CSS file. Fx.Morph can fetch those styles by a simple CSS selector. The main advantage of the last approach is that
26 | you can keep your styles in the CSS, and the logic in the JavaScript.
27 |
28 |
--------------------------------------------------------------------------------
/demos/Enhanced-Form/demo.js:
--------------------------------------------------------------------------------
1 |
2 | window.addEvent('domready', function(){
3 |
4 | // The elements used.
5 | var myForm = document.id('myForm'),
6 | myResult = document.id('myResult');
7 |
8 | // Labels over the inputs.
9 | myForm.getElements('[type=text], textarea').each(function(el){
10 | new OverText(el);
11 | });
12 |
13 | // Validation.
14 | new Form.Validator.Inline(myForm);
15 |
16 | // Ajax (integrates with the validator).
17 | new Form.Request(myForm, myResult, {
18 | requestOptions: {
19 | 'spinnerTarget': myForm
20 | },
21 | extraData: { // This is just to make this example work.
22 | 'html': 'Form sent.'
23 | }
24 | });
25 |
26 | });
27 |
--------------------------------------------------------------------------------
/demos/Drag.Drop/demo.details:
--------------------------------------------------------------------------------
1 | /*
2 | ---
3 |
4 | name: Drag.Drop
5 |
6 | description: Another simple Drag example showing droppable areas
7 |
8 | authors:
9 | - Djamil Legato
10 |
11 | docs:
12 | - name: Element:makeDraggable
13 | url: http://mootools.net/docs/more/Drag/Drag.Move#Element:makeDraggable
14 | - name: Element:morph
15 | url: http://mootools.net/docs/core/Fx/Fx.Morph#Element:morph
16 |
17 | ...
18 | */
19 |
20 |
The Drag.Move class in MooTools More makes it easy to make an element draggable, and define 'droppable' elements which can interact with the dragged element. This is a simple example showing how you define these elements and add the relevant events.
3 | Why? MooTools features mouseenter and mouseleave because mouseover/mouseout sometimes
4 | just does not work as expected. Mouseenter only fires once you enter the element and
5 | does not fire again if your mouse crosses over children of the element.
6 |
7 |
8 |
9 |
10 |
Menu Example
11 |
12 | This example explains how to open a menu-like element on mouseenter and
13 | how it closes again on mouseleave.
14 |
With Fx.Sort you can reorder a group of items with a transition.
23 |
Notice:Fx.Sort 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 Fx.Sort:rearrangeDOM.
23 | A new standalone selector engine that is totally slick! And it is the new Selector Engine of MooTools
24 |
25 |
26 |
27 | Reversed Combinators are a classification of combinators that are the reverse of their original. They redirect the flow of
28 | selectors and combinators to travel up the node tree rather than down. Slick implements these by prepending ! to a selector
29 | or combinator.
30 |
18 | There are times you may ask yourself "Why isn't that part of MooTools?" and while
19 | there are possibly a lot of answers to that it simply could be that it is something with only small usage.
20 |
21 |
22 | For that reason MooTools made it easy for you to extend any native object like Arrays, Strings etc. to add the
23 | functionality you want.
24 |
25 |
26 | In this example you will learn how to extend the Elements-Object with two custom methods. For this example
27 | we create two methods, the first equalize method calculates the average of a certain property,
28 | and applies it with the tween method. The setRandom tweens the property to a random value between
29 | the min and max values.
30 |
31 |
--------------------------------------------------------------------------------
/assets/codemirror/js/parsedummy.js:
--------------------------------------------------------------------------------
1 | var DummyParser = Editor.Parser = (function() {
2 | function tokenizeDummy(source) {
3 | while (!source.endOfLine()) source.next();
4 | return "text";
5 | }
6 | function parseDummy(source) {
7 | function indentTo(n) {return function() {return n;}}
8 | source = tokenizer(source, tokenizeDummy);
9 | var space = 0;
10 |
11 | var iter = {
12 | next: function() {
13 | var tok = source.next();
14 | if (tok.type == "whitespace") {
15 | if (tok.value == "\n") tok.indentation = indentTo(space);
16 | else space = tok.value.length;
17 | }
18 | return tok;
19 | },
20 | copy: function() {
21 | var _space = space;
22 | return function(_source) {
23 | space = _space;
24 | source = tokenizer(_source, tokenizeDummy);
25 | return iter;
26 | };
27 | }
28 | };
29 | return iter;
30 | }
31 | return {make: parseDummy};
32 | })();
33 |
--------------------------------------------------------------------------------
/assets/codemirror/contrib/plsql/LICENSE:
--------------------------------------------------------------------------------
1 | Copyright (c) 2010 Peter Raganitsch
2 |
3 | This software is provided 'as-is', without any express or implied
4 | warranty. In no event will the authors be held liable for any
5 | damages arising from the use of this software.
6 |
7 | Permission is granted to anyone to use this software for any
8 | purpose, including commercial applications, and to alter it and
9 | redistribute it freely, subject to the following restrictions:
10 |
11 | 1. The origin of this software must not be misrepresented; you must
12 | not claim that you wrote the original software. If you use this
13 | software in a product, an acknowledgment in the product
14 | documentation would be appreciated but is not required.
15 |
16 | 2. Altered source versions must be plainly marked as such, and must
17 | not be misrepresented as being the original software.
18 |
19 | 3. This notice may not be removed or altered from any source
20 | distribution.
21 |
22 | Peter Raganitsch
23 |
--------------------------------------------------------------------------------
/assets/codemirror/contrib/sql/LICENSE:
--------------------------------------------------------------------------------
1 | Copyright (c) 2009 John Benediktsson
2 |
3 | This software is provided 'as-is', without any express or implied
4 | warranty. In no event will the authors be held liable for any
5 | damages arising from the use of this software.
6 |
7 | Permission is granted to anyone to use this software for any
8 | purpose, including commercial applications, and to alter it and
9 | redistribute it freely, subject to the following restrictions:
10 |
11 | 1. The origin of this software must not be misrepresented; you must
12 | not claim that you wrote the original software. If you use this
13 | software in a product, an acknowledgment in the product
14 | documentation would be appreciated but is not required.
15 |
16 | 2. Altered source versions must be plainly marked as such, and must
17 | not be misrepresented as being the original software.
18 |
19 | 3. This notice may not be removed or altered from any source
20 | distribution.
21 |
22 | John Benediktsson
23 |
--------------------------------------------------------------------------------
/assets/codemirror/contrib/scheme/LICENSE:
--------------------------------------------------------------------------------
1 | Copyright (c) 2010 Danny Yoo
2 |
3 | This software is provided 'as-is', without any express or implied
4 | warranty. In no event will the authors be held liable for any
5 | damages arising from the use of this software.
6 |
7 | Permission is granted to anyone to use this software for any
8 | purpose, including commercial applications, and to alter it and
9 | redistribute it freely, subject to the following restrictions:
10 |
11 | 1. The origin of this software must not be misrepresented; you must
12 | not claim that you wrote the original software. If you use this
13 | software in a product, an acknowledgment in the product
14 | documentation would be appreciated but is not required.
15 |
16 | 2. Altered source versions must be plainly marked as such, and must
17 | not be misrepresented as being the original software.
18 |
19 | 3. This notice may not be removed or altered from any source
20 | distribution.
21 |
22 | Danny Yoo
23 | dyoo@cs.wpi.edu
24 |
--------------------------------------------------------------------------------
/assets/codemirror/LICENSE:
--------------------------------------------------------------------------------
1 | Copyright (c) 2007-2010 Marijn Haverbeke
2 |
3 | This software is provided 'as-is', without any express or implied
4 | warranty. In no event will the authors be held liable for any
5 | damages arising from the use of this software.
6 |
7 | Permission is granted to anyone to use this software for any
8 | purpose, including commercial applications, and to alter it and
9 | redistribute it freely, subject to the following restrictions:
10 |
11 | 1. The origin of this software must not be misrepresented; you must
12 | not claim that you wrote the original software. If you use this
13 | software in a product, an acknowledgment in the product
14 | documentation would be appreciated but is not required.
15 |
16 | 2. Altered source versions must be plainly marked as such, and must
17 | not be misrepresented as being the original software.
18 |
19 | 3. This notice may not be removed or altered from any source
20 | distribution.
21 |
22 | Marijn Haverbeke
23 | marijnh@gmail.com
24 |
--------------------------------------------------------------------------------
/assets/codemirror/contrib/python/css/pythoncolors.css:
--------------------------------------------------------------------------------
1 | html {
2 | cursor: text;
3 | }
4 |
5 | .editbox {
6 | padding: .4em;
7 | margin: 0;
8 | font-family: monospace;
9 | font-size: 10pt;
10 | line-height: 1.1em;
11 | color: black;
12 | }
13 |
14 | pre.code, .editbox {
15 | color: #666666;
16 | }
17 |
18 | .editbox p {
19 | margin: 0;
20 | }
21 |
22 | span.py-delimiter, span.py-special {
23 | color: #666666;
24 | }
25 |
26 | span.py-operator {
27 | color: #666666;
28 | }
29 |
30 | span.py-error {
31 | background-color: #660000;
32 | color: #FFFFFF;
33 | }
34 |
35 | span.py-keyword {
36 | color: #770088;
37 | font-weight: bold;
38 | }
39 |
40 | span.py-literal {
41 | color: #228811;
42 | }
43 |
44 | span.py-identifier, span.py-func {
45 | color: black;
46 | }
47 |
48 | span.py-type, span.py-decorator {
49 | color: #0000FF;
50 | }
51 |
52 | span.py-comment {
53 | color: #AA7700;
54 | }
55 |
56 | span.py-string, span.py-bytes, span.py-raw, span.py-unicode {
57 | color: #AA2222;
58 | }
59 |
--------------------------------------------------------------------------------
/assets/codemirror/contrib/scheme/css/schemecolors.css:
--------------------------------------------------------------------------------
1 | html {
2 | cursor: text;
3 | width: 100%;
4 | height: 100%;
5 | background-color: white;
6 | }
7 |
8 | .editbox {
9 | width: 100%;
10 | height: 100%;
11 | margin: 0pt;
12 | padding: 0;
13 | font-family: monospace;
14 | font-size: 10pt;
15 | color: black;
16 | }
17 |
18 |
19 |
20 | pre.code, .editbox {
21 | color: #666666;
22 | }
23 |
24 | .editbox p {
25 | margin: 0;
26 | }
27 |
28 | span.scheme-string {color: green;}
29 | span.scheme-number {color: blue;}
30 | span.scheme-boolean {color: darkred;}
31 | span.scheme-character {color: orange;}
32 | span.scheme-symbol {color: steelblue;}
33 | span.scheme-punctuation {color: black;}
34 | span.scheme-lparen {color: black;}
35 | span.scheme-rparen {color: black;}
36 | span.scheme-comment { color: orange; }
37 |
38 | span.good-matching-paren {
39 | font-weight: bold;
40 | color: #3399FF;
41 | }
42 | span.bad-matching-paren {
43 | font-weight: bold;
44 | color: red;
45 | }
46 |
--------------------------------------------------------------------------------
/assets/codemirror/contrib/ometa/LICENSE:
--------------------------------------------------------------------------------
1 | Copyright (c) 2007-2009 Marijn Haverbeke
2 |
3 | This software is provided 'as-is', without any express or implied
4 | warranty. In no event will the authors be held liable for any
5 | damages arising from the use of this software.
6 |
7 | Permission is granted to anyone to use this software for any
8 | purpose, including commercial applications, and to alter it and
9 | redistribute it freely, subject to the following restrictions:
10 |
11 | 1. The origin of this software must not be misrepresented; you must
12 | not claim that you wrote the original software. If you use this
13 | software in a product, an acknowledgment in the product
14 | documentation would be appreciated but is not required.
15 |
16 | 2. Altered source versions must be plainly marked as such, and must
17 | not be misrepresented as being the original software.
18 |
19 | 3. This notice may not be removed or altered from any source
20 | distribution.
21 |
22 | Marijn Haverbeke
23 | marijnh at gmail
24 |
--------------------------------------------------------------------------------
/demos/Effects/demo.js:
--------------------------------------------------------------------------------
1 |
2 | window.addEvent('domready', function() {
3 |
4 | $$('.simple-fx LI').addEvent('click', function(){
5 |
6 | var property = $(this).get('data-property');
7 | var to = $(this).get('data-value');
8 |
9 | $('element').tween(property, to);
10 |
11 | });
12 |
13 |
14 | $('morph-1').addEvent('click', function(){
15 | $('element').morph({
16 | 'background-color': '#F9F9F9',
17 | 'color': '#78BA91',
18 | 'width': '200px'
19 | });
20 | });
21 |
22 | $('morph-2').addEvent('click', function(){
23 | $('element').morph({
24 | 'background-color': '#E79D35',
25 | 'border-width': '1px',
26 | 'border-style': 'solid',
27 | 'border-color': '#000000',
28 | 'color': '#fff',
29 | 'height': '45px',
30 | 'opacity': '0.6',
31 | 'width': '100px'
32 | });
33 | });
34 |
35 | $('morph-3').addEvent('click', function(){
36 | $('element').morph('.myClass')
37 | });
38 |
39 |
40 | $('reset').addEvent('click', function(){
41 | $('element').erase('style');
42 | });
43 |
44 | });
45 |
--------------------------------------------------------------------------------
/demos/Drag.Cart/demo.js:
--------------------------------------------------------------------------------
1 |
2 | window.addEvent('domready', function(){
3 |
4 | $$('.item').addEvent('mousedown', function(event){
5 | event.stop();
6 |
7 | // `this` refers to the element with the .item class
8 | var shirt = this;
9 |
10 | var clone = shirt.clone().setStyles(shirt.getCoordinates()).setStyles({
11 | opacity: 0.7,
12 | position: 'absolute'
13 | }).inject(document.body);
14 |
15 | var drag = new Drag.Move(clone, {
16 |
17 | droppables: $('cart'),
18 |
19 | onDrop: function(dragging, cart){
20 |
21 | dragging.destroy();
22 |
23 | if (cart != null){
24 | shirt.clone().inject(cart);
25 | cart.highlight('#7389AE', '#FFF');
26 | }
27 | },
28 | onEnter: function(dragging, cart){
29 | cart.tween('background-color', '#98B5C1');
30 | },
31 | onLeave: function(dragging, cart){
32 | cart.tween('background-color', '#FFF');
33 | },
34 | onCancel: function(dragging){
35 | dragging.destroy();
36 | }
37 | });
38 | drag.start(event);
39 | });
40 |
41 | });
42 |
--------------------------------------------------------------------------------
/demos/Enhanced-Form/demo.html:
--------------------------------------------------------------------------------
1 |
2 |
27 |
--------------------------------------------------------------------------------
/demos/Drag.Cart/demo.css:
--------------------------------------------------------------------------------
1 | #items {
2 | float: left;
3 | border: 1px solid #F9F9F9;
4 | width: 525px;
5 | }
6 |
7 | .item {
8 | background-color: #FFF;
9 | background-position: left top;
10 | background-repeat: no-repeat;
11 | border: 1px solid #EEE;
12 | border-bottom: 2px solid #DDD;
13 | border-right: 2px solid #DDD;
14 | cursor: move;
15 | float: left;
16 | height: 175px;
17 | margin: 10px;
18 | position: relative;
19 | width: 150px;
20 | }
21 | .item span {
22 | bottom: 0;
23 | font-size: 8px;
24 | font-weight: bold;
25 | left: 0;
26 | position: absolute;
27 | text-align: center;
28 | width: 100%;
29 | }
30 |
31 | #cart {
32 | background-color: #FFF;
33 | border: 1px solid #F9F9F9;
34 | float: right;
35 | padding-bottom: 50px;
36 | width: 195px;
37 | }
38 | #cart .info {
39 | color: #444;
40 | font-size: 9px;
41 | font-weight: bold;
42 | text-align: center;
43 | }
44 | #cart .item {
45 | background-position: 50% -22px;
46 | border-width: 1px;
47 | cursor: default;
48 | height: 85px;
49 | margin: 5px;
50 | width: 85px;
51 | }
--------------------------------------------------------------------------------
/demos/Periodical/demo.js:
--------------------------------------------------------------------------------
1 |
2 | window.addEvent('domready', function(){
3 |
4 | var effect = new Fx.Tween('box', {duration: 800}),
5 | periodical;
6 |
7 | // Create the function wich will run the effect
8 | var fx = function() {
9 | effect.start('background-color', '#6B7B95').chain(function(){
10 | effect.start('background-color', '#E79D35');
11 | });
12 | // return this function, so you could do fx() which returns fx,
13 | //or fx()()() which still returns fx and runs the function 3 times
14 | return fx;
15 | };
16 |
17 | $('start').addEvent('click', function(event){
18 | event.stop();
19 | // We call the fx function once directly, which returns the fx function again, and set the periodical to 1.7 seconds
20 | // We store the reference to the peridical in the peridical, so we can stop it later
21 | periodical = fx().periodical(1700);
22 | });
23 |
24 | $('stop').addEvent('click', function(event){
25 | event.stop();
26 | // With the JavaScipt function clearInterval we can stop the interval
27 | clearInterval(periodical);
28 | });
29 |
30 | });
31 |
--------------------------------------------------------------------------------
/demos/Request.HTML/demo.js:
--------------------------------------------------------------------------------
1 |
2 |
3 | window.addEvent('domready', function(){
4 |
5 | $('makeRequest').addEvent('click', function(event){
6 | event.stop();
7 |
8 | new Request.HTML({
9 |
10 | url: '/echo/html/',
11 |
12 | onRequest: function(){
13 | $('result').set('text', 'loading...');
14 | },
15 |
16 | onComplete: function(response){
17 | $('result').empty().adopt(response);
18 | },
19 |
20 | data: {
21 | // This is some content that the server will return
22 | // we pass this only for our demo runner and jsfiddle
23 | html: '
The Request Was Successful
' +
24 | '
Here is some HTML content. It\'s pretty neat, isn\'t it?
' +
25 | '
It does not have to be a complete page, since the <head> section is already present in the parent page.
' +
26 | '
If we had things inside this HTML that needed some MooTools love (the sort of things that go inside the domready event), we would have to call our scripts\' attention to this code manually.
'
27 | }
28 |
29 | }).send();
30 |
31 | });
32 |
33 | });
34 |
--------------------------------------------------------------------------------
/demos/Request/demo.js:
--------------------------------------------------------------------------------
1 |
2 | window.addEvent('domready', function(){
3 |
4 | var result = $('result');
5 |
6 | //We can use one Request object many times.
7 | var req = new Request({
8 |
9 | url: '/echo/html/',
10 |
11 | onRequest: function(){
12 | result.set('text', 'Loading...');
13 | },
14 |
15 | onSuccess: function(txt){
16 | result.set('text', txt);
17 | },
18 |
19 | // Our request will most likely succeed, but just in case, we'll add an
20 | // onFailure method which will let the user know what happened.
21 | onFailure: function(){
22 | result.set('text', 'The request failed.');
23 | }
24 |
25 | });
26 |
27 | $('makeRequest').addEvent('click', function(event){
28 | event.stop();
29 | req.send({data: { // our demo runner and jsfiddle will return this as return html
30 | html: 'The request was successful!'
31 | }});
32 | });
33 |
34 | $('failedRequest').addEvent('click', function(event){
35 | event.stop();
36 | //We can pass new options for our Request object to the send method.
37 | req.send({url: 'Request/not_here.txt'});
38 | });
39 |
40 | });
41 |
--------------------------------------------------------------------------------
/demos/Fx.Morph/demo.js:
--------------------------------------------------------------------------------
1 |
2 | window.addEvent('domready', function(){
3 |
4 | // First list, using CSS styles in the JavaScript
5 | var list = $$('#idList LI');
6 |
7 | list.set('morph', {
8 | duration: 200
9 | });
10 |
11 | list.addEvents({
12 |
13 | mouseenter: function(){
14 | // this refers to the element in an event
15 | this.morph({
16 | 'background-color': '#666',
17 | 'color': '#FF8',
18 | 'margin-left': 5
19 | });
20 | },
21 |
22 | mouseleave: function(){
23 | // this refers to the element in an event
24 | this.morph({
25 | 'background-color': '#333',
26 | 'color': '#888',
27 | 'margin-left': 0
28 | });
29 | }
30 |
31 | });
32 |
33 | // Morphing the list with CSS selectors
34 | $$('#idList2 LI').each(function(el){
35 | el.set('morph', {
36 | duration: 200
37 | }).addEvents({
38 | // Using Function:pass, which is a shorter alternative for
39 | // function(){
40 | // el.morph('.hover');
41 | // }
42 | mouseenter: el.morph.pass('.hover', el),
43 | mouseleave: el.morph.pass('.default', el)
44 | });
45 | });
46 |
47 | });
48 |
--------------------------------------------------------------------------------
/demos/Transitions/demo.html:
--------------------------------------------------------------------------------
1 |
2 | :
3 |
16 |
21 | :
22 |
23 |
24 |
25 |
26 |
27 |
28 |
--------------------------------------------------------------------------------
/LICENCE:
--------------------------------------------------------------------------------
1 | Copyright (C) 2010-2011 by The MooTools Dev Team (http://mootools.net/developers)
2 |
3 | Permission is hereby granted, free of charge, to any person obtaining a copy
4 | of this software and associated documentation files (the "Software"), to deal
5 | in the Software without restriction, including without limitation the rights
6 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
7 | copies of the Software, and to permit persons to whom the Software is
8 | furnished to do so, subject to the following conditions:
9 |
10 | The above copyright notice and this permission notice shall be included in
11 | all copies or substantial portions of the Software.
12 |
13 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
14 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
15 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
16 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
17 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
18 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
19 | THE SOFTWARE.
--------------------------------------------------------------------------------
/assets/codemirror/sparqltest.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | CodeMirror: Sparql demonstration
5 |
6 |
7 |
8 |
9 |
Demonstration of CodeMirror's Sparql
10 | highlighter.
11 |
12 |
13 |
29 |
30 |
31 |
39 |
40 |
41 |
42 |
--------------------------------------------------------------------------------
/demos/Element.Event.Pseudos/demo.js:
--------------------------------------------------------------------------------
1 |
2 | window.addEvent('domready', function() {
3 |
4 | // `:once` psuedo event provided by mootools-more
5 | $('clickOnce').addEvent('click:once', function(event){
6 | event.stop();
7 |
8 | this.set('tween', {
9 | transition: 'bounce:out',
10 | duration: 'long'
11 | }).tween('margin-left', 300);
12 | });
13 |
14 | // we can define our own pseudo events as well, for example to check for the alt key
15 | DOMEvent.definePseudo('alt', function(split, fn, args){
16 | // args[0] is the Event instance
17 | if(args[0].alt) fn.apply(this, args);
18 | });
19 |
20 | // apply the psuedo event to some elements
21 | $$('.item').addEvent('click:alt', function(){
22 | this.toggleClass('active');
23 | });
24 |
25 | // use multiple pseudos
26 | $('multiplePseudoText').addEvent('keydown:relay(textarea):keys(enter):once', function(event, el){
27 | el.set('value', 'MooTools!!').highlight();
28 | });
29 |
30 | // pause pseudo event, you can define the pause, otherwise it will use the default (250)
31 | var spinner = $('spinner').setStyle('opacity', 0).set('tween', {
32 | link: 'chain'
33 | });
34 | $('pauseEvent').addEvent('keydown:pause(200)', function(){
35 | spinner.get('tween').cancel();
36 | spinner.fade(1).pauseFx(400).fade(0);
37 | });
38 |
39 | });
40 |
--------------------------------------------------------------------------------
/demos/Element.Event.Pseudos/demo.html:
--------------------------------------------------------------------------------
1 |
Hold the Alt key and click a block to toggle the .active class.
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
Multiple Pseudos
18 |
19 | This demo uses the keydown:relay(textarea):keys(enter):once event:
20 |
21 |
22 |
23 |
24 |
25 |
:pause Pseudo
26 |
27 |
28 | This Pseudo Event prevents the event function from firing immediately after
29 | every keystroke. :pause instead waits for a pause in keystrokes of
30 | a optional amount of time (in milliseconds) to pass before firing. This is for
31 | example very useful when you want to validate the field when the user is
32 | ready typing, or if you do some Requests in an efficient way.
33 |
34 |
35 |
36 |
37 |
--------------------------------------------------------------------------------
/demos/MouseEnter/demo.js:
--------------------------------------------------------------------------------
1 |
2 | window.addEvent('domready', function(){
3 |
4 | //First Example
5 | var el = $('myElement'),
6 | color = el.getStyle('backgroundColor');
7 |
8 | // We are setting the opacity of the element to 0.5 and adding two events
9 | $('myElement').set('opacity', 0.5).addEvents({
10 | mouseenter: function(){
11 | // This morphes the opacity and backgroundColor
12 | this.morph({
13 | 'opacity': 0.6,
14 | 'background-color': '#E79D35'
15 | });
16 | },
17 | mouseleave: function(){
18 | // Morphes back to the original style
19 | this.morph({
20 | opacity: 0.5,
21 | backgroundColor: color
22 | });
23 | }
24 | });
25 |
26 | // Second Example
27 |
28 | // The same as before: adding events
29 | $('myOtherElement').addEvents({
30 | mouseenter: function(){
31 | // Always sets the duration of the tween to 1000 ms and a bouncing transition
32 | // And then tweens the height of the element
33 | this.set('tween', {
34 | duration: 1000,
35 | transition: Fx.Transitions.Bounce.easeOut // This could have been also 'bounce:out'
36 | }).tween('height', '150px');
37 | },
38 | mouseleave: function(){
39 | // Resets the tween and changes the element back to its original size
40 | this.set('tween', {}).tween('height', '20px');
41 | }
42 | });
43 |
44 | });
45 |
--------------------------------------------------------------------------------
/assets/codemirror/csstest.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | CodeMirror: CSS demonstration
5 |
6 |
7 |
8 |
9 |
Demonstration of CodeMirror's CSS
10 | highlighter.
11 |
12 |
13 |
48 |
49 |
50 |
58 |
59 |
60 |
61 |
--------------------------------------------------------------------------------
/demos/Chaining/demo.js:
--------------------------------------------------------------------------------
1 |
2 | window.addEvent('domready', function(){
3 |
4 | var log = $('log');
5 |
6 | var fx = new Fx.Morph('box', {
7 | duration: 1000,
8 | transition: Fx.Transitions.Quart.easeOut
9 | });
10 |
11 | $('start').addEvent('click', function(event){
12 |
13 | event.stop();
14 |
15 | log.set('html', 'starting...');
16 |
17 | fx.start({
18 | 'width': 300,
19 | 'height': 210
20 | }).chain(function(){
21 | log.set('html', 'First effect completed (1/5)');
22 | this.start({
23 | 'opacity': .3
24 | });
25 | }).chain(function(){
26 | log.set('html', 'Second effect completed (2/5). Waiting 5 seconds before starting third.');
27 | this.start.delay(5000, this, {
28 | 'opacity': 1
29 | });
30 | })
31 | .chain(function(){
32 | log.set('html', 'Third effect completed (3/5). Waiting 2 seconds before starting fourth.');
33 | this.start.delay(2000, this, {
34 | 'background-color': '#78BA91'
35 | });
36 | }).chain(function(){
37 | log.set('html', 'Fourth effect completed (4/5). Waiting 1 second before starting fifth.');
38 | this.start.delay(1000, this, {
39 | 'background-color': '#A87AAD',
40 | 'width': 100,
41 | 'height': 70
42 | });
43 | }).chain(function(){
44 | log.set('html', 'Fifth effect completed (5/5).');
45 | });
46 |
47 | });
48 |
49 | });
50 |
--------------------------------------------------------------------------------
/assets/js/demos.js:
--------------------------------------------------------------------------------
1 |
2 | var editors = {
3 |
4 | html: CodeMirror.fromTextArea('html_tab', {
5 | parserfile: ["parsexml.js", "parsecss.js", "tokenizejavascript.js", "parsejavascript.js", "parsehtmlmixed.js"],
6 | stylesheet: ["assets/codemirror/css/xmlcolors.css", "assets/codemirror/css/jscolors.css", "assets/codemirror/css/csscolors.css"],
7 | height: "dynamic",
8 | path: "assets/codemirror/js/",
9 | autoMatchParens: true,
10 | readOnly: true
11 | }),
12 |
13 | js: CodeMirror.fromTextArea('js_tab', {
14 | parserfile: ["tokenizejavascript.js", "parsejavascript.js"],
15 | stylesheet: "assets/codemirror/css/jscolors.css",
16 | height: "dynamic",
17 | path: "assets/codemirror/js/",
18 | autoMatchParens: true,
19 | readOnly: true
20 | }),
21 |
22 | css: CodeMirror.fromTextArea('css_tab', {
23 | parserfile: "parsecss.js",
24 | stylesheet: "assets/codemirror/css/csscolors.css",
25 | height: "dynamic",
26 | path: "assets/codemirror/js/",
27 | autoMatchParens: true,
28 | readOnly: true
29 | })
30 |
31 | };
32 |
33 | var tabs = $$('.tabs LI.tab'),
34 | content = $$('.tabcontent');
35 |
36 | tabs.each(function(tab, index){
37 | tab.addEvent('click', function(){
38 | tabs.removeClass('selected');
39 | content.removeClass('selected');
40 | tabs[index].addClass('selected');
41 | content[index].addClass('selected');
42 | for (var name in editors) if (editors.hasOwnProperty(name)) editors[name].setDynamicHeight();
43 | });
44 | });
45 |
--------------------------------------------------------------------------------
/assets/codemirror/contrib/lua/LICENSE:
--------------------------------------------------------------------------------
1 | Copyright (c) 2009, Franciszek Wawrzak
2 | All rights reserved.
3 |
4 | This software is provided for use in connection with the
5 | CodeMirror suite of modules and utilities, hosted and maintained
6 | at http://codemirror.net/.
7 |
8 | Redistribution and use of this software in source and binary forms,
9 | with or without modification, are permitted provided that the
10 | following conditions are met:
11 |
12 | * Redistributions of source code must retain the above
13 | copyright notice, this list of conditions and the
14 | following disclaimer.
15 |
16 | * Redistributions in binary form must reproduce the above
17 | copyright notice, this list of conditions and the
18 | following disclaimer in the documentation and/or other
19 | materials provided with the distribution.
20 |
21 | THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
22 | "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
23 | LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS
24 | FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE
25 | COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT,
26 | INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING,
27 | BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
28 | LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
29 | CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT
30 | LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN
31 | ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE
32 | POSSIBILITY OF SUCH DAMAGE.
33 |
--------------------------------------------------------------------------------
/assets/codemirror/contrib/python/LICENSE:
--------------------------------------------------------------------------------
1 | Copyright (c) 2009, Timothy Farrell
2 | All rights reserved.
3 |
4 | This software is provided for use in connection with the
5 | CodeMirror suite of modules and utilities, hosted and maintained
6 | at http://codemirror.net/.
7 |
8 | Redistribution and use of this software in source and binary forms,
9 | with or without modification, are permitted provided that the
10 | following conditions are met:
11 |
12 | * Redistributions of source code must retain the above
13 | copyright notice, this list of conditions and the
14 | following disclaimer.
15 |
16 | * Redistributions in binary form must reproduce the above
17 | copyright notice, this list of conditions and the
18 | following disclaimer in the documentation and/or other
19 | materials provided with the distribution.
20 |
21 | THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
22 | "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
23 | LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS
24 | FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE
25 | COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT,
26 | INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING,
27 | BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
28 | LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
29 | CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT
30 | LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN
31 | ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE
32 | POSSIBILITY OF SUCH DAMAGE.
33 |
--------------------------------------------------------------------------------
/assets/codemirror/contrib/sql/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | CodeMirror: SQL demonstration
5 |
6 |
7 |
8 |
9 |
Demonstration of CodeMirror's SQL
10 | highlighter.
This is a simple demonstration of the HTML mixed-mode indentation
10 | module for CodeMirror. Script tags use the JS
11 | parser, style tags use the CSS parser.
This is a simple demonstration of the XML/HTML indentation module
22 | for CodeMirror. The javascript file contains some comments with
24 | more information.
12 | Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
13 |
26 | Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
27 |
58 |
59 |
67 |
68 |
69 |
--------------------------------------------------------------------------------
/assets/codemirror/unittests.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Test Harness for CodeMirror
3 | * JS-unit compatible tests here. The two available assertions are
4 | * assertEquals (strict equality) and assertEquivalent (looser equivalency).
5 | *
6 | * 'editor' is a global object for the CodeMirror editor shared between all
7 | * tests. After manipulating it in each test, try to restore it to
8 | * approximately its original state.
9 | */
10 |
11 | function testSetGet() {
12 | var code = 'It was the best of times.\nIt was the worst of times.';
13 | editor.setCode(code);
14 | assertEquals(code, editor.getCode());
15 | editor.setCode('');
16 | assertEquals('', editor.getCode());
17 | }
18 |
19 | function testSetStylesheet() {
20 | function cssStatus() {
21 | // Returns a list of tuples, for each CSS link return the filename and
22 | // whether it is enabled.
23 | links = editor.win.document.getElementsByTagName('link');
24 | css = [];
25 | for (var x = 0, link; link = links[x]; x++) {
26 | if (link.rel.indexOf("stylesheet") !== -1) {
27 | css.push([link.href.substring(link.href.lastIndexOf('/') + 1),
28 | !link.disabled])
29 | }
30 | }
31 | return css;
32 | }
33 | assertEquivalent([], cssStatus());
34 | editor.setStylesheet('css/jscolors.css');
35 | assertEquivalent([['jscolors.css', true]], cssStatus());
36 | editor.setStylesheet(['css/csscolors.css', 'css/xmlcolors.css']);
37 | assertEquivalent([['jscolors.css', false], ['csscolors.css', true], ['xmlcolors.css', true]], cssStatus());
38 | editor.setStylesheet([]);
39 | assertEquivalent([['jscolors.css', false], ['csscolors.css', false], ['xmlcolors.css', false]], cssStatus());
40 | }
41 |
42 | // Update this list of tests as new ones are added.
43 | var tests = ['testSetGet', 'testSetStylesheet'];
44 |
45 |
--------------------------------------------------------------------------------
/assets/codemirror/contrib/php/LICENSE:
--------------------------------------------------------------------------------
1 | Copyright (c) 2008-2009, Yahoo! Inc.
2 | All rights reserved.
3 |
4 | This software is provided for use in connection with the
5 | CodeMirror suite of modules and utilities, hosted and maintained
6 | at http://codemirror.net/.
7 |
8 | Redistribution and use of this software in source and binary forms,
9 | with or without modification, are permitted provided that the
10 | following conditions are met:
11 |
12 | * Redistributions of source code must retain the above
13 | copyright notice, this list of conditions and the
14 | following disclaimer.
15 |
16 | * Redistributions in binary form must reproduce the above
17 | copyright notice, this list of conditions and the
18 | following disclaimer in the documentation and/or other
19 | materials provided with the distribution.
20 |
21 | * Neither the name of Yahoo! Inc. nor the names of its
22 | contributors may be used to endorse or promote products
23 | derived from this software without specific prior
24 | written permission of Yahoo! Inc.
25 |
26 | THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
27 | "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
28 | LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS
29 | FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE
30 | COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT,
31 | INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING,
32 | BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
33 | LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
34 | CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT
35 | LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN
36 | ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE
37 | POSSIBILITY OF SUCH DAMAGE.
38 |
--------------------------------------------------------------------------------
/demos/Transitions/demo.js:
--------------------------------------------------------------------------------
1 |
2 | window.addEvent('domready', function(){
3 |
4 | // First we create a Fx.Morph instance which we will use to move the red box
5 | var target = $('target');
6 | var fx = new Fx.Morph(target, {
7 | duration: 1000,
8 | link: 'chain'
9 | });
10 |
11 | // The big gray erea
12 | var box = $('box');
13 |
14 | target.setStyles({
15 | top: box.getTop(),
16 | left: box.getLeft()
17 | });
18 |
19 | var selectTransition = $('fxTransition'),
20 | selectEase = $('fxEase'),
21 | durationInput = $('duration'),
22 | result = $('result');
23 |
24 | // Run the event if one of the select boxes has changed
25 | $$(selectEase, selectTransition).addEvent('change', function(){
26 | var transition = selectTransition.get('value');
27 |
28 | // This is where we set the transition option to the selected value
29 | if (transition == 'linear'){
30 | fx.options.transition = Fx.Transitions.linear;
31 | transition = 'Fx.Transitions.linear';
32 | } else {
33 | var ease = selectEase.get('value');
34 | fx.options.transition = Fx.Transitions[transition][ease];
35 | transition = 'Fx.Transitions.' + transition + '.' + ease;
36 | }
37 | result.set('html', transition);
38 |
39 | });
40 |
41 | // Run the above event on once on startup
42 | selectEase.fireEvent('change');
43 |
44 | // Set the duration option if it has changed
45 | durationInput.addEvent('keyup', function(){
46 | fx.options.duration = parseFloat(durationInput.get('value'));
47 | });
48 |
49 | // If you click anywhere on the gray box, the red box should morph to the clicked coordinates
50 | box.addEvent('mousedown', function(event){
51 | event.stop();
52 | fx.start({
53 | // The clicked coordinates are stored in the event.page property
54 | top: [event.page.y - 25],
55 | left: [event.page.x - 25]
56 | });
57 | });
58 |
59 | });
60 |
61 |
--------------------------------------------------------------------------------
/demos/Element.Event/demo.js:
--------------------------------------------------------------------------------
1 |
2 | window.addEvent('domready', function() {
3 | var textarea = $('myTextarea'), log = $('log').setStyle('opacity', 0);
4 |
5 | // We define the highlight morph we're going to
6 | // use when firing an event
7 | var highlight = new Fx.Morph(log, {
8 | duration: 1500,
9 | link: 'cancel',
10 | transition: 'quad:out'
11 | });
12 |
13 | // Here we start adding events to textarea.
14 | // Note that 'focus' and 'keyup' are native events, while 'burn'
15 | // is a custom one we've made
16 | textarea.addEvents({
17 | focus: function() {
18 | // When focusing, if the textarea contains value "Type here", we
19 | // simply clear it.
20 | if (textarea.value.contains('Type here')) textarea.set('value', '');
21 | },
22 |
23 | keyup: function() {
24 | // When user keyups we check if there are any of the magic words.
25 | // If yes, we fire our custom event burn with a different text for each one.
26 | if (textarea.value.contains('hello')) textarea.fireEvent('burn', 'hello world!');
27 | else if (textarea.value.contains('moo')) textarea.fireEvent('burn', 'mootools!');
28 | else if (textarea.value.contains('pizza')) textarea.fireEvent('burn', 'Italy!');
29 | else if (textarea.value.contains('burn')) textarea.fireEvent('burn', 'fireEvent');
30 | // note that in case of 'delayed', we are firing the event 1 second late.
31 | else if (textarea.value.contains('delayed')) textarea.fireEvent('burn', "I'm a bit late!", 1000);
32 | },
33 |
34 | burn: function(text) {
35 | // When the textarea contains one of the magic words
36 | // we reset textarea value and set the log with text
37 | textarea.set('value', '');
38 | log.set('html', text);
39 |
40 | // then we start the highlight morphing
41 | highlight.start({
42 | backgroundColor: ['#fff36f', '#fff'],
43 | opacity: [1, 0]
44 | });
45 | }
46 | });
47 | });
48 |
--------------------------------------------------------------------------------
/assets/codemirror/contrib/csharp/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | CodeMirror: C# demonstration
5 |
6 |
7 |
8 |
9 |
50 |
51 |
59 |
60 |
61 |
62 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | MooTools Demos
2 | ==============
3 |
4 | This is the new MooTools Demo runner and the new MooTools Demos.
5 | The demos can be opened in [jsFiddle](http://www.jsfiddle.net) for editing.
6 |
7 | ## Creating new Demos
8 |
9 | We're always looking for new demos that can be great additions to the docs or give the wow-effect for new users.
10 | With the demos we want to show what MooTools is capable of. The demos is a great way to contribute to MooTools
11 | in a easy way, by adding new demos and improving existing ones.
12 |
13 | You can submit new demos by forking this repository and send us a [pull request](https://github.com/mootools/mootools-demos/pulls).
14 |
15 | The *demos* directory contains all the demos. You can start creating a new demo by copying the directory of an existing
16 | demo. The name of the directory is the same as used in the URL after `?demo=`.
17 |
18 | Each demo contains at least four files:
19 |
20 | - **demo.css** - Contains the CSS for the demo, shows up in the CSS tab
21 | - **demo.details** - This is a YAML file which contains extra info, like a desription and links to the docs
22 | - **demo.html** - Contains the HTML of the demo, shows up in the HTML tab
23 | - **demo.js** - Contains the JavaScript of the demo, shows up in the JS tab
24 |
25 | ### demo.js
26 |
27 | demo.js is probably the most important file of the demo because it contains the MooTools code.
28 |
29 | It is important to wrap the code in a *domready* event. This is important so it works in this demo runner as well as on jsfiddle.
30 |
31 | window.addEvent('domready', function(){
32 | // code here
33 | });
34 |
35 | #### Code guidelines
36 |
37 | We try to use the MooTools code guidelines. Those can be found in the [MooTools Core Wiki](https://github.com/mootools/mootools-core/wiki/Syntax-and-Coding-Style-Conventions)
38 |
39 | ### Used Color Scheme
40 |
41 | In order to give the demos a consistent look, we use this [Color Scheme](http://jsfiddle.net/Z5u5s/3/)
42 |
--------------------------------------------------------------------------------
/assets/codemirror/jstest.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | CodeMirror: JavaScript demonstration
6 |
7 |
8 |
9 |
10 |
This page demonstrates CodeMirror's
11 | JavaScript parser. Note that the ugly buttons at the top are not are
12 | not part of CodeMirror proper -- they demonstrate the way it can be
13 | embedded in a web-application.
14 |
15 |
16 |
41 |
42 |
43 |
54 |
55 |
56 |
57 |
--------------------------------------------------------------------------------
/assets/css/main.css:
--------------------------------------------------------------------------------
1 | HTML, BODY {
2 | margin: 0;
3 | padding: 0;
4 | }
5 |
6 | BODY {
7 | background: #F4F5F5;
8 | font: 0.75em "Helvetica Neue", Helvetica, Arial, sans-serif;
9 | }
10 |
11 | H1,
12 | H2 {
13 | color: #C17878;
14 | font-size: 2em;
15 | line-height: 30px;
16 | }
17 |
18 | H2,
19 | H3 {
20 | color: #78ba91;
21 | font-size: 1.7em;
22 | }
23 |
24 | H3 {
25 | font-size: 1.5em;
26 | }
27 |
28 | P {
29 | line-height: 17px;
30 | }
31 |
32 | A:LINK, A:VISITED {
33 | color: #6B7B95;
34 | }
35 |
36 | A:HOVER, A:ACTIVE {
37 | color: #E79D35;
38 | }
39 |
40 | UL {
41 | list-style: none;
42 | margin: 0;
43 | padding: 0;
44 | }
45 |
46 | #header {
47 | background: #F9F9F9;
48 | border-bottom: 1px solid #DDD;
49 | height: 122px;
50 | }
51 | #header DIV {
52 | margin: 0 auto;
53 | width: 960px;
54 | }
55 | #header .button {
56 | margin: 50px 0 0;
57 | }
58 | #header H1 {
59 | background: url(graphics/mootools.png) no-repeat 0 50%;
60 | height: 46px;
61 | margin: 0 auto;
62 | padding: 38px 0;
63 | text-indent: -9999px;
64 | }
65 |
66 | #wrapper {
67 | background: url(graphics/gradient.png) repeat-x;
68 | }
69 |
70 | #content {
71 | margin: 0 auto;
72 | padding: 0 0 50px;
73 | width: 960px;
74 | }
75 | #content #leftcolumn {
76 | border-right: 1px solid #DDD;
77 | float: left;
78 | font-size: 1.1em;
79 | margin: 25px 24px 0 0;
80 | padding: 0 25px 50px 0;
81 | width: 150px;
82 | }
83 | #content #leftcolumn LI {
84 | padding: 1px 0;
85 | text-align: right;
86 | }
87 | #content #leftcolumn H4 {
88 | text-align: left;
89 | border-bottom: 1px solid #ddd;
90 | font-size: 1.2em;
91 | color: #313334;
92 | line-height: 20px;
93 | }
94 | #content #leftcolumn A {
95 | display: block;
96 | }
97 | #content #rightcolumn {
98 | float: left;
99 | margin: 25px 0 0;
100 | overflow: hidden;
101 | width: 760px;
102 | }
103 |
--------------------------------------------------------------------------------
/assets/codemirror/js/tokenize.js:
--------------------------------------------------------------------------------
1 | // A framework for simple tokenizers. Takes care of newlines and
2 | // white-space, and of getting the text from the source stream into
3 | // the token object. A state is a function of two arguments -- a
4 | // string stream and a setState function. The second can be used to
5 | // change the tokenizer's state, and can be ignored for stateless
6 | // tokenizers. This function should advance the stream over a token
7 | // and return a string or object containing information about the next
8 | // token, or null to pass and have the (new) state be called to finish
9 | // the token. When a string is given, it is wrapped in a {style, type}
10 | // object. In the resulting object, the characters consumed are stored
11 | // under the content property. Any whitespace following them is also
12 | // automatically consumed, and added to the value property. (Thus,
13 | // content is the actual meaningful part of the token, while value
14 | // contains all the text it spans.)
15 |
16 | function tokenizer(source, state) {
17 | // Newlines are always a separate token.
18 | function isWhiteSpace(ch) {
19 | // The messy regexp is because IE's regexp matcher is of the
20 | // opinion that non-breaking spaces are no whitespace.
21 | return ch != "\n" && /^[\s\u00a0]*$/.test(ch);
22 | }
23 |
24 | var tokenizer = {
25 | state: state,
26 |
27 | take: function(type) {
28 | if (typeof(type) == "string")
29 | type = {style: type, type: type};
30 |
31 | type.content = (type.content || "") + source.get();
32 | if (!/\n$/.test(type.content))
33 | source.nextWhile(isWhiteSpace);
34 | type.value = type.content + source.get();
35 | return type;
36 | },
37 |
38 | next: function () {
39 | if (!source.more()) throw StopIteration;
40 |
41 | var type;
42 | if (source.equals("\n")) {
43 | source.next();
44 | return this.take("whitespace");
45 | }
46 |
47 | if (source.applies(isWhiteSpace))
48 | type = "whitespace";
49 | else
50 | while (!type)
51 | type = this.state(source, function(s) {tokenizer.state = s;});
52 |
53 | return this.take(type);
54 | }
55 | };
56 | return tokenizer;
57 | }
58 |
--------------------------------------------------------------------------------
/demos/Fx.Sort/demo.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
16 |
17 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
*you can click on any two elements below to swap their position
Q: Can I use CodeMirror in my such-and-such project?
17 |
18 |
A: Yes. The license is short, simple, and
19 | permissive.
20 |
21 |
Q: You said you fixed this-and-this issue, but I'm
22 | still seeing it.
23 |
24 |
A: One possibility is that I screwed up, but a very real
25 | alternative is that you're looking at a cached version of the
26 | CodeMirror scripts. Because the scripts are loaded into an iframe,
27 | the ctrl-f5 you issued on the outer page doesn't always cause them
28 | to be reloaded (IE, Opera, and Firefox are the worst offenders
29 | here). Clear your cache and re-try.
30 |
31 |
Q: I can't put content containing
32 | </textarea> into CodeMirror!
33 |
34 |
A: [Web-programming 101] The first </textarea>
35 | following a <textarea> tag will close the
36 | textarea. This has nothing to do with CodeMirror. Sit down, and
37 | spend ten minutes thinking about why HTML-escaping was
38 | invented.
39 |
40 |
Q: I have this huge chunk of code that does not
41 | work, can you debug it for me?
42 |
43 |
A: Nope. If you can't be bothered isolate your problem in 20
44 | lines of code or less, I can't be bothered to think about it.
45 |
46 |
Q: How do I submit patches for CodeMirror?
47 |
48 |
A: Preferred way is to create a fork on github, add your
50 | patch, and send me a pull request. Diffs (against the latest
51 | version!) by mail are also cool.
37 |
--------------------------------------------------------------------------------
/demos/MouseEnter/demo.js:
--------------------------------------------------------------------------------
1 |
2 | window.addEvent('domready', function(){
3 |
4 | //First Example
5 | var el = $('myElement'),
6 | color = el.getStyle('backgroundColor');
7 |
8 | // We are setting the opacity of the element to 0.5 and adding two events
9 | $('myElement').set('opacity', 0.5).addEvents({
10 | mouseenter: function(){
11 | // This morphes the opacity and backgroundColor
12 | this.morph({
13 | 'opacity': 0.6,
14 | 'background-color': '#E79D35'
15 | });
16 | },
17 | mouseleave: function(){
18 | // Morphes back to the original style
19 | this.morph({
20 | opacity: 0.5,
21 | backgroundColor: color
22 | });
23 | }
24 | });
25 |
26 | // Second Example
27 |
28 | // The same as before: adding events
29 | $('myOtherElement').addEvents({
30 | mouseenter: function(){
31 | // Always sets the duration of the tween to 1000 ms and a bouncing transition
32 | // And then tweens the height of the element
33 | this.set('tween', {
34 | duration: 1000,
35 | transition: Fx.Transitions.Bounce.easeOut // This could have been also 'bounce:out'
36 | }).tween('height', '150px');
37 | },
38 | mouseleave: function(){
39 | // Resets the tween and changes the element back to its original size
40 | this.set('tween', {}).tween('height', '20px');
41 | }
42 | });
43 |
44 | });
45 |
--------------------------------------------------------------------------------
/assets/codemirror/csstest.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |