/[drupal]/contributions/modules/media/javascript/media.js
ViewVC logotype

Diff of /contributions/modules/media/javascript/media.js

Parent Directory Parent Directory | Revision Log Revision Log | View Revision Graph Revision Graph | View Patch Patch

revision 1.2.2.13 by arthuregg, Fri Nov 13 14:41:50 2009 UTC revision 1.2.2.14 by aaron, Mon Nov 23 19:25:29 2009 UTC
# Line 1  Line 1 
1  // $Id: media.js,v 1.2.2.12 2009/11/13 03:14:08 arthuregg Exp $  // $Id: media.js,v 1.2.2.13 2009/11/13 14:41:50 arthuregg Exp $
2    
3  /**  /**
4   *  @file   *  @file
# Line 7  Line 7 
7    
8  /*  /*
9    
10  The naming convetion for items in this file revolves around three different  The naming convetion for items in this file revolves around three different
11  components: tabs, subtabs and panes. Tabs are a primary navigation or grouping  components: tabs, subtabs and panes. Tabs are a primary navigation or grouping
12  mechanism. Subtabs are related to a specific tab. Panes are the content  mechanism. Subtabs are related to a specific tab. Panes are the content
13  related to the subtab.  related to the subtab.
14    
15     ---------------------------------------     ---------------------------------------
# Line 38  related to the subtab. Line 38  related to the subtab.
38  /* Content browser navigation                           */  /* Content browser navigation                           */
39  /* **************************************************** */  /* **************************************************** */
40    
41    
42  /**  /**
43   * Load the Media Browser for the first time   * Load the Media Browser for the first time
44   */   */
45  Drupal.behaviors.mediaBrowserLaunch ={  Drupal.behaviors.mediaBrowserLaunch ={
# Line 48  Drupal.behaviors.mediaBrowserLaunch ={ Line 48  Drupal.behaviors.mediaBrowserLaunch ={
48        $(this).bind('click', function () {        $(this).bind('click', function () {
49          // Add the dialog box to the page using this file field id          // Add the dialog box to the page using this file field id
50          $(this).append(media_render_dialog());          $(this).append(media_render_dialog());
51    
52          // Now we set the current data state for the media browser by storing          // Now we set the current data state for the media browser by storing
53          // the data in a hidden field          // the data in a hidden field
54          $('#media_browser_data_store').attr('tabname', $('#media_content_browser_tabs .item-list a.active').attr('tabname')).attr('object-type', $(this).attr('object-type')).attr('bundle', $(this).attr('bundle')).attr('field-name', $(this).attr('field-name'));          $('#media_browser_data_store').attr('tabname', $('#media_content_browser_tabs .item-list a.active').attr('tabname')).attr('object-type', $(this).attr('object-type')).attr('bundle', $(this).attr('bundle')).attr('field-name', $(this).attr('field-name'));
55    
56          // Render the subtabs for the current active tab          // Render the subtabs for the current active tab
57          renderSubTabs();          renderSubTabs();
58    
59          // Now we can launch our modal window          // Now we can launch our modal window
60          $('#dialog').dialog({          $('#dialog').dialog({
61            buttons: { "Ok": function() { $(this).dialog("close"); } },            buttons: { "Ok": function() { $(this).dialog("close"); } },
62            modal: true,            modal: true,
63            draggable: false,            draggable: false,
64            resizable: false,            resizable: false,
# Line 76  Drupal.behaviors.mediaBrowserLaunch ={ Line 76  Drupal.behaviors.mediaBrowserLaunch ={
76      });      });
77    }    }
78  };  };
79    
80    
81  /**  /**
82   * Render the modal dialog box   * Render the modal dialog box
# Line 100  function media_render_dialog() { Line 100  function media_render_dialog() {
100    
101  /**  /**
102   * Attach the behaviors to the main tabs across the top   * Attach the behaviors to the main tabs across the top
103   * of the browser   * of the browser
104   */   */
105  Drupal.behaviors.tabsClick ={  Drupal.behaviors.tabsClick ={
106    attach: function (context, settings) {    attach: function (context, settings) {
# Line 109  Drupal.behaviors.tabsClick ={ Line 109  Drupal.behaviors.tabsClick ={
109        $(this).bind('click', function () {        $(this).bind('click', function () {
110          // The first thing we need to do is to update the data store with this tab data          // The first thing we need to do is to update the data store with this tab data
111          $('#media_browser_data_store').attr('tabname', $(this).attr('tabname'));          $('#media_browser_data_store').attr('tabname', $(this).attr('tabname'));
112    
113          // Unset other active tabs          // Unset other active tabs
114          $('#media_content_browser_tabs .item-list li.active, #media_content_browser_tabs .item-list a.active').removeClass('active');          $('#media_content_browser_tabs .item-list li.active, #media_content_browser_tabs .item-list a.active').removeClass('active');
115          // Make this tab active          // Make this tab active
116          $(this).addClass('active');          $(this).addClass('active');
117          $(this).parents('li').addClass('active');          $(this).parents('li').addClass('active');
118    
119          // Unload content in the subtabs          // Unload content in the subtabs
120          $('#media_content_browser_subtabs').html();          $('#media_content_browser_subtabs').html();
121          // Get content the subtabs for this tab          // Get content the subtabs for this tab
122          renderSubTabs();          renderSubTabs();
123        });        });
124      });      });
125    }    }
# Line 144  function renderSubTabs() { Line 144  function renderSubTabs() {
144        Drupal.attachBehaviors($('#dialog'));        Drupal.attachBehaviors($('#dialog'));
145        // Make the active subtab render its content        // Make the active subtab render its content
146        renderSubTabPane();        renderSubTabPane();
147      }      }
148    );    );
149  }  }
150    
151    
152  /**  /**
153   *  This loads pane content based on subtab clicks. It needs   *  This loads pane content based on subtab clicks. It needs
154   *  to be run each time that a new set of sub tabs is rendered   *  to be run each time that a new set of sub tabs is rendered
155   *  in the dialog box   *  in the dialog box
156   */   */
157  Drupal.behaviors.subTabsClick ={  Drupal.behaviors.subTabsClick ={
158    attach: function (context, settings) {    attach: function (context, settings) {
159      $('#media_content_browser_subtabs li.vertical-tab-button a', context).once('subTabsClick', function() {      $('#media_content_browser_subtabs li.vertical-tab-button a', context).once('subTabsClick', function() {
160        $(this).bind('click', function () {        $(this).bind('click', function () {
161          // Store the current subtab identifier          // Store the current subtab identifier
162          $('#media_browser_data_store').attr('identifier', $(this).attr('identifier'));          $('#media_browser_data_store').attr('identifier', $(this).attr('identifier'));
163          renderSubTabPane();          renderSubTabPane();
164        });        });
# Line 170  Drupal.behaviors.subTabsClick ={ Line 170  Drupal.behaviors.subTabsClick ={
170  /**  /**
171   * This does the actual render of content into the subTab pane   * This does the actual render of content into the subTab pane
172   * We do not pass params to this so that it can be a generalized   * We do not pass params to this so that it can be a generalized
173   * function.   * function.
174   * @TODO add a throbber to alert the user we are loading content   * @TODO add a throbber to alert the user we are loading content
175   */   */
176  function renderSubTabPane() {  function renderSubTabPane() {
# Line 178  function renderSubTabPane() { Line 178  function renderSubTabPane() {
178     var active_subtab = '#'+$('#edit-subtabs--active-tab').attr('value');     var active_subtab = '#'+$('#edit-subtabs--active-tab').attr('value');
179     // Derive the identifier for this pane     // Derive the identifier for this pane
180     var identifier = $(active_subtab+' input.subtab_data').attr('identifier');     var identifier = $(active_subtab+' input.subtab_data').attr('identifier');
181    
182     // Now we have to build a query which the dispatcher uses to get the correct content     // Now we have to build a query which the dispatcher uses to get the correct content
183     // for this subtab pane     // for this subtab pane
184     var query = '?identifier='+identifier;     var query = '?identifier='+identifier;
185     // This populates the pane with the proper settings     // This populates the pane with the proper settings
186     $.getJSON(build_callback_url('pane', query),     $.getJSON(build_callback_url('pane', query),
187       function(data) {       function(data) {
188         // Remove any exisiting pane content         // Remove any exisiting pane content
189         $('div.pane_content.active').removeClass('active').html('');         $('div.pane_content.active').removeClass('active').html('');
190         $(active_subtab+' div.pane_content').html(data);         $(active_subtab+' div.pane_content').html(data);
191         // Make this pane active         // Make this pane active
192         $(active_subtab+' div.pane_content').addClass('active');         $(active_subtab+' div.pane_content').addClass('active');
193           // Attach any subtab behaviors.
194           Drupal.attachBehaviors($(active_subtab+' div.pane_content'));
195       }       }
196    );    );
197  }  }
# Line 204  function build_callback_url(params, quer Line 206  function build_callback_url(params, quer
206    var field_name = $('#media_browser_data_store').attr('field-name');    var field_name = $('#media_browser_data_store').attr('field-name');
207    var identifier = $('#media_browser_data_store').attr('identifier');    var identifier = $('#media_browser_data_store').attr('identifier');
208    var url = Drupal.settings.media.media_browser_content_load_url+'/'+object_type+'/'+bundle+'/'+field_name;    var url = Drupal.settings.media.media_browser_content_load_url+'/'+object_type+'/'+bundle+'/'+field_name;
209    
210    // Do we have parameters to add?    // Do we have parameters to add?
211    if (typeof(params) != 'undefined') {    if (typeof(params) != 'undefined') {
212      url += '/'+params;      url += '/'+params;
# Line 213  function build_callback_url(params, quer Line 215  function build_callback_url(params, quer
215    if (typeof(query) != 'undefined') {    if (typeof(query) != 'undefined') {
216      url += query;      url += query;
217    }    }
218    
219    return url;    return url;
220  }  }
221    
# Line 228  function build_callback_url(params, quer Line 230  function build_callback_url(params, quer
230  $(document).ready(function () {  $(document).ready(function () {
231    
232    
233    
234    
235    /**    /**
236     *  Catch the clicks on the result limiters and pager queries     *  Catch the clicks on the result limiters and pager queries
237     *  and modify the links to have the options in their URL so     *  and modify the links to have the options in their URL so
238     *  they can be parsed. Note that we are using the live function     *  they can be parsed. Note that we are using the live function
239     *  so that updates to the media_content_browser still have     *  so that updates to the media_content_browser still have
240     *  jquery functionality     *  jquery functionality
241     */     */
242    $('ul.result_limit li a, ul.pager li a').live('click', function() {    $('ul.result_limit li a, ul.pager li a').live('click', function() {
243      // Get the current query string      // Get the current query string
244      var query = $(this).attr('href').replace(/.*\?/, '');      var query = $(this).attr('href').replace(/.*\?/, '');
# Line 244  $(document).ready(function () { Line 246  $(document).ready(function () {
246      // Make sure to stop the click      // Make sure to stop the click
247      return false;      return false;
248    });    });
249    
250    
251    function media_load_content_display(query) {    function media_load_content_display(query) {
252      // Start visual effects      // Start visual effects
253      // Show the throbber      // Show the throbber
254      $('#media_content_browser_throbber').fadeIn('fast');      $('#media_content_browser_throbber').fadeIn('fast');
255      $('div.pane_content.active').fadeTo('slow', 0.23, function() {      $('div.pane_content.active').fadeTo('slow', 0.23, function() {
256        // Fetch content data with the new parameters        // Fetch content data with the new parameters
257        media_load_content_navigator_reload(query);        media_load_content_navigator_reload(query);
258        // Hide throbber        // Hide throbber
259        $('#media_content_browser_throbber').fadeOut('slow', function () {        $('#media_content_browser_throbber').fadeOut('slow', function () {
260          // fade back the content          // fade back the content
261          $('div.pane_content.active').fadeTo('slow', 1);          $('div.pane_content.active').fadeTo('slow', 1);
262          });          });
263    
264      }); // fade      }); // fade
265    }    }
266    
267    /**    /**
268     * Stub function to get the current active pager     * Stub function to get the current active pager
269     * and reload the content based on this navigators     * and reload the content based on this navigators
270     * query string     * query string
271     */     */
272    function media_load_content_navigator_reload(query) {    function media_load_content_navigator_reload(query) {
273      $.getJSON(Drupal.settings.media.media_browser_content_load_url+'?'+query,      $.getJSON(Drupal.settings.media.media_browser_content_load_url+'?'+query,
274        function(data) { $('div.pane_content.active').html(data);}        function(data) { $('div.pane_content.active').html(data);}
275      );      );
276    }    }
277    
278    
279    /**    /**
280     * Handle the clicks on actual images and transfer those values     * Handle the clicks on actual images and transfer those values
281     * to the submission form     * to the submission form
282     */     */
283     // Catch the clicks on the images in the modal window     // Catch the clicks on the images in the modal window
284     $('.media-thumbnail ul.media_content_navigator.results a').live('click', function () {     $('.media-thumbnail ul.media_content_navigator.results a').live('click', function () {
285       // Remove any current selections       // Remove any current selections
286       $('.media-thumbnail').removeClass('selected');       $('.media-thumbnail').removeClass('selected');
287       // Select this thumbnail       // Select this thumbnail
288       $(this).parents('.media-thumbnail').addClass('selected');       $(this).parents('.media-thumbnail').addClass('selected');
289       // We need to get the value of the checkbox for this selected file       // We need to get the value of the checkbox for this selected file
290       var uri = $('.media-thumbnail.selected input.form-checkbox').val();       var uri = $('.media-thumbnail.selected input.form-checkbox').val();
291       // Get the enclosing div and then the file input field and change its value       // Get the enclosing div and then the file input field and change its value
292       // @TODO this does not support multiple file fields currently because       // @TODO this does not support multiple file fields currently because
293       //       the modal window appends to the bottom of the page. We need       //       the modal window appends to the bottom of the page. We need
294       //       to come up with a mechanism to snif the current field- placing       //       to come up with a mechanism to snif the current field- placing
295       //       a hiden element into the modal dailog with the filefield id       //       a hiden element into the modal dailog with the filefield id
296       //       might work well       //       might work well
297       $('input.media-file-uri').val(uri);       $('input.media-file-uri').val(uri);
298       // Deactivate the click       // Deactivate the click
299       return false;       return false;
300       });       });
   
   
301    
302    
303    
304    
305  }); // $(document).ready  }); // $(document).ready
306    
307    
Legend:
Removed from v.1.2.2.13  
changed lines
  Added in v.1.2.2.14
  ViewVC Help
Powered by ViewVC 1.1.3