Changeset 852

Show
Ignore:
Timestamp:
05/01/08 22:09:54 (2 months ago)
Author:
jlong
Message:

prototype: converted a couple of our controls to behaviors

Files:

Legend:

Unmodified
Added
Removed
Modified
Copied
Moved

  • trunk/prototype/admin/_layout.haml

    r840 r852  
    66    %link{:href=>"/admin/stylesheets/main.css", :media=>"screen", :rel=>"stylesheet", :type=>"text/css"}/ 
    77    %script{:src=>"/admin/javascripts/prototype.js", :type=>"text/javascript"} 
    8     %script{:src=>"/admin/javascripts/string.js", :type=>"text/javascript"} 
    98    %script{:src=>"/admin/javascripts/effects.js", :type=>"text/javascript"} 
     9    %script{:src=>"/admin/javascripts/lowpro.js", :type=>"text/javascript"} 
     10    %script{:src=>"/admin/javascripts/utility.js", :type=>"text/javascript"} 
    1011    %script{:src=>"/admin/javascripts/tabcontrol.js", :type=>"text/javascript"} 
    1112    %script{:src=>"/admin/javascripts/ruledtable.js", :type=>"text/javascript"} 
    12     %script{:src=>"/admin/javascripts/admin.js", :type=>"text/javascript"} 
    1313    %script{:src=>"/admin/javascripts/sitemap.js", :type=>"text/javascript"} 
     14    %script{:src=>"/admin/javascripts/application.js", :type=>"text/javascript"} 
    1415    <!--[if lt IE 7]> 
    1516    %script{:type=>"text/javascript", :src=>"/admin/javascripts/pngfix.js"} 

  • trunk/prototype/admin/extensions/index.haml

    r753 r852  
    4343        %a{:href=>"http://textism.com/tools/textile/", :target=>"_blank"} Website 
    4444      %td.version 1.0 
    45  
    46 %script{:type=>"text/javascript"} 
    47   new RuledTable('extensions'); 

  • trunk/prototype/admin/javascripts/application.js

    r751 r852  
    1 // Place your application-specific JavaScript functions and classes here 
    2 // This file is automatically included by javascript_include_tag :defaults 
     1Event.addBehavior({ 
     2   
     3  'table#site-map': SiteMapBehavior(), 
     4   
     5  'input#page_title': function() { 
     6    var title = this; 
     7    var slug = $('page_slug'); 
     8    var breadcrumb = $('page_breadcrumb'); 
     9    var oldTitle = title.value; 
     10     
     11    if (!slug || !breadcrumb) return; 
     12     
     13    new Form.Element.Observer(title, 0.15, function() { 
     14      if (oldTitle.toSlug() == slug.value) slug.value = title.value.toSlug(); 
     15      if (oldTitle == breadcrumb.value) breadcrumb.value = title.value; 
     16      oldTitle = title.value; 
     17    }); 
     18  }, 
     19   
     20  'div#tab-control': function() { 
     21    tabControl = new TabControl(this); 
     22     
     23    $$('#pages div.part > input[type=hidden]:first-child').each(function(part, index) { 
     24      var page = part.up('.page'); 
     25      tabControl.addTab('tab-' + (index + 1), part.value, page.id); 
     26    }); 
     27     
     28    tabControl.autoSelect(); 
     29  }, 
     30   
     31  'div#tag-reference-popup': function() { 
     32    var tags, searchingOn = ""; 
     33     
     34    new Form.Element.Observer('search-tag-reference', 0.5, function(element, value) { 
     35      if (!tags) tags = this.select('.tag-description') 
     36       
     37      if (value.length < 3 && searchingOn != "") { 
     38        searchingOn = ""; 
     39        tags.invoke('show'); 
     40      } else if (value.length >= 3 && searchingOn != value) { 
     41        searchingOn = value 
     42        tags.each(function(div) { 
     43          div[div.hasWord(value) ? 'show' : 'hide'](); 
     44        }); 
     45      } 
     46    }); 
     47 
     48    this.down('p a.close').observe('click', function(e) { 
     49      e.findElement('.popup').hide(); 
     50      e.stop(); 
     51    }); 
     52  }, 
     53   
     54  'table.index': RuledTableBehavior() 
     55   
     56}); 

  • trunk/prototype/admin/javascripts/ruledtable.js

    r751 r852  
    1 var RuledTable = Class.create({ 
    2   initialize: function(element) { 
    3     if (Prototype.Browser.IE) 
    4       $(element). 
    5         observe('mouseover', this.onMouseOverRow.bindAsEventListener(this, 'addClassName')). 
    6         observe('mouseout', this.onMouseOverRow.bindAsEventListener(this, 'removeClassName')); 
     1/* 
     2 *  ruledtable.js 
     3 *   
     4 *  depends on: prototype.js and lowpro.js 
     5 *   
     6 *  Allows you to create a table that highlights the row currently under the 
     7 *  mouse cursor. This greatly improves readability for tables with a large 
     8 *  amount of data. This implementation is based partially on the ideas 
     9 *  presented in: 
     10 *   
     11 *    http://www.alistapart.com/articles/tableruler/ 
     12 *   
     13 *  To use, simply add the following lines to application.js: 
     14 *   
     15 *     Event.addBehavior({ 
     16 *       'table.ruled': RuledTableBehavior() 
     17 *     }); 
     18 *   
     19 *  And add the following styles to your CSS: 
     20 *   
     21 *    table.ruled tr.hover td { 
     22 *      background: #ff9; 
     23 *    } 
     24 *   
     25 *  Then add the class name of "ruled" to the to any table that you would like 
     26 *  to exibit this behavior. If you would like a click anywhere on the row to 
     27 *  click the first link in the row simply add the class "clickable" to the 
     28 *  table or pass in the clickable option when the behavior is initialized. 
     29 *  The clickable option will also work with radio buttons or checkboxes. 
     30 *   
     31 *  Copyright (c) 2007-2008 John W. Long and Adam Williams 
     32 *  This behavior is freely distributable under the terms of the MIT license. 
     33 *  For details, see http://www.opensource.org/licenses/mit-license.php 
     34 * 
     35 */ 
     36 
     37var RuledTableBehavior = Behavior.create({ 
     38   
     39  initialize: function(options) { 
     40    var options = options || { 'clickable': false }; 
     41    if (this.element.hasClassName('clickable')) options['clickable'] = true; 
     42    if (this.element.hasClassName('unclickable')) options['clickable'] = false; 
     43    this.clickable = options['clickable'] || false; 
     44    this._updateSelectionOnRows(); 
    745  }, 
    846   
    9   onMouseOverRow: function(event, method) { 
    10     var row = event.findElement('tr'); 
    11     if (row) row[method]('highlight'); 
     47  onmouseover: function(event) { 
     48    var row = this._getRow(event); 
     49    if (row) row.addClassName('hover'); 
     50  }, 
     51   
     52  onmouseout: function(event) { 
     53    var row = this._getRow(event); 
     54    if (row) row.removeClassName('hover'); 
     55  }, 
     56   
     57  onclick: function(event) { 
     58    if (this.clickable) { 
     59      var row = this._getRow(event); 
     60      var clicker = row.down('input[type=checkbox]') || row.down('input[type=radio]'); 
     61      if (clicker) { 
     62        if (event.target != clicker) clicker.checked = !clicker.checked; 
     63        if (/check/i.match(clicker.type)) { 
     64          this._updateSelectionOnRow(row, clicker); 
     65        } else { 
     66          this._updateSelectionOnRows(); 
     67        } 
     68        this.element.fire('table:select'); 
     69      } else { 
     70        var link = row.down('a'); 
     71        if (event.target != link) window.location = link.href; 
     72      } 
     73    } 
     74  }, 
     75   
     76  'ontable:selectall': function(event) { 
     77    this.element.select('tr').each(function(row) { 
     78      var checkbox = row.down('input[type=checkbox]'); 
     79      checkbox.checked = true; 
     80      this._updateSelectionOnRow(row, checkbox); 
     81    }.bind(this)); 
     82  }, 
     83   
     84  'ontable:invertselection': function(event) { 
     85    this.element.select('tr').each(function(row) { 
     86      var checkbox = row.down('input[type=checkbox]'); 
     87      checkbox.checked = !checkbox.checked; 
     88      this._updateSelectionOnRow(row, checkbox); 
     89    }.bind(this)) 
     90  }, 
     91   
     92  _getRow: function(event) { 
     93    if (!event.target.row) event.target.row = event.target.up('tr'); 
     94    return event.target.row; 
     95  }, 
     96   
     97  _updateSelectionOnRow: function(row, clicker) { 
     98    if (!clicker) clicker = row.down('input[type=checkbox]') || row.down('input[type=radio]'); 
     99    if (clicker) { 
     100      if (clicker.checked) { 
     101        row.addClassName('selected'); 
     102      } else { 
     103        row.removeClassName('selected'); 
     104      } 
     105    } 
     106  }, 
     107   
     108  _updateSelectionOnRows: function() { 
     109    this.element.select('tr').each(function(row) { this._updateSelectionOnRow(row); }.bind(this)); 
    12110  } 
     111   
    13112}); 

  • trunk/prototype/admin/javascripts/sitemap.js

    r751 r852  
    1 var SiteMap = Class.create(RuledTable, { 
    2   initialize: function($super, element) { 
    3     $super(element); 
     1/* 
     2 *  sitemap.js 
     3 *   
     4 *  depends on: prototype.js and lowpro.js 
     5 *   
     6 *  Used by Radiant to create the expandable sitemap. 
     7 *   
     8 *  To use, simply add the following lines to application.js: 
     9 *   
     10 *     Event.addBehavior({ 
     11 *       'table#site-map': SiteMapBehavior() 
     12 *     }); 
     13 * 
     14 */ 
     15 
     16var SiteMapBehavior = Behavior.create({ 
     17   
     18  initialize: function() { 
    419    this.readExpandedCookie(); 
    5     Event.observe(element, 'click', this.onMouseClickRow.bindAsEventListener(this)); 
    620  }, 
    721   
    8   onMouseClickRow: function(event) { 
     22  onclick: function(event) { 
    923    if (this.isExpander(event.target)) { 
    1024      var row = event.findElement('tr'); 
    …… 
    109123   
    110124  getBranch: function(row) { 
    111     var id = this.extractPageId(row), level = this.extractLevel(row), 
    112         spinner = $('busy-' + id); 
     125    var id = this.extractPageId(row); 
     126    var level = this.extractLevel(row); 
     127    var spinner = $('busy-' + id); 
    113128         
    114129    new Ajax.Updater( 

  • trunk/prototype/admin/layouts/_fields.haml

    r839 r852  
    1414  %p.more-or-less 
    1515    %small 
    16       %a{:id=>"more-extended-metadata", :href=>"javascript: $('extended-metadata').show(); $('less-extended-metadata').show(); $('more-extended-metadata').hide(); return false"} More 
    17       %a{:id=>"less-extended-metadata", :href=>"javascript: $('extended-metadata').hide(); $('more-extended-metadata').show(); $('less-extended-metadata').hide(); return false", :style=>"display: none"} Less 
     16      %a{:id=>"more-extended-metadata", :href=>"javascript: $('extended-metadata').show(); $('less-extended-metadata').show(); $('more-extended-metadata').hide(); this.stop()"} More 
     17      %a{:id=>"less-extended-metadata", :href=>"javascript: $('extended-metadata').hide(); $('more-extended-metadata').show(); $('less-extended-metadata').hide(); this.stop()", :style=>"display: none"} Less 
    1818   
    1919  %p.content 

  • trunk/prototype/admin/layouts/index.haml

    r839 r852  
    4141          %img{:src=>"/admin/images/remove.png", :alt=>"Remove Layout" }/ 
    4242 
    43 %script{:type=>"text/javascript" } 
    44   :plain 
    45     // <![CDATA[ 
    46     new RuledTable('layouts'); 
    47     // ]]> 
    4843%p 
    4944  %a{:href=>"/admin/layouts/new" } 

  • trunk/prototype/admin/pages/_fields.haml

    r839 r852  
    7171  %p.more-or-less 
    7272    %small 
    73       %a{:id=>"more-extended-metadata", :href=>"javascript: $('extended-metadata').show(); $('less-extended-metadata').show(); $('more-extended-metadata').hide(); return false"} More 
    74       %a{:id=>"less-extended-metadata", :href=>"javascript: $('extended-metadata').hide(); $('more-extended-metadata').show(); $('less-extended-metadata').hide(); return false", :style=>"display: none"} Less 
     73      %a{:id=>"more-extended-metadata", :href=>"javascript: $('extended-metadata').show(); $('less-extended-metadata').show(); $('more-extended-metadata').hide(); this.stop()"} More 
     74      %a{:id=>"less-extended-metadata", :href=>"javascript: $('extended-metadata').hide(); $('more-extended-metadata').show(); $('less-extended-metadata').hide(); this.stop()", :style=>"display: none"} Less 
    7575   
    7676  #tab-control 

  • trunk/prototype/admin/snippets/index.haml

    r835 r852  
    2828          %img{:src=>"/admin/images/remove.png?1202263271", :alt=>"Remove Snippet"}/ 
    2929 
    30 %script{:type=>"text/javascript"} 
    31   :plain 
    32     // <![CDATA[ 
    33     new RuledTable('snippets'); 
    34     // ]]> 
    35  
    3630%p 
    3731  %a{:href=>"/admin/snippets/new"}