page-image-picker.js.erb in refinerycms-page-images-2.1.0

- old
+ new
@@ -1,167 +1,190 @@
-$(document).ready(function(){
-  $('#custom_images_tab a').click(function(){
-    if (!(picker = $('#page_image_picker')).data('size-applied')){
-      wym_box = $('.page_part:first .wym_box');
-      iframe = $('.page_part:first iframe');
-      picker.css({
-        height: wym_box.height()
-        , width: wym_box.width()
-      }).data('size-applied', true).corner('tr 5px').corner('bottom 5px').find('.wym_box').css({
-        backgroundColor: 'white'
-        , height: iframe.height() + $('.page_part:first .wym_area_top').height() - parseInt($('.wym_area_top .label_inline_with_link a').css('lineHeight'))
-        , width: iframe.width() - 20
-        , 'border-color': iframe.css('border-top-color')
-        , 'border-style': iframe.css('border-top-style')
-        , 'border-width': iframe.css('border-top-width')
-        , padding: '0px 10px 0px 10px'
-      });
-    }
-  });
+<%# encoding: utf-8 %>
+var image_added; // Global callback
+(function($) {
+  var reset_functionality, open_image_caption, reindex_images,
+      template_li, wysiwyg_enabled, input_type;
+  $(document).ready(function(){
+    var picker = $('#page_image_picker');
+    input_type = picker.data('input-type');
+    wysiwyg_enabled = input_type == 'wym';
 
-  // Webkit browsers don't like the textarea being moved around the DOM,
-  // they ignore the new contents. This is fixed below by adding a hidden
-  // field that stays in place.
-  $('#content #page_images li textarea:hidden').each(function(index) {
-    var old_name = $(this).attr('name');
-    $(this).attr('data-old-id', $(this).attr('id'));
-    $(this).attr('name', 'ignore_me_' + index);
-    $(this).attr('id', 'ignore_me_' + index);
+    $('#custom_images_tab a').click(function(){
+      if (!picker.data('size-applied') && wysiwyg_enabled){
+        var wym_box = $('.page_part:first .wym_box'),
+            iframe = $('.page_part:first iframe');
+        picker.css({
+          height: wym_box.height()
+          , width: wym_box.width()
+        }).data('size-applied', true).corner('tr 5px').corner('bottom 5px').find('.wym_box').css({
+          backgroundColor: 'white'
+          , height: iframe.height() + $('.page_part:first .wym_area_top').height() - parseInt($('.wym_area_top .label_inline_with_link a').css('lineHeight'))
+          , width: iframe.width() - 20
+          , 'border-color': iframe.css('border-top-color')
+          , 'border-style': iframe.css('border-top-style')
+          , 'border-width': iframe.css('border-top-width')
+          , padding: '0px 10px 0px 10px'
+        });
+      }
+    });
 
-    var hidden = $('<input>')
-                  .addClass('caption')
-                  .attr('type', 'hidden')
-                  .attr('name', old_name)
-                  .attr('id', $(this).attr('data-old-id'))
-                  .val($(this).val());
+    // Webkit browsers don't like the textarea being moved around the DOM,
+    // they ignore the new contents. This is fixed below by adding a hidden
+    // field that stays in place.
+    $('#page_images li textarea:hidden').each(function(index) {
+      var old_name = $(this).attr('name'),
+          $this = $(this);
+      $this.attr('data-old-id', $this.attr('id'));
+      $this.attr('name', 'ignore_me_' + index);
+      $this.attr('id', 'ignore_me_' + index);
 
-    $(this).parents('li').first().append(hidden);
-  });
+      var hidden = $('<input>')
+                    .addClass('caption')
+                    .attr('type', 'hidden')
+                    .attr('name', old_name)
+                    .attr('id', $this.attr('data-old-id'))
+                    .val($this.val());
 
-  reset_functionality();
-});
+      $this.parents('li').first().append(hidden);
+    });
 
-reset_functionality = function() {
-  WYMeditor.onload_functions.push(function(){
-    $('.wym_box').css({'width':null});
-  });
+    reset_functionality();
 
-  $("#page_images").sortable({
-    'tolerance': 'pointer'
-    , 'placeholder': 'placeholder'
-    , 'cursor': 'drag'
-    , 'items': 'li'
-    , stop: reindex_images
+
+    // Once the plugin has init'd everything, remove the template UI
+    $('.page-images-caption-modal').hide();
+    template_li = $('#page_images .js-page-images-template').detach();
   });
 
-  $('#content #page_images li:not(.empty)').live('hover', function(e) {
-    if (e.type == 'mouseenter' || e.type == 'mouseover') {
-      if ((image_actions = $(this).find('.image_actions')).length == 0) {
-        image_actions = $("<div class='image_actions'></div>");
-        img_delete = $("<img src='/assets/refinery/icons/delete.png' width='16' height='16' />");
-        img_delete.appendTo(image_actions);
-        img_delete.click(function() {
-          $(this).parents('li').first().remove();
-          reindex_images();
-        });
+  reset_functionality = function() {
+    if(wysiwyg_enabled) {
+      WYMeditor.onload_functions.push(function(){
+        $('.wym_box').css({'width':null});
+      });
+    }
 
-        if ($(this).find('textarea.page_caption').length > 0) {
-          img_caption = $("<img src='/assets/refinery/icons/user_comment.png' width='16' height='16' class='caption' />");
-          img_caption.appendTo(image_actions);
-          img_caption.click(open_image_caption);
-        } else {
-          image_actions.addClass('no_captions');
-        }
+    $("#page_images").sortable({
+      'tolerance': 'pointer'
+      , 'placeholder': 'placeholder'
+      , 'cursor': 'drag'
+      , 'items': 'li'
+      , stop: reindex_images
+    });
 
-        image_actions.appendTo($(this));
-      }
+    $('#page_images').on('mouseenter mouseleave', 'li', function(e) {
+      var $this = $(this),
+          image_actions = $this.find('.image_actions');
+      if (e.type == 'mouseenter') {
+        if (image_actions.length == 0) {
+          image_actions = $("<div class='image_actions'></div>");
+          var img_delete = $("<img src='<%= image_path('refinery/icons/delete.png') %>' width='16' height='16' />");
+          img_delete.appendTo(image_actions);
+          img_delete.click(function() {
+            $(this).parents('li').first().remove();
+            reindex_images();
+          });
 
-      image_actions.show();
-    } else if (e.type == 'mouseleave' || e.type == 'mouseout') {
-      $(this).find('.image_actions').hide();
-    }
-  });
+          if ($this.find('textarea.page_caption').length > 0) {
+            var img_caption = $("<img src='<%= image_path('refinery/icons/user_comment.png') %>' width='16' height='16' class='caption' />");
+            img_caption.appendTo(image_actions);
+            img_caption.click(open_image_caption);
+          } else {
+            image_actions.addClass('no_captions');
+          }
 
-  reindex_images();
-}
+          image_actions.appendTo($this);
+        }
 
-image_added = function(image) {
-  new_list_item = (current_list_item = $('li.empty')).clone();
-  image_id = $(image).attr('id').replace('image_', '');
-  current_list_item.find('input:hidden:first').val(image_id);
+        image_actions.show();
+      } else if (e.type == 'mouseleave') {
+        image_actions.hide();
+      }
+    });
 
-  $("<img />").attr({
-    title: $(image).attr('title')
-    , alt: $(image).attr('alt')
-    , src: $(image).attr('data-grid') // use 'grid' size that is built into Refinery CMS (135x135#c).
-  }).appendTo(current_list_item);
+    reindex_images();
+  };
 
-  current_list_item.attr('id', 'image_' + image_id).removeClass('empty');
+  image_added = function(image) {
+    var current_list_item = template_li.clone(),
+        image_id = $(image).attr('id').replace('image_', '');
+    current_list_item.find('input:hidden:first').val(image_id);
 
-  new_list_item.appendTo($('#page_images'));
-  reset_functionality();
-}
+    $("<img />").attr({
+      title: $(image).attr('title')
+      , alt: $(image).attr('alt')
+      , src: $(image).attr('data-grid') // use 'grid' size that is built into Refinery CMS (135x135#c).
+    }).appendTo(current_list_item);
 
-open_image_caption = function(e) {
-  // move the textarea out of the list item, and then move the textarea back into it when we click done.
-  (list_item = $(this).parents('li').first()).addClass('current_caption_list_item');
-  textarea = list_item.find('.textarea_wrapper_for_wym > textarea');
+    current_list_item.attr('id', 'image_' + image_id).removeClass('empty');
 
-  textarea.after($("<div class='form-actions'><div class='form-actions-left'><a class='button'><%= I18n.t('refinery.js.admin.page_images.done') %></a></div></div>"));
-  textarea.parent().dialog({
-     title: "<%= I18n.t('refinery.js.admin.page_images.add_caption') %>"
-     , modal: true
-     , resizable: false
-     , autoOpen: true
-     , width: 928
-     , height: 530
-   });
+    current_list_item.appendTo($('#page_images'));
+    reset_functionality();
+  };
 
-  $('.ui-dialog:visible .ui-dialog-titlebar-close, .ui-dialog:visible .form-actions a.button')
-    .on('click',
-      $.proxy(function(e) {
-        // first, update the editor because we're blocking event bubbling (third argument to bind set to false).
-        $(this).data('wymeditor').update();
-        $(this).removeClass('wymeditor')
-               .removeClass('active_rotator_wymeditor');
+  open_image_caption = function(e) {
+    var list_item = $(this).closest('li'),
+        textarea = list_item.find('.page-images-caption-modal > textarea'),
+        textarea_wrapper = textarea.parent(),
+        modal_size = {
+          textarea: { width: 400, height: 'auto' },
+          wym: { width: 928, height: 530 }
+        };
 
-        $this_parent = $(this).parent();
-        $this_parent.appendTo('li.current_caption_list_item').dialog('close').data('dialog', null);
-        $this_parent.find('.form-actions').remove();
-        $this_parent.find('.wym_box').remove();
-        $this_parent.css('height', 'auto');
-        $this_parent.removeClass('ui-dialog-content').removeClass('ui-widget-content');
+    textarea_wrapper.find('.js-page-images-done').on('click', function() {
+      textarea_wrapper.dialog("close");
+    });
 
-        $('li.current_caption_list_item').removeClass('current_caption_list_item');
+    var close_handler = function() {
+      if(wysiwyg_enabled) {
+        textarea.data('wymeditor').update();
+      }
 
-        $('.ui-dialog, .ui-widget-overlay:visible').remove();
+      $('li.current_caption_list_item').removeClass('current_caption_list_item');
+      $('#' + textarea.attr('data-old-id')).val(textarea.val());
+      textarea_wrapper.dialog('destroy');
+    };
 
-        $('#' + $(this).attr('data-old-id')).val($(this).val());
-      }, textarea)
-    );
+    // move the textarea out of the list item, and then move the textarea back into it when we click done.
+    list_item.addClass('current_caption_list_item');
+    textarea_wrapper.dialog({
+      title: "<%= I18n.t('refinery.js.admin.page_images.add_caption') %>"
+      , modal: true
+      , resizable: false
+      , autoOpen: true
+      , width: modal_size[input_type].width
+      , height: modal_size[input_type].height
+      , close: close_handler
+    });
 
-  textarea.addClass('wymeditor active_rotator_wymeditor widest').wymeditor(wymeditor_boot_options);
-}
+    if(wysiwyg_enabled) {
+      textarea.addClass('wymeditor active_rotator_wymeditor widest').wymeditor(wymeditor_boot_options);
+    }
+    else {
+      textarea.show();
+    }
+  };
 
-reindex_images = function() {
-  $('#page_images li textarea:hidden').each(function(i, input){
-    // make the image's name consistent with its position.
-    parts = $(input).attr('name').split('_');
-    parts[2] = ('' + i);
-    $(input).attr('name', parts.join('_'));
-
-    // make the image's id consistent with its position.
-    $(input).attr('id', $(input).attr('id').replace(/_\d/, '_' + i));
-    $(input).attr('data-old-id', $(input).attr('data-old-id').replace(/_\d_/, '_'+i+'_').replace(/_\d/, '_' + i));
-  });
-  $('#page_images li').each(function(i, li){
-    $('input:hidden', li).each(function() {
+  reindex_images = function() {
+    $('#page_images li textarea:hidden').each(function(i, input){
       // make the image's name consistent with its position.
-      parts = $(this).attr('name').split(']');
-      parts[1] = ('[' + i);
-      $(this).attr('name', parts.join(']'));
+      var parts = $(input).attr('name').split('_');
+      parts[2] = ('' + i);
+      $(input).attr('name', parts.join('_'));
 
       // make the image's id consistent with its position.
-      $(this).attr('id', $(this).attr('id').replace(/_\d_/, '_'+i+'_').replace(/_\d/, '_'+i));
+      $(input).attr('id', $(input).attr('id').replace(/_\d/, '_' + i));
+      $(input).attr('data-old-id', $(input).attr('data-old-id').replace(/_\d_/, '_'+i+'_').replace(/_\d/, '_' + i));
     });
-  });
-}
\ No newline at end of file
+    $('#page_images li').each(function(i, li){
+      $('input:hidden', li).each(function() {
+        var $this = $(this);
+        // make the image's name consistent with its position.
+        var parts = $this.attr('name').split(']');
+        parts[1] = ('[' + i);
+        $this.attr('name', parts.join(']'));
+
+        // make the image's id consistent with its position.
+        $this.attr('id', $this.attr('id').replace(/_\d_/, '_'+i+'_').replace(/_\d/, '_'+i));
+      });
+    });
+  }
+})(jQuery);