zen 0.3 → 0.4

data/lib/zen/public/admin/{js/zen → zen/js}/lib/editor.js

@@ -1,3 +1,7 @@
+"use strict";
+
+namespace('Zen');
+
 /**
  * Base class for all drivers that provides several common methods and allows
  * developers to use the same syntax for all editor drivers.
@@ -117,32 +121,32 @@ Zen.Editor = new Class(
     [
         {
             name:    'bold',
-            label:   Zen.translations['zen_general.buttons.bold'],
+            label:   lang('zen_general.buttons.bold'),
             onClick: 'bold'
         },
         {
             name:    'italic',
-            label:   Zen.translations['zen_general.buttons.italic'],
+            label:   lang('zen_general.buttons.italic'),
             onClick: 'italic'
         },
         {
             name:   'link',
-            label:   Zen.translations['zen_general.buttons.link'],
+            label:   lang('zen_general.buttons.link'),
             onClick: 'link'
         },
         {
             name:   'ul',
-            label:   Zen.translations['zen_general.buttons.ul'],
+            label:   lang('zen_general.buttons.ul'),
             onClick: 'ul'
         },
         {
             name:    'ol',
-            label:   Zen.translations['zen_general.buttons.ol'],
+            label:   lang('zen_general.buttons.ol'),
             onClick: 'ol'
         },
         {
             name:    'preview',
-            label:   Zen.translations['zen_general.buttons.preview'],
+            label:   lang('zen_general.buttons.preview'),
             onClick: 'preview'
         }
     ],
@@ -188,7 +192,6 @@ Zen.Editor = new Class(
         // Create the HTML for the editor
         var toolbar       = new Element('div', {'class': 'editor_toolbar'});
         var container     = new Element('div', {'class': 'editor_container'});
-        var ul            = new Element('ul');
         var current_class = this;
 
         // Push the custom buttons
@@ -200,11 +203,11 @@ Zen.Editor = new Class(
         // Create the HTML for all the buttons
         this.buttons.each(function(button)
         {
-            var li = new Element(
-                'li',
+            var btn = new Element(
+                'button',
                 {
-                    'class': button.name,
-                    html:    button.label,
+                    'class': 'button ' + button.name,
+                    html:    '<span class="button_icon"></span>' + button.label,
                     title:   button.label
                 }
             );
@@ -212,8 +215,10 @@ Zen.Editor = new Class(
             // Add the onClick event, when clicked the current editor's instance
             // is passed to the event allowing developers to work with it's
             // content.
-            li.addEvent('click', function()
+            btn.addEvent('click', function(e)
             {
+                e.preventDefault();
+
                 var current_editor = this.getParent('.editor_container')
                     .getElement('textarea');
 
@@ -227,11 +232,10 @@ Zen.Editor = new Class(
                 }
             });
 
-            li.inject(ul);
+            btn.inject(toolbar);
         });
 
         // Inject the HTML into the DOM
-        ul.inject(toolbar);
         toolbar.inject(container);
         container.inject(this.element, 'before');
 
@@ -363,26 +367,11 @@ Zen.Editor = new Class(
             data:      {engine: engine, markup: markup},
             onSuccess: function(response)
             {
-                new Zen.Window(
-                    response,
-                    {
-                        title: Zen.translations['zen_general.buttons.preview'],
-                        width: 700,
-                        buttons:
-                        [
-                            {
-                                name: 'close',
-                                label: Zen.translations[
-                                    'zen_general.buttons.close'
-                                ],
-                                onClick: function(instance)
-                                {
-                                    instance.destroy();
-                                }
-                            }
-                        ]
-                    }
-                );
+                new Zen.Window(response,
+                {
+                    title: lang('zen_general.buttons.preview'),
+                    width: 700
+                });
             }
         }).send();
     }

data/lib/zen/public/admin/{js/zen → zen/js}/lib/editor/markdown.js

@@ -1,3 +1,7 @@
+"use strict";
+
+namespace('Zen.Editor');
+
 /**
  * Markdown driver for the text editor that ships with Zen.
  *
@@ -61,7 +65,7 @@ Zen.Editor.Markdown = new Class(
     },
 
     /**
-     * Overrides Zen.Editor.ol. 
+     * Overrides Zen.Editor.ol.
      *
      * @since  0.2.6
      * @param  {element} editor The textarea to insert the tags into.

data/lib/zen/public/admin/{js/zen → zen/js}/lib/editor/textile.js

@@ -1,3 +1,7 @@
+"use strict";
+
+namespace('Zen.Editor');
+
 /**
  * Textile driver for the text editor that ships with Zen.
  *

data/lib/zen/public/admin/zen/js/lib/hash.js

@@ -0,0 +1,218 @@
+"use strict";
+
+namespace('Zen');
+
+/**
+ * Adds support for the onhashchange event when using ``window.addEvent()``.
+ *
+ * Basic usage is as following:
+ *
+ *     window.addEvent('hashchange', function(e, hash)
+ *     {
+ *         console.log(hash);
+ *     });
+ *
+ * Do note that this implementation does not offer any backwards compatibility
+ * with browsers that don't natively support ``window.onhashchange``.
+ *
+ * @since 21-12-2011
+ */
+Element.Events.hashchange = {
+    onAdd: function()
+    {
+        var _this = this;
+
+        this.onhashchange = function()
+        {
+            this.fireEvent('hashchange');
+        };
+    }
+};
+
+/**
+ * Zen.Hash is a class that can be used to parse and generate shebang/hash bang
+ * URLs. Parsing is done using ``Zen.Hash#parse`` and generating URLs using
+ * ``Zen.Hash#getHash``.
+ *
+ * ## Parsing
+ *
+ * Parsing a URL is relatively simple and the end output is similar to how you'd
+ * parse URLs with query string parameters. First create a new instance of this
+ * class:
+ *
+ *     var hash = new Zen.Hash('#!/users/active?limit=10');
+ *
+ * The supplied string will be parsed straight away and the result can be
+ * retrieved from two attributes:
+ *
+ * * segments
+ * * params
+ *
+ * The first attribute contains an array with all the URL segments, the second
+ * one is an object containing all the query string parameters. In case of the
+ * above example that would lead to the following data being stored in these
+ * attributes:
+ *
+ *     console.log(hash.segments); // => ["users", "active"]
+ *     console.log(hash.params);   // => {limit: '10'}
+ *
+ * Keep in mind that calling ``Zen.Hash#parse`` will overwrite existing segments
+ * and parameters.
+ *
+ * ## Generating
+ *
+ * Generating a full shebang URL is pretty straight forward and can be done by
+ * calling ``getHash()``. This method returns a string containing the shebang
+ * URL including the prefix:
+ *
+ *     hash.getHash(); // => "#!/users/active?limit=10"
+ *
+ * @since 19-12-2011
+ */
+Zen.Hash = new Class(
+{
+    /**
+     * String containing the raw URL hash before it was parsed.
+     *
+     * @since 19-12-2011
+     */
+    raw_hash: '',
+
+    /**
+     * Object containing all the parsed hash parameters.
+     *
+     * @since 19-12-2011
+     */
+    params: {},
+
+    /**
+     * Array containing all the hash segments.
+     *
+     * @since 19-12-2011
+     */
+    segments: [],
+
+    /**
+     * Creates a new instance of the class, sets the raw hash and parses it.
+     *
+     * @since 19-12-2011
+     * @param {string} hash The URL hash to parse.
+     */
+    initialize: function(hash)
+    {
+        if ( hash && hash.length > 0 ) this.parse(hash);
+    },
+
+    /**
+     * Parses the supplied hash and stores the results in ``this.params``.
+     *
+     * @since 19-12-2011
+     * @param {string} hash The hash to parse.
+     */
+    parse: function(hash)
+    {
+        if ( typeOf(hash) !== 'string' )
+        {
+            throw new Error(
+                'Expected a string to parse but got ' + typeOf(hash) + ' instead'
+            );
+        }
+
+        this.raw_hash = hash;
+        this.params   = {};
+        this.segments = [];
+
+        hash = hash.replace(/^#/, '').split('?');
+
+        // Index 0 always contains the path, index 1 the parameters.
+        if ( hash[0] && hash[0].length > 0 )
+        {
+            this.segments = hash[0].split('/');
+        }
+
+        if ( hash[1] && hash[1].length > 0 )
+        {
+            var _this = this;
+            hash[1]   = hash[1].split('&');
+
+            hash[1].each(function(key_value)
+            {
+                key_value = key_value.split('=');
+
+                // Assign the key and value. If the key already exists it should
+                // be turned into an array.
+                if ( _this.params[key_value[0]] )
+                {
+                    if ( typeOf(_this.params[key_value[0]]) !== 'array' )
+                    {
+                        _this.params[key_value[0]] = [
+                            _this.params[key_value[0]],
+                            key_value[1]
+                        ];
+                    }
+                    else
+                    {
+                        _this.params[key_value[0]].push(key_value[1]);
+                    }
+                }
+                else
+                {
+                    _this.params[key_value[0]] = key_value[1];
+                }
+            });
+        }
+    },
+
+    /**
+     * Returns a string containing the hash URL for the current segments and
+     * parameters.
+     *
+     * @since  19-12-2011
+     * @return {string}
+     */
+    getHash: function()
+    {
+        if ( typeOf(this.segments) !== 'array' )
+        {
+            throw new Error(
+                'Expected an array for the URL segments but got '
+                    + typeOf(this.segments)
+                    + ' instead'
+            );
+        }
+
+        if ( typeOf(this.params) !== 'object' )
+        {
+            throw new Error(
+                'Expected an object for the hash parameters but got '
+                    + typeOf(this.params)
+                    + ' instead'
+            );
+        }
+
+        var hash   = '#' + this.segments.join('/');
+        var groups = [];
+
+        Object.each(this.params, function(value, key)
+        {
+            if ( typeOf(value) === 'array' )
+            {
+                value.each(function(val)
+                {
+                    groups.push(key + '=' + val);
+                });
+            }
+            else
+            {
+                groups.push(key + '=' + value);
+            }
+        });
+
+        if ( groups.length > 0 )
+        {
+            hash += '?' + groups.join('&');
+        }
+
+        return hash;
+    }
+});

data/lib/zen/public/admin/{js/zen → zen/js}/lib/html_table.js

@@ -1,3 +1,7 @@
+"use strict";
+
+namespace('Zen');
+
 /**
  * Zen.HtmlTable is an extension to the HtmlTable class provided by Mootools
  * More. This extension makes it possible to sort tables, check all checkboxes
@@ -80,6 +84,7 @@ Zen.HtmlTable = new Class(
             classHeadSort   : 'asc',
             classHeadSortRev: 'desc',
             classNoSort     : 'no_sort',
+            classCellSort   : 'sorted',
             sortable        : true,
             parsers         : []
         };

data/lib/zen/public/admin/zen/js/lib/tabs.js

@@ -0,0 +1,194 @@
+"use strict";
+
+namespace('Zen');
+
+/**
+ * Zen.Tabs is a Mootools class for rendering tab based navigation menus. Tabs
+ * managed by this class can be activated by both clicking on the various tabs
+ * or by changing the URL hash (clicking a tab actually does the latter).
+ *
+ * The use of URL hashes (stored in ``window.location.hash``) also make it
+ * possible for non default tabs to be set as the active tab whenever a page is
+ * reloaded.  If no URL hash is set then a CSS selector will be used to
+ * determine the default tab field to activate. If there is a URL hash present
+ * that will be used instead.
+ *
+ * For example, take the following URL:
+ *
+ * * http://hello.com/admin/extensions/
+ *
+ * and the following tab fields (where each item is the ID of the field):
+ *
+ * * packages
+ * * themes
+ * * languages
+ *
+ * These fields could be activated by navigating to one of the following URLs
+ * (or just by clicking the corresponding tab which will then do this for you):
+ *
+ * * http://hello.com/admin/extensions#packages
+ * * http://hello.com/admin/extensions#themes
+ * * http://hello.com/admin/extensions#languages
+ *
+ * ## General Usage
+ *
+ * Using this class is pretty straight forward, just create a new instance of it
+ * and pass a CSS selector to the constructor:
+ *
+ *     new Zen.Tabs('.tabs ul');
+ *
+ * If you want to change any options you can set these as the second parameter:
+ *
+ *     new Zen.Tabs('.tabs ul', {'default': 'li:last-child'});
+ *
+ * ## Options
+ *
+ * * default: a CSS selector that should result in a ``<li>`` element to
+ *   activate by default if no ID is specified in the URL hash.
+ */
+Zen.Tabs = new Class(
+{
+    Implements: Options,
+
+    /**
+     * Object containing all options for each tab instance.
+     *
+     * @since 0.1
+     */
+    options:
+    {
+        // The default tab/field to display
+        'default': 'li:first-child',
+    },
+
+    /**
+     * Contains the element that contains all the tab items.
+     *
+     * @since 0.1
+     */
+    element: null,
+
+    /**
+    * Constructor method called upon initialization. Options can be
+    * set as a JSON object in the first argument.
+    *
+    * @since  0.1
+    * @param  {string} selector A CSS selector that should result in a ``<ul>``
+    *  element containing various tabs.
+    * @param  {object} options Custom options used when creating the tabs
+    */
+    initialize: function(selector, options)
+    {
+        this.setOptions(options);
+
+        var found = $$(selector);
+
+        if ( found.length <= 0 )
+        {
+            throw new Error(
+                'No elements could be found for the selector ' + selector
+            );
+        }
+
+        this.element = found[0];
+
+        this.displayDefault();
+        this.addEvents();
+    },
+
+    /**
+     * Binds various events to show the right tab fields when a tab is clicked
+     * or when the URL hash is changed.
+     *
+     * @since 21-12-2011
+     */
+    addEvents: function()
+    {
+        var _this = this;
+
+        // Only bind the event if the browser doesn't support the onhashchange
+        // event.
+        if ( !"onhashchange" in window )
+        {
+            this.element.getElements('a').addEvent('click', function(e)
+            {
+                e.stop();
+
+                window.location.hash = this.get('href');
+                window.fireEvent('hashchange');
+            });
+        }
+
+        window.addEvent('hashchange', function()
+        {
+            var id = new Zen.Hash(window.location.hash).segments[0];
+
+            if ( id && $(id) )
+            {
+                _this.toggleTab(id);
+            }
+        });
+    },
+
+    /**
+     * Determines the default tab field to display based on the option
+     * ``this.options.default`` or the current hash URL.
+     *
+     * @since 21-12-2011
+     */
+    displayDefault: function()
+    {
+        var id = null;
+
+        // Don't bother parsing the URL hash if there is none to begin with.
+        if ( window.location.hash && window.location.hash.length > 0 )
+        {
+            id = new Zen.Hash(window.location.hash).segments[0];
+        }
+
+        if ( !id || id.length <= 0 )
+        {
+            var active = this.element.getElements(this.options['default']);
+
+            if ( active.length > 0 )
+            {
+                active[0].addClass('active');
+
+                id = active[0].getElement('a').get('href').replace(/^#/, '');
+            }
+        }
+
+        this.toggleTab(id);
+    },
+
+    /**
+     * Activates the tab field for the given ID.
+     *
+     * @since 21-12-2011
+     * @param {string} id The ID of the tab field to show.
+     */
+    toggleTab: function(id)
+    {
+        this.element.getElements('a').each(function(el)
+        {
+            var el_id = el.get('href').replace(/^#/, '');
+
+            if ( el_id === id )
+            {
+                el.getParent().addClass('active');
+
+                var found = $(id);
+
+                if ( found ) found.show();
+            }
+            else
+            {
+                el.getParent().removeClass('active');
+
+                var found = $(el_id);
+
+                if ( found ) found.hide();
+            }
+        });
+    },
+});