├── Source ├── 01. Core │ └── 00. Core.md ├── 02. Class │ └── 00. Class.md ├── 03. Types │ ├── 00. Types.md │ ├── 03. Number.md │ └── 06. Event.md ├── 16. Slick │ └── 00. Slick.md ├── 04. Browser │ └── 00. Browser.md ├── 18. Request │ └── 00. Request.md ├── 19. Utilities │ └── 00. Utilities.md ├── 05. Elements │ ├── 00. Elements.md │ ├── 81. Element Helpers.md │ ├── 45. Element CSS Classes.md │ ├── 41. Styling Elements.md │ ├── 71. Creating Elements.md │ ├── 91. Element Storage.md │ ├── 25. Traversing the DOM.md │ └── 61. Measuring Elements.md ├── 17. MooTools FX │ ├── 01. FX.Tween.md │ └── 00. MooTools FX └── 00. Introduction │ ├── 04. Write your code!.md │ ├── 02. Downloading MooTools.md │ ├── 03. Adding MooTools to your pages.md │ ├── 01. Learning JavaScript.md │ └── 00. Introduction.md ├── assets ├── codemirror │ ├── css │ │ ├── baboon.png │ │ └── docs.css │ ├── mode │ │ ├── diff │ │ │ ├── diff.css │ │ │ └── diff.js │ │ ├── python │ │ │ ├── LICENSE.txt │ │ │ └── index.html │ │ ├── coffeescript │ │ │ └── LICENSE │ │ ├── css │ │ │ └── index.html │ │ ├── sparql │ │ │ └── index.html │ │ ├── rst │ │ │ └── rst.css │ │ ├── r │ │ │ ├── LICENSE │ │ │ └── index.html │ │ ├── ruby │ │ │ └── LICENSE │ │ ├── php │ │ │ └── index.html │ │ ├── smalltalk │ │ │ └── index.html │ │ ├── xml │ │ │ └── index.html │ │ ├── htmlmixed │ │ │ ├── index.html │ │ │ └── htmlmixed.js │ │ ├── plsql │ │ │ └── index.html │ │ ├── lua │ │ │ └── index.html │ │ ├── haskell │ │ │ └── index.html │ │ ├── yaml │ │ │ ├── index.html │ │ │ └── yaml.js │ │ ├── scheme │ │ │ └── index.html │ │ ├── xmlpure │ │ │ └── index.html │ │ ├── javascript │ │ │ └── index.html │ │ ├── velocity │ │ │ └── index.html │ │ └── clike │ │ │ └── index.html │ ├── README.md │ ├── theme │ │ ├── neat.css │ │ ├── elegant.css │ │ ├── default.css │ │ └── night.css │ ├── test │ │ └── index.html │ ├── lib │ │ ├── runmode.js │ │ ├── codemirror.css │ │ └── overlay.js │ ├── LICENSE │ └── demo │ │ ├── resize.html │ │ ├── marker.html │ │ ├── theme.html │ │ ├── changemode.html │ │ ├── mustache.html │ │ ├── runmode.html │ │ ├── preview.html │ │ ├── complete.html │ │ └── activeline.html ├── script │ ├── mootorial.tabs.js │ ├── mootorial.codemirror.js │ ├── mootorial.element.js │ └── mootorial.formatting.js └── css │ └── main.css ├── README.md ├── .htaccess ├── old ├── save │ ├── 04.1-utilities.txt │ ├── 04-element.txt │ ├── 06-request.txt │ ├── 02-browser.txt │ ├── 01.1-class.extras.txt │ ├── 03-native.txt │ ├── 05.2-fupdate.append.txt │ ├── 05.1-fupdate.txt │ ├── 04-element │ │ ├── 03-element.pin.txt │ │ ├── 05-element.shortcuts.txt │ │ └── 00-element.forms.txt │ ├── 03-native │ │ ├── 03-string.extras.txt │ │ ├── 02-hash.extras.txt │ │ └── 01-date.extras.txt │ ├── 01-chain.wait.txt │ ├── 02-request.queue.txt │ ├── 05-overtext.txt │ ├── 05.3-fupdate.prompt.txt │ ├── 03-occlude.txt │ └── 02-fx.reveal.txt └── pages │ ├── mootorial │ ├── 07-request.txt │ ├── 08-plugins │ │ ├── 03-interface.txt │ │ ├── 01-drag.txt │ │ ├── 00-fxplugins.txt │ │ ├── 02-utilityplugins.txt │ │ ├── 03-interface │ │ │ ├── 02-smoothscroll.txt │ │ │ ├── 01-tips.txt │ │ │ ├── 00-sortables.txt │ │ │ ├── 03-slider.txt │ │ │ └── 04-accordion.txt │ │ ├── 02-utilityplugins │ │ │ ├── 02-group.txt │ │ │ ├── 00-hash.cookie.txt │ │ │ └── 03-assets.txt │ │ ├── 00-fxplugins │ │ │ ├── 02-fx.elements.txt │ │ │ ├── 01-fx.scroll.txt │ │ │ └── 00-fx.slide.txt │ │ └── 01-drag │ │ │ ├── 01-drag.move.txt │ │ │ └── 00-drag.txt │ ├── 05-utilities.txt │ ├── 05-utilities │ │ ├── 04-swiff.txt │ │ ├── 02-json.txt │ │ ├── 03-cookie.txt │ │ └── 01-domready.txt │ ├── 06-fx.txt │ ├── 04-element.txt │ ├── 08-plugins.txt │ ├── 03-native.txt │ ├── 01-core │ │ └── 01-browser.txt │ ├── 04-element │ │ ├── 02-element.style.txt │ │ └── 03-element.dimensions.txt │ ├── 07-request │ │ ├── 02-request.json.txt │ │ ├── 01-request.html.txt │ │ └── 00-request.txt │ ├── 03-native │ │ ├── 02-number.txt │ │ └── 05-event.txt │ └── 06-fx │ │ └── 02-fx.morph.txt │ ├── suggested-reading.txt │ └── mootorial.txt ├── Runner ├── url.class.php ├── menuitem.class.php ├── content.class.php └── mootorial.class.php └── index.php /Source/01. Core/00. Core.md: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Source/02. Class/00. Class.md: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Source/03. Types/00. Types.md: -------------------------------------------------------------------------------- 1 | Types 2 | ===== -------------------------------------------------------------------------------- /Source/16. Slick/00. Slick.md: -------------------------------------------------------------------------------- 1 | Slick 2 | ===== -------------------------------------------------------------------------------- /Source/04. Browser/00. Browser.md: -------------------------------------------------------------------------------- 1 | Browser 2 | ======= -------------------------------------------------------------------------------- /Source/18. Request/00. Request.md: -------------------------------------------------------------------------------- 1 | Request 2 | ======= -------------------------------------------------------------------------------- /Source/19. Utilities/00. Utilities.md: -------------------------------------------------------------------------------- 1 | Utilities 2 | ========= -------------------------------------------------------------------------------- /Source/05. Elements/00. Elements.md: -------------------------------------------------------------------------------- 1 | Elements 2 | ======== 3 | 4 | -------------------------------------------------------------------------------- /Source/17. MooTools FX/01. FX.Tween.md: -------------------------------------------------------------------------------- 1 | Another One 2 | ----------- 3 | 4 | Hello 5 | 6 | Is it me you're looking for -------------------------------------------------------------------------------- /assets/codemirror/css/baboon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/subtleGradient/mootools-mootorial/HEAD/assets/codemirror/css/baboon.png -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | The 'Mootorial' 2 2 | ================= 3 | 4 | A currently unofficial, pre-alpha reboot of Aaron Newton's excellent original Mootorial. -------------------------------------------------------------------------------- /.htaccess: -------------------------------------------------------------------------------- 1 | RewriteEngine On 2 | RewriteCond %{REQUEST_FILENAME} !-f 3 | RewriteCond %{REQUEST_FILENAME} !-d 4 | RewriteRule ^(.*)$ index.php/$1 [L] 5 | -------------------------------------------------------------------------------- /old/save/04.1-utilities.txt: -------------------------------------------------------------------------------- 1 | ====== Utilities ====== 2 | Shortcuts and helpers that make managing tasks a little easier. 3 | 4 | {{indexmenu>clientcide-libraries:04.1-utilities}} -------------------------------------------------------------------------------- /assets/codemirror/mode/diff/diff.css: -------------------------------------------------------------------------------- 1 | .cm-s-default span.cm-rangeinfo {color: #a0b;} 2 | .cm-s-default span.cm-minus {color: #a22;} 3 | .cm-s-default span.cm-plus {color: #2b2;} 4 | -------------------------------------------------------------------------------- /old/pages/mootorial/07-request.txt: -------------------------------------------------------------------------------- 1 | ====== Request ====== 2 | 3 | The Request scripts in MooTools help you manage sending and receiving data to and from servers without refreshing the document (commonly known as Ajax). 4 | 5 | {{indexmenu>mootorial:07-request}} -------------------------------------------------------------------------------- /assets/script/mootorial.tabs.js: -------------------------------------------------------------------------------- 1 | $$('h4').addEvent('click', function(){ 2 | this.getAllAdjacentSiblings('h4, textarea, DIV').removeClass('current'); 3 | this.addClass('current'); 4 | this.getNext('DIV').addClass('current'); 5 | }); 6 | $$('h4.current').fireEvent('click'); -------------------------------------------------------------------------------- /assets/codemirror/README.md: -------------------------------------------------------------------------------- 1 | # CodeMirror 2 2 | 3 | CodeMirror 2 is a rewrite of [CodeMirror 4 | 1](http://github.com/marijnh/CodeMirror). The docs live 5 | [here](http://codemirror.net/manual.html), and the project page is 6 | [http://codemirror.net/](http://codemirror.net/). 7 | -------------------------------------------------------------------------------- /old/save/04-element.txt: -------------------------------------------------------------------------------- 1 | ====== Element Extensions ====== 2 | MooTools gives a lot of love to the native Element object, but we've found a few things to add to it. Mostly it's enhancements for positioning elements, dealing with forms and form inputs, as well as a few simple shortcuts. 3 | 4 | {{indexmenu>clientcide-libraries:04-element}} -------------------------------------------------------------------------------- /old/pages/mootorial/08-plugins/03-interface.txt: -------------------------------------------------------------------------------- 1 | ====== Interface Plugins ====== 2 | MooTools includes several classes that automate various UI components. Tips and sortable lists, that sort of thing. Not every web application needs all these things so they're located in the plugins collection. 3 | 4 | {{indexmenu>mootorial:08-plugins:03-interface}} -------------------------------------------------------------------------------- /old/pages/mootorial/08-plugins/01-drag.txt: -------------------------------------------------------------------------------- 1 | ====== Drag ====== 2 | MooTools includes complex and full-featured drag functionality. It's not something that every site needs, so it's in the plugins portion of the library, but it's still very handy if you need to allow your users to drag items around on the page. 3 | 4 | 5 | {{indexmenu>mootorial:08-plugins:01-drag}} -------------------------------------------------------------------------------- /Source/05. Elements/81. Element Helpers.md: -------------------------------------------------------------------------------- 1 | Element Helpers 2 | --------------- 3 | 4 | ===== Element.toQueryString ===== 5 | Returns a query string of all the key/values for the form elements inside the element (doesn't have to be a form but typically is): 6 | 7 | 8 | $(myForm).toQueryString(); //foo=bar&something=else... 9 | 10 | -------------------------------------------------------------------------------- /old/pages/mootorial/05-utilities.txt: -------------------------------------------------------------------------------- 1 | ====== Utilities ====== 2 | MooTools has a group of classes and helpers that are hard to do without that fit somewhere between the classes that do things (like the effects) and the native extentions covered previously. It's hard to get by without these utilities though, so they're included in the core build of MooTools. 3 | 4 | {{indexmenu>mootorial:05-utilities}} -------------------------------------------------------------------------------- /old/pages/mootorial/05-utilities/04-swiff.txt: -------------------------------------------------------------------------------- 1 | ====== Swiff ====== 2 | The //Swiff// class helps you manage flash objects. You can instatiate a flash object and embed it in the page as well as broker instructions to the object. I'm not much of a flash user so I don't have an examples here. [[http://docs.mootools.net/Utilities/Swiff|See the documentation on Swiff for details on how to use it]]. 3 | -------------------------------------------------------------------------------- /assets/codemirror/mode/diff/diff.js: -------------------------------------------------------------------------------- 1 | CodeMirror.defineMode("diff", function() { 2 | return { 3 | token: function(stream) { 4 | var ch = stream.next(); 5 | stream.skipToEnd(); 6 | if (ch == "+") return "plus"; 7 | if (ch == "-") return "minus"; 8 | if (ch == "@") return "rangeinfo"; 9 | } 10 | }; 11 | }); 12 | 13 | CodeMirror.defineMIME("text/x-diff", "diff"); 14 | -------------------------------------------------------------------------------- /old/pages/mootorial/06-fx.txt: -------------------------------------------------------------------------------- 1 | ====== Effects ====== 2 | The //Fx// object contains a family of classes all related to managing transitions. At its heart, //Fx.*// lets you transition the properties of an element or several elements from one state to another across a duration you specify using a transition of your choice. Examples are always better to figure this stuff out, so let's just dive right in. 3 | 4 | {{indexmenu>mootorial:06-fx}} -------------------------------------------------------------------------------- /old/save/06-request.txt: -------------------------------------------------------------------------------- 1 | ====== Request Extensions ====== 2 | The MooTools //Request// classes handle all the Ajax-style requests you could ask for. This is great when you need to send or receive data to/from the same domain as your page, but in certain instances you may need to be able to send cross-domain requests. The only method that really allows for this is script injection, better known as JsonP. 3 | 4 | {{indexmenu>clientcide-libraries:06-request}} -------------------------------------------------------------------------------- /old/pages/mootorial/08-plugins/00-fxplugins.txt: -------------------------------------------------------------------------------- 1 | ====== Fx Plugins ====== 2 | 3 | The MooTools Core has the foundation classes for effects ([[00-fx|Fx and Fx.CSS]], [[01-fx.tween|Fx.Tween]], and [[02-fx.morph|Fx.Morph]]) and using just these you can do a lot of different animations on your site. But the classes in MooTools are designed to be extended and MooTools includes a few extra effects in the plugins. 4 | 5 | 6 | {{indexmenu>mootorial:08-plugins:00-fxplugins}} -------------------------------------------------------------------------------- /old/pages/mootorial/08-plugins/02-utilityplugins.txt: -------------------------------------------------------------------------------- 1 | ====== Utility Plugins ====== 2 | Much like the [[05-utilities:Core Utilities]], the plugin libraries include numerous scripts that help you simplify some tasks. These aren't interface utilities or anything, they're just classes that make it easier to accomplish some tasks that you aren't likely to do often, but, when you do, you'll be glad to have these helpers. 3 | 4 | {{indexmenu>mootorial:08-plugins:02-utilityplugins}} 5 | -------------------------------------------------------------------------------- /assets/codemirror/theme/neat.css: -------------------------------------------------------------------------------- 1 | .cm-s-neat span.cm-comment { color: #a86; } 2 | .cm-s-neat span.cm-keyword { font-weight: bold; color: blue; } 3 | .cm-s-neat span.cm-string { color: #a22; } 4 | .cm-s-neat span.cm-builtin { font-weight: bold; color: #077; } 5 | .cm-s-neat span.cm-special { font-weight: bold; color: #0aa; } 6 | .cm-s-neat span.cm-variable { color: black; } 7 | .cm-s-neat span.cm-number, .cm-s-neat span.cm-atom { color: #3a3; } 8 | .cm-s-neat span.cm-meta {color: #555;} 9 | -------------------------------------------------------------------------------- /assets/script/mootorial.codemirror.js: -------------------------------------------------------------------------------- 1 | $$('textarea').each(function(textarea){ 2 | var mode = ""; 3 | switch (true){ 4 | case textarea.get('class').contains('js'): 5 | mode = "javascript"; 6 | break; 7 | case textarea.get('class').contains('html'): 8 | mode = "htmlmixed"; 9 | break; 10 | case textarea.get('class').contains('css'): 11 | mode = "css"; 12 | break; 13 | } 14 | CodeMirror.fromTextArea(textarea, { 15 | mode: mode, 16 | lineNumbers: true 17 | }); 18 | }); -------------------------------------------------------------------------------- /old/pages/mootorial/04-element.txt: -------------------------------------------------------------------------------- 1 | ======= Element Extensions ======= 2 | Here is [[http://docs.mootools.net/Native/Element|the documentation for Element.js]]. 3 | 4 | The Element object gets a LOT of love in MooTools. Most of the functions in the Element object are pretty self explanatory. //Element.getTag// does what you'd think it would. 5 | 6 | Because Element receives so much attention, it's got its own section in the code and it's broken up into four files: 7 | 8 | {{indexmenu>mootorial:04-element}} -------------------------------------------------------------------------------- /old/save/02-browser.txt: -------------------------------------------------------------------------------- 1 | ====== Browser Extensions ====== 2 | MooTools includes a [[http://www.mootorial.com/wiki/mootorial/01-core/01-browser|Browser Hash]] object that includes information about the client. MooTools also, throughout the library, has code to eliminate browser inconsistencies for you. 3 | 4 | Unfortunately, there are a few still out there, and when we run into one and come up with a solution (or, more likely, fine one on the net somewhere) we add it to our library. 5 | 6 | {{indexmenu>clientcide-libraries:02-browser}} -------------------------------------------------------------------------------- /assets/codemirror/theme/elegant.css: -------------------------------------------------------------------------------- 1 | .cm-s-elegant span.cm-number, .cm-s-elegant span.cm-string, .cm-s-elegant span.cm-atom {color: #762;} 2 | .cm-s-elegant span.cm-comment {color: #262;font-style: italic;} 3 | .cm-s-elegant span.cm-meta {color: #555;font-style: italic;} 4 | .cm-s-elegant span.cm-variable {color: black;} 5 | .cm-s-elegant span.cm-variable-2 {color: #b11;} 6 | .cm-s-elegant span.cm-qualifier {color: #555;} 7 | .cm-s-elegant span.cm-keyword {color: #730;} 8 | .cm-s-elegant span.cm-builtin {color: #30a;} 9 | .cm-s-elegant span.cm-error {background-color: #fdd;} 10 | -------------------------------------------------------------------------------- /assets/script/mootorial.element.js: -------------------------------------------------------------------------------- 1 | Element.implement({ 2 | getAllAdjacentSiblings: function(selector){ 3 | 4 | var matches = []; 5 | var trappingPrevious = true; 6 | var trappingNext = true; 7 | 8 | this.getAllPrevious().each(function(el){ 9 | if (trappingPrevious && el.match(selector)){ 10 | matches.push(el); 11 | } else { 12 | trappingPrevious = false; 13 | } 14 | }); 15 | 16 | this.getAllNext().each(function(el){ 17 | if (trappingNext && el.match(selector)){ 18 | matches.push(el); 19 | } else { 20 | trappingNext = false; 21 | } 22 | }); 23 | 24 | return $$(matches); 25 | } 26 | }); -------------------------------------------------------------------------------- /Source/00. Introduction/04. Write your code!.md: -------------------------------------------------------------------------------- 1 | Write your code! 2 | ---------------- 3 | 4 | That's where this Mootorial can help you. If you read these pages (I recommend reading them in order) you should learn how each function and class in MooTools works. Refer to [[http://docs.mootools.net|the docs]] for reference and don't be afraid to look at the source code of MooTools to see how it works. 5 | 6 | You need to use things like the [[mootorial:05-utilities:01-domready|domready.js]] event to run your code after the html is loaded and use [[02-class]] to create reusable code. You can also read [this tutorial on how to write a MooTools Class](http://foo). 7 | -------------------------------------------------------------------------------- /old/pages/mootorial/08-plugins.txt: -------------------------------------------------------------------------------- 1 | ====== Plugins ====== 2 | MooTools 1.2 comes in two basic components: the MooTools Core and the MooTools Plugins (also sometimes referred to as "MooTools More"). 3 | 4 | The "Core" distribution includes everything covered up to this point in the MooTorial ([[01-core|Core]], [[02-class|Class]], [[03-native|Native]], [[04-element|Element]], [[05-utilities|Utilities]], [[06-fx|Fx]], and [[07-request|Request]]). 5 | 6 | The official plugins are things that the development team view as being useful but not necessarily stuff that you'll need in almost every application like you would the Core scripts. 7 | 8 | {{indexmenu>mootorial:08-plugins}} -------------------------------------------------------------------------------- /old/pages/mootorial/08-plugins/03-interface/02-smoothscroll.txt: -------------------------------------------------------------------------------- 1 | ====== SmoothScroll ====== 2 | Here is the [[http://docs.mootools.net/Plugins/SmoothScroll|documentation for SmoothScroll.js]]. 3 | 4 | Smooth scrolling auto targets all the anchors in a page (href="#section", etc.) to display a smooth scrolling effect upon clicking them. To enable for a page, all you have to do is include the script and call: 5 | 6 | 7 | new SmoothScroll(); 8 | 9 | 10 | You can pass in options (see //[[00-fx|Fx]]//) if you want. This tutorial uses SmoothScroll when you click on the anchor links in the top-right page nav or the "top" links next to headers. -------------------------------------------------------------------------------- /Source/17. MooTools FX/00. MooTools FX: -------------------------------------------------------------------------------- 1 | MooTools FX 2 | =========== 3 | 4 | This is a test 5 | 6 | * foo 1 7 | * foo 2 8 | * foo 3 9 | 10 | 1. foo 1 11 | 2. foo 2 12 | 3. foo 3 13 | 14 | #### Example 15 | 16 |
17 | 18 | 25 | 26 | #### JS 27 | 28 | var foo = ""; 29 | 30 | #### HTML 31 | 32 |
33 | 34 | 35 | 36 | #### CSS 37 | 38 | HTML { 39 | margin: 0; 40 | } 41 | 42 | This is a test 43 | 44 | * foo 1 45 | * foo 2 46 | * foo 3 47 | 48 | 1. foo 1 49 | 2. foo 2 50 | 3. foo 3 -------------------------------------------------------------------------------- /old/pages/mootorial/03-native.txt: -------------------------------------------------------------------------------- 1 | ====== Native Extensions ====== 2 | The Native group of scripts are basic extensions to the default objects in javascript (currently, MooTools has Native code for Array, Element, Event, Function, Hash and String). These files alter the way these elements and every instance of them work. Because it's possible to create arrays or array like objects (like the //arguments// object inside a function) before this code is executed (or otherwise outside this scope), they typically have a means by which to apply these functions to existing objects. Here's a run down of the functions available for these objects. 3 | 4 | {{indexmenu>mootorial:03-native}} 5 | -------------------------------------------------------------------------------- /Runner/url.class.php: -------------------------------------------------------------------------------- 1 | match = $match; 27 | 28 | } 29 | 30 | } -------------------------------------------------------------------------------- /old/save/01.1-class.extras.txt: -------------------------------------------------------------------------------- 1 | ====== Class.Extras ====== 2 | The [[http://www.mootorial.com/wiki/mootorial/02-class|MooTools Class]] has a few plugins in [[http://www.mootorial.com/wiki/mootorial/02-class/01-class.extras|Class.Extras.js]], including [[http://www.mootorial.com/wiki/mootorial/02-class/01-class.extras#the-chain-class|Chain]], [[http://www.mootorial.com/wiki/mootorial/02-class/01-class.extras#the-options-class|Options]], and [[http://www.mootorial.com/wiki/mootorial/02-class/01-class.extras#the-events-class|Events]]. 3 | 4 | I've extended the Chain class a little with [[01-chain.wait|Chain.Wait]], and I've also added a new kind of Class mutator: [[02-class.binds|Class.Binds]]. -------------------------------------------------------------------------------- /Source/00. Introduction/02. Downloading MooTools.md: -------------------------------------------------------------------------------- 1 | Downloading MooTools 2 | -------------------- 3 | 4 | Downloading MooTools is pretty easy. You just go to [[http://www.mootools.net/download|the download page]] and select which portions of the library you want to download. 5 | 6 | I recommend downloading the version that is not compressed and contains the docs for learning and development. This way if you get an error you can view the source and see what's going on. The compressed version is all on a single line and debugging when using it is very frustrating. When you're finished writing your code, download the compressed version, or compress it yourself with [[http://developer.yahoo.com/yui/compressor/]]. 7 | -------------------------------------------------------------------------------- /old/save/03-native.txt: -------------------------------------------------------------------------------- 1 | ====== Native Extensions ====== 2 | MooTools is flush with tons of extensions to the native javascript objects ([[http://www.mootorial.com/wiki/mootorial/03-native/00-array|Array]], [[http://www.mootorial.com/wiki/mootorial/03-native/01-function|Function]], [[http://www.mootorial.com/wiki/mootorial/03-native/02-number|Number]], [[http://www.mootorial.com/wiki/mootorial/03-native/03-string|String]], [[http://www.mootorial.com/wiki/mootorial/03-native/04-hash|Hash]], [[http://www.mootorial.com/wiki/mootorial/03-native/05-event|Event]]). Despite this, we somehow managed to come up with a few more. Some of them are really useful for specific applications, so you may not find yourself with a need for them all. 3 | 4 | {{indexmenu>clientcide-libraries:03-native}} -------------------------------------------------------------------------------- /Runner/menuitem.class.php: -------------------------------------------------------------------------------- 1 | name = trim(str_replace(".md", "", substr($folder, 3))); 11 | $this->url = strtolower(str_replace(" ", "-", $this->name)); 12 | $this->children = $this->getChildren($folder); 13 | $this->checkIfCurrentURL(); 14 | } 15 | 16 | function getChildren($folder){ 17 | $dir = opendir('./Source/' . $folder); 18 | while($file = readdir($dir)){ 19 | if (substr($file, 0, 1) != '.'){ 20 | $children[] = $file; 21 | } 22 | } 23 | closedir($dir); 24 | sort($children); 25 | return $children; 26 | } 27 | 28 | function checkIfCurrentURL(){ 29 | } 30 | } 31 | ?> -------------------------------------------------------------------------------- /old/pages/mootorial/01-core/01-browser.txt: -------------------------------------------------------------------------------- 1 | ==== Browser Detection ==== 2 | //Browser.js// in //Core// includes a browser detection variables added to the //Browser// hash object. For the most part, MooTools smooths over the differences between browsers and you shouldn't find yourself needing to reference these variables very often. However, there are times when you need to know, and MooTools provides. 3 | 4 | There's not a lot to describe here other than these things exist and you can use them in your code. For exampe, let's say you wanted to work around some IE6 bug: 5 | 6 | 7 | ... 8 | if (Browser.Engine.trident4) //...do something for IE6 9 | else if (Browser.Engine.trident) //...do something for all other version of IE 10 | else //...everyone else gets some standard behavior 11 | ... 12 | 13 | 14 | You can find all the //Browser// properties [[http://docs.mootools.net/Core/Browser|in the docs]]. -------------------------------------------------------------------------------- /assets/codemirror/test/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | CodeMirror 2: Test Suite 5 | 6 | 7 | 8 | 9 | 10 | 15 | 16 | 17 |

CodeMirror 2: Test Suite

18 | 19 |

A limited set of programmatic sanity tests for CodeMirror.

20 | 21 | 

22 | 
23 |     
26 | 
27 |     
28 |   
29 | 
30 | 


--------------------------------------------------------------------------------
/assets/codemirror/theme/default.css:
--------------------------------------------------------------------------------
 1 | .cm-s-default span.cm-keyword {color: #708;}
 2 | .cm-s-default span.cm-atom {color: #219;}
 3 | .cm-s-default span.cm-number {color: #164;}
 4 | .cm-s-default span.cm-def {color: #00f;}
 5 | .cm-s-default span.cm-variable {color: black;}
 6 | .cm-s-default span.cm-variable-2 {color: #05a;}
 7 | .cm-s-default span.cm-variable-3 {color: #0a5;}
 8 | .cm-s-default span.cm-property {color: black;}
 9 | .cm-s-default span.cm-operator {color: black;}
10 | .cm-s-default span.cm-comment {color: #a50;}
11 | .cm-s-default span.cm-string {color: #a11;}
12 | .cm-s-default span.cm-string-2 {color: #f50;}
13 | .cm-s-default span.cm-meta {color: #555;}
14 | .cm-s-default span.cm-error {color: #f00;}
15 | .cm-s-default span.cm-qualifier {color: #555;}
16 | .cm-s-default span.cm-builtin {color: #30a;}
17 | .cm-s-default span.cm-bracket {color: #cc7;}
18 | .cm-s-default span.cm-tag {color: #170;}
19 | .cm-s-default span.cm-attribute {color: #00c;}
20 | 


--------------------------------------------------------------------------------
/old/pages/mootorial/08-plugins/02-utilityplugins/02-group.txt:
--------------------------------------------------------------------------------
 1 | ====== Group ======
 2 | The //Group// class is for grouping Class or Element Events. The //Event// added to the //Group// will fire when all of the events of the items of the group are fired. Here are [[http://docs.mootools.net/Plugins/Group|the docs for Group.js]].
 3 | 
 4 | 
 5 | 	xhr1 = new Request.HTML({url: 'data.js', evalScript: true});
 6 | 	xhr2 = new Request.HTML({url: 'abstraction.js', evalScript: true});
 7 | 	xhr3 = new Request.HTML({url: 'template.js', evalScript: true});
 8 | 
 9 | 	var group = new Group(xhr1, xhr2, xhr3);
10 | 	group.addEvent('onComplete', function(){
11 | 		alert('All Scripts loaded');
12 | 	});
13 | 
14 | 	xhr1.send();
15 | 	xhr2.send();
16 | 	xhr3.send();
17 | 	//when all 3 requests complete, the alert will occur
18 | 
19 | 
20 | Using //Group// you can define custom events for your applications. When the user interacts with the page in a specific order, you can fire an event to signify this occurence.


--------------------------------------------------------------------------------
/old/save/05.2-fupdate.append.txt:
--------------------------------------------------------------------------------
 1 | ====== Fupdate.Append ======
 2 | 
 3 | [[http://www.clientcide.com/docs/Forms/Fupdate.Append|docs]]
 4 | 
 5 | This class picks up where [[05.1-fupdate|Fupdate]] leaves off and does pretty much the same thing. The only difference is that the result, instead of overwriting it, is injected into (or before, after, top, etc) it.
 6 | 
 7 | 
 8 | 

 9 | 	
10 | 	
11 | 

12 | 
15 | 
20 | 
21 | 
22 | 
23 | new Fupdate.Append(document.id('fupdateForm'), document.id('fupdateReply'), {
24 | 	inject: 'top'
25 | });
26 | 
27 | 
28 | ...and that's pretty much all you gotta do.
29 | 
30 | 


--------------------------------------------------------------------------------
/old/pages/suggested-reading.txt:
--------------------------------------------------------------------------------
1 | ====== Suggested Reading ======
2 |   * Obviously, I recommend reading my book - **__MooTools Essentials__** ([[http://www.amazon.com/gp/product/1430209836?ie=UTF8&tag=clientside-20&link_code=as3&camp=211189&creative=373489&creativeASIN=1430209836|paperback]] or [[http://www.apress.com/book/view/1430209836|PDF]]). This is similar to the [[http://www.mootorial.com|MooTorial]] but much, much more complete.
3 |    * I highly, highly, highly recommend reading **__[[http://www.amazon.com/JavaScript-Good-Parts-Douglas-Crockford/dp/0596517742?tag=clientside-20|JavaScript: The Good Parts]]__** by **Douglas Crockford** (it came out about a month ago). There are some really awesome aspects to the language that make up for its deficiencies. Crockford’s book basically outlines the part of the language that are worth keeping.
4 |   * I also recommend **[[http://www.snook.ca|Jonathan Snook]]**'s **__[[http://www.amazon.com/Accelerated-Scripting-Ajax-APIs-Libraries/dp/1590597648?tag=clientside-20|Accelerated DOM Scripting with Ajax, APIs, and Libraries]]__**.


--------------------------------------------------------------------------------
/assets/script/mootorial.formatting.js:
--------------------------------------------------------------------------------
 1 | /*
 2 | $$('h2').each(function(heading){
 3 | 	var content = new Element('div.content');
 4 | 	var trapping = true;
 5 | 	heading.getAllNext().each(function(sibling){
 6 | 		if (sibling.get('tag').test(/h2|script/)){
 7 | 			trapping = false;
 8 | 		} else {
 9 | 			sibling.inject(content);
10 | 		}
11 | 	});
12 | 	content.inject(heading, 'after');
13 | });
14 | */
15 | $$('h4').each(function(heading){
16 | 	var next = heading.getNext();
17 | 	if (heading.get('text') == 'Example'){
18 | 		var example = new Element('div.example');
19 | 		example.set('html', next.get('text'));
20 | 		example.replaces(next);
21 | 		heading.addClass('example');
22 | 	} else if (next.get('tag') == 'pre'){
23 | 		var classname = heading.get('text').toLowerCase();
24 | 		var textarea = new Element('textarea.' + classname);
25 | 		textarea.set('value', next.get('text'));
26 | 		textarea.replaces(next);
27 | 		heading.addClass(classname);
28 | 		if (classname == 'js'){
29 | 			heading.addClass('current');
30 | 			textarea.addClass('current');
31 | 		}
32 | 	}
33 | });


--------------------------------------------------------------------------------
/assets/codemirror/lib/runmode.js:
--------------------------------------------------------------------------------
 1 | CodeMirror.runMode = function(string, modespec, callback) {
 2 |   var mode = CodeMirror.getMode({indentUnit: 2}, modespec);
 3 |   var isNode = callback.nodeType == 1;
 4 |   if (isNode) {
 5 |     var node = callback, accum = [];
 6 |     callback = function(string, style) {
 7 |       if (string == "\n")
 8 |         accum.push("
");
 9 |       else if (style)
10 |         accum.push("" + CodeMirror.htmlEscape(string) + "");
11 |       else
12 |         accum.push(CodeMirror.htmlEscape(string));
13 |     }
14 |   }
15 |   var lines = CodeMirror.splitLines(string), state = CodeMirror.startState(mode);
16 |   for (var i = 0, e = lines.length; i < e; ++i) {
17 |     if (i) callback("\n");
18 |     var stream = new CodeMirror.StringStream(lines[i]);
19 |     while (!stream.eol()) {
20 |       var style = mode.token(stream, state);
21 |       callback(stream.current(), style);
22 |       stream.start = stream.pos;
23 |     }
24 |   }
25 |   if (isNode)
26 |     node.innerHTML = accum.join("");
27 | };
28 | 


--------------------------------------------------------------------------------
/assets/css/main.css:
--------------------------------------------------------------------------------
 1 | HTML, BODY {
 2 | 	height: 100%;
 3 | 	margin: 0;
 4 | 	padding: 0;
 5 | }
 6 | BODY {
 7 | }
 8 | 
 9 | H1, H2, P {
10 | 	clear: both;
11 | }
12 | 
13 | BLOCKQUOTE {
14 | 	background: #CCC;
15 | 	padding: 10px;
16 | }
17 | 
18 | .container {
19 | 	margin: 0 auto;
20 | 	width: 960px;
21 | }
22 | NAV[role=menu] {
23 | 	float: left;
24 | 	width: 300px;
25 | }
26 | .main {
27 | 	float: right;
28 | 	width: 650px;
29 | }
30 | 
31 | H4 {
32 |     background: #CCC;
33 |     color: #666;
34 |     cursor: pointer;
35 |     float: left;
36 |     font-weight: normal;
37 |     height: 25px;
38 |     line-height: 25px;
39 |     margin: 0 5px 0 0;
40 |     padding: 0 5px;
41 | }
42 | H4.current {
43 |     background: #FFF;
44 |     color: #222;
45 |     line-height: 25px;
46 | }
47 | DIV.example, DIV.CodeMirror, TEXTAREA {
48 |     background: #FFF;
49 |     float: right;
50 |     left: -9999px;
51 |     position: absolute;
52 |     margin: 25px 0 20px -300px;
53 |     width: 650px;
54 | }
55 | DIV.example.current, DIV.CodeMirror.current, TEXTAREA.current {
56 |     left: auto;
57 |     position: relative;
58 | }


--------------------------------------------------------------------------------
/Source/00. Introduction/03. Adding MooTools to your pages.md:
--------------------------------------------------------------------------------
 1 | Adding MooTools to your pages
 2 | -----------------------------
 3 | 
 4 | Just create a 
14 |     
15 |     
18 |   
19 |   ....
20 | 
21 | 
22 | 
23 | I prefer to have my code in an external file, but where you put it is up to you.


--------------------------------------------------------------------------------
/Source/05. Elements/45. Element CSS Classes.md:
--------------------------------------------------------------------------------
 1 | Element CSS Classes
 2 | -------------------
 3 | 
 4 | ===== Element.addClass, .removeClass, .hasClass, .toggleClass =====
 5 | These do pretty much what they look like they'd do.
 6 | 
 7 | 
This paragraph has id = cssClassesExample for the examples below.

 8 | 
 9 | /*does the paragraph above have the className blue?*/
10 | $('cssClassesExample').hasClass('blue');
11 | 
12 | 
13 | /*let's add it*/
14 | $('cssClassesExample').addClass('blue');
15 | 
16 | 
17 | /*now let's remove it*/
18 | $('cssClassesExample').removeClass('blue');
19 | 
20 | 
21 | /*now let's toggle it on and off*/
22 | $('cssClassesExample').toggleClass('blue');
23 | 
24 | 
25 | ===== Element.match =====
26 | Returns true of the passed in selector would include the element.
27 | 
28 | 
29 | $(el).match('div'); //returns true if el is a div
30 | //if you have Selectors.js included
31 | $(el).match('div#someId p.someClass'); //true of el matches
32 | 
33 | 


--------------------------------------------------------------------------------
/Runner/content.class.php:
--------------------------------------------------------------------------------
 1 | folder = $folder;
12 | 		$this->html = $this->getHTML();
13 | 		$this->getChildren();
14 | 	}
15 | 	
16 | 	function getFiles(){
17 | 		$dir = opendir($this->folder);
18 | 		while($file = readdir($dir)){
19 | 			if (substr($file, 0, 1) != '.'){
20 | 				$files[] = $file;
21 | 			}
22 | 		}
23 | 		closedir($dir);
24 | 		sort($files);
25 | 		return $files;
26 | 	}
27 | 	
28 | 	function getChildren(){
29 | 		foreach($this->getFiles() as $file){
30 | 			$this->children[] = $file;
31 | 		}
32 | 	}
33 | 	
34 | 	function getHTML(){
35 | 		$html = '';
36 | 		foreach($this->getFiles() as $file){
37 | 			$html .= Markdown(file_get_contents($this->folder . '/' . $file));
38 | 		}
39 | 		
40 | 		function replacer($matches){
41 | 			$id = strtolower(str_replace(" ", "-", $matches[1]));
42 | 			return '
' . $matches[1] . '
';
43 | 		}
44 | 		$html = preg_replace_callback('{
([\s\S]*?)<\/h2>}', "replacer", $html);
45 | 		
46 | 		return $html; 
47 | 	}
48 | 
49 | }
50 | ?>


--------------------------------------------------------------------------------
/old/pages/mootorial/04-element/02-element.style.txt:
--------------------------------------------------------------------------------
 1 | ====== Element Styles =======
 2 | Pretty straight forward:
 3 | 
 4 | 
This paragraph has id = getStyleExample for the examples below.

 5 | 
 6 | $('getStyleExample').getStyle('width'); //returns something like "528px"
 7 | 
 8 | 
 9 | $('getStyleExample').getStyle('width').toInt(); //returns 528 (an integer)
10 | 
11 | 
12 | $('getStyleExample').getStyles('width', 'height'); 
13 | //returns something like {width:"528px", height:"89px"}
14 | 
15 | 
16 | 
17 | 
setStyle lets you set a single css property:

18 | 
19 | $('setStyleExample').setStyle('border', '1px solid black');
20 | $('setStyleExample').setStyle('width', 300);
21 | 
22 | 
23 | 
setStyles has a slightly different syntax, and lets you set as many as you like:

24 | 
25 | $('setStylesExample').setStyles({
26 | 	border:'1px solid yellow',
27 | 	backgroundColor:'#666',
28 | 	color:'#fff'
29 | });
30 | 
31 | 


--------------------------------------------------------------------------------
/old/save/05.1-fupdate.txt:
--------------------------------------------------------------------------------
 1 | ====== Fupdate ======
 2 | 
 3 | [[http://www.clientcide.com/docs/Forms/Fupdate|docs]]
 4 | 
 5 | This class just automates the basic pattern of having a form that, when submitted, should send its data to the server via Ajax and take whatever comes back and inject it into a DOM element.
 6 | 
 7 | 
 8 | 

 9 | 	
10 | 	
11 | 

12 | 
15 | 
20 | 
21 | 
22 | 
23 | new Fupdate(document.id('fupdateForm'), document.id('fupdateReply'));
24 | 
25 | 
26 | That's pretty much all you gotta do.
27 | 
28 | ===== About the name =====
29 | 
30 | I know - "Fupdate" (Form Update abbr.) is kinda lame, but I really couldn't come up with a better name... BTW, it's pronounced as one word (not "F-Update"; rather "fupdate"). I'm open to suggestions!


--------------------------------------------------------------------------------
/assets/codemirror/LICENSE:
--------------------------------------------------------------------------------
 1 | Copyright (C) 2011 by Marijn Haverbeke 
 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.
20 | 


--------------------------------------------------------------------------------
/assets/codemirror/theme/night.css:
--------------------------------------------------------------------------------
 1 | /* Loosely based on the Midnight Textmate theme */
 2 | 
 3 | .cm-s-night { background: #0a001f; color: #f8f8f8; }
 4 | .cm-s-night span.CodeMirror-selected { background: #a8f !important; }
 5 | .cm-s-night .CodeMirror-gutter { background: #0a001f; border-right: 1px solid #aaa; }
 6 | .cm-s-night .CodeMirror-gutter-text { color: #f8f8f8; }
 7 | .cm-s-night .CodeMirror-cursor { border-left: 1px solid white !important; }
 8 | 
 9 | .cm-s-night span.cm-comment { color: #6900a1; }
10 | .cm-s-night span.cm-atom { color: #845dc4; }
11 | .cm-s-night span.cm-number, .cm-s-night span.cm-attribute { color: #ffd500; }
12 | .cm-s-night span.cm-keyword { color: #599eff; }
13 | .cm-s-night span.cm-string { color: #37f14a; }
14 | .cm-s-night span.cm-meta { color: #7678e2; }
15 | .cm-s-night span.cm-variable-2, .cm-s-night span.cm-tag { color: #99b2ff; }
16 | .cm-s-night span.cm-variable-3, .cm-s-night span.cm-def { color: white; }
17 | .cm-s-night span.cm-error { color: #9d1e15; }
18 | .cm-s-night span.cm-bracket { color: #8da6ce; }
19 | .cm-s-night span.cm-comment { color: #6900a1; }
20 | .cm-s-night span.cm-builtin, .cm-s-night span.cm-special { color: #ff9e59; }
21 | 


--------------------------------------------------------------------------------
/old/pages/mootorial/08-plugins/00-fxplugins/02-fx.elements.txt:
--------------------------------------------------------------------------------
 1 | ====== Fx.Elements ======
 2 | Here is the [[http://docs.mootools.net/Plugins/Fx/Fx.Elements|documentation for Fx.Elements.js]].
 3 | 
 4 | //Fx.Elements// allows you to apply any number of styles transitions to a selection of elements. Includes colors (must be in hex format). This Class is often implemented into others. For example, the //Accordion// effect applies numerous transition changes to numerous elements at once. Here's a simple example:
 5 | 
 6 | Here are three divs for this example:
 7 | 

 8 | 

 9 | 

10 | 
11 | 
12 | var myElementsEffects = new Fx.Elements($$('div.exampleBar'));
13 | myElementsEffects.start({
14 | 	'0': { /*	let's change the first element's opacity and width	*/
15 | 		'opacity': [0,1],
16 | 		'width': [100,200]
17 | 	},
18 | 	'1': { /*	and the second one's opacity	*/
19 | 		'opacity': [0.2, 0.5]
20 | 	},
21 | 	'2': { /*	and the third's height	*/
22 | 	'height': 40 /*	from whatever it's at now to 40	*/
23 | 	}
24 | });
25 | 
26 | 
27 | 
28 | 
29 | 
30 | 
31 | 
32 | 


--------------------------------------------------------------------------------
/assets/codemirror/mode/python/LICENSE.txt:
--------------------------------------------------------------------------------
 1 | The MIT License
 2 | 
 3 | Copyright (c) 2010 Timothy Farrell
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in
13 | all copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
21 | THE SOFTWARE.


--------------------------------------------------------------------------------
/Source/05. Elements/41. Styling Elements.md:
--------------------------------------------------------------------------------
 1 | Styling Elements
 2 | ----------------
 3 | 
 4 | ====== Element Styles =======
 5 | Pretty straight forward:
 6 | 
 7 | 
This paragraph has id = getStyleExample for the examples below.

 8 | 
 9 | $('getStyleExample').getStyle('width'); //returns something like "528px"
10 | 
11 | 
12 | $('getStyleExample').getStyle('width').toInt(); //returns 528 (an integer)
13 | 
14 | 
15 | $('getStyleExample').getStyles('width', 'height'); 
16 | //returns something like {width:"528px", height:"89px"}
17 | 
18 | 
19 | 
20 | 
setStyle lets you set a single css property:

21 | 
22 | $('setStyleExample').setStyle('border', '1px solid black');
23 | $('setStyleExample').setStyle('width', 300);
24 | 
25 | 
26 | 
setStyles has a slightly different syntax, and lets you set as many as you like:

27 | 
28 | $('setStylesExample').setStyles({
29 | 	border:'1px solid yellow',
30 | 	backgroundColor:'#666',
31 | 	color:'#fff'
32 | });
33 | 
34 | 


--------------------------------------------------------------------------------
/Runner/mootorial.class.php:
--------------------------------------------------------------------------------
 1 | getSourceFiles();
21 | 		$this->getMenu();
22 | 		$this->getHTML();
23 | 	}
24 | 	
25 | 	// Public functions
26 | 
27 | 
28 | 	// Private functions
29 | 	function getSourceFiles(){
30 | 		$dir = opendir($this->sourcefolder);
31 | 		while($file = readdir($dir)){
32 | 			if (substr($file, 0, 1) != "."){
33 | 				$this->sourcefiles[] = $file;
34 | 			}
35 | 		}
36 | 		closedir($dir);
37 | 		sort($this->sourcefiles);
38 | 	}
39 | 	
40 | 	function getMenu(){
41 | 		foreach($this->sourcefiles as $filename){
42 | 			$this->menuitems[] = new MenuItem($filename);
43 | 		}
44 | 	}
45 | 	
46 | 	function getHTML(){
47 | 		$url = new URL();
48 | 		$content = new Content('./Source/' . $url->match);
49 | 		$this->html = $content->html;
50 | 	}
51 | }
52 | ?>


--------------------------------------------------------------------------------
/assets/codemirror/mode/coffeescript/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License
 2 | 
 3 | Copyright (c) 2011 Jeff Pickhardt
 4 | Modified from the Python CodeMirror mode, Copyright (c) 2010 Timothy Farrell
 5 | 
 6 | Permission is hereby granted, free of charge, to any person obtaining a copy
 7 | of this software and associated documentation files (the "Software"), to deal
 8 | in the Software without restriction, including without limitation the rights
 9 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
10 | copies of the Software, and to permit persons to whom the Software is
11 | furnished to do so, subject to the following conditions:
12 | 
13 | The above copyright notice and this permission notice shall be included in
14 | all copies or substantial portions of the Software.
15 | 
16 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
17 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
18 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
19 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
20 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
21 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
22 | THE SOFTWARE.


--------------------------------------------------------------------------------
/assets/codemirror/demo/resize.html:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 |   
 4 |     CodeMirror 2: Autoresize Demo
 5 |     
 6 |     
 7 |     
 8 |     
 9 |     
10 | 
11 |     
22 |   
23 |   
24 |     
CodeMirror 2: Autoresize demo

25 | 
26 |     

33 | 
34 | 
By setting a few CSS properties, CodeMirror can be made to
35 | automatically resize to fit its content.

36 | 
37 |     
42 | 
43 |   
44 | 
45 | 


--------------------------------------------------------------------------------
/old/save/04-element/03-element.pin.txt:
--------------------------------------------------------------------------------
 1 | ====== Element.Pin ======
 2 | [[http://www.clientcide.com/docs/Element/Element.Pin|docs]]
 3 | 
 4 | //Element.pin// affixes an element to its current location, setting its css position value to "fixed" so that the element will not move if you scroll the window. This works for draggable elements, too. Browsers that don't support position "fixed" get the element relocated on scroll, so it appears to behave the same (though it may be a little jittery - this is mostly just ie6).
 5 | 
 6 | 
 7 | 
 8 | document.id('fxTarget').pin()
 9 | 
10 | 
11 | You can also easily unpin an element:
12 | 
13 | 
14 | document.id('fxTarget').pin()
15 | /*scroll around a little and in 4 secs it'll go back to being unpinned*/
16 | document.id('fxTarget').unpin.delay(4000, document.id('fxTarget'));
17 | 
18 | 
19 | And you can toggle it:
20 | 
21 | 
22 | document.id('fxTarget').pin()
23 | document.id('fxTarget').togglepin.delay(1000, document.id('fxTarget'));
24 | document.id('fxTarget').togglepin.delay(2000, document.id('fxTarget'));
25 | document.id('fxTarget').togglepin.delay(3000, document.id('fxTarget'));
26 | //etc.
27 | 
28 | 
29 | 



--------------------------------------------------------------------------------
/old/pages/mootorial/07-request/02-request.json.txt:
--------------------------------------------------------------------------------
 1 | ====== Request.JSON.js ======
 2 | Here is the [[http://docs.mootools.net/Request/Request.JSON|documentation for Request.JSON.js]].
 3 | 
 4 | //Request.JSON// is a wrapper class for //XHR// to handle automated sending and receiving of Javascript Objects in Json Format.
 5 | 
 6 | Basic Syntax:
 7 | 
 8 | var myJsonRequest = new Request.JSON(url, options)
 9 | 
10 | 
11 | I can't really demonstrate what this does in this tutorial, but here's an example of what you might do with it:
12 | 
13 | 
14 | var jSonRequest = new Request.JSON({url: 'http://site.com/tellMeAge.php', onComplete: function(person){
15 | 	alert(person.age); //is 25 years
16 | 	alert(person.height); //is 170 cm
17 | 	alert(person.weight); //is 120 kg
18 | }}).send({'name': 'John', 'lastName': 'Doe'});
19 | 
20 | 
21 | In the example above, we send "John Doe" to our tellMeAge.php which presumably looks up some information about that person and returns it in a Json format that looks something like:
22 | 
23 | {
24 | 	"age": "25 years",
25 | 	"height": "170 cm",
26 | 	"weight": "120 kg",
27 | 	"name": "John",
28 | 	"lastName": "Doe"
29 | }
30 | 
31 | 
32 | Note that the //Request.JSON// class's //.send// method that takes a JavaScript object.


--------------------------------------------------------------------------------
/old/pages/mootorial/05-utilities/02-json.txt:
--------------------------------------------------------------------------------
 1 | ====== Json =======
 2 | If you aren't familiar with Json, then [[http://www.json.org|you best read up]]. Here's the [[http://docs.mootools.net/Utilities/Json|documentation for Json.js]].
 3 | 
 4 | ===== Json.encode =====
 5 | the //.encode()// method of the //Json// object will convert an object to a JSON string that can be evaluated back into the object.
 6 | 
 7 | 
 8 | Json.encode({apple: 'red', lemon: 'yellow'});
 9 | //returns: '{"apple":"red","lemon":"yellow"}'
10 | 
11 | 
12 | 
13 | ===== Json.decode =====
14 | 
15 | 
16 | Json.decode('{"apple":"red","lemon":"yellow"}');
17 | //returns the object again: {apple: 'red', lemon: 'yellow'}
18 | 
19 | 
20 | A second argument for //Json.decode// exists to first check that the response is valid //Json//. This security method ensures that you don't evaluate malicious code:
21 | 
22 | 
23 | Json.decode('{"apple":"red","lemon":"yellow"}', true);
24 | //returns the object again: {apple: 'red', lemon: 'yellow'}
25 | 
26 | 
27 | 
28 | Json.decode("alert('you just got haxored!')", true);
29 | //returns null
30 | 
31 | 
32 | ===== Deprecated Methods =====
33 |    * Json.toString (see //Json.encode//)
34 |    * Json.evaluate (see //Json.decode//)


--------------------------------------------------------------------------------
/old/pages/mootorial/05-utilities/03-cookie.txt:
--------------------------------------------------------------------------------
 1 | ===== Cookies =====
 2 | Here is the [[http://docs.mootools.net/Utilities/Cookie|documentation for Cookie.js]].
 3 | 
 4 | The //Cookie// object, does pretty much what you'd expect. It has three functions:
 5 | 
 6 | ===== Cookie.write =====
 7 | 
 8 | 
 9 | //let's store "example" as "some value" for 10 days
10 | Cookie.write("example", "some value", {duration: 10});
11 | 
12 | 
13 | You can set three (optional) options in the 3rd argument:
14 | 
15 | Cookie.write("example", "some value", {
16 | 	duration: 10, //ten days
17 | 	path: "/some/path", //now my cookie is available to
18 | 	//only content in this path
19 | 	domain: "example.com", //now my cookie is available to any
20 | 	//subdomains of example.com,
21 | 	secure: true //stored cookie information 
22 | 	//can be accessed only from a secure environment
23 | });
24 | 
25 | 
26 | ===== Cookie.read =====
27 | 
28 | 
29 | //let's get it now
30 | Cookie.read("example"); // -> "some value"
31 | 
32 | 
33 | ===== Cookie.dispose =====
34 | 
35 | 
36 | Cookie.dispose("example"); //delete the cookie
37 | 
38 | 
39 | ===== Deprecated Methods =====
40 |    * Cookie.get (see //Cookie.read//)
41 |    * Cookie.set (see //Cookie.write//)
42 |    * Cookie.remove (see //Cookie.dispose//)


--------------------------------------------------------------------------------
/assets/codemirror/mode/css/index.html:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 |   
 4 |     CodeMirror 2: CSS mode
 5 |     
 6 |     
 7 |     
 8 |     
 9 |     
10 |     
11 |   
12 |   
13 |     
CodeMirror 2: CSS mode

14 |     

49 |     
52 | 
53 |     
MIME types defined: text/css.

54 | 
55 |   
56 | 
57 | 


--------------------------------------------------------------------------------
/Source/05. Elements/71. Creating Elements.md:
--------------------------------------------------------------------------------
 1 | Creating Elements
 2 | -----------------
 3 | 
 4 | This just creates a new element object - same as //document.createElement//, but it also applies the MooTools extensions to that element.
 5 | 
 6 | #### JS
 7 | 
 8 | 	var img = new Element("img");
 9 | 
10 | //new Element// also lets you set any properties when you create it:
11 | 
12 | #### JS
13 | 
14 | 	new Element('a', {
15 | 		styles: {
16 | 			'display': 'block',
17 | 			'border': '1px solid black'
18 | 		},
19 | 		events: {
20 | 			click: function(){
21 | 				//something to do on click
22 | 			},
23 | 			mousedown: function(){
24 | 				//something to do on mousedown
25 | 			}
26 | 		},
27 | 		/*	class must be in quotes; it is a reserved word in IE	*/
28 | 		'class': 'myClassSuperClass',
29 | 		href: 'http://mootools.net'
30 | 	});
31 | 
32 | The key 'styles' will be used as //setStyles//, the key 'events' will be used as //addEvents//. Any other key is used a property with //set//. Note that you don't have to write the keys with quotes ('styles' or 'events' - these can just be {styles: '...', events: '...'} - but **class** DOES have to be in quotes as it's a reserved word in IE.
33 | 
34 | **Note** that this doesn't insert the element into the DOM, you need to use //Element.adopt, .inject, .wraps,// etc. to put the element into the document:
35 | 
36 | #### JS
37 | 
38 | 	new Element('img', {src: 'http//...'}).inject($(myElement));
39 | 	


--------------------------------------------------------------------------------
/Source/03. Types/03. Number.md:
--------------------------------------------------------------------------------
 1 | ====== Numbers ======
 2 | Here is the [[http://mootools.net/docs/core/Types/Number|documentation for Number.js]].
 3 | 
 4 | ===== Number.toInt, .toFloat =====
 5 | //Number.toInt()// just returns the number; useful because toInt must work on both Strings and Numbers. Note that if you call //.toInt()// on a float, you'll get an integer back.
 6 | 
 7 | var x = 10;
 8 | x.toInt(); //returns 10
 9 | 
10 | 
11 | var x = 10.01;
12 | x.toFloat(); //returns 10.01
13 | 
14 | 
15 | var x = 10.01;
16 | x.toInt(); //returns 10
17 | 
18 | 
19 | ===== Number.limit =====
20 | (12).limit(2, 6.5)  // returns 6.5
21 | (-4).limit(2, 6.5)  // returns 2
22 | (4.3).limit(2, 6.5) // returns 4.3
23 | 
24 | ===== Number.round =====
25 | Returns the number rounded to specified precision: the number of digits after the decimal point. Can also be negative or zero (default).
26 | 
27 | 12.45.round() // returns 12
28 | 12.45.round(1) // returns 12.5
29 | 12.45.round(-1) // returns 10
30 | 
31 | 
32 | ===== Number.times =====
33 | Executes a passed in function the specified number of times:
34 | 
35 | (3).times(alert)
36 | //alert(0)
37 | //alert(1)
38 | //alert(2)
39 | 


--------------------------------------------------------------------------------
/old/pages/mootorial/03-native/02-number.txt:
--------------------------------------------------------------------------------
 1 | ====== Numbers ======
 2 | Here is the [[http://mootools.net/docs/core/Types/Number|documentation for Number.js]].
 3 | 
 4 | ===== Number.toInt, .toFloat =====
 5 | //Number.toInt()// just returns the number; useful because toInt must work on both Strings and Numbers. Note that if you call //.toInt()// on a float, you'll get an integer back.
 6 | 
 7 | var x = 10;
 8 | x.toInt(); //returns 10
 9 | 
10 | 
11 | var x = 10.01;
12 | x.toFloat(); //returns 10.01
13 | 
14 | 
15 | var x = 10.01;
16 | x.toInt(); //returns 10
17 | 
18 | 
19 | ===== Number.limit =====
20 | (12).limit(2, 6.5)  // returns 6.5
21 | (-4).limit(2, 6.5)  // returns 2
22 | (4.3).limit(2, 6.5) // returns 4.3
23 | 
24 | ===== Number.round =====
25 | Returns the number rounded to specified precision: the number of digits after the decimal point. Can also be negative or zero (default).
26 | 
27 | 12.45.round() // returns 12
28 | 12.45.round(1) // returns 12.5
29 | 12.45.round(-1) // returns 10
30 | 
31 | 
32 | ===== Number.times =====
33 | Executes a passed in function the specified number of times:
34 | 
35 | (3).times(alert)
36 | //alert(0)
37 | //alert(1)
38 | //alert(2)
39 | 


--------------------------------------------------------------------------------
/assets/codemirror/mode/sparql/index.html:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 |   
 4 |     CodeMirror 2: SPARQL mode
 5 |     
 6 |     
 7 |     
 8 |     
 9 |     
10 |     
11 |   
12 |   
13 |     
CodeMirror 2: SPARQL mode

14 |     

30 |     
37 | 
38 |     
MIME types defined: application/x-sparql-query.

39 | 
40 |   
41 | 
42 | 


--------------------------------------------------------------------------------
/assets/codemirror/mode/rst/rst.css:
--------------------------------------------------------------------------------
 1 | .cm-s-default span.cm-emphasis {
 2 |     font-style: italic;
 3 | }
 4 | 
 5 | .cm-s-default span.cm-strong {
 6 |     font-weight: bold;
 7 | }
 8 | 
 9 | .cm-s-default span.cm-interpreted {
10 |     color: #33cc66;
11 | }
12 | 
13 | .cm-s-default span.cm-inline {
14 |     color: #3399cc;
15 | }
16 | 
17 | .cm-s-default span.cm-role {
18 |     color: #666699;
19 | }
20 | 
21 | .cm-s-default span.cm-list {
22 |     color: #cc0099;
23 |     font-weight: bold;
24 | }
25 | 
26 | .cm-s-default span.cm-body {
27 |     color: #6699cc;
28 | }
29 | 
30 | .cm-s-default span.cm-verbatim {
31 |     color: #3366ff;
32 | }
33 | 
34 | .cm-s-default span.cm-comment {
35 |     color: #aa7700;
36 | }
37 | 
38 | .cm-s-default span.cm-directive {
39 |     font-weight: bold;
40 |     color: #3399ff;
41 | }
42 | 
43 | .cm-s-default span.cm-hyperlink {
44 |     font-weight: bold;
45 |     color: #3366ff;
46 | }
47 | 
48 | .cm-s-default span.cm-footnote {
49 |     font-weight: bold;
50 |     color: #3333ff;
51 | }
52 | 
53 | .cm-s-default span.cm-citation {
54 |     font-weight: bold;
55 |     color: #3300ff;
56 | }
57 | 
58 | .cm-s-default span.cm-replacement {
59 |     color: #9933cc;
60 | }
61 | 
62 | .cm-s-default span.cm-section {
63 |     font-weight: bold;
64 |     color: #cc0099;
65 | }
66 | 
67 | .cm-s-default span.cm-directive-marker {
68 |     font-weight: bold;
69 |     color: #3399ff;
70 | }
71 | 
72 | .cm-s-default span.cm-verbatim-marker {
73 |     font-weight: bold;
74 |     color: #9900ff;
75 | }
76 | 


--------------------------------------------------------------------------------
/Source/00. Introduction/01. Learning JavaScript.md:
--------------------------------------------------------------------------------
1 | Learning Javascript
2 | -------------------
3 | 
4 | There's a nice [[http://blog.mootools.net/2007/6/5/help-i-dont-know-javascript|roundup of Javascript resources]] at the [[http://blog.mootools.net|MooTools Blog]]. I recommend the following strongly:
5 | 
6 |   * [[http://video.yahoo.com/search/?p=douglas+crockford+javascript+programming+language|Douglas Crockford: The Javascript Programming Language]] - These four videos are a must-watch. If you're new to javascript or are rusty, start here.
7 |   * [[http://video.yahoo.com/search?p=douglas+crockford+advanced+javascript&x=0&y=0|Dougals Crockford: Advanced Javascript]] - These are a little less useful but still very informative. They are less useful because MooTools creates a different kind of environment than Douglas is describing (he talks about native Javascript, and MooTools kind of changes this native environment and so many of his code examples don't apply to MooTools, but you can still learn from them).
8 |   * [[http://rds.yahoo.com/_ylt=A0WTQ1d1bW1G8iMBoSYCP88F;_ylu=X3oDMTBjMHZkMjZyBHBvcwMxBHNlYwNzcg--/SIG=122e20mkk/EXP=1181662965/**http%3A//video.yahoo.com/video/play%3Fvid=111597|Joe Hewitt presents Firebug]] - this video will introduce you to [[http://getfirebug.com|Firebug]], a must-have debugging tool if you're doing any javascript work (actually, if you're doing any html, css, javascript, ajax, whatever; it's awesome).
9 |   * [[http://w3schools.com/js/default.asp|w3schools js docs and tutorials]]  - a good place to learn how to use various native functions.


--------------------------------------------------------------------------------
/assets/codemirror/mode/r/LICENSE:
--------------------------------------------------------------------------------
 1 | Copyright (c) 2011, Ubalo, Inc.
 2 | All rights reserved.
 3 | 
 4 | Redistribution and use in source and binary forms, with or without
 5 | modification, are permitted provided that the following conditions are met:
 6 |     * Redistributions of source code must retain the above copyright
 7 |       notice, this list of conditions and the following disclaimer.
 8 |     * Redistributions in binary form must reproduce the above copyright
 9 |       notice, this list of conditions and the following disclaimer in the
10 |       documentation and/or other materials provided with the distribution.
11 |     * Neither the name of the Ubalo, Inc nor the names of its
12 |       contributors may be used to endorse or promote products derived
13 |       from this software without specific prior written permission.
14 | 
15 | THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
16 | ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
17 | WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
18 | DISCLAIMED. IN NO EVENT SHALL UBALO, INC BE LIABLE FOR ANY
19 | DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
20 | (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
21 | LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
22 | ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
23 | (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
24 | SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
25 | 


--------------------------------------------------------------------------------
/assets/codemirror/mode/ruby/LICENSE:
--------------------------------------------------------------------------------
 1 | Copyright (c) 2011, Ubalo, Inc.
 2 | All rights reserved.
 3 | 
 4 | Redistribution and use in source and binary forms, with or without
 5 | modification, are permitted provided that the following conditions are met:
 6 |     * Redistributions of source code must retain the above copyright
 7 |       notice, this list of conditions and the following disclaimer.
 8 |     * Redistributions in binary form must reproduce the above copyright
 9 |       notice, this list of conditions and the following disclaimer in the
10 |       documentation and/or other materials provided with the distribution.
11 |     * Neither the name of the Ubalo, Inc. nor the names of its
12 |       contributors may be used to endorse or promote products derived
13 |       from this software without specific prior written permission.
14 | 
15 | THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
16 | ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
17 | WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
18 | DISCLAIMED. IN NO EVENT SHALL UBALO, INC BE LIABLE FOR ANY
19 | DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
20 | (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
21 | LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
22 | ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
23 | (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
24 | SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
25 | 


--------------------------------------------------------------------------------
/assets/codemirror/demo/marker.html:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 |   
 4 |     CodeMirror 2: Breakpoint Demo
 5 |     
 6 |     
 7 |     
 8 |     
 9 |     
10 | 
11 |     
20 |   
21 |   
22 |     
CodeMirror 2: Breakpoint demo

23 | 
24 |     

36 | 
37 | 
Click the line-number gutter to add or remove 'breakpoints'.

38 | 
39 |     
51 | 
52 |   
53 | 
54 | 


--------------------------------------------------------------------------------
/old/pages/mootorial/07-request/01-request.html.txt:
--------------------------------------------------------------------------------
 1 | ====== Request.HTML ======
 2 | A common practice with Ajax is to update the content of a DOM element with the results of an Ajax request. In other words, fetch new html and replace the inner HTML of some DOM element with the new HTML.
 3 | 
 4 | MooTools provides a //[[00-request|Request]]// extension that automates this for you. 
 5 | Here is the [[http://docs.mootools.net/Request/Request.HTML|documentation for Request.HTML.js]].
 6 | It takes all the same options as //Request// plus three new ones:
 7 | 
 8 | 
 9 | 

10 | 	
update

11 | 	
The Element to insert the response text of the Request into upon completion of the request.

12 | 	
evalScripts

13 | 	
If set to true, script tags inside the response will be evaluated. Defaults to true.

14 | 	
evalResponse

15 | 	
If set to true, the entire response will be evaluated. Defaults to false.

16 | 

17 | 
18 | 
19 | Here's an actual working //Request// request you can execute:
20 | 
21 | 
This is a div that we'll insert our ajax response into.

22 | 
23 | 
24 | new Request.HTML({
25 | 	url: '/Ajax.Request.Example.html',
26 | 	method: 'get',
27 | 	update: 'ajaxExample',
28 | 	evalScripts: true, /* this is the default */
29 | 	onComplete: function(){console.log('ajax complete!')}
30 | }).send();
31 | 
32 | 
33 | Note that you can keep the Request object around:
34 | 
35 | var myRequest = new Request(...);
36 | 
37 | 
38 | Also note that creating an instance of the class doesn't actually fire the request; you need to call the method //.send()// to do that.


--------------------------------------------------------------------------------
/assets/codemirror/demo/theme.html:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 |   
 4 |     CodeMirror 2: Theme Demo
 5 |     
 6 |     
 7 |     
 8 |     
 9 |     
10 |     
11 |     
12 |     
13 | 
14 |     
17 |   
18 |   
19 |     
CodeMirror 2: Theme demo

20 | 
21 |     

34 | 
35 | 
Select a theme: 
41 | 

42 | 
43 | 
52 |   
53 | 
54 | 


--------------------------------------------------------------------------------
/assets/codemirror/lib/codemirror.css:
--------------------------------------------------------------------------------
 1 | .CodeMirror {
 2 |   line-height: 1em;
 3 |   font-family: monospace;
 4 | }
 5 | 
 6 | .CodeMirror-scroll {
 7 |   overflow: auto;
 8 |   height: 300px;
 9 |   /* This is needed to prevent an IE[67] bug where the scrolled content
10 |      is visible outside of the scrolling box. */
11 |   position: relative;
12 | }
13 | 
14 | .CodeMirror-gutter {
15 |   position: absolute; left: 0; top: 0;
16 |   background-color: #f7f7f7;
17 |   border-right: 1px solid #eee;
18 |   min-width: 2em;
19 |   height: 100%;
20 | }
21 | .CodeMirror-gutter-text {
22 |   color: #aaa;
23 |   text-align: right;
24 |   padding: .4em .2em .4em .4em;
25 | }
26 | .CodeMirror-lines {
27 |   padding: .4em;
28 | }
29 | 
30 | .CodeMirror pre {
31 |   -moz-border-radius: 0;
32 |   -webkit-border-radius: 0;
33 |   -o-border-radius: 0;
34 |   border-radius: 0;
35 |   border-width: 0; margin: 0; padding: 0; background: transparent;
36 |   font-family: inherit;
37 |   font-size: inherit;
38 |   padding: 0; margin: 0;
39 |   white-space: pre;
40 |   word-wrap: normal;
41 | }
42 | 
43 | .CodeMirror textarea {
44 |   font-family: inherit !important;
45 |   font-size: inherit !important;
46 | }
47 | 
48 | .CodeMirror-cursor {
49 |   z-index: 10;
50 |   position: absolute;
51 |   visibility: hidden;
52 |   border-left: 1px solid black !important;
53 | }
54 | .CodeMirror-focused .CodeMirror-cursor {
55 |   visibility: visible;
56 | }
57 | 
58 | span.CodeMirror-selected {
59 |   background: #ccc !important;
60 |   color: HighlightText !important;
61 | }
62 | .CodeMirror-focused span.CodeMirror-selected {
63 |   background: Highlight !important;
64 | }
65 | 
66 | .CodeMirror-matchingbracket {color: #0f0 !important;}
67 | .CodeMirror-nonmatchingbracket {color: #f22 !important;}
68 | 


--------------------------------------------------------------------------------
/assets/codemirror/demo/changemode.html:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 |   
 4 |     CodeMirror 2: Mode-Changing Demo
 5 |     
 6 |     
 7 |     
 8 |     
 9 |     
10 |     
11 | 
12 |     
15 |   
16 |   
17 |     
CodeMirror 2: Mode-Changing demo

18 | 
19 |     

26 | 
27 | 
On changes to the content of the above editor, a (crude) script
28 | tries to auto-detect the language used, and switches the editor to
29 | either JavaScript or Scheme mode based on that.

30 | 
31 | 
50 |   
51 | 
52 | 


--------------------------------------------------------------------------------
/assets/codemirror/mode/php/index.html:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 |   
 4 |     CodeMirror 2: PHP mode
 5 |     
 6 |     
 7 |     
 8 |     
 9 |     
10 |     
11 |     
12 |     
13 |     
14 |     
15 |   
16 |   
17 |     
CodeMirror 2: PHP mode

18 | 
19 | 

30 | 
31 |     
42 | 
43 |     
Simple HTML/PHP mode based on
44 |     the C-like mode. Depends on XML,
45 |     JavaScript, CSS, and C-like modes.

46 | 
47 |     
MIME types defined: application/x-httpd-php (HTML with PHP code), text/x-php (plain, non-wrapped PHP code).

48 |   
49 | 
50 | 


--------------------------------------------------------------------------------
/old/pages/mootorial/08-plugins/00-fxplugins/01-fx.scroll.txt:
--------------------------------------------------------------------------------
 1 | ====== Fx.Scroll ======
 2 | Here is the [[http://docs.mootools.net/Plugins/Fx/Fx.Scroll|documentation for Fx.Scroll.js]].
 3 | 
 4 | Smooth scrolling is pretty easy to manage with the //Fx.Scroll// class. You can scroll elements (like a div or a paragraph that has an overflow and thus a scroll bar) or the window.
 5 | 
 6 | Basic syntax:
 7 | 
 8 | new Fx.Scroll(element, options)
 9 | 
10 | 
11 | The options are the same as the //[[00-fx|Fx]]// options, and the element is any DOM element or the window (that has an overflow, obviously).
12 | 
13 | 	

14 | 	1

15 | 	2

16 | 	3

17 | 	4

18 | 	5

19 | 	6

20 | 	7

21 | 	8

22 | 	9

23 | 	10

24 | 	11

25 | 	12

26 | 	13

27 | 	14

28 | 	15

29 | 	16

30 | 	17

31 | 	18

32 | 	19

33 | 	20

34 | 	

35 | 
36 | 
37 | var scrollExample = new Fx.Scroll($('scrollExample'));
38 | scrollExample.start(0, 120);
39 | 
40 | 
41 | var scrollExample = new Fx.Scroll($('scrollExample'));
42 | scrollExample.toTop(); //go to the top
43 | 
44 | 
45 | var scrollExample = new Fx.Scroll($('scrollExample'));
46 | scrollExample.toBottom(); //to the bottom
47 | 
48 | 
49 | There are also functions //.toRight()//, //.toLeft()//, //.scrollTo(x,y)// and //.toElement()//.
50 | 
51 | 
Window example:

52 | 
53 | var winScroller = new Fx.Scroll(window);
54 | 	/*	scroll to the top	*/
55 | 	winScroller.toTop().chain(function (){
56 | 	/*	then back to here	*/
57 | 	winScroller.toElement('fxScrollWindowExample');
58 | });
59 | 


--------------------------------------------------------------------------------
/assets/codemirror/mode/smalltalk/index.html:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 |   
 4 |     CodeMirror 2: Smalltalk mode
 5 |     
 6 |     
 7 |     
 8 |     
 9 |     
10 |     
15 |   
16 |   
17 |     
CodeMirror 2: Smalltalk mode

18 | 
19 | 

42 | 
43 |     
51 | 
52 |     
Simple Smalltalk mode.

53 | 
54 |     
MIME types defined: text/x-stsrc.

55 |   
56 | 
57 | 


--------------------------------------------------------------------------------
/assets/codemirror/mode/xml/index.html:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 |   
 4 |     CodeMirror 2: XML mode
 5 |     
 6 |     
 7 |     
 8 |     
 9 |     
10 |     
11 |   
12 |   
13 |     
CodeMirror 2: XML mode

14 |     

26 |     
29 |     
The XML mode supports two configuration parameters:

30 |     

31 |       
htmlMode (boolean)

32 |       
This switches the mode to parse HTML instead of XML. This
33 |       means attributes do not have to be quoted, and some elements
34 |       (such as br) do not require a closing tag.

35 |       
alignCDATA (boolean)

36 |       
Setting this to true will force the opening tag of CDATA
37 |       blocks to not be indented.

38 |     

39 | 
40 |     
MIME types defined: application/xml, text/html.

41 |   
42 | 
43 | 


--------------------------------------------------------------------------------
/Source/05. Elements/91. Element Storage.md:
--------------------------------------------------------------------------------
 1 | Element Storage
 2 | ---------------
 3 | 
 4 | ===== Element Storage =====
 5 | This is probably one of the nicest new features in MooTools 1.2. There's [[http://mootools.net/blog/2008/01/22/whats-new-in-12-element-storage/|a great post about it on the MooTools blog]] that's very instructive. Basically, storage lets you associate something in JavaScript land with a DOM element (or even DOM elements to other DOM elements). It manages all the connections so that you don't have to worry about memory leaks.
 6 | 
 7 | This means you can do things like this:
 8 | 
 9 | 
10 | $(draggable).store('handle', $(handle));
11 | $(form).store('validator', new FormValidator());
12 | $(thumbnail).store('fullSizeImage', $(someImage));
13 | 
14 | 
15 | Previously, when writing code that had a collection of dom elements related to other things, you had to maintain arrays and keep track of the indexes. All the slides in a slideshow related to all their thumbnails, but that meant you had an array of thumbnails and an array of slides. Now you can simplify this greatly.
16 | 
17 | It also means that you can easily find a class from the element(s) it manages and vice versa. I can do:
18 | 
19 | 
20 | var myForm = $('myForm');
21 | myForm.store('validator', myValidator);
22 | myForm.retrieve('validator'); //get the validator from the form
23 | myValidator.form; //and the form from the validator
24 | 
25 | 
26 | There's more to it than this of course but you get the idea. It's very convenient.
27 | 
28 | MooTools uses this functionality to store "built in" instances of classes. For example, Fx.Tween:
29 | 
30 | 
31 | $(el).tween('opacity', 0); //fade out
32 | 
33 | 
34 | If you were to use //.tween// to fade back in later, MooTools just retrieves the same instance and fades back in.
35 | 


--------------------------------------------------------------------------------
/assets/codemirror/mode/htmlmixed/index.html:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 |   
 4 |     CodeMirror 2: HTML mixed mode
 5 |     
 6 |     
 7 |     
 8 |     
 9 |     
10 |     
11 |     
12 |     
13 |     
14 |   
15 |   
16 |     
CodeMirror 2: HTML mixed mode

17 |     

41 |     
44 | 
45 |     
The HTML mixed mode depends on the XML, JavaScript, and CSS modes.

46 | 
47 |     
MIME types defined: text/html
48 |     (redefined, only takes effect if you load this parser after the
49 |     XML parser).

50 | 
51 |   
52 | 
53 | 


--------------------------------------------------------------------------------
/assets/codemirror/mode/plsql/index.html:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 |   
 4 |     CodeMirror 2: Oracle PL/SQL mode
 5 |     
 6 |     
 7 |     
 8 |     
 9 |     
10 |     
11 |   
12 |   
13 |     
CodeMirror 2: Oracle PL/SQL mode

14 | 
15 | 

47 | 
48 |     
56 | 
57 |     

58 |         Simple mode that handles Oracle PL/SQL language (and Oracle SQL, of course).
59 |     

60 | 
61 |     
MIME type defined: text/x-plsql
62 |     (PLSQL code)
63 | 
64 | 


--------------------------------------------------------------------------------
/old/save/03-native/03-string.extras.txt:
--------------------------------------------------------------------------------
 1 | ====== String.Extras ======
 2 | 
 3 | [[http://www.clientcide.com/docs/Native/String.Extras|docs]]
 4 | 
 5 | MooTools extends Strings in its Native group of code. We've got a few more extensions of our own.
 6 | 
 7 | [[http://www.clientcide.com/docs/Native/String.Extras|docs]]
 8 | 
 9 | 
10 | 
11 | 
12 | 
13 | 
14 | ==== stripTags ====
15 | Removes all html tags from a string:
16 | 
17 | 
18 | "
I\'m a string with a bunch of tags
".stripTags();
19 | //returns: I'm a string with a bunch of tags
20 | 
21 | 
22 | ==== cleanQueryString ====
23 | Removes from a query string any keys that have empty values.
24 | 
25 | 
26 | var cleaned = "a=b&x=&z=123&e=".cleanQueryString();
27 | //cleaned = "a=b&z=123"
28 | 
29 | 
30 | You can pass in a custom function to use instead of the default:
31 | 
32 | 
33 | var noNumberValues = "a=b&x=y&z=123&e=".cleanQueryString(function(set){
34 |     //set is "a=b", "x=y", "z=123", "e="
35 |     return !set.split("=")[1].match(/[0-9]/);
36 | });
37 | //noNumberValues = "a=b&x=y&e="
38 | 
39 | 
40 | 
41 | ==== findAllEmails ====
42 | 
43 | Finds all the valid email addresses in a string.
44 | 
45 | 
46 | "Fred's email is fred@flintstone.com and Barney's is barney@rubble.com".findAllEmails();
47 | //returns ['fred@flintstone.com', 'barney@rubble.com']
48 | 
49 | 
50 | 
51 | 
52 | ==== parseQuery ====
53 | This takes a url query string and returns an object of name/value pairs to you.
54 | 
55 | 
56 | "apple=red&lemon=yellow".parseQuery();
57 | //returns: {apple: 'red', lemon:'yellow'}
58 | 
59 | 
60 | 
61 | 
62 | 
63 | 
64 | ==== tidy ====
65 | Removes MS-Word style non-ASCI characters (curly quotes, elipse, etc). See also [[element.cnet.js#tidy|Element.tidy]].
66 | 
67 | 
68 | "“‘…’”".tidy();
69 | //returns "'...'"
70 | 
71 | 


--------------------------------------------------------------------------------
/index.php:
--------------------------------------------------------------------------------
 1 | 
 5 | 
 6 | 
 7 | 
 8 | 	
 9 | 	The Mootorial
10 | 	
11 | 	
12 | 	
13 | 	
14 | 	
15 | 	
16 | 	
17 | 	
18 | 	
19 | 	
20 | 	
21 | 	
22 | 	
23 | 	
24 | 	
25 | 	
26 | 	
27 | 	
28 | 
29 | 
30 | 
31 | 	

32 | 		
54 | 		

55 | 			html?>
56 | 		

57 | 	

58 | 
59 | 


--------------------------------------------------------------------------------
/assets/codemirror/mode/lua/index.html:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 |   
 4 |     CodeMirror 2: Lua mode
 5 |     
 6 |     
 7 |     
 8 |     
 9 |     
10 |     
11 |   
12 |   
13 |     
CodeMirror 2: Lua mode

14 |     

55 |     
62 | 
63 |     
Loosely based on Franciszek
64 |     Wawrzak's CodeMirror
65 |     1 mode. One configuration parameter is
66 |     supported, specials, to which you can provide an
67 |     array of strings to have those identifiers highlighted with
68 |     the lua-special style.

69 |     
MIME types defined: text/x-lua.

70 | 
71 |   
72 | 
73 | 


--------------------------------------------------------------------------------
/old/pages/mootorial/08-plugins/02-utilityplugins/00-hash.cookie.txt:
--------------------------------------------------------------------------------
 1 | ====== Hash.Cookie ======
 2 | Here are the [[http://docs.mootools.net/Plugins/Hash.Cookie|docs for Hash.Cookie]].
 3 | 
 4 | //Hash.Cookie// is a //Hash// that is saved as a cookie value. The only restrictions are that the values cannot be Json incompatible (like a DOM element for example) and that the resulting Json of your values is not greater than the maximum size of a cookie (which is 4kb - 4092 characters). If you attempt to save a value that is greater than this size, the method will return //false// because to save it would overwrite the current value with one greater than the cookie size can be, which would truncate it (and make it no longer parsable Json).
 5 | 
 6 | Creating a new instance of a //Hash.Cookie// automatically loads the values from the cookie if present. It is identical to //Hash// except that it has the methods //.save// and //.load//. Additionally, it has all the options that //Cookie// has plus the option //autoSave//, which does what you think it does (defaults to //true//). //Hash.Cookie.empty()// not only empties the content but also removes the cookie.
 7 | 
 8 | Also note that its initialize method takes as arguments name and options, but not data (like //Hash//) so you have to add that using //.extend//, //.merge//, or //.set//.
 9 | 
10 | 
11 | /*	let's pretend we're saving some user preferences	*/
12 | var prefs = new Hash.Cookie('userPreferances');
13 | console.log(prefs.getClean()); /*	let's look at the data in the cookie	*/
14 | prefs.extend({
15 | 	fontSize: 'big',
16 | 	colors: 'monochrome',
17 | 	bandwidth: 'hi',
18 |   /*	this will change every time you execute this example	*/
19 | 	date: $time()
20 | });
21 | console.log(prefs.getClean()); /*	the data is updated	*/
22 | 
23 | 
24 | If you execute the block above, the first time the object will be empty (because you don't have a cookie). The second time you'll see the values. The third time, the values will all be the same, but the date value will be more recent.
25 | time


--------------------------------------------------------------------------------
/old/pages/mootorial/05-utilities/01-domready.txt:
--------------------------------------------------------------------------------
 1 | ====== DomReady ======
 2 | Here are the docs for [[http://docs.mootools.net/Utilities/DomReady|DomReady.js]].
 3 | 
 4 | ===== Adding the Event =====
 5 | Functions just like //Element.addEvent//, but adds the possibility to add the custom event 'domready':
 6 | 
 7 | window.addEvent('load', function(){...});
 8 | 
 9 | 
10 | window.addEvent('domready', function(){...});
11 | 
12 | 
13 | function myFunction(){...};
14 | window.addEvent('domready', myFunction);
15 | 
16 | 
17 | ==== domready ====
18 | This is an important nuance. Whenever you reference items in the DOM (the Document Object Model), they must already be loaded in the browser. If you had some code like this:
19 | 
20 | 
21 | $$('a').each(function(link){
22 |   //this is a silly example
23 |   link.setStyle('color','blue');
24 | });
25 | 
26 | 
27 | It won't work unless you execute it after the anchor tags have loaded. So if you put this in the head of your document, this code won't do anything. If you put it in the middle of your doc, you'll catch all the links up to that point.
28 | 
29 | To get around this you have to execute your code after the page loads. You can use //window.addEvent('load', function(){....init code here...});// but the "load" event waits for //everything// to load - images, css files, whatever.
30 | 
31 | This is where the event "domready" comes into play. This event fires when the HTML is loaded, even if the other assets (images, etc.) are not. So:
32 | 
33 | 
34 | window.addEvent('domready', function(){
35 |   $$('a').each(function(link){
36 |     //this is a silly example
37 |     link.setStyle('color','blue');
38 |   });
39 | });
40 | 
41 | 
42 | Will fire as soon as the HTML is ready and all your links will turn blue.
43 | 
44 | Additionally, if you execute this code //after// the page loads, it'll just execute immediately. This way you don't have to worry about whether or not the page is ready in your code.


--------------------------------------------------------------------------------
/assets/codemirror/demo/mustache.html:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 |   
 4 |     CodeMirror 2: Overlay Parser Demo
 5 |     
 6 |     
 7 |     
 8 |     
 9 |     
10 |     
11 | 
12 |     
16 |   
17 |   
18 |     
CodeMirror 2: Overlay Parser Demo

19 | 
20 |     

31 | 
32 |     
49 | 
50 |     
Demonstration of a mode that parses HTML, highlighting
51 |     the Mustache templating
52 |     directives inside of it by using the code
53 |     in overlay.js. View
54 |     source to see the 15 lines of code needed to accomplish this.

55 | 
56 |   
57 | 
58 | 


--------------------------------------------------------------------------------
/assets/codemirror/mode/haskell/index.html:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 |   
 4 |     CodeMirror 2: Haskell mode
 5 |     
 6 |     
 7 |     
 8 |     
 9 |     
10 |     
11 |   
12 |   
13 |     
CodeMirror 2: Haskell mode

14 | 
15 | 

49 | 
50 |     
57 | 
58 |     
MIME types defined: text/x-haskell.

59 |   
60 | 
61 | 


--------------------------------------------------------------------------------
/assets/codemirror/lib/overlay.js:
--------------------------------------------------------------------------------
 1 | // Utility function that allows modes to be combined. The mode given
 2 | // as the base argument takes care of most of the normal mode
 3 | // functionality, but a second (typically simple) mode is used, which
 4 | // can override the style of text. Both modes get to parse all of the
 5 | // text, but when both assign a non-null style to a piece of code, the
 6 | // overlay wins, unless the combine argument was true, in which case
 7 | // the styles are combined.
 8 | 
 9 | CodeMirror.overlayParser = function(base, overlay, combine) {
10 |   return {
11 |     startState: function() {
12 |       return {
13 |         base: CodeMirror.startState(base),
14 |         overlay: CodeMirror.startState(overlay),
15 |         basePos: 0, baseCur: null,
16 |         overlayPos: 0, overlayCur: null
17 |       };
18 |     },
19 |     copyState: function(state) {
20 |       return {
21 |         base: CodeMirror.copyState(base, state.base),
22 |         overlay: CodeMirror.copyState(overlay, state.overlay),
23 |         basePos: state.basePos, baseCur: null,
24 |         overlayPos: state.overlayPos, overlayCur: null
25 |       };
26 |     },
27 | 
28 |     token: function(stream, state) {
29 |       if (stream.start == state.basePos) {
30 |         state.baseCur = base.token(stream, state.base);
31 |         state.basePos = stream.pos;
32 |       }
33 |       if (stream.start == state.overlayPos) {
34 |         stream.pos = stream.start;
35 |         state.overlayCur = overlay.token(stream, state.overlay);
36 |         state.overlayPos = stream.pos;
37 |       }
38 |       stream.pos = Math.min(state.basePos, state.overlayPos);
39 |       if (stream.eol()) state.basePos = state.overlayPos = 0;
40 | 
41 |       if (state.overlayCur == null) return state.baseCur;
42 |       if (state.baseCur != null && combine) return state.baseCur + " " + state.overlayCur;
43 |       else return state.overlayCur;
44 |     },
45 |     
46 |     indent: function(state, textAfter) {
47 |       return base.indent(state.base, textAfter);
48 |     },
49 |     electricChars: base.electricChars
50 |   };
51 | };
52 | 


--------------------------------------------------------------------------------
/assets/codemirror/mode/yaml/index.html:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 |   
 4 |     CodeMirror 2: YAML mode
 5 |     
 6 |     
 7 |     
 8 |     
 9 |     
10 |     
11 |   
12 |   
13 |     
CodeMirror 2: YAML mode

14 |     

61 |     
64 | 
65 |     
MIME types defined: text/x-yaml.

66 | 
67 |   
68 | 
69 | 


--------------------------------------------------------------------------------
/old/save/04-element/05-element.shortcuts.txt:
--------------------------------------------------------------------------------
 1 | ====== Element.Shortcuts ======
 2 | [[http://www.clientcide.com/docs/Element/Element.Shortcuts|docs]]
 3 | 
 4 | MooTools has a lot of love for DOM elements, but there were a few functions we included that aren't in MooTools. In this script we mostly cover things that are shortcuts for stuff we got tired of typing over and over.
 5 | 
 6 | ===== Element.isVisible =====
 7 | Returns true if display != none.
 8 | 
 9 | 
10 | document.id('fxTarget').isVisible(); //true
11 | 
12 | 
13 | ===== Element.toggle =====
14 | Toggles between display = block and display = none.
15 | 
16 | 
17 | document.id('fxTarget').toggle(); //hides
18 | document.id('fxTarget').toggle.delay(1000, document.id('fxTarget')); //shows again
19 | 
20 | 
21 | 
22 | 
23 | ===== Element.hide(), .show =====
24 | //Element.hide()// will set an element's display to 'none'.
25 | 
26 | //Element.show()// will set it back to what it was before you hid it (inline, block, etc.) or, if you didn't call //.hide()// on it previously it defaults to 'block'. You can specify what to set the display to by passing that in (//Element.show('block')// or //Element.show('inline')//);
27 | 
28 | These are just shortcuts for //[[http://www.mootorial.com/wiki/mootorial/04-element/02-element.style#element.getstyle-.setstyle-.setstyles|Element.setStyle('display', 'block')]]//.
29 | 
30 | 
31 | document.id('fxTarget').hide(); /*hides*/
32 | document.id('fxTarget').show.delay(1000, document.id('fxTarget')); /*shows again*/
33 | 
34 | 
35 | 
36 | ===== Element.swapClass =====
37 | This basically removes one class and inserts another. Useful if you need to toggle a specific class of styles.
38 | If the one to remove is not found the one to add is still added.
39 | 
40 | 
41 | 
51 | 

52 | 
53 | 
54 | 
55 | document.id('swapExample').swapClass('red', 'blue'); 
56 | 


--------------------------------------------------------------------------------
/old/pages/mootorial/08-plugins/02-utilityplugins/03-assets.txt:
--------------------------------------------------------------------------------
 1 | ====== Assets ======
 2 | Assets.js provides on-the-fly loading of images, css, and javascript files. Here is the [[http://docs.mootools.net/Plugins/Assets|documentation for Assets.js]].
 3 | 
 4 | ===== Assets.javascript =====
 5 | Returns a new script tag with the source and (optional) properties you specify. *Note* that it inserts the tag into the DOM (in the head) for you.
 6 | 
 7 | new Asset.javascript('/scripts/myScript.js', {id: 'myScript'})
 8 | //returns element: 
 9 | 
10 | 
11 | ===== Assets.css =====
12 | Pretty much the same concept for css as for javascript. *Note* that it inserts the tag into the DOM (in the head) for you.
13 | 
14 | new Asset.css('/css/myStyle.css', {id: 'myStyle', title: 'myStyle'});
15 | //returns element: 
16 | 
17 | 
18 | 
19 | 
20 | 
21 | 
22 | ===== Assets.image =====
23 | //Assets.image// is very similar to //Asset.css// or //.javascript//, but its goal is to preload the image, while returning an image HTML element.
24 | 
25 | new Asset.image('/images/myImage.png', {id: 'myImage', title: 'myImage', load: new myFunction});
26 | //returns element 
27 | 
28 | 
29 | Note that this doesn't actually do anything with the returned element, you'll need to use //Element.injectBefore/injectAfter/injectInside/adopt/etc// to put it somewhere:
30 | 
31 | 

32 | 
33 | new Asset.image('http://www.clientcide.com/wp-content/themes/clientsidev2/art/logo.gif', {'id': 'logoAsset', 'title': 'logo example'}).injectInside('logoExample');
34 | 
35 | 
36 | 
37 | 
38 | ===== Asset.images =====
39 | Preloads an array of images (as strings) and returns an array of img elements; does not inject them to the page.
40 | 
41 | var imgs = new Asset.images([urlOne, urlTwo, urlThree]);
42 | imgs.each(function(img){img.injectInside(document.body)});


--------------------------------------------------------------------------------
/old/save/01-chain.wait.txt:
--------------------------------------------------------------------------------
 1 | ====== Chain.Wait ======
 2 | 
 3 | [[http://www.clientcide.com/docs/Class.Extras/Chain.Wait|docs]]
 4 | 
 5 | MooTools includes the very handy [[http://www.mootorial.com/wiki/mootorial/02-class/01-class.extras#the-chain-class|Chain]] class which lets you stack up methods to fire one after the other. Here's a brief example of chaining using [[http://www.mootorial.com/wiki/mootorial/06-fx/01-fx.tween|Fx.tween]]:
 6 | 
 7 | 
 8 | document.id('fxTarget').set('tween', {
 9 | 	link: 'chain'
10 | }).tween('height', 0).tween('height', 100).tween('height', 0).tween('height', 100);
11 | 
12 | 
13 | One of the things I wanted to be able to do was something like the example above, but also introduce pauses between the instructions.
14 | 
15 | ===== Enter Chain.wait =====
16 | On it's own, this extension just adds the //wait// method to the //Chain// class:
17 | 
18 | 
19 | var myChain = new Chain();
20 | var timestamp = function(){	
21 | 	dbug.log(new Date);
22 | 	myChain.callChain();
23 | };
24 | myChain.chain(timestamp).wait(1000).chain(timestamp);
25 | myChain.callChain();
26 | //logs the current time, waits 1 second, logs again
27 | 
28 | 
29 | But in classes that use the //Chain// class (like //Fx.Tween//) it allows you to introduce pauses easily:
30 | 
31 | 
32 | new Fx.Tween('fxTarget', {
33 | 	link: 'chain',
34 | 	property: 'height'
35 | }).start(0).wait(500).start(100);
36 | //resize to 0px high, wait half a second, size back to 100
37 | 
38 | 
39 | ===== Element.pauseFx =====
40 | Because I want to use the //Element.tween// and //Element.morph// shortcuts, I need to be able to send this delay instruction on the element, so we have //Element.pauseFx//.
41 | 
42 | This method by default delays the tween method, but you can specify one (like "morph" or "reveal") if you want to delay something else.
43 | 
44 | 
45 | document.id('fxTarget').tween('height', 0).pauseFx(500).tween('height', 100);
46 | 
47 | 
48 | 
49 | 
50 | document.id('fxTarget').morph({
51 | 	height: 0, width: 0
52 | }).pauseFx(500, 'morph').morph({
53 | 	height: 100, width: 100
54 | });
55 | 


--------------------------------------------------------------------------------
/assets/codemirror/demo/runmode.html:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 |   
 4 |     CodeMirror 2: Mode Runner Demo
 5 |     
 6 |     
 7 |     
 8 |     
 9 |     
10 |     
11 |   
12 |   
13 |     
CodeMirror 2: Mode Runner Demo

14 | 
15 |     

21 |     
22 |     

23 | 
24 |     
30 | 
31 |     
Running a CodeMirror mode outside of the editor.
32 |     The CodeMirror.runMode function, defined
33 |     in lib/runmode.js takes the following arguments:

34 | 
35 |     

36 |       
text (string)

37 |       
The document to run through the highlighter.

38 |       
mode (mode spec)

39 |       
The mode to use (must be loaded as normal).

40 |       
output (function or DOM node)

41 |       
If this is a function, it will be called for each token with
42 |       two arguments, the token's text and the token's style class (may
43 |       be null for unstyled tokens). If it is a DOM node,
44 |       the tokens will be converted to span elements as in
45 |       an editor, and inserted into the node
46 |       (through innerHTML).

47 |     

48 | 
49 |   
50 | 
51 | 


--------------------------------------------------------------------------------
/old/pages/mootorial.txt:
--------------------------------------------------------------------------------
 1 | ====== A MooTools Tutorial :: The "Mootorial" ======
 2 | 
 3 | What follows is a how-to tutorial on the MooTools library and also serves as a unit test of sorts. Most of the code examples will allow you execute them by clicking on the "execute this code" link below the example. Clicking this will echo out the code and the result in the [[http://getfirebug.com|Firebug]] debugging plugin for [[http://getfirefox.com|Firefox]]. If you don't have that plugin or Firefox, a similar console should be visible at the bottom of the page. This is a poor substitute for Firebug, so I highly recommend installing both [[http://getfirefox.com|Firefox]] and [[http://getfirebug.com|Firebug]] when viewing this tutorial.
 4 | 
 5 | I've organized these pages the same way the MooTools libraries are organized. **__You can use the menu on the left to jump around from section to section__**. If you're new to MooTools I highly recommend that you start at the top and work your way down in that order.
 6 | 
 7 | 
 8 | 
 9 | 
10 | ===== MooTools Version 1.2 =====
11 | 
12 | MooTools version 1.2 is now released. This tutorial is quite specifically written for this version.
13 | 
14 | 
15 | 
16 | ===== To Err is Human, Thus, The Wiki =====
17 | 
18 | I authored the first draft of the [[http://docs.mootools.net|documentation for MooTools]] and anyone who read it will tell you that it had its share of typos and flat out errors. I wrote the docs by just reading Valerio's source code and writing down what it appeared to do. Sometimes I get it wrong.
19 | 
20 | 
21 | 
22 | I wrote this tutorial in much the same way, and it's likely to have the same kinds of issues (though hopefully not many). This is a wiki, which means that YOU can help me fix any problems that you find. If you //think// something is off, but aren't **positive**, then [[http://www.clientcide.com/shout-out/|email me]] what you think should change. If, on the other hand, you spot a typo or something that you know is incorrect, then dive in.
23 | 
24 | 
25 | 
26 | ===== Credits =====
27 | 
28 | 
29 | 
30 | writing credits: [[http://www.clientcide.com|Aaron Newton]]
31 | 
32 | (but it's a wiki, so others, even YOU, can contribute!)
33 | 
34 | 
35 | 
36 | MooTools is the brainchild of [[http://mad4milk.net|Valerio Proietti]]


--------------------------------------------------------------------------------
/old/save/02-request.queue.txt:
--------------------------------------------------------------------------------
 1 | ====== Request.Queue ======
 2 | 
 3 | [[http://www.clientcide.com/docs/Request/Request.Queue|docs]]
 4 | 
 5 | The MooTools //Request// class gives us the option to link together requests so that with a single instance of the class, if you've got a request that's running you can 'stack up' any new send requests so that they occur one after the other.
 6 | 
 7 | This is convenient, but what if you have numerous instances of //Request// or its subclasses (like //Request.HTML//) and you want to only have one request running at a time? Or only two?
 8 | 
 9 | That's basically all that Request.Queue does. It lets you register any number of instances of //Request// or its subclasses with an instance of Request.Queue and then write your code like normal. All requests to server will be queued up and fired off one or two or three at a time (you choose).
10 | 
11 | Here's an example:
12 | 
13 | 
14 |   var num1 = new Request({ url: '/wiki/simple.php', data: {num: 1, sleep: 1}, method: 'get',
15 |       onComplete: function(response){ console.log(response) } });
16 |   var num2 = new Request({ url: '/wiki/simple.php', data: {num: 2, sleep: 1}, method: 'get',
17 |       onComplete: function(response){ console.log(response) } });
18 |   var num3 = new Request({ url: '/wiki/simple.php', data: {num: 3, sleep: 1}, method: 'get',
19 |       onComplete: function(response){ console.log(response) } });
20 |   var myQueue = new Request.Queue();
21 |   //you can add them one at a time
22 |   myQueue.addRequest('num1', num1);
23 |   //or in a single call
24 |   myQueue.addRequests({ num2: num2, num3: num3 });
25 |   num1.send();
26 |   num2.send();
27 |   num3.send();
28 | 
29 | 
30 | The above example will only allow the instances of Request to run one at a time. Each one will take about a second to return to the browser and the next item will then be sent. It integrates right into the //Request// class when you register it so you don't have to really change anything.
31 | 
32 | Note that you can specify how many requests can run at a time. There are also numerous methods and options that you can use to configure things and use the class in numerous ways. I suggest you peruse the [[http://www.clientcide.com/docs/Request/Request.Queue|docs]] for all those details.


--------------------------------------------------------------------------------
/Source/00. Introduction/00. Introduction.md:
--------------------------------------------------------------------------------
 1 | Getting Started: What is MooTools?
 2 | ==================================
 3 | 
 4 | MooTools is a lightweight abstraction layer between the browser and the code you write (this is really the definition of nearly every js framework out there - Prototype, Dojo, jQuery, YUI, etc). It offers more functionality and richer tools for writing javascript, taking what has historically been painful and fraught with buggy environments (the browsers) and presenting you with a much more reliable environment. By adding it to your environment (i.e. including the script in your page) you are able to write succinct, readable, and reusable code more effectively and efficiently than without it.
 5 | 
 6 | MooTools at its core re-creates pseudo-classical inheritance with Classes that allow for extensible and reusable behaviors. Additionally, it provides its own set of classes to allow you to quickly and easily describe effects such as resizing, fading, moving, dragging, and more (ajax, json, etc). The code to make something transition from one state to another (fading, moving, resizing, etc.) is very succinct and MooTools does the rest. 
 7 | 
 8 | MooTools also provides extensive DOM tools to allow you to select elements from the document, create new elements, and alter them. There are also shortcut helper functions (like $, $type, $chk, $random, etc.) that help you with common tasks.
 9 | 
10 | With MooTools in your environment, you still write Javascript when it comes to basic syntax, but to a great extent you are NOT writing Javascript anymore; you're writing MooTools. The benefit here is that not only is the framework doing a lot of the work (and you don't run into nearly as many cross-browser issues), but if there is a bug or a change because of a new browser release, the framework can be altered without requiring you to rewrite all your code.
11 | 
12 | These levels of abstraction enable you to write far richer clientside applications.
13 | 
14 | Getting Started
15 | ---------------
16 | 
17 | Sounds great! So what do I have to do to get started? Well, for starters, you need to know javascript. MooTools isn't something you can just add to your pages and suddenly they come alive. MooTools is a javascript library and it gives you access to all these cool functions, but you still have to tell it what to do.


--------------------------------------------------------------------------------
/old/pages/mootorial/07-request/00-request.txt:
--------------------------------------------------------------------------------
 1 | ====== Request (aka Ajax) ======
 2 | 
 3 | Here is the [[http://docs.mootools.net/Request/Request|documentation for Request.js]].
 4 | 
 5 | The //Request// class is a relatively simple wrapper for the //XMLHttpRequest// object (the heart of Ajax functionality). 
 6 | 
 7 | It takes the following options:
 8 | 
 9 | 

10 | 	
url

11 | 	
The URL to request (defaults to //null//; you can use the //send// method to specify the url later).

12 | 	
method

13 | 	
The HTTP method for the request, can be either 'post' (the default) or 'get'.

14 | 	
data

15 | 	
The default data for Request:send, used when no data is given. Defaults to ''.

16 | 	
async

17 | 	
If set to //false//, the requests will be synchronous and freeze the browser during request. Defaults to //true//.

18 | 	
encoding

19 | 	
The encoding to be set in the request header. Defaults to "utf-8".

20 | 	
autoCancel

21 | 	
When set to //true//, automatically cancels the already running request if another one is sent. Otherwise, ignores any new calls while a request is in progress. Defaults to //false//.

22 | 	
headers

23 | 	
An object to use in order to set the request headers.

24 | 	
isSuccess 

25 | 	
Provide a function to override the built-in isSuccess function.

26 | 

27 | 
28 | 
29 | Then you'll need to call the //.send// method to actually initiate a request. //.send// takes two arguments, the url, and the data to send.
30 | 
31 | 
32 | new Request({method: 'get'}).send('http://site.com/requestHandler.php?name=john&lastname=doe');
33 | 
34 | 
35 | ===== Element.send =====
36 | MooTools has a "built-in" instance of //Request// that you can use to send a form with an ajax post request.
37 | 
38 | 
39 | 

40 | 	
41 | 	
42 | 

43 | 
46 | 
47 | 
48 | You can use //set// to alter the options of the "built-in" version of //Request//:
49 | 
50 | 
51 | $('myForm').set('send', {
52 | 	method: 'get'
53 | });
54 | $('myForm').send();
55 | 


--------------------------------------------------------------------------------
/old/pages/mootorial/08-plugins/03-interface/01-tips.txt:
--------------------------------------------------------------------------------
 1 | ====== Tips ======
 2 | Here is the [[http://docs.mootools.net/Plugins/Tips|documentation for Tips.js]].
 3 | 
 4 | (Tool)//Tips// are just little help popups to help users understand (possibly hidden) functionality. Not everyone knows you can drag something or double click it. //Tips// use the //title// property of an element to derive their caption and the //rel// property to retrieve their text. 
 5 | 
 6 | 
 7 | Click me!
 8 | 
 9 | 
10 | You can also use [[00-element#element-storage|Element storage]] to set the text and caption:
11 | 
12 | 
13 | $('somePageLink').store('tip:title', 'Some Page');
14 |  $('somePageLink').store('tip:text', "This is a link to 'Some Page'");
15 | 
16 | 
17 | The css for the tooltip itself is something that you can make whatever you like. The css has to be defined though, otherwise the tooltip will look really bad. Here's the css I'm using, borrowed straight from MooTools.net.
18 | 
19 | 
20 | .tip {
21 | 	color: #fff;
22 | 	width: 172px;
23 | 	z-index: 13000;
24 | }
25 | 
26 | .tip-title {
27 | 	font-weight: bold;
28 | 	font-size: 11px;
29 | 	margin: 0;
30 | 	padding: 8px 8px 4px;
31 | 	background: url(/wiki/lib/tpl/clientside/images/bubble.png) top left;
32 | }
33 | 
34 | .tip-text {
35 | 	font-size: 11px;
36 | 	padding: 4px 8px 8px;
37 | 	background: url(/wiki/lib/tpl/clientside/images/bubble.png) bottom right;
38 | }
39 | 
40 | 
41 | And here's the html:
42 | 
43 | //clientside
47 | 
48 | 
49 | 
50 | var myTips = new Tips($$('.toolTipElement'), {
51 | 	timeOut: 700,
52 | 	maxTitleChars: 50, /*I like my captions a little long*/
53 | 	maxOpacity: .9 /*let's leave a little transparancy in there */
54 | });
55 | 
56 | 
57 | //clientside


--------------------------------------------------------------------------------
/assets/codemirror/demo/preview.html:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 |   
 4 |     CodeMirror 2: HTML5 preview
 5 |     
 6 |     
 7 |     
 8 |     
 9 |     
10 |     
11 |     
12 |     
13 |     
14 |     
28 |   
29 |   
30 |     
CodeMirror 2: HTML5 preview

31 |     
53 |     
54 |     
74 |   
75 | 
76 | 


--------------------------------------------------------------------------------
/old/save/03-native/02-hash.extras.txt:
--------------------------------------------------------------------------------
 1 | ====== Hash.Extras ======
 2 | [[http://www.clientcide.com/docs/Native/Hash.Extras|docs]]
 3 | 
 4 | The [[http://www.mootorial.com/wiki/mootorial/03-native/04-hash|MooTools Hash]] is pretty powerful and complete and for the most part we wouldn't have much to add to it. We do however have two methods that we use occassionally.
 5 | 
 6 | ===== getFromPath =====
 7 | This method returns a value from an object given a path to it (a string). Example:
 8 | 
 9 | $H({
10 |     food: {
11 |         fruits: {
12 |             apples: "red",
13 |             lemon: "yellow"
14 |         }
15 |     }
16 | }).getFromPath("food.fruits.apples");
17 | //returns "red"
18 | 
19 | 
20 | ===== cleanValues ======
21 | 
22 | This method just removes any keys from the hash whose values are //undefined// or //null//. You can actually define your own logic by passing in your own method. By default, it uses //[[http://www.mootorial.com/wiki/mootorial/01-core#defined|$defined]]//. 
23 | 
24 | 
25 | var myHash = $H({
26 | 	foo: 'bar',
27 | 	something: 'else',
28 | 	missing: null
29 | });
30 | myHash.cleanValues();
31 | console.log(myHash.getKeys());
32 | 
33 | 
34 | Here I define what to clean as any integer value that is negative:
35 | 
36 | 
37 | var myHash = $H({
38 | 	a: -1,
39 | 	b: 2,
40 | 	c: 0,
41 | 	d: -5
42 | });
43 | myHash.cleanValues(function(value){
44 | 	if ($type(value) != "number") return true;
45 | 	return value >= 0;
46 | });
47 | console.log(myHash.getKeys());
48 | 
49 | 
50 | ===== run =====
51 | 
52 | This method will execute any value in the hash that is a function. Any arguments passed to //run// will be passed to each method in the hash. I use this to hold all my page initialization methods. For example:
53 | 
54 | 
55 | var MySite = {
56 | 	init: new Hash({
57 | 		setupSearch: function(){
58 | 			//set stuff up
59 | 		},
60 | 		setupMenu: function(){
61 | 			//set up menu stuff
62 | 		},
63 | 		pingGoogleAnalytics: function(){
64 | 			//ping google
65 | 		},
66 | 		etc...
67 | 	})
68 | };
69 | 
70 | window.addEvent('domready', MySite.init.run.bind(MySite.init));
71 | //same as
72 | window.addEvent('domready', function(){
73 | 	MySite.init.run();
74 | });
75 | 
76 | 
77 | This way my startup code can grow without me having to go manage both a list of functions and a startup method that calls them all. I just add a new member to the hash and it automatically gets included win the whole has is run.


--------------------------------------------------------------------------------
/assets/codemirror/mode/scheme/index.html:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 |   
 4 |     CodeMirror 2: Scheme mode
 5 |     
 6 |     
 7 |     
 8 |     
 9 |     
10 |     
11 |   
12 |   
13 |     
CodeMirror 2: Scheme mode

14 |     

58 |     
61 | 
62 |     
MIME types defined: text/x-scheme.

63 | 
64 |   
65 | 
66 | 


--------------------------------------------------------------------------------
/old/pages/mootorial/08-plugins/03-interface/00-sortables.txt:
--------------------------------------------------------------------------------
 1 | ====== Sortables ======
 2 | Here is the [[http://docs.mootools.net/Plugins/Sortables|documentation for Sortables.js]].
 3 | 
 4 | //Sortables// is another one of those deceptively simple MooTools widgets. It's pretty easy to make something sortable, but to be of any use you have to do something with the new state (like ping a back end server via ajax). It's not the most complex thing to do, but to do it will requires a bit of careful thought and good design principals. I'm not going to spend a lot of time showing you how to do sortables //well//, but rather just demonstrate the code here in its simplest state.
 5 | 
 6 | Here's the html:
 7 | 
 8 | 
    
 9 | 		
  • First
    • 
10 | 		
  • Second
    • 
11 | 		
  • Third
    • 
12 | 

13 | 
14 | 
15 | 
16 | var mySort = new Sortables($('SortableExample'), {
17 | 	clone: true,
18 | 	opacity: 0.6,
19 | 	onComplete: function(){
20 | 		console.log(mySort.serialize())
21 | 	}
22 | });
23 | 
24 | 
25 | 
33 | 
38 | 
39 | 
40 | ===== Sorting across lists =====
41 | 
42 | New in MooTools 1.2 is the ability to drag and drop items from several lists. Instead of passing in a single list item for the first argument, you give a collection:
43 | 
44 | 
45 | 
46 | var mySort = new Sortables($$('ul.multisort'), {
47 | 	clone: true,
48 | 	opacity: 0.6,
49 | 	onComplete: function(){
50 | 		console.log(mySort.serialize())
51 | 	}
52 | });
53 | 
54 | 
55 | 
67 | 
72 | 
77 | 
82 | 

83 | 
84 | 


--------------------------------------------------------------------------------
/assets/codemirror/mode/r/index.html:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 |   
 4 |     CodeMirror 2: R mode
 5 |     
 6 |     
 7 |     
 8 |     
 9 |     
15 |     
16 |   
17 |   
18 |     
CodeMirror 2: R mode

19 |     

62 |     
65 | 
66 |     
MIME types defined: text/x-rsrc.

67 | 
68 |     
Development of the CodeMirror R mode was kindly sponsored
69 |     by Ubalo, who hold
70 |     the license.

71 | 
72 |   
73 | 
74 | 


--------------------------------------------------------------------------------
/Source/05. Elements/25. Traversing the DOM.md:
--------------------------------------------------------------------------------
 1 | Traversing the DOM
 2 | ------------------
 3 | 
 4 | ===== Element.getNext, .getPrevious, .getFirst, .getLast =====
 5 | These all get neighboring elements relative to the one you apply this method do.
 6 | 
 7 | Here's the html in the example below:
 8 | 
 9 | 
    
10 | 	
  • first
    • 
11 | 	
  • second
    • 
12 | 	
  • third
    • 
13 | 

14 | 
15 | 
16 | 
21 | 
22 | $('secondLI').getNext(); //third li
23 | 
24 | 
25 | $('secondLI').getPrevious(); //first li
26 | 
27 | 
28 | $('getSiblingExamples').getFirst(); //first li
29 | 
30 | 
31 | $('getSiblingExamples').getLast(); //third li
32 | 
33 | 
34 | All of these methods can take selectors, too:
35 | 
36 | 
37 | 

38 | 	
first

39 | 	
second

40 | 	third
41 | 

42 | 
43 | 

44 | 	
first

45 | 	
second

46 | 	third
47 | 

48 | 
49 | 
50 | $('firstSibling').getNext('b'); //b#thirdSibling
51 | 
52 | 
53 | ===== Element.getParent, .getChildren =====
54 | //.getParent// is really just a wrapper for //$(element.parentNode);// which returns the parent node with all the MooTools element extensions applied to it. //.getChildren// is the same as //element.childNodes//, with each also wrapped with the MooTools element extensions.
55 | 
56 | 
57 | $('secondLI').getParent() //gets ul element
58 | 
59 | 
60 | $('getSiblingExamples').getChildren() //gets all the list items
61 | 
62 | 
63 | However, you can also specify a selector when you use these methods which will return only those that match. When used with //getParent// the element's parent will be inspected for a match on the selector, and if it doesn't match, then the element's parent's parent will be inspected and so on up the dom. For children, only direct children will be inspected.
64 | 
65 | 
66 | $('secondLI').getParent('div') //get the first parent that's a div
67 | 
68 | 
69 | $('getSiblingExample2').getChildren('b'); //only the bold tags
70 | 
71 | 


--------------------------------------------------------------------------------
/old/save/03-native/01-date.extras.txt:
--------------------------------------------------------------------------------
 1 | ====== Date.Extras ======
 2 | 
 3 | [[http://www.clientcide.com/docs/Native/Date.Extras|docs]]
 4 | 
 5 | //date.extras.js// just adds some more functionality to the //date.js// extensions to the //Date// native. They are split up so that if you have something simple to implement that you want to keep the code small (like our [[01-cms-and-form-helpers#date.picker.js|Date Picker]], you can only include the basic //date.js//.
 6 | 
 7 | Here's what you get with //date.extras.js//:
 8 | 
 9 | 
10 | ===== Date.timeDiffInWords =====
11 | 
12 | var example = new Date();
13 | console.log(example.timeDiffInWords()); /* "less than a minute ago" */
14 | example.decrement('hour');
15 | console.log(example.timeDiffInWords()); /* "about an hour ago" */
16 | example.increment('hour', 2);
17 | console.log(example.timeDiffInWords()); /* "about an hour from now" */
18 | 
19 | 
20 | 
21 | ===== Date.getOrdinal =====
22 | Returns the ordinal for the day ("th", "nd", etc).
23 | 
24 | 
25 | new Date().getOrdinal();
26 | 
27 | 
28 | ===== Date.getDayOfYear =====
29 | Returns the day of the year (so Dec 31 is 365 unless it's leap year).
30 | 
31 | 
32 | Date.parse("12.31.1999").getDayOfYear(); //365
33 | 
34 | 
35 | ===== Date.getLastDayOfMonth =====
36 | So for Dec you'd get 31.
37 | 
38 | 
39 | var dec = new Date();
40 | dec.setMonth(11);
41 | dec.getLastDayOfMonth(); //31
42 | 
43 | 
44 | ===== Date.getWeek =====
45 | Returns what week you're in of the year, so Dec 31 will return 52.
46 | 
47 | 
48 | Date.parse("12.31.1999").getWeek(); //52
49 | 
50 | 
51 | 
52 | ===== Additional Parsers =====
53 | The biggest thing you get with //date.extras.js// is a whole bunch of parsers. //date.js// just includes the basics ("12/31/1999" and "12/31/1999 11:59pm"), while //date.extras.js// includes another ten.
54 | 
55 | 
56 | Date.parse('1999-12-31 23:59:59')
57 | 
58 | 
59 | Date.parse('1999-12-31T23:59:59+0200')
60 | 
61 | 
62 | Date.parse('today')
63 | 
64 | 
65 | Date.parse('tomorrow')
66 | 
67 | 
68 | Date.parse('yesterday')
69 | 
70 | 
71 | Date.parse('next monday')
72 | 
73 | 
74 | Date.parse('1st')
75 | 
76 | 
77 | Date.parse('14th October')
78 | 
79 | 
80 | Date.parse('24th May, 2007')
81 | 
82 | 
83 | Date.parse('May 3rd 2006')
84 | 


--------------------------------------------------------------------------------
/old/pages/mootorial/04-element/03-element.dimensions.txt:
--------------------------------------------------------------------------------
 1 | ====== Element.Dimensions ======
 2 | This file contains all the logic needed to figure out the size of things and a few helpers like //.scrollTo//.
 3 | 
 4 | 
 5 | ===== Element.scrollTo =====
 6 | Scrolls an element to the coordinates you specify; note that this isn't a smooth transition; it just jumps to that location.
 7 | 
 8 | 	

 9 | 	1

10 | 	2

11 | 	3

12 | 	4

13 | 	5

14 | 	6

15 | 	7

16 | 	8

17 | 	9

18 | 	10

19 | 	11

20 | 	12

21 | 	13

22 | 	14

23 | 	15

24 | 	16

25 | 	17

26 | 	18

27 | 	19

28 | 	20

29 | 	

30 | 
31 | $('scrollExample').scrollTo(0, 30); //jump 30px down
32 | 
33 | ===== Element.getSize =====
34 | 
Returns an object with x/y definitions for size (width/height).

35 | 
36 | $('getSizeExample').getSize();
37 | //returns something like:
38 | //{
39 | //	x=660,
40 | //  y=44
41 | //}
42 | 
43 | 
44 | ===== Element.getScrollSize =====
45 | Returns an object with x/y definitions for scroll size (the total width/height that an element can scroll).
46 | 
47 | $('scrollExample').getSize();
48 | //returns something like:
49 | //{
50 | //	x=660,
51 | //  y=44
52 | //}
53 | 
54 | 
55 | ===== Element.getScroll =====
56 | Returns an object with x/y definitions for scroll position (the scroll offset for the top and left).
57 | 
58 | $('scrollExample').getScroll();
59 | //returns something like:
60 | //{
61 | //	x=0,
62 | //  y=20 (whatever the scroll offset is above)
63 | //}
64 | 
65 | 
66 | 
67 | ===== Element.getPosition =====
68 | 
Returns an object with the offsetLeft and offsetTop as x and y properties:

69 | 
70 | $('positionExample').getPosition();
71 | //returns something like {x:20, y:570} 
72 | 
73 | 
74 | ===== Element.getCoordinates =====
75 | 
Returns an object with definitions for width, height, left and top:

76 | 
77 | $('getCoordinatesExample').getCoordinates ();
78 | //returns something like:
79 | //{
80 | //	width:660,
81 | //	height:37,
82 | //	left:20,
83 | //	right:680,
84 | //	top:13033
85 | //}
86 | 
87 | 
88 | ===== Deprecated Methods =====
89 |    * //Element.getSize// previously returned an object with scroll, size, and scroll position, so this has changed dramatically
90 | 	 * //Element.getTop// and //getLeft// are replaced by //Element.getPosition//


--------------------------------------------------------------------------------
/old/pages/mootorial/08-plugins/00-fxplugins/00-fx.slide.txt:
--------------------------------------------------------------------------------
 1 | ====== Fx.Slide ======
 2 | Here is the [[http://docs.mootools.net/Plugins/Fx/Fx.Slide|documentation for Fx.Slide.js]].
 3 | 
 4 | The slide slides an element in horizontally or vertically, the contents will fold inside. Extends //[[00-fx|Fx]]//, inherits all its properties.
 5 | 
 6 | Think of this like an old school cash register. When you punch the keys, the value slides into view. Currently the only two directions are sliding in from the top (like a window shade) and in from the left.
 7 | 
 8 | Options:
 9 | 
10 | 

11 | 	
mode

12 | 	
set it to vertical or horizontal. Defaults to vertical.

13 | 	
and all the Fx options

14 | 

15 | 
16 | 
17 | Here's a box with a box in it that we'll slide around:
18 | 

19 | 	

20 | 

21 | 
22 | 
23 | 
28 | First, we have to create the slider object: (note that I've already executed this code for you).
29 | 
30 | var mySlider = new Fx.Slide('sliderButton', {duration: 500});
31 | 
32 | Then we can play with it:
33 | 
34 | mySlider.toggle() //toggle the slider up and down.
35 | 
36 | 
37 | mySlider.slideIn()
38 | 
39 | 
40 | mySlider.slideOut()
41 | 
42 | 
43 | mySlider.hide() //hides the element without a transition
44 | 
45 | 
46 | mySlider.show() //shows the element without a transition
47 | 
48 | 
49 | 
50 | 
51 | ===== A Better Example =====
52 | 
53 | Here's how you might actually use it in the real world:
54 | 
Show some stuff

55 | 		I'm a bunch of text that toggles up and down when you click the text above me.
56 | 		I'm a bunch of text that toggles up and down when you click the text above me.
57 | 		I'm a bunch of text that toggles up and down when you click the text above me.
58 | 		I'm a bunch of text that toggles up and down when you click the text above me.
59 | 	

60 | 

61 | 
62 | 
63 | Note that there's an element shortcut for the "built-in" version of //Fx.Slide//:
64 | 
65 | $('slider2').addEvent('click', function(){
66 |   $('slider2Content').slide('toggle');
67 | });
68 | 


--------------------------------------------------------------------------------
/Source/05. Elements/61. Measuring Elements.md:
--------------------------------------------------------------------------------
 1 | Measuring Elements
 2 | ------------------
 3 | 
 4 | ====== Element.Dimensions ======
 5 | This file contains all the logic needed to figure out the size of things and a few helpers like //.scrollTo//.
 6 | 
 7 | 
 8 | ===== Element.scrollTo =====
 9 | Scrolls an element to the coordinates you specify; note that this isn't a smooth transition; it just jumps to that location.
10 | 
11 | 	

12 | 	1

13 | 	2

14 | 	3

15 | 	4

16 | 	5

17 | 	6

18 | 	7

19 | 	8

20 | 	9

21 | 	10

22 | 	11

23 | 	12

24 | 	13

25 | 	14

26 | 	15

27 | 	16

28 | 	17

29 | 	18

30 | 	19

31 | 	20

32 | 	

33 | 
34 | $('scrollExample').scrollTo(0, 30); //jump 30px down
35 | 
36 | ===== Element.getSize =====
37 | 
Returns an object with x/y definitions for size (width/height).

38 | 
39 | $('getSizeExample').getSize();
40 | //returns something like:
41 | //{
42 | //	x=660,
43 | //  y=44
44 | //}
45 | 
46 | 
47 | ===== Element.getScrollSize =====
48 | Returns an object with x/y definitions for scroll size (the total width/height that an element can scroll).
49 | 
50 | $('scrollExample').getSize();
51 | //returns something like:
52 | //{
53 | //	x=660,
54 | //  y=44
55 | //}
56 | 
57 | 
58 | ===== Element.getScroll =====
59 | Returns an object with x/y definitions for scroll position (the scroll offset for the top and left).
60 | 
61 | $('scrollExample').getScroll();
62 | //returns something like:
63 | //{
64 | //	x=0,
65 | //  y=20 (whatever the scroll offset is above)
66 | //}
67 | 
68 | 
69 | 
70 | ===== Element.getPosition =====
71 | 
Returns an object with the offsetLeft and offsetTop as x and y properties:

72 | 
73 | $('positionExample').getPosition();
74 | //returns something like {x:20, y:570} 
75 | 
76 | 
77 | ===== Element.getCoordinates =====
78 | 
Returns an object with definitions for width, height, left and top:

79 | 
80 | $('getCoordinatesExample').getCoordinates ();
81 | //returns something like:
82 | //{
83 | //	width:660,
84 | //	height:37,
85 | //	left:20,
86 | //	right:680,
87 | //	top:13033
88 | //}
89 | 
90 | 
91 | ===== Deprecated Methods =====
92 |    * //Element.getSize// previously returned an object with scroll, size, and scroll position, so this has changed dramatically
93 | 	 * //Element.getTop// and //getLeft// are replaced by //Element.getPosition//


--------------------------------------------------------------------------------
/old/pages/mootorial/08-plugins/01-drag/01-drag.move.txt:
--------------------------------------------------------------------------------
 1 | ====== Drag.Move ======
 2 | Here is the [[http://mootools.net/docs/more/Drag/Drag.Move|documentation for Drag.Move.js]].
 3 | 
 4 | //Drag.Move// extends //[[00-drag|Drag]]// to support moving an element around the page. 
 5 | 
 6 | The usage is pretty straight forward:
 7 | 
 8 | 
 9 | new Drag.Move($('fxTarget'));
10 | 
11 | 
12 | It takes all the options that //Drag// takes and adds two new ones:
13 | 
14 | 

15 | 	
container

16 | 	
(element) If an Element is passed, drag will be limited to the passed Element's size and position.

17 | 	
droppables

18 | 	
(array) The Elements that the draggable can drop into. The class's drop, enter, and leave events will be fired in conjunction with interaction with one of these elements.

19 | 

20 | 
21 | 
22 | ==== Element.makeDraggable() ====
23 | //Element// has a shortcut that's really about the same number of characters (actually, it's one more), so it's not much of a shortcut. Still, it's easy enough to use:
24 | 
25 | 
26 | $('fxTarget').makeDraggable();
27 | 
28 | 
29 | That's it. You're done. Now, if you want to do things like capture the location of the object when the user drops it (and then maybe send that info back to the server via ajax so you can remember its location for another visit), you can specify a bunch of additional options.
30 | 
31 | 
32 | $('fxTarget').makeDraggable({
33 | 	onStart: function() {
34 | 		console.log("start left: %s, top: %s", this.getLeft(), this.getTop());
35 | 	}.bind($('fxTarget')),
36 | 	onDrag: function() {
37 | 		console.log("drag start left: %s, top: %s", this.getLeft(), this.getTop());
38 | 	}.bind($('fxTarget'))
39 | });
40 | 	
41 | 
42 | There's more stuff you can add here like snapping, and container so that you can drag an element only within the confines of another. Snap let's you require the user to drag the element a certain distance before it starts to follow the mouse (the default is 6px).
43 | 
44 | 
45 | $('dragExample').makeDraggable({
46 | 	snap: 25,
47 | 	container: 'snapContainer'
48 | });
49 | 
50 | 
51 | 

52 | 	

53 | 

54 | 
55 | If you want to keep a handle on the instance of the //Drag.Move// class so you can interact with it (for instance, to disable dragging at a later point), you can do so with either syntax:
56 | 
57 | 
58 | var myDraggable = new Drag.Move($(element), {options...});
59 | var myDraggable = $(element).makeDraggable({options...});
60 | 
61 | 


--------------------------------------------------------------------------------
/assets/codemirror/mode/xmlpure/index.html:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 |   
 4 |     CodeMirror 2: Pure XML mode
 5 |     
 6 |     
 7 |     
 8 |     
 9 |     
10 |     
11 |   
12 |   
13 |     
CodeMirror 2: XML mode

14 |     

31 |     
34 | 
35 |     
This is my XML parser, based on the original:
 
36 |      
44 |  
45 |     
What's missing:
 
46 |      
51 |  
52 |     
MIME types defined: application/xml, text/xml.
 
53 |  
54 |     
@author: Dror BG (deebug dot dev at gmail dot com)
 
55 |     
@date: August, 2011
 
56 |     
@github: https://github.com/deebugger/CodeMirror2

57 | 
58 |     
MIME types defined: application/xml, text/xml.

59 |   
60 | 
61 | 


--------------------------------------------------------------------------------
/assets/codemirror/demo/complete.html:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 |   
 4 |     CodeMirror 2: Autocomplete Demo
 5 |     
 6 |     
 7 |     
 8 |     
 9 |     
10 | 
11 |     
32 |   
33 |   
34 |     
CodeMirror 2: Autocomplete demo

35 | 
36 |     

73 | 
74 | 
Press ctrl-space to activate autocompletion. See
75 | the code to figure out how it works.

76 | 
77 |     
78 |   
79 | 
80 | 


--------------------------------------------------------------------------------
/old/pages/mootorial/08-plugins/03-interface/03-slider.txt:
--------------------------------------------------------------------------------
 1 | ====== Slider ======
 2 | Here is the [[http://docs.mootools.net/Plugins/Slider|documentation for Slider.js]].
 3 | 
 4 | Sliders are pretty common interfaces these days and MooTools has the hookup to make these things easily. At its heart, a slider is just a draggable element limited to a plane (horizontal or vertical) that provides data based on the distance it's been moved.
 5 | 
 6 | Here's a simple slider (you need to execute the code block below for this to actually be interactive):
 7 | 

 8 | 	

 9 | 

10 | 
XX

11 | 
12 | 
25 | 
26 | var mySlide = new Slider($('area'), $('knob'), {
27 | 	onChange: function(pos){
28 | 	$('upd').set('html', pos);
29 | 	}
30 | }).set(0);
31 | 
32 | 
33 | 
34 | The //Slider// class takes the following options when you instantiate it:
35 | **Arguments:**
36 | 
37 | 

38 | 	
element
the knob container

39 | 	
knob
the handle

40 | 	
options
see Options below

41 | 

42 | 
43 | **Options:**
44 | 
45 | 

46 | 	
onChange
a function to fire when the value changes.

47 | 	
onComplete
a function to fire when you're done dragging.

48 | 	
onTick
optionally, you can alter the onTick behavior, for example displaying an effect of the knob moving to the desired position. onTick executes the funciton you specify and passes as parameter the new position.

49 | 	
steps
the number of steps for your slider.

50 | 	
mode
either 'horizontal' or 'vertical'. defaults to horizontal.

51 | 

52 | 
53 | 
54 | 
55 | 
56 | 
57 | 
58 | ==== Slider Example 2 ====
59 | 
60 | A nicer looking, 10-step slider:
61 | 
62 | 
63 | 

64 | 	

65 | 

66 | 
67 | 
XX

68 | 
69 | 
70 | 
84 | 
85 | 
86 | 
87 | var mySlide2 = new Slider($('area2'), $('knob2'), {
88 | 	onChange: function(pos){
89 | 		$('upd2').set('html', pos);
90 | 	},
91 | 	steps: 10
92 | }).set(4);
93 | 
94 | 


--------------------------------------------------------------------------------
/assets/codemirror/mode/javascript/index.html:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 |   
 4 |     CodeMirror 2: JavaScript mode
 5 |     
 6 |     
 7 |     
 8 |     
 9 |     
10 |     
11 |   
12 |   
13 |     
CodeMirror 2: JavaScript mode

14 | 
15 | 

64 | 
65 |     
71 | 
72 |     
JavaScript mode supports a single configuration
73 |     option, json, which will set the mode to expect JSON
74 |     data rather than a JavaScript program.

75 | 
76 |     
MIME types defined: text/javascript, application/json.

77 |   
78 | 
79 | 


--------------------------------------------------------------------------------
/assets/codemirror/css/docs.css:
--------------------------------------------------------------------------------
  1 | body {
  2 |   font-family: Droid Sans, Arial, sans-serif;
  3 |   line-height: 1.5;
  4 |   max-width: 64.3em;
  5 |   margin: 3em auto;
  6 |   padding: 0 1em;
  7 | }
  8 | 
  9 | h1 {
 10 |   letter-spacing: -3px;
 11 |   font-size: 3.23em;
 12 |   font-weight: bold;
 13 |   margin: 0;
 14 | }
 15 | 
 16 | h2 {
 17 |   font-size: 1.23em;
 18 |   font-weight: bold;
 19 |   margin: .5em 0;
 20 |   letter-spacing: -1px;
 21 | }
 22 | 
 23 | h3 {
 24 |   font-size: 1em;
 25 |   font-weight: bold;
 26 |   margin: .4em 0;
 27 | }
 28 | 
 29 | pre {
 30 |   background-color: #eee;
 31 |   -moz-border-radius: 6px;
 32 |   -webkit-border-radius: 6px;
 33 |   border-radius: 6px;
 34 |   padding: 1em;
 35 | }
 36 | 
 37 | pre.code {
 38 |   margin: 0 1em;
 39 | }
 40 | 
 41 | .grey {
 42 |   font-size: 2.2em;
 43 |   padding: .5em 1em;
 44 |   line-height: 1.2em;
 45 |   margin-top: .5em;
 46 |   position: relative;
 47 | }
 48 | 
 49 | img.logo {
 50 |   position: absolute;
 51 |   right: -25px;
 52 |   bottom: 4px;
 53 | }
 54 | 
 55 | a:link, a:visited, .quasilink {
 56 |   color: #df0019;
 57 |   cursor: pointer;
 58 |   text-decoration: none;
 59 | }
 60 | 
 61 | a:hover, .quasilink:hover {
 62 |   color: #800004;
 63 | }
 64 | 
 65 | h1 a:link, h1 a:visited, h1 a:hover {
 66 |   color: black;
 67 | }
 68 | 
 69 | ul {
 70 |   margin: 0;
 71 |   padding-left: 1.2em;
 72 | }
 73 | 
 74 | a.download {
 75 |   color: white;
 76 |   background-color: #df0019;
 77 |   width: 100%;
 78 |   display: block;
 79 |   text-align: center;
 80 |   font-size: 1.23em;
 81 |   font-weight: bold;
 82 |   text-decoration: none;
 83 |   -moz-border-radius: 6px;
 84 |   -webkit-border-radius: 6px;
 85 |   border-radius: 6px;
 86 |   padding: .5em 0;
 87 |   margin-bottom: 1em;
 88 | }
 89 | 
 90 | a.download:hover {
 91 |   background-color: #bb0010;
 92 | }
 93 | 
 94 | .rel {
 95 |   margin-bottom: 0;
 96 | }
 97 | 
 98 | .rel-note {
 99 |   color: #777;
100 |   font-size: .9em;
101 |   margin-top: .1em;
102 | }
103 | 
104 | .logo-braces {
105 |   color: #df0019;
106 |   position: relative;
107 |   top: -4px;
108 | }
109 | 
110 | .blk {
111 |   float: left;
112 | }
113 | 
114 | .left {
115 |   width: 37em;
116 |   padding-right: 6.53em;
117 |   padding-bottom: 1em;
118 | }
119 | 
120 | .left1 {
121 |   width: 15.24em;
122 |   padding-right: 6.45em;
123 | }
124 | 
125 | .left2 {
126 |   width: 15.24em;
127 | }
128 | 
129 | .right {
130 |   width: 20.68em;
131 | }
132 | 
133 | .leftbig {
134 |   width: 42.44em;
135 |   padding-right: 6.53em;
136 | }
137 | 
138 | .rightsmall {
139 |   width: 15.24em;
140 | }
141 | 
142 | .clear:after {
143 |   visibility: hidden;
144 |   display: block;
145 |   font-size: 0;
146 |   content: " ";
147 |   clear: both;
148 |   height: 0;
149 | }
150 | .clear { display: inline-block; }
151 | /* start commented backslash hack \*/
152 | * html .clear { height: 1%; }
153 | .clear { display: block; }
154 | /* close commented backslash hack */
155 | 


--------------------------------------------------------------------------------
/assets/codemirror/demo/activeline.html:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 |   
 4 |     CodeMirror 2: Active Line Demo
 5 |     
 6 |     
 7 |     
 8 |     
 9 |     
10 | 
11 |     
15 |   
16 |   
17 |     
CodeMirror 2: Active Line Demo

18 | 
19 |     

56 | 
57 |     
68 | 
69 |     
Styling the current cursor line.

70 | 
71 |   
72 | 
73 | 


--------------------------------------------------------------------------------
/assets/codemirror/mode/htmlmixed/htmlmixed.js:
--------------------------------------------------------------------------------
 1 | CodeMirror.defineMode("htmlmixed", function(config, parserConfig) {
 2 |   var htmlMode = CodeMirror.getMode(config, {name: "xml", htmlMode: true});
 3 |   var jsMode = CodeMirror.getMode(config, "javascript");
 4 |   var cssMode = CodeMirror.getMode(config, "css");
 5 | 
 6 |   function html(stream, state) {
 7 |     var style = htmlMode.token(stream, state.htmlState);
 8 |     if (style == "tag" && stream.current() == ">" && state.htmlState.context) {
 9 |       if (/^script$/i.test(state.htmlState.context.tagName)) {
10 |         state.token = javascript;
11 |         state.localState = jsMode.startState(htmlMode.indent(state.htmlState, ""));
12 |         state.mode = "javascript";
13 |       }
14 |       else if (/^style$/i.test(state.htmlState.context.tagName)) {
15 |         state.token = css;
16 |         state.localState = cssMode.startState(htmlMode.indent(state.htmlState, ""));
17 |         state.mode = "css";
18 |       }
19 |     }
20 |     return style;
21 |   }
22 |   function maybeBackup(stream, pat, style) {
23 |     var cur = stream.current();
24 |     var close = cur.search(pat);
25 |     if (close > -1) stream.backUp(cur.length - close);
26 |     return style;
27 |   }
28 |   function javascript(stream, state) {
29 |     if (stream.match(/^<\/\s*script\s*>/i, false)) {
30 |       state.token = html;
31 |       state.curState = null;
32 |       state.mode = "html";
33 |       return html(stream, state);
34 |     }
35 |     return maybeBackup(stream, /<\/\s*script\s*>/,
36 |                        jsMode.token(stream, state.localState));
37 |   }
38 |   function css(stream, state) {
39 |     if (stream.match(/^<\/\s*style\s*>/i, false)) {
40 |       state.token = html;
41 |       state.localState = null;
42 |       state.mode = "html";
43 |       return html(stream, state);
44 |     }
45 |     return maybeBackup(stream, /<\/\s*style\s*>/,
46 |                        cssMode.token(stream, state.localState));
47 |   }
48 | 
49 |   return {
50 |     startState: function() {
51 |       var state = htmlMode.startState();
52 |       return {token: html, localState: null, mode: "html", htmlState: state};
53 |     },
54 | 
55 |     copyState: function(state) {
56 |       if (state.localState)
57 |         var local = CodeMirror.copyState(state.token == css ? cssMode : jsMode, state.localState);
58 |       return {token: state.token, localState: local, mode: state.mode,
59 |               htmlState: CodeMirror.copyState(htmlMode, state.htmlState)};
60 |     },
61 | 
62 |     token: function(stream, state) {
63 |       return state.token(stream, state);
64 |     },
65 | 
66 |     indent: function(state, textAfter) {
67 |       if (state.token == html || /^\s*<\//.test(textAfter))
68 |         return htmlMode.indent(state.htmlState, textAfter);
69 |       else if (state.token == javascript)
70 |         return jsMode.indent(state.localState, textAfter);
71 |       else
72 |         return cssMode.indent(state.localState, textAfter);
73 |     },
74 | 
75 |     electricChars: "/{}:"
76 |   }
77 | });
78 | 
79 | CodeMirror.defineMIME("text/html", "htmlmixed");
80 | 


--------------------------------------------------------------------------------
/assets/codemirror/mode/yaml/yaml.js:
--------------------------------------------------------------------------------
 1 | CodeMirror.defineMode("yaml", function() {
 2 | 	
 3 | 	var cons = ['true', 'false', 'on', 'off', 'yes', 'no'];
 4 | 	var keywordRegex = new RegExp("\\b(("+cons.join(")|(")+"))$", 'i');
 5 | 	
 6 | 	return {
 7 | 		token: function(stream, state) {
 8 | 			var ch = stream.peek();
 9 | 			var esc = state.escaped;
10 | 			state.escaped = false;
11 | 			/* comments */
12 | 			if (ch == "#") { stream.skipToEnd(); return "comment"; }
13 | 			if (state.literal && stream.indentation() > state.keyCol) {
14 | 				stream.skipToEnd(); return "string";
15 | 			} else if (state.literal) { state.literal = false; }
16 | 			if (stream.sol()) {
17 | 				state.keyCol = 0;
18 | 				state.pair = false;
19 | 				state.pairStart = false;
20 | 				/* document start */
21 | 				if(stream.match(/---/)) { return "def"; }
22 | 				/* document end */
23 | 				if (stream.match(/\.\.\./)) { return "def"; }
24 | 				/* array list item */
25 | 				if (stream.match(/\s*-\s+/)) { return 'meta'; }
26 | 			}
27 | 			/* pairs (associative arrays) -> key */
28 | 			if (!state.pair && stream.match(/^\s*([a-z0-9\._-])+(?=\s*:)/i)) {
29 | 				state.pair = true;
30 | 				state.keyCol = stream.indentation();
31 | 				return "atom";
32 | 			}
33 | 			if (state.pair && stream.match(/^:\s*/)) { state.pairStart = true; return 'meta'; }
34 | 			
35 | 			/* inline pairs/lists */
36 | 			if (stream.match(/^(\{|\}|\[|\])/)) {
37 | 				if (ch == '{')
38 | 					state.inlinePairs++;
39 | 				else if (ch == '}')
40 | 					state.inlinePairs--;
41 | 				else if (ch == '[')
42 | 					state.inlineList++;
43 | 				else
44 | 					state.inlineList--;
45 | 				return 'meta';
46 | 			}
47 | 			
48 | 			/* list seperator */
49 | 			if (state.inlineList > 0 && !esc && ch == ',') {
50 | 				stream.next();
51 | 				return 'meta';
52 | 			}
53 | 			/* pairs seperator */
54 | 			if (state.inlinePairs > 0 && !esc && ch == ',') {
55 | 				state.keyCol = 0;
56 | 				state.pair = false;
57 | 				state.pairStart = false;
58 | 				stream.next();
59 | 				return 'meta';
60 | 			}
61 | 			
62 | 			/* start of value of a pair */
63 | 			if (state.pairStart) {
64 | 				/* block literals */
65 | 				if (stream.match(/^\s*(\||\>)\s*/)) { state.literal = true; return 'meta'; };
66 | 				/* references */
67 | 				if (stream.match(/^\s*(\&|\*)[a-z0-9\._-]+\b/i)) { return 'variable-2'; }
68 | 				/* numbers */
69 | 				if (state.inlinePairs == 0 && stream.match(/^\s*-?[0-9\.\,]+\s?$/)) { return 'number'; }
70 | 				if (state.inlinePairs > 0 && stream.match(/^\s*-?[0-9\.\,]+\s?(?=(,|}))/)) { return 'number'; }
71 | 				/* keywords */
72 | 				if (stream.match(keywordRegex)) { return 'keyword'; }
73 | 			}
74 | 
75 | 			/* nothing found, continue */
76 | 			state.pairStart = false;
77 | 			state.escaped = (ch == '\\');
78 | 			stream.next();
79 | 			return null;
80 | 		},
81 | 		startState: function() {
82 | 			return {
83 | 				pair: false,
84 | 				pairStart: false,
85 | 				keyCol: 0,
86 | 				inlinePairs: 0,
87 | 				inlineList: 0,
88 | 				literal: false,
89 | 				escaped: false
90 | 			};
91 | 		}
92 | 	};
93 | });
94 | 
95 | CodeMirror.defineMIME("text/x-yaml", "yaml");
96 | 


--------------------------------------------------------------------------------
/old/save/05-overtext.txt:
--------------------------------------------------------------------------------
 1 | ====== OverText ======
 2 | 
 3 | [[http://www.mootools.net/docs/more/Forms/OverText|docs]]
 4 | 
 5 | //OverText// is a class that lets you overlay instructions above an input. You can accomplish a similar effecty by setting the value of the input as the instruction and then resetting the value when the user clicks into the input, but this method has three downsides: the instruction might get submitted by the form, you can't style the instruction text differently, if you're using a clientside form validator like //FormValidator.js// then the value will fail validation.
 6 | 
 7 | So //OverText// places a new DOM element above the input and hides it and shows it when there clicks in and out of an empty input:
 8 | 
 9 | Here's the html I'm using: 
10 | 
11 | label.overTxtLabel {
12 | 	font-weight: bold;
13 | 	font-family: arial, helvetica, verdana;
14 | 	font-size: 12px;
15 | 	color: #999;
16 | }
17 | 
18 | 
19 | 
20 | 
21 | 
22 | 
30 | 
31 | 
32 | 
33 | new OverText($$('#overTextTest'));
34 | 
35 | 
36 | ===== .reposition / .repositionAll =====
37 | You can use the //.reposition// method to have the class re-calculate the desired location and visibility for an input's //OverText// on demand. Use //.repositionAll// to have it perform this for all the inputs it manages.
38 | 
39 | 
40 | myOverText.reposition(myInput); //reassert a single input's text element
41 | myOverText.repositionAll(); //reassert all text elements the controlled by the class
42 | 
43 | 
44 | ===== Polling =====
45 | With some inputs (especially username/password inputs) the content of the input can change without the user's interaction. //OverText// monitors the focus, blur, and change events to show and hide it's text elements, but if the browser fills in the password, these events are not activated.
46 | 
47 | You can instruct OverText to poll the inputs regularly looking for values. This introduces a minimal overhead into your page, so it's not on by default.
48 | 
49 | 
50 | new OverText($$('input'), {
51 | 	poll: true,
52 | 	pollInterval: 400 //this is the default
53 | });
54 | 
55 | 
56 | ==== .start/stopPolling ====
57 | You can also start and stop polling manually:
58 | 
59 | 
60 | myOverText.startPolling();
61 | myOverText.stopPolling();
62 | 
63 | 
64 | ===== OverText.update =====
65 | This static method on the //OverText// namespace will execute the //repositionAll// method on all instances of //OverText// that are running. This is useful if something occurs that has rearranged your document dramatically.
66 | 
67 | 
68 | var myOverText_1 = new OverText(...);
69 | var myOverText_2 = new OverText(...);
70 | //...later
71 | OverText.update(); //updates all the instances of OverText
72 | 


--------------------------------------------------------------------------------
/old/save/05.3-fupdate.prompt.txt:
--------------------------------------------------------------------------------
 1 | ====== Fupdate.Prompt ======
 2 | 
 3 | [[http://www.clientcide.com/docs/Forms/Fupdate.Prompt|docs]]
 4 | 
 5 | These classes pick up where [[05.1-fupdate|Fupdate]] and [[05.2-fupdate.append|Fupdate.append]] leave off and do pretty much the same thing. The difference here is that the form is displayed to the user in a prompt.
 6 | 
 7 | In this first example, the form is the same as the example for //Fupdate//, only I've hidden it (//display:none//) and then passed it to //Fupdate.Prompt// so that it'll be used in the popup.
 8 | 
 9 | 
10 | 

11 | 	

12 | 		
13 | 		
14 | 	

15 | 

16 | 
19 | 
24 | 
25 | 
26 | 
27 | new Fupdate.Prompt(document.id('fupdateForm'), document.id('fupdateReply'), {
28 | 	stickyWinOptions: {
29 | 		/* this just updates the location
30 | 		   of the text over the input */
31 | 		onDisplay: OverText.update
32 | 	}
33 | }).prompt();
34 | 
35 | 
36 | ===== Fupdate.Append.Prompt =====
37 | 
38 | This does the same thing as //Fupdate.Append//, except, as with //Fupdate.Prompt// the form is displayed in a popup.
39 | 
40 | 
41 | 

42 | 	

43 | 		
44 | 		
45 | 	

46 | 

47 | 
50 | 
51 | 
52 | 
53 | new Fupdate.Append.Prompt(document.id('fupdateAppendForm'), document.id('fupdateAppendReply'), {
54 | 	stickyWinOptions: {
55 | 		/* this just updates the location
56 | 		   of the text over the input */
57 | 		onDisplay: OverText.update
58 | 	},
59 | 	inject:'top'
60 | }).prompt();
61 | 
62 | 
63 | ===== Fupdate.AjaxPrompt =====
64 | 
65 | Finally, we have two classes that do the same as the classes above, except they fetch their form data from the server instead of the DOM.
66 | 
67 | 
68 | 
71 | 
72 | 
73 | 
74 | new Fupdate.AjaxPrompt('/wiki/simpleForm.html', document.id('fupdateAjaxPromptReply')).prompt();
75 | 
76 | 
77 | ===== Fupdate.Append.AjaxPrompt =====
78 | 
79 | Yep. You guessed it. The final class appends data to the target and fetches its form via Ajax.
80 | 
81 | 
82 | 
85 | 
86 | 
87 | 
88 | new Fupdate.Append.AjaxPrompt('/wiki/simpleForm.html', document.id('fupdateAppendAjaxPromptReply'), {
89 | 	inject: 'top'
90 | }).prompt();
91 | 
92 | 


--------------------------------------------------------------------------------
/old/save/03-occlude.txt:
--------------------------------------------------------------------------------
 1 | ====== Occlude ======
 2 | 
 3 | [[http://www.clientcide.com/docs/Class.Extras/Occlude|docs]]
 4 | 
 5 | A large percentage of the code we write for the browser is to enhance the behavior of some DOM element. Validate a form, allow a div to be dragged, zoom an image, etc. When I write code that enhances a DOM element I prefer to ensure that the element doesn't get the same class applied to it twice. Consider an input that has a [[clientcide-libraries:09-forms:02-datepicker|date picker]] associated with it. Whent he user shifts focus into the input, we show the date picker. But if somehow our code gets applied to that input twice, we'll show two date pickers. This can have even worse effects when you are transforming the shape or location of the element.
 6 | 
 7 | Enter **Occlude**, which just ensures that your class is only applied once. It also makes it possible to find the instance of the class from the DOM element using [[http://www.mootorial.com/wiki/mootorial/04-element/00-element#element-storage|Element Storage]].
 8 | 
 9 | ===== Usage =====
10 | 
11 | First, you must include the //Occlude// class in your //Implements// statement. Secondly, you must tell //Occlude// what the property you want your class to be referenced by in //Element.Storage// (this is the key that the DOM element will store the instance of the class on - so if you have a date picker associated with an input, you might use the property 'DatePickerInstance'). Finally, you must tell //Occlude// on which DOM element to store this property if it's not there already.
12 | 
13 | When you call the //occlude// method, it will return //false// if the DOM element doesn't already have an instance bound to it. If it returns true, you should return the value assigned to //this.occludes//. This value is the instance that was found already.
14 | 
15 | 
16 | var Widget = new Class({
17 | 	Implements: [Class.Occlude],
18 | 	initialize: function(element) {
19 | 		this.element = document.id(element);
20 | 		if (this.occlude('widget', element)) return this.occluded;
21 | 	}
22 | })
23 | 
24 | 
25 | ===== Breaking it down a bit =====
26 | 
27 | What this class does is look to see if the property you give it is already defined. If so, you should return that property (which gets assigned to //this.occluded//). This means that the following will prevent your DOM element form getting more than one class assigned to it:
28 | 
29 | 
30 | var widget1 = new Widget(document.id('widgetDiv'));
31 | var widget2 = new Widget(document.id('widgetDiv'));
32 | //widget1 == widget 2 - only one is applied to document.id('widgetDiv')
33 | 
34 | 
35 | ===== Shorthand Syntax =====
36 | 
37 | The intended usage of the //Occlude// class uses two shorthands. The first is to define //this.element// as the DOM element you want to bind the class to and the second one has you define a //property// property:
38 | 
39 | 
40 | var Widget = new Class({
41 | 	Implements: [Class.Occlude],
42 | 	property: 'widgetInstance',
43 | 	initialize: function(element) {
44 | 		this.element = document.id(element);
45 | 		if (this.occlude()) return this.occluded;
46 | 	}
47 | });
48 | 
49 | 
50 | When you define a property and assign the element to //this.element//, you don't need to pass any arguments to //this.occlude//.


--------------------------------------------------------------------------------
/old/save/04-element/00-element.forms.txt:
--------------------------------------------------------------------------------
 1 | ====== Element.Forms ======
 2 | [[http://www.clientcide.com/docs/Element/Element.Forms|docs]]
 3 | 
 4 | This script has helpers for managing text selection and manipulation in form elements. Eventually I expect more form functionality to get added, but for now, its all about the kind of stuff that wysiwyg editors need to insert html around selected text and that sort of thing.
 5 | 
 6 | **NOTE**
 7 | Since these examples are all about selections and caret locations, I can't have code examples that you click to execute (because this will change the focus).
 8 | 
 9 | 
10 | 
11 | 
12 | ===== Element.getTextInRange =====
13 | Returns the value of the text within a given range in the input.
14 | 
15 | 
16 | 
17 | text in range (click the input to execute):
18 | 
19 | 
20 | 
21 | ===== Element.getSelectedText =====
22 | Gets the text that is currently selected.
23 | 
24 | selected text (select some text to execute):
25 | 
26 | 
27 | 
28 | ===== Element.getSelectedRange =====
29 | Gets the range that is selected.
30 | 
31 | getSelectedRange: (select some text to execute)
32 | 
33 | 
34 | 
35 | ===== Element.selectRange =====
36 | Selects a range of text.
37 | 
38 | selectRange (click to execute; this example passes in an array [2,5]):
39 | 
40 | 
41 | ===== Element.insertAtCursor =====
42 | Insert text at the cursor location.
43 | 
44 | insertAtCursor (click anywhere to insert the example):
45 | 
46 | 
47 | ===== Element.insertAroundCursor =====
48 | Wraps text with the given strings.
49 | 
50 | insertAroundCursor (select some text or click anywhere to insert "<" and ">" around the text):
51 | 
52 | 
53 | 
54 | 
55 | 
56 | ===== Element.tidy =====
57 | Removes MS-Word style non-ASCI characters from an input. See also [[clientcide-libraries:03-native:03-string.extras#tidy|String.tidy]].
58 | 
59 | 
60 | 
61 | 
62 | 
63 | document.id('tidyExample').tidy();
64 | //input value is now "'...'"
65 | 
66 | 


--------------------------------------------------------------------------------
/assets/codemirror/mode/velocity/index.html:
--------------------------------------------------------------------------------
  1 | 
  2 | 
  3 |   
  4 |     CodeMirror 2: Velocity mode
  5 |     
  6 |     
  7 |     
  8 |     
  9 |     
 10 |     
 11 |   
 12 |   
 13 |     
CodeMirror 2: Velocity mode

 14 |     

 89 |     
 99 | 
100 |     
MIME types defined: text/velocity.

101 | 
102 |   
103 | 
104 | 


--------------------------------------------------------------------------------
/old/save/02-fx.reveal.txt:
--------------------------------------------------------------------------------
 1 | ====== Fx.Reveal ======
 2 | 
 3 | [[http://www.clientcide.com/docs/Fx/Fx.Reveal|docs]]
 4 | 
 5 | //Fx.Reveal// extends //Fx.Morph// to let you transition an element from being hidden (display:none) to visible (display:block) in a smooth way. Its //.dissolve// method calculates the height of the margin, padding, border, and height of the element and transitions these along with the opacity to zero. After the transition, it sets these values back to what they were and sets display to "none". //.reveal// does the same thing in reverse.
 6 | 
 7 | 
 8 | 
I'm a paragraph with padding, margin, and border values. When //dissolve// is executed, these values will go to zero, but be restored at the end of the transition when display will be set to "none"



 9 | 
10 | 
11 | 
12 | 
13 | new Fx.Reveal(document.id('revealExample')).dissolve();
14 | 
15 | 
16 | new Fx.Reveal(document.id('revealExample')).reveal();
17 | 
18 | 
19 | There's also a toggle method:
20 | 
21 | new Fx.Reveal(document.id('revealExample')).toggle();
22 | 
23 | 
24 | ===== Element.reveal =====
25 | //Element.dissolve(options)// and //Element.reveal(options)// are just shortcuts to execute the //.dissolve// and //.reveal// methods on the "built-in" instance of //Fx.Reveal// (much like //Element.tween// is a shortcut to a "built-in" instance of //Fx.Tween//).
26 | 
27 | 
28 | 
I'm a paragraph with padding, margin, and border values. When //dissolve// is executed, these values will go to zero, but be restored at the end of the transition when display will be set to "none"



29 | 
30 | 
31 | 
32 | document.id('revealExample2').dissolve();
33 | 
34 | 
35 | document.id('revealExample2').reveal();
36 | 
37 | 
38 | 
39 | ==== Using Element.get and Element.set ====
40 | Like //Fx.Tween// or //Fx.Morph//, you can use //Element.get// and //Element.set// to control the "built-in" version of //Fx.Reveal//:
41 | 
42 | 
43 | document.id('myElement').set('reveal', {
44 | 	duration: 1000,
45 | 	transition: 'bounce:out'
46 | });
47 | 
48 | 
49 | document.id('myElement').get('reveal').toggle();
50 |  
51 | 
52 | ===== Element.nix =====
53 | This shortcut calls the //dissolve// method on the element and, when it completes, removes the element from the DOM. The method takes two arguments - the options to pass along to //Fx.Reveal// and a boolean. If //true//, the element will be destroyed entirely (with //Element.destroy//), otherwise it will be erased from the DOM (with //Element.erase//) - this is the default. You can specify one or both of these arguments, and the order doesn't matter. Note that in these examples, the //document.id('fxTarget')// is recreated each time.
54 | 
55 | 
56 | document.id('fxTarget').nix(); //erase it
57 | 
58 | 
59 | document.id('fxTarget').nix(true); //destroy
60 | 
61 | 
62 | document.id('fxTarget').nix({duration: 1000}); 
63 | //dissolve over 1 second, then erase
64 | 
65 | 
66 | document.id('fxTarget').nix({duration: 1000}, true); 
67 | //dissolve over 1 second, then destroy
68 | 


--------------------------------------------------------------------------------
/Source/03. Types/06. Event.md:
--------------------------------------------------------------------------------
 1 | ====== Events ======
 2 | The Events class is a collection of functions for handling events across browsers. Here is the [[http://mootools.net/docs/core/Types/Event|documentation for Event.js]].
 3 | 
 4 | Whenever you add an event to a DOM element (not to be confused with the [[01-class.extras|//Events// class in Class.Extras]]) the argument passed to that function will be the event native. This has been extended like other natives to have additional properties by MooTools. 
 5 | 
 6 | ===== Properties =====
 7 | 

 8 |     
shift

 9 |     
true if the user pressed the shift

10 |     
control

11 |     
true if the user pressed the control 

12 |     
alt

13 |     
true if the user pressed the alt

14 |     
meta

15 |     
true if the user pressed the meta key

16 |     
code

17 |     
the keycode of the key pressed

18 |     
page.x

19 |     
the x position of the mouse, relative to the full window

20 |     
page.y

21 |     
the y position of the mouse, relative to the full window

22 |     
client.x

23 |     
the x position of the mouse, relative to the viewport

24 |     
client.y

25 |     
the y position of the mouse, relative to the viewport

26 |     
key

27 |     
the key pressed as a lowercase string. key also returns 'enter', 'up', 
28 |     'down', 'left', 'right', 'space', 'backspace', 'delete', 'esc'. Handy 
29 |     for these special keys.

30 |     
target

31 |     
the event target

32 |     
relatedTarget

33 |     
the event related target

34 | 

35 | 
36 | 
37 | 
38 | $('eventExample').addEvent('keydown', function(event){
39 |     console.log(event.key); /*returns the lowercase letter pressed*/
40 |     console.log(event.shift); /*returns true if the key pressed is shift*/
41 |     if (event.key == 's' && event.control) console.log('document saved');
42 | });
43 | 
44 | 
45 | 
46 | 
47 | ===== Event.stop, .preventDefault & .stopPropagation =====
48 | //Event.stop// will stop an Event from propigating and will also execute //.preventDefault//
49 | 
50 | //Event.preventDefault// will prevent the default action of the event from completing (for example, clicking a url and executing //.preventDefault// will still execute the onclick event(s) attached to the link, but will NOT follow the link).
51 | 
52 | //Event.stopPropagation// will execute the default behavior and any events (such as onclick) attached to the element but will not allow the event to bubble up through the DOM (so that if there is an event attached to //document.body.onclick// and the user clicks a link, the link's events will fire, but the event on the //document.body// will not).
53 | 
54 | ===== Event.keys =====
55 | MooTools defines a handful of key codes but you can add more definitions for special uses. This allows you to add event handlers for those keys:
56 | 
57 | 
58 | Event.Keys.whatever = 80;
59 | $(myelement).addEvent(keydown, function(event){
60 |     if (event.key == 'whatever') console.log(whatever key clicked).
61 | });
62 | 
63 | 
64 | By default, MooTools defines the following keys:
65 |     *enter - 13
66 |     *up - 38
67 |     *down - 40
68 |     *left - 37
69 |     *right - 39
70 |     *esc - 27
71 |     *space - 32
72 |     *backspace - 8
73 |     *tab - 9
74 |     *delete - 46


--------------------------------------------------------------------------------
/old/pages/mootorial/03-native/05-event.txt:
--------------------------------------------------------------------------------
 1 | ====== Events ======
 2 | The Events class is a collection of functions for handling events across browsers. Here is the [[http://mootools.net/docs/core/Types/Event|documentation for Event.js]].
 3 | 
 4 | Whenever you add an event to a DOM element (not to be confused with the [[01-class.extras|//Events// class in Class.Extras]]) the argument passed to that function will be the event native. This has been extended like other natives to have additional properties by MooTools. 
 5 | 
 6 | ===== Properties =====
 7 | 

 8 |     
shift

 9 |     
true if the user pressed the shift

10 |     
control

11 |     
true if the user pressed the control 

12 |     
alt

13 |     
true if the user pressed the alt

14 |     
meta

15 |     
true if the user pressed the meta key

16 |     
code

17 |     
the keycode of the key pressed

18 |     
page.x

19 |     
the x position of the mouse, relative to the full window

20 |     
page.y

21 |     
the y position of the mouse, relative to the full window

22 |     
client.x

23 |     
the x position of the mouse, relative to the viewport

24 |     
client.y

25 |     
the y position of the mouse, relative to the viewport

26 |     
key

27 |     
the key pressed as a lowercase string. key also returns 'enter', 'up', 
28 |     'down', 'left', 'right', 'space', 'backspace', 'delete', 'esc'. Handy 
29 |     for these special keys.

30 |     
target

31 |     
the event target

32 |     
relatedTarget

33 |     
the event related target

34 | 

35 | 
36 | 
37 | 
38 | $('eventExample').addEvent('keydown', function(event){
39 |     console.log(event.key); /*returns the lowercase letter pressed*/
40 |     console.log(event.shift); /*returns true if the key pressed is shift*/
41 |     if (event.key == 's' && event.control) console.log('document saved');
42 | });
43 | 
44 | 
45 | 
46 | 
47 | ===== Event.stop, .preventDefault & .stopPropagation =====
48 | //Event.stop// will stop an Event from propigating and will also execute //.preventDefault//
49 | 
50 | //Event.preventDefault// will prevent the default action of the event from completing (for example, clicking a url and executing //.preventDefault// will still execute the onclick event(s) attached to the link, but will NOT follow the link).
51 | 
52 | //Event.stopPropagation// will execute the default behavior and any events (such as onclick) attached to the element but will not allow the event to bubble up through the DOM (so that if there is an event attached to //document.body.onclick// and the user clicks a link, the link's events will fire, but the event on the //document.body// will not).
53 | 
54 | ===== Event.keys =====
55 | MooTools defines a handful of key codes but you can add more definitions for special uses. This allows you to add event handlers for those keys:
56 | 
57 | 
58 | Event.Keys.whatever = 80;
59 | $(myelement).addEvent(keydown, function(event){
60 |     if (event.key == 'whatever') console.log(whatever key clicked).
61 | });
62 | 
63 | 
64 | By default, MooTools defines the following keys:
65 |     *enter - 13
66 |     *up - 38
67 |     *down - 40
68 |     *left - 37
69 |     *right - 39
70 |     *esc - 27
71 |     *space - 32
72 |     *backspace - 8
73 |     *tab - 9
74 |     *delete - 46


--------------------------------------------------------------------------------
/assets/codemirror/mode/python/index.html:
--------------------------------------------------------------------------------
  1 | 
  2 | 
  3 |   
  4 |     CodeMirror 2: Python mode
  5 |     
  6 |     
  7 |     
  8 |     
  9 |     
 10 |     
 11 |   
 12 |   
 13 |     
CodeMirror 2: Python mode

 14 |     
 15 |     

104 |     
115 |     
Configuration Options:

116 |     
120 | 
121 |     
MIME types defined: text/x-python.

122 |   
123 | 
124 | 


--------------------------------------------------------------------------------
/assets/codemirror/mode/clike/index.html:
--------------------------------------------------------------------------------
  1 | 
  2 | 
  3 |   
  4 |     CodeMirror 2: C-like mode
  5 |     
  6 |     
  7 |     
  8 |     
  9 |     
 10 |     
 11 |   
 12 |   
 13 |     
CodeMirror 2: C-like mode

 14 | 
 15 | 

 82 | 
 83 |     
 90 | 
 91 |     
Simple mode that tries to handle C-like languages as well as it
 92 |     can. Takes two configuration parameters: keywords, an
 93 |     object whose property names are the keywords in the language,
 94 |     and useCPP, which determines whether C preprocessor
 95 |     directives are recognized.

 96 | 
 97 |     
MIME types defined: text/x-csrc
 98 |     (C code), text/x-c++src (C++
 99 |     code), text/x-java (Java
100 |     code), text/x-groovy (Groovy code).

101 |   
102 | 
103 | 


--------------------------------------------------------------------------------
/old/pages/mootorial/08-plugins/03-interface/04-accordion.txt:
--------------------------------------------------------------------------------
 1 | ====== Accordion ======
 2 | Here is the [[http://docs.mootools.net/Plugins/Accordion|documentation for Accordion.js]].
 3 | 
 4 | Accordions are probably the widget most associated with MooTools (and its earlier incarnation as Moo.fx). These widgets take an ordered list and condenses them showing the details of one item at a time. Here's an example of an accordion:
 5 | 
 6 | 
 7 | 

 8 |   

 9 |     
first section

10 |     
I'm the content for the first section.

11 |     
second section

12 |     
I'm the content for the second section.

13 |     
third section

14 |     
I'm the content for the third section.

15 |   

16 | 

17 | 
18 | 
19 | Here's what you do to make one work. The html I'm using:
20 | 
21 | 
22 | 

23 |   

24 |     
first section

25 |     
I'm the content for the first section.

26 |     
second section

27 |     
I'm the content for the second section.

28 |     
third section

29 |     
I'm the content for the third section.

30 |   

31 | 

32 | 
33 | 
34 | Here's that HTML actually rendered:
35 | 
36 | 
37 | 

38 |   

39 |     
first section

40 |     
I'm the content for the first section.

41 |     
second section

42 |     
I'm the content for the second section.

43 |     
third section

44 |     
I'm the content for the third section.

45 |   

46 | 

47 | 
48 | 
49 | Now execute this code and you'll see it change to be interactive.
50 | 
51 | 
52 | new Accordion($$('dl#accordionExample dt'), $$('dl#accordionExample dd'));
53 | 
54 | 
55 | **//Accordion// takes as arguments:**
56 | 
57 | 

58 | 	
elements
required, a collection of elements the transitions will be applied to.

59 | 	
togglers
required, a collection of elements, the elements handlers.

60 | 	
options
optional, see options below, and //Fx.Base// options.

61 | 

62 | 
63 | **Options:**
64 | 
65 | 

66 | 	
show
integer, the Index of the element to show at start.

67 | 	
display
integer, the Index of the element to show at start (with a transition).

68 | 	
fixedHeight
integer, if you want your accordion to have a fixed height. defaults to false.

69 | 	
fixedWidth
integer, if you want your accordion to have a fixed width. defaults to false.

70 | 	
onActive
function to execute when an element starts to show

71 | 	
onBackground
function to execute when an element starts to hide

72 | 	
height
boolean, will add a height transition to the accordion if true. defaults to true.

73 | 	
opacity
boolean, will add an opacity transition to the accordion if true. defaults to true.

74 | 	
width
boolean, will add a width transition to the accordion if true. defaults to false, css mastery is required to make this work!

75 | 	
alwaysHide
allows you to close every item (defaults to false)

76 | 

77 | 
78 | 


--------------------------------------------------------------------------------
/old/pages/mootorial/06-fx/02-fx.morph.txt:
--------------------------------------------------------------------------------
  1 | ====== Fx.Morph ======
  2 | Here is the [[http://docs.mootools.net/Fx/Fx.Morph|documentation for Fx.Morph.js]]
  3 | 
  4 | //Fx.Morph// is very similar to [[01-fx.tween|Fx.Tween]] (if you haven't read about Fx.Tween yet, you should start there), except you can alter more than one property at once. You should use this over having two //Fx.Tween// properties because each property will be altered in tandem with //Fx.Morph//. It's also less resource intensive.
  5 | 
  6 | 
  7 | var exampleFx = new Fx.Morph('fxTarget');
  8 | exampleFx.start({
  9 | 	'width':[0,100],
 10 | 	'height':[0,100]
 11 | });
 12 | 
 13 | 
 14 | 
 15 | var exampleFx = new Fx.Morph('fxTarget', {
 16 | 	duration: 1000
 17 | });
 18 | exampleFx.start({
 19 | 	'opacity':[0,1],
 20 | 	'padding':[0,10]
 21 | });
 22 | 
 23 | 
 24 | 
 25 | 
 26 | ===== Element.morph =====
 27 | 
 28 | Just like //Element.tween//, //.morph// returns an //Fx.Morph//. So the examples [[01-fx.tween|on the Fx.Tween page]] could look like this:
 29 | 
 30 | 
 31 | $('fxTarget').morph({
 32 | 	'width':[0,100],
 33 | 	'height':[0,100]
 34 | });
 35 | 
 36 | 
 37 | 
 38 | $('fxTarget').morph({
 39 | 	'opacity':[0,1],
 40 | 	'padding':[0,10]
 41 | });
 42 | 
 43 | 
 44 | As with //.tween// (see the [[01-fx.tween#the-built-in-fx.tween-object|Fx.Tween section for more elaboration]]), you can configure the effect with numerous options, regardless of which syntax you use, with the //set// method:
 45 | 
 46 | 
 47 | $('fxTarget').set('morph', {
 48 | 	duration: 1000,
 49 | 	transition: Fx.Transitions.Bounce.easeOut,
 50 | 	link: 'chain'
 51 | });
 52 | $('fxTarget').morph({
 53 | 	'width':0,
 54 | 	'height':0
 55 | }).morph({
 56 | 	'width':100,
 57 | 	'height':100
 58 | });
 59 | 
 60 | 
 61 | ===== Using Fx.Morph with CSS Classes =====
 62 | A new trick in MooTools 1.2 is the ability to transition to and from the CSS properties defined in a CSS class.
 63 | 
 64 | For instance, let's say we have these two classes:
 65 | 
 66 | 
 67 | 
 81 | 
 82 | 
 83 | .one {
 84 | 	background-color: #fff;
 85 | 	color: #000;
 86 | 	border: 3px solid #000;
 87 | 	padding: 10px;
 88 | 	width: 300px;
 89 | }
 90 | .two {
 91 | 	background-color: #000;
 92 | 	color: #fff;
 93 | 	border: 1px solid #999;
 94 | 	padding: 5px;
 95 | }
 96 | 
 97 | 
 98 | 

 99 | This paragraph starts off with the //.one// CSS class applied to it. Using the morph instructions below we'll transition between the two.
100 | 

101 | 
102 | 
103 | 
104 | $('morphExample').set('morph', {
105 | 	link: 'chain'
106 | });
107 | $('morphExample').morph('.two').morph('.one');
108 | 
109 | 
110 | This provides a very nice method to separate your design (CSS) from your interaction code (JavaScript). Doing this is a good idea for the same reason that moving your CSS (design) out of your HTML (data) is a good idea and it makes maintaining the look of your user experience easier.
111 | 
112 | **NOTE**: Using //Fx.Morph// with CSS classes only works with numerical values found in the class. If, for example, one class has //display: block// and the other //display: none//, these values will not be applied. Also note that the class itself is not applied to the element - if you execute //$('morphExample').morph('.two')// the element still has the class //.one// and does NOT have //.two//, even though its styles have been altered.


--------------------------------------------------------------------------------
/old/pages/mootorial/08-plugins/01-drag/00-drag.txt:
--------------------------------------------------------------------------------
 1 | ====== Drag Base Class ======
 2 | Here is the [[http://mootools.net/docs/more/Drag/Drag.Move|documentation for Drag.js]].
 3 | 
 4 | MooTools lets you make objects draggable and it's super easy. Doing it well takes a bit more work, but the code that just handles the dragging itself is pretty much all done for you.
 5 | 
 6 | //Drag// is a little lower level and lets you alter any two properties when the user clicks and moves the mouse (drags). It's used for moving and also, for instance, for resizing (by altering width and height).
 7 | 
 8 | These are the options that //Drag// takes:
 9 | 
10 | **Arguments:**
11 | 
12 | 

13 | 	
element
the element to apply the transformations to.

14 | 	
options
optional. The options object.

15 | 

16 | 
17 | **Options:**
18 | 
19 | 

20 | 	
grid

21 | 	
(integer: defaults to false) Distance in pixels for snap-to-grid dragging.

22 | 	
handle

23 | 	
(element: defaults to the element passed in) The Element to act as the handle for the draggable element.

24 | 	
invert

25 | 	
(boolean: defaults to false) Whether or not to invert the values reported on start and drag.

26 | 	
limit

27 | 	
(object: defaults to false) An object with x and y properties used to limit the movement of the Element.

28 | 	
modifiers

29 | 	
(object: defaults to {'x': 'left', 'y': 'top'}) An object with x and y properties used to indicate the CSS modifiers (i.e. 'left').

30 | 	
snap

31 | 	
(integer: defaults to 6) The distance to drag before the Element starts to respond to the drag.

32 | 	
style

33 | 	
(boolean: defaults to true) Whether or not to set the modifier as a style property of the element.

34 | 	
unit

35 | 	
(string: defaults to 'px') A string indicating the CSS unit to append to all integer values.

36 | 

37 | 
38 | **Events:**
39 | 
40 | 

41 | 	
beforeStart

42 | 	
Executed before the Drag instance attaches the events. Receives the dragged element as an argument.

43 | 	
start

44 | 	
Executed when the user starts to drag (on mousedown). Receives the dragged element as an argument.

45 | 	
snap

46 | 	
Executed when the user has dragged past the snap option. Receives the dragged element as an argument.

47 | 	
drag

48 | 	
Executed on every step of the drag. Receives the dragged element as an argument.

49 | 	
complete

50 | 	
Executed when the user completes the drag. Receives the dragged element as an argument.

51 | 

52 | 
53 | 
54 | ==== Element.makeResizeable ====
55 | Pretty self explanatory I think. Here you go:
56 | 
57 | 
58 | $('resizeExampleContainer').makeResizable({
59 | 	handle: 'resizeExampleHandle'
60 | });
61 | 
62 | 
63 | 

64 | 

65 | 
 
 

66 | 

67 | 
68 | 

69 | 
70 | 
71 | Here's an example where we limit sizing to one dimension (height):
72 | 
73 | $('resizeExampleContainerLimited').makeResizable({
74 | 	handle: 'resizeExampleHandleLimited',
75 | 	modifiers:{x: false, y:'height'} /*limit the sizing to vertical*/
76 | });
77 | 
78 | 
79 | 

80 | 

81 | 
 
 

82 | 

83 | 
84 | 

85 | 
 
 

86 | 
87 | 
88 | 


--------------------------------------------------------------------------------