refinerycms-page-images 0.9.9 → 1.0

data/app/views/admin/pages/tabs/_images.html.erb

@@ -1,29 +1,6 @@
 <div class='wym_skin_refinery page_part' id='page_image_picker'>
-  <div class='wym_area_top'>
-    <span class='clearfix label_inline_with_link'>
-      <%= link_to 'Add Image',
-                  insert_admin_images_url(
-                    :dialog => true,
-                    :width => 950,
-                    :height => 510,
-                    :callback => "image_added"
-                  ),
-                  :id => "add_image_link" %>
-    </span>
-  </div>
-  <div class='wym_box field images_field'>
-    <ul id='page_images' class='clearfix'>
-      <%= f.fields_for :images do |image_form| %>
-        <li id='image_<%= image_form.object.id %>'>
-          <%= image_form.hidden_field :id %>
-          <%= image_fu image_form.object, '135x135#c' %>
-        </li>
-      <% end %>
-      <li class='empty'>
-        <%= hidden_field_tag "#{f.object.class.name.underscore}[images_attributes][#{f.object.images.size}][id]" %>
-      </li>
-    </ul>
-  </div>
+  <%= render :partial => '/admin/pages/tabs/images_bar' %>
+  <%= render :partial => '/admin/pages/tabs/images_field' %>
 </div>
 
 <% content_for :stylesheets do %>

data/app/views/admin/pages/tabs/_images_bar.html.erb

@@ -0,0 +1,12 @@
+<div class='wym_area_top'>
+  <span class='clearfix label_inline_with_link'>
+    <%= link_to 'Add Image',
+                insert_admin_images_url(
+                  :dialog => true,
+                  :width => 950,
+                  :height => 510,
+                  :callback => "image_added"
+                ),
+                :id => "add_image_link" %>
+  </span>
+</div>

data/app/views/admin/pages/tabs/_images_field.html.erb

@@ -0,0 +1,30 @@
+<div class='wym_box field images_field'>
+  <ul id='page_images' class='clearfix'>
+    <%= f.fields_for :images do |image_form| %>
+      <li id='image_<%= image_form.object.id %>'>
+        <%= image_form.hidden_field :id %>
+        <%= image_fu image_form.object, '135x135#c' %>
+        <% if RefinerySetting.find_or_set(:page_images_captions, false) %>
+          <div class='textarea_wrapper_for_wym'>
+            <% index = image_form.object_name.split('[').last.split(']').first.to_i %>
+            <%= text_area_tag "#{f.object_name}[images_attributes][#{index}][caption]",
+                              f.object.caption_for_image_index(index),
+                              :style => 'display: none',
+                              :id => "page_captions_#{index}" %>
+          </div>
+        <% end %>
+      </li>
+    <% end %>
+    <li class='empty'>
+      <%= hidden_field_tag "#{f.object.class.name.underscore}[images_attributes][#{f.object.images.size}][id]" %>
+      <% if RefinerySetting.find_or_set(:page_images_captions, false) %>
+        <div class='textarea_wrapper_for_wym'>
+          <%= text_area_tag "#{f.object_name}[images_attributes][#{f.object.images.size}][caption]",
+                            '',
+                            :style => 'display: none',
+                            :id => "page_captions_#{f.object.images.size}" %>
+        </div>
+      <% end %>
+    </li>
+  </ul>
+</div>

data/db/migrate/20101014230042_add_caption_to_image_pages.rb

@@ -0,0 +1,9 @@
+class AddCaptionToImagePages < ActiveRecord::Migration
+  def self.up
+    add_column :image_pages, :caption, :text
+  end
+
+  def self.down
+    remove_column :image_pages, :caption
+  end
+end

data/lib/gemspec.rb

@@ -1,5 +1,5 @@
 #!/usr/bin/env ruby
-version = '0.9.9'
+version = '1.0'
 raise "Could not get version so gemspec can not be built" if version.nil?
 files = (Dir.glob("*") | Dir.glob("**/*")).reject{|f| f =~ %r{.gem(spec)?$}}
 

data/lib/refinerycms-page-images.rb

@@ -16,11 +16,22 @@ module Refinery
           accepts_nested_attributes_for :images, :allow_destroy => false
 
           def images_attributes=(data)
-            self.images.clear
-            data.reject!{|i, d| d['id'].blank?}
-            self.images += (0..(data.length-1)).collect { |i|
-              (Image.find(data[i.to_s]['id'].to_i) rescue nil)
-            }.compact
+            ImagePage.delete_all(:page_id => self.id)
+
+            (0..(data.length-1)).each do |i|
+              unless (image_data = data[i.to_s]).nil? or image_data['id'].blank?
+                image_page = self.image_pages.new(:image_id => image_data['id'].to_i, :position => i)
+                # Add caption if supported
+                if RefinerySetting.find_or_set(:page_images_captions, false)
+                  image_page.caption = image_data['caption']
+                end
+                self.image_pages << image_page
+              end
+            end
+          end
+
+          def caption_for_image_index(index)
+            self.image_pages[index].try(:caption).presence || ""
           end
         end
       end

data/public/javascripts/page-image-picker.js

@@ -22,6 +22,10 @@ $(document).ready(function(){
 });
 
 reset_functionality = function() {
+  WYMeditor.onload_functions.push(function(){
+    $('.wym_box').css({'width':null});
+  });
+
   $("#page_images").sortable({
     'tolerance': 'pointer'
     , 'placeholder': 'placeholder'
@@ -30,8 +34,8 @@ reset_functionality = function() {
     , stop: reindex_images
   });
 
-  $('#content #page_images li:not(.empty)').each(function(index, li) {
-    $(this).hover(function(e){
+  $('#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='/images/refinery/icons/delete.png' width='16' height='16' />");
@@ -41,13 +45,17 @@ reset_functionality = function() {
           reindex_images();
         });
 
-        image_actions.appendTo($(li));
+        img_caption = $("<img src='/images/refinery/icons/user_comment.png' width='16' height='16' class='caption' />");
+        img_caption.appendTo(image_actions);
+        img_caption.click(open_image_caption);
+
+        image_actions.appendTo($(this));
       }
 
       image_actions.show();
-    }, function(e) {
+    } else if (e.type == 'mouseleave' || e.type == 'mouseout') {
       $(this).find('.image_actions').hide();
-    });
+    }
   });
 
   reindex_images();
@@ -70,9 +78,56 @@ image_added = function(image) {
   reset_functionality();
 }
 
+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')).addClass('current_caption_list_item');
+  textarea = list_item.find('.textarea_wrapper_for_wym > textarea');
+
+  textarea.after($("<div class='form-actions'><div class='form-actions-left'><a class='button'>Done</a></div></div>"));
+  textarea.parent().dialog({
+             title: 'Add Caption'
+             , modal: true
+             , resizable: false
+             , autoOpen: true
+             , width: 928
+             , height: 530
+           });
+
+  $('.ui-dialog:visible .ui-dialog-titlebar-close, .ui-dialog:visible .form-actions a.button')
+    .bind('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');
+
+        $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');
+
+        $('li.current_caption_list_item').removeClass('current_caption_list_item');
+
+        $('.ui-dialog, .ui-widget-overlay:visible').remove();
+      }, textarea)
+    , false);
+
+  textarea.addClass('wymeditor active_rotator_wymeditor widest').wymeditor(wymeditor_boot_options);
+}
+
 reindex_images = function() {
-  $('#page_images li input:hidden').each(function(i, input){
+  $('#page_images li textarea:hidden').each(function(i, input){
+    // make the image's name consistent with its position.
+    parts = $(input).attr('name').split(']');
+    parts[1] = ('[' + i);
+    $(input).attr('name', parts.join(']'));
 
+    // make the image's id consistent with its position.
+    $(input).attr('id', $(input).attr('id').replace(/_\d_/, '_'+i+'_').replace(/_\d/, '_'+i));
+  });
+  $('#page_images li input:hidden').each(function(i, input){
     // make the image's name consistent with its position.
     parts = $(input).attr('name').split(']');
     parts[1] = ('[' + i);

data/public/stylesheets/page-image-picker.css

@@ -13,34 +13,40 @@
 	margin-right: 18px;
 }
 #page_images {
-    width: 100%;
+  width: 100%;
 }
 #page_images li {
-    margin-right: 20px;
-    position: relative;
-    margin-bottom: 10px;
-    margin-top: 10px;
+  margin-right: 20px;
+  position: relative;
+  margin-bottom: 10px;
+  margin-top: 10px;
 }
 #page_images li .image_actions {
-    background: white;
-    position: absolute;
-    padding: 3px;
-    left: 0px;
-    top: 0px;
+  background: white;
+  position: absolute;
+  padding: 3px;
+  left: 0px;
+  top: 0px;
+  width: 135px;
+}
+#page_images > li .image_actions img.caption {
+  position: absolute;
+  right: 3px;
+  top: 3px;
 }
 #page_images li * {
-    cursor: move;
+  cursor: move;
 }
 #page_images li .image_actions * {
-    cursor: pointer;
+  cursor: pointer;
 }
 #content ul.ui-sortable li {
-    border: 0px none;
-    background: none !important;
+  border: 0px none;
+  background: none !important;
 }
 #content #page_images.ui-sortable li.placeholder {
-    width: 135px;
-    height: 135px;
+  width: 135px;
+  height: 135px;
 }
 
 a#add_image_link {

data/readme.md

@@ -17,7 +17,7 @@ Page Images allows you to relate one or more images to any page in Refinery whic
 
 Add this line to your applications `Gemfile`
 
-    gem 'refinerycms-page-images', '~> 0.9.9'
+    gem 'refinerycms-page-images', '~> 1.0'
 
 Next run
 
@@ -29,11 +29,11 @@ Now when you start up your Refinery application, edit a page and there should be
 
 If you get an error like
 
-  uninitialized constant Refinery::Pages::Tab
+    uninitialized constant Refinery::Pages::Tab
 
 It means your Refinery version isn't new enough. To fix that you need to update the Refinery CMS `Gemfile` line to this
 
-    gem 'refinerycms', :git => "git://github.com/resolve/refinerycms.git"
+    gem 'refinerycms', '~> 0.9.9'
 
 Then run:
 

metadata

@@ -1,12 +1,8 @@
 --- !ruby/object:Gem::Specification 
 name: refinerycms-page-images
 version: !ruby/object:Gem::Version 
-  prerelease: false
-  segments: 
-  - 0
-  - 9
-  - 9
-  version: 0.9.9
+  prerelease: 
+  version: "1.0"
 platform: ruby
 authors: 
 - Resolve Digital
@@ -16,7 +12,7 @@ autorequire:
 bindir: bin
 cert_chain: []
 
-date: 2010-12-31 00:00:00 +13:00
+date: 2011-01-31 00:00:00 +13:00
 default_executable: 
 dependencies: 
 - !ruby/object:Gem::Dependency 
@@ -27,10 +23,6 @@ dependencies:
     requirements: 
     - - ">="
       - !ruby/object:Gem::Version 
-        segments: 
-        - 0
-        - 9
-        - 9
         version: 0.9.9
   type: :runtime
   version_requirements: *id001
@@ -46,7 +38,10 @@ files:
 - readme.md
 - app/models/image_page.rb
 - app/views/admin/pages/tabs/_images.html.erb
-- db/migrate/create_page_images.rb
+- app/views/admin/pages/tabs/_images_bar.html.erb
+- app/views/admin/pages/tabs/_images_field.html.erb
+- db/migrate/20101014230041_create_page_images.rb
+- db/migrate/20101014230042_add_caption_to_image_pages.rb
 - lib/gemspec.rb
 - lib/generators/refinerycms_page_images_generator.rb
 - lib/refinerycms-page-images.rb
@@ -66,21 +61,17 @@ required_ruby_version: !ruby/object:Gem::Requirement
   requirements: 
   - - ">="
     - !ruby/object:Gem::Version 
-      segments: 
-      - 0
       version: "0"
 required_rubygems_version: !ruby/object:Gem::Requirement 
   none: false
   requirements: 
   - - ">="
     - !ruby/object:Gem::Version 
-      segments: 
-      - 0
       version: "0"
 requirements: []
 
 rubyforge_project: 
-rubygems_version: 1.3.7
+rubygems_version: 1.5.0
 signing_key: 
 specification_version: 3
 summary: Page Images Engine for Refinery CMS