Changeset 2160

Timestamp:

09/08/10 18:16:25 (17 months ago)

Author:

johnnyoffline

Message:

1. refactored aMenuToggle in aUI.js. Moved it to a.js and made it work with all of the menus (Variants, Add Content, Add Page, Page Settings)
2. refactored some browseHistory JS to be in a.js
3. created globalJavascripts partial to load some general JS at the bottom of layout.php ONCE instead of every time a partial is used.

Location:

plugins/apostrophePlugin/trunk

Files:

• modules/a/templates/_area.php (modified) (3 diffs)
• modules/a/templates/_createPage.php (modified) (3 diffs)
• modules/a/templates/_globalJavascripts.php (added)
• modules/a/templates/_variant.php (modified) (2 diffs)
• modules/a/templates/layout.php (modified) (2 diffs)
• modules/a/templates/settingsSuccess.php (modified) (2 diffs)
• web/js/a.js (modified) (5 diffs)
• web/js/aUI.js (modified) (4 diffs)

plugins/apostrophePlugin/trunk/modules/a/templates/_area.php

@@ -94 +94 @@
       <?php if ($infinite): ?>
                                 <li class="a-move">
-                                  <a href="#" class="a-btn icon a-arrow-up no-label" title="<?php echo a_('Move Up') ?>"><span class="icon"></span><?php echo a_('Move Up') ?></a>
+                                  <a href="#move-up" class="a-btn icon a-arrow-up no-label" title="<?php echo a_('Move Up') ?>" onclick="return false;"><span class="icon"></span><?php echo a_('Move Up') ?></a>
                                 </li>
                                 <li class="a-move">
-                                  <a href="#" class="a-btn icon a-arrow-down no-label" title="<?php echo a_('Move Down') ?>"><span class="icon"></span><?php echo a_('Move Down') ?></a>
+                                  <a href="#move-down" class="a-btn icon a-arrow-down no-label" title="<?php echo a_('Move Down') ?>" onclick="return false;"><span class="icon"></span><?php echo a_('Move Down') ?></a>
                                 </li>
       <?php endif ?>
@@ -150 +150 @@
 
                         <?php if ($infinite): ?>
-                                aMenuToggle('#a-add-slot-<?php echo $pageid.'-'.$name ?>', $('#a-add-slot-<?php echo $pageid.'-'.$name ?>').parent(), 'a-options-open', false);
-
                                 var newSlot = $('#a-area-<?php echo "$pageid-$name" ?>').find('.a-new-slot');
                                 if (newSlot.length) {
@@ -180 +178 @@
 </script>
 <?php a_js_call('apostrophe.areaUpdateMoveButtons(?, ?, ?)', url_for('a/moveSlot'), $pageid, $name) ?>
+<?php a_js_call('apostrophe.menuToggle(?)', array('button' => '#a-add-slot-'.$pageid.'-'.$name, 'classname' => 'a-options-open', 'overlay' => false)) ?>
 <?php endif ?>

plugins/apostrophePlugin/trunk/modules/a/templates/_createPage.php

@@ -48 +48 @@
                 <ul class="a-ui a-controls">
                 <li><input type="submit" class="a-btn a-submit" value="<?php echo __('Create Page', null, 'apostrophe') ?>" /></li>
-                <li><a href="#" onclick="return false;" class="a-btn icon a-cancel"><?php echo __("Cancel", null, 'apostrophe') ?></a></li>
+                <li><a href="#cancel" onclick="return false;" class="a-btn icon a-cancel a-options-cancel" title="<?php echo __('Cancel', null, 'apostrophe') ?>"><?php echo __("Cancel", null, 'apostrophe') ?></a></li>
                 </ul>
         </div>
@@ -82 +82 @@
                 aInputSelfLabel('#a-create-page-title', <?php echo json_encode(__('Page Title', null, 'apostrophe')) ?>);
 
-                aMenuToggle($('#a-create-page-button'), $('#a-create-page-button').parent(), '', true);
-
                 $('#a-create-page-button').click(function(){
                         $('#a-create-page-title').focus();
@@ -89 +87 @@
         });
 </script>
+
+<?php a_js_call('apostrophe.menuToggle(?)', array('button' => '#a-create-page-button', 'classname' => '', 'overlay' => true)) ?>

plugins/apostrophePlugin/trunk/modules/a/templates/_variant.php

@@ -43 +43 @@
                                  });
                                         $('<?php echo "#a-$pageid-$name-$permid-variant" ?>').children("ul.a-variant-options").hide();
-                                        aMenuToggle('#a-<?php echo $pageid ?>-<?php echo $name ?>-<?php echo $permid ?>-variant-options-toggle', $('#a-<?php echo $pageid ?>-<?php echo $name ?>-<?php echo $permid ?>-variant-options-toggle').parent(), 'a-options-open', false);
                         });
                 </script>
@@ -50 +49 @@
   </li>
 <?php endif ?>
+
+<?php a_js_call('apostrophe.menuToggle(?)', array('button' => '#a-'.$pageid.'-'.$name.'-'.$permid.'-variant-options-toggle', 'classname' => 'a-options-open', 'overlay' => false)) ?>

plugins/apostrophePlugin/trunk/modules/a/templates/layout.php

@@ -1 @@
-<?php use_helper('I18N') ?>
+<?php use_helper('a') ?>
 <?php // This is a copy of apostrophePlugin/modules/a/templates/layout.php ?>
 <?php // It also makes a fine site-wide layout, which gives you global slots on non-page templates ?>
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-        <?php use_helper('a') ?>
         <?php // If this page is an admin page we don't want to present normal navigation relative to it. ?>
         <?php $page = aTools::getCurrentNonAdminPage() ?>
@@ -96 +95 @@
         </div>
 
+        <?php include_partial('a/globalJavascripts') ?>
+        
         <?php // Drop in the document.ready stuff at the bottom. ?>
         <?php // If we try to do this sooner, it works for the template but ?>

plugins/apostrophePlugin/trunk/modules/a/templates/settingsSuccess.php

@@ -142 +142 @@
                 <ul class="a-ui a-controls">            
                   <li><input type="submit" name="submit" value="<?php echo htmlspecialchars(__('Save Changes', null, 'apostrophe')) ?>" class="a-btn a-submit" id="a-page-settings-submit" /></li>
-                        <li><?php echo jq_link_to_function(__('Cancel', null, 'apostrophe'), '',  array('class' => 'a-btn icon a-cancel', 'title' => __('Cancel', null, 'apostrophe'))) ?></li>
+                        <li><a href="#cancel" onclick="return false;" class="a-btn icon a-cancel a-options-cancel" title="<?php echo __('Cancel', null, 'apostrophe') ?>"><?php echo __('Cancel', null, 'apostrophe') ?></a></li>
                         <?php if ($page->userHasPrivilege('manage')): ?>
                                 <?php $childMessage = ''; ?>
@@ -157 +157 @@
 <script src="/sfJqueryReloadedPlugin/js/plugins/jquery.autocomplete.js"></script>
 <script src="/sfDoctrineActAsTaggablePlugin/js/pkTagahead.js"></script>
+
 <?php a_include_js_calls() ?>
+
 <script type="text/javascript" charset="utf-8">
         $(document).ready(function() {

plugins/apostrophePlugin/trunk/web/js/a.js

@@ -382 +382 @@
                                                 $('#a-slots-' + id + '-' + name).html(result);                  
                                                 historyBtn.removeClass('a-disabled');                                           
-                                                aCloseHistory();
+                                                _closeHistory();
                                                 aUI(targetArea, 'history-revert');
                                 }
@@ -396 +396 @@
                                 $('#a-slots-' + id + '-' + name).html(result);
                                                 historyBtn.removeClass('a-disabled');                                                           
-                                                aCloseHistory();
+                                                _closeHistory();
                                                 aUI(targetArea);
                                 }
@@ -410 +410 @@
         }
 
+        this.enableBrowseHistoryButtons = function(options)
+        {
+                var historyBtn = $(options['history_buttons']);
+                historyBtn.unbind("click").click(function(event){
+                        event.preventDefault();                 
+                        _closeHistory();
+                        _browseHistory(historyBtn.closest('div.a-area'));               
+                });
+        }
+        
+        this.enableCloseHistoryButtons = function(options)
+        {
+                var closeHistoryBtns = $(options['close_history_buttons']);
+                closeHistoryBtns.click(function(){
+                        _closeHistory();
+                });
+        }
+        
+        function _browseHistory(area)
+        {
+                var areaControls = area.find('ul.a-area-controls');
+                var areaControlsTop = areaControls.offset().top;
+        
+                $('.a-page-overlay').show();
+        
+                // Clear Old History from the Browser
+                if (!area.hasClass('browsing-history')) 
+                {
+                        $('.a-history-browser .a-history-items').html('<tr class="a-history-item"><td class="date"><img src="\/apostrophePlugin\/images\/a-icon-loader.gif"><\/td><td class="editor"><\/td><td class="preview"><\/td><\/tr>');
+                        area.addClass('browsing-history');
+                }
+        
+                // Positioning the History Browser
+                $('.a-history-browser').css('top',(areaControlsTop-5)+"px"); //21 = height of buttons plus one margin
+                $('.a-history-browser').fadeIn();
+                $('.a-page-overlay').click(function(){
+                        _closeHistory();
+                        $(this).unbind('click');
+                });
+        
+                $('#a-history-preview-notice-toggle').click(function(){
+                        $('.a-history-preview-notice').children(':not(".a-history-options")').slideUp();
+                });
+        }
+
+        function _closeHistory()
+        {
+                $('a.a-history-btn').parents('.a-area').removeClass('browsing-history');
+                $('a.a-history-btn').parents('.a-area').removeClass('previewing-history');
+                $('.a-history-browser, .a-history-preview-notice').hide();
+          $('body').removeClass('history-preview');     
+                $('.a-page-overlay').fadeOut();
+        }
+
         this.pageSettings = function(options)
         {
@@ -415 +469 @@
                 var aPageSettingsButton = $('#a-page-settings-button');         
 
-                aMenuToggle('#a-page-settings-button', $('#a-page-settings-button').parent(), '', true);
+                _menuToggle('#a-page-settings-button', '', true);
 
                 aPageSettingsButton.click(function() {
@@ -578 +632 @@
                 aUI(editBtn.parents('.a-slot').attr('id')); // Refresh the UI scoped to this Slot
         }
+        
+        this.menuToggle = function(options)
+        {               
+                var button = options['button'];
+                var classname = options['classname'];
+                var overlay = options['overlay'];
+                _menuToggle(button, classname, overlay);
+        }
+
+
+        function _menuToggle(button, classname, overlay)
+        {       
+                /* Usage: aMenuToggle(Object|ID Selector, Object|ID Selector, Undefined|String, Undefined|True|False) */
+
+                if (typeof button == "string") { button = $(button); } /* button that toggles the menu open & closed */
+                if (typeof classname == "undefined" || classname == '') { classname = "show-options";   } /* optional classname override to use for toggle & styling */
+                if (typeof overlay != "undefined" && overlay) { overlay = $('.a-page-overlay'); } /* optional full overlay */ 
+                var menu = $(button).parent(); // Use the parent of the button as the menu container
+                
+                if (menu.attr('id') == '') {
+                        // We need an ID for the menu. If the menu doesn't have one, we create it by appending 'menu' to the Button ID
+                        newID = button.attr('id')+'-menu';
+                        menu.attr('id', newID);
+                }
+
+                button.unbind('click').click(function()
+                {
+                        // Button Toggle
+                        if (!button.hasClass('aActiveMenu')) 
+                        { 
+                                menu.trigger('toggleOpen'); 
+                        }
+                        else 
+                        {
+                                menu.trigger('toggleClosed');
+                        }
+                });
+
+                menu.bind('toggleOpen', function(){
+                        // Open Menu, Create Listener
+                        button.addClass('aActiveMenu');
+                        menu.addClass(classname);                       
+                        if (overlay) { overlay.stop().show(); }
+                        $(document).click(function(e){
+                                var target = e.target; 
+                                target = $(target);  
+                                if (target.hasClass('.a-page-overlay') || target.hasClass('.a-cancel')) {
+                                        menu.trigger('toggleClosed');
+                                }
+                                if (!target.parents().is('#'+menu.attr('id'))) {
+                                        menu.trigger('toggleClosed');
+                                }
+                        });     
+                });
+
+                menu.bind('toggleClosed', function(){
+                        // Close Menu, Destroy Listener
+                        button.removeClass('aActiveMenu');
+                        menu.removeClass(classname);
+                        if (overlay) { overlay.fadeOut(); }
+                        $(document).unbind('click'); // Clear out click event           
+                });
+
+                $('.a-options-cancel').live('click', function(){
+                        // console.log(menu);
+                        $(this).closest(menu).trigger('toggleClosed');
+                });
+
+        }
+        
 } 
 

plugins/apostrophePlugin/trunk/web/js/aUI.js

@@ -1 +1 @@
 function aUI(target)
 {
-        
         // Grab Target if Passed Through
         if (typeof(target) == 'undefined') // If Not Set
@@ -45 +44 @@
           });
         }
-
-        // Area History Buttons
-        $('a.a-history-btn').unbind("click").click(function(event){
-                event.preventDefault();                 
-                aCloseHistory();
-                aBrowseHistory($(this).parents('div.a-area'));
-        });
-        
-        // Close History Browser
-        $('#a-history-close-button, #a-history-heading-button').click(function(){
-                aCloseHistory();
-        });
         
         // Variants
@@ -99 +86 @@
 }
 
-function aMenuToggle(button, menu, classname, overlay)
-{       
-        /* Usage: aMenuToggle(Object|ID(String), Object|ID(String), Undefined|String, Undefined|True|False) */
-        if (typeof button == "string") { button = $(button); }
-        if (typeof menu == "string") { menu = $(menu); }
-        if (typeof classname == "undefined" || classname == '') { classname = "show-options";   }
-        if (typeof overlay != "undefined" && overlay) { overlay = $('.a-page-overlay'); }
-        
-        if (menu.attr('id') == '') {
-                // We need an ID for the menu. If the menu doesn't have one, we create it by appending 'menu' to the Button ID
-                newID = button.attr('id')+'-menu';
-                menu.attr('id', newID);
-        }
-        
-        button.unbind('click').click(function()
-        {
-                // Button Toggle
-                if (!button.hasClass('aActiveMenu')) 
-                { 
-                        menu.trigger('toggleOpen'); 
-                }
-                else 
-                {
-                        menu.trigger('toggleClosed');
-                }
-        });
-
-        menu.bind('toggleOpen', function(){
-                // Open Menu, Create Listener
-                button.addClass('aActiveMenu');
-                menu.addClass(classname);                       
-                if (overlay) { overlay.stop().show(); }
-                $(document).click(function(e){
-                        var target = e.target; 
-                        target = $(target);  
-                        if (target.hasClass('.a-page-overlay') || target.hasClass('.a-cancel')) {
-                                menu.trigger('toggleClosed');
-                        }
-                        if (!target.parents().is('#'+menu.attr('id'))) {
-                                menu.trigger('toggleClosed');
-                        }
-                });     
-        });
-        
-        menu.bind('toggleClosed', function(){
-                // Close Menu, Destroy Listener
-                button.removeClass('aActiveMenu');
-                menu.removeClass(classname);
-                if (overlay) { overlay.fadeOut(); }
-                $(document).unbind('click'); // Clear out click event           
-        });
-
-}
-
 function aAccordion(heading)
 {
@@ -168 +101 @@
 }
 
-
-function aBrowseHistory(area)
-{
-        var areaControls = area.find('ul.a-area-controls');
-        var areaControlsTop = areaControls.offset().top;
-
-        $('.a-page-overlay').show();
-                
-        // Clear Old History from the Browser
-        if (!area.hasClass('browsing-history')) 
-        {
-                $('.a-history-browser .a-history-items').html('<tr class="a-history-item"><td class="date"><img src="\/apostrophePlugin\/images\/a-icon-loader.gif"><\/td><td class="editor"><\/td><td class="preview"><\/td><\/tr>');
-                area.addClass('browsing-history');
-        }
-                        
-        // Positioning the History Browser
-        $('.a-history-browser').css('top',(areaControlsTop-5)+"px"); //21 = height of buttons plus one margin
-        $('.a-history-browser').fadeIn();
-        $('.a-page-overlay').click(function(){
-                aCloseHistory();
-                $(this).unbind('click');
-        });
-        
-        $('#a-history-preview-notice-toggle').click(function(){
-                $('.a-history-preview-notice').children(':not(".a-history-options")').slideUp();
-        });
-}
-
-function aCloseHistory()
-{
-        $('a.a-history-btn').parents('.a-area').removeClass('browsing-history');
-        $('a.a-history-btn').parents('.a-area').removeClass('previewing-history');
-        $('.a-history-browser, .a-history-preview-notice').hide();
-  $('body').removeClass('history-preview');     
-        $('.a-page-overlay').fadeOut();
-}
-
 $(document).ready(function(){
         aUI();