refinerycms-page-images 0.9 → 0.9.1

data/lib/gemspec.rb

@@ -0,0 +1,32 @@
+#!/usr/bin/env ruby
+version = '0.9.1'
+raise "Could not get version so gemspec can not be built" if version.nil?
+files = %w( readme.md )
+%w(app config generators lib public rails test vendor).each do |dir|
+  files += Dir.glob("#{dir}/**/*") if File.directory?(dir)
+end
+
+gemspec = <<EOF
+Gem::Specification.new do |s|
+  s.name              = %q{refinerycms-page-images}
+  s.version           = %q{#{version}}
+  s.description       = %q{Page Images Engine for Refinery CMS}
+  s.date              = %q{#{Time.now.strftime('%Y-%m-%d')}}
+  s.summary           = %q{Page Images Engine for Refinery CMS}
+  s.email             = %q{dave@resolvedigital.com}
+  s.homepage          = %q{http://github.com/resolve/refinerycms-page-images}
+  s.authors           = ['Resolve Digital', 'David Jones']
+  s.require_paths     = %w(lib)
+
+  #s.add_dependency    'refinerycms', '>= 0.9.9'
+
+  s.files             = [
+    '#{files.join("',\n    '")}'
+  ]
+  #{"s.test_files        = [
+    '#{Dir.glob("test/**/*.rb").join("',\n    '")}'
+  ]" if File.directory?("test")}
+end
+EOF
+
+File.open(File.expand_path("../../refinerycms-page-images.gemspec", __FILE__), 'w').puts(gemspec)

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

@@ -0,0 +1,103 @@
+$(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'
+      });
+    }
+  });
+  
+  reset_functionality();
+});
+
+reindex_images = function() {
+  $('#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)
+    $(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));
+  });
+}
+
+reset_functionality = function() {
+  $("#page_images").sortable({
+    'tolerance': 'pointer'
+    , 'placeholder': 'placeholder'
+    , 'cursor': 'drag'
+    , 'items': 'li'
+    , stop: reindex_images
+  });
+
+  $('#content #page_images li:not(.empty)').each(function(index, li) {
+    $(this).hover(function(e){
+      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' />");
+        img_delete.appendTo(image_actions);
+        img_delete.click(function() {
+          $(this).parents('li[id*=image_]').remove();
+          reindex_images();
+        });
+
+        image_actions.appendTo($(li));
+      }
+
+      image_actions.show();
+    }, function(e) {
+      $(this).find('.image_actions').hide();
+    });
+  });
+
+  reindex_images();
+}
+
+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').val(image_id);
+  $.ajax({
+    async: false,
+    url: '/refinery/images/'+image_id+'/url',
+    data: {size: '135x135#c'},
+    success: function (result, status, xhr) {
+      if (result.error) {
+        if (console && console.log) {
+           console.log("Something went wrong with the image insertion!");
+           console.log(result);
+         }
+       } else {
+         (img = $("<img />")).attr({
+           title: $(image).attr('title')
+           , alt: $(image).attr('alt')
+           , src: result.url
+         }).appendTo(current_list_item);
+       }
+     },
+     error: function(xhr, txt, status) {
+       if (console && console.log) {
+         console.log("Something went wrong with the image insertion!");
+         console.log(xhr);
+         console.log(txt);
+         console.log(status);
+       }
+     }
+   });
+
+  current_list_item.attr('id', 'image_' + image_id).removeClass('empty');
+
+  new_list_item.appendTo($('#page_images'));
+}

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

@@ -0,0 +1,50 @@
+#page_images {
+	margin: 0px;
+	padding: 0px;
+	width: 280px;
+}
+#page_images li {
+	position: relative;
+	list-style: none;
+	float: left;
+	margin-bottom: 20px;
+}
+#page_images li.odd {
+	margin-right: 18px;
+}
+#page_images {
+    width: 100%;
+}
+#page_images li {
+    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;
+}
+#page_images li * {
+    cursor: move;
+}
+#page_images li .image_actions * {
+    cursor: pointer;
+}
+#content ul.ui-sortable li {
+    border: 0px none;
+    background: none !important;
+}
+#content #page_images.ui-sortable li.placeholder {
+    width: 135px;
+    height: 135px;
+}
+
+a#add_image_link {
+  line-height: 20px;
+  padding: 2px 5px 2px 5px;
+  display: inline;
+}

data/readme.md

@@ -0,0 +1,28 @@
+# Page Images Engine for Refinery CMS
+
+## About
+
+This engine does two main things:
+
+1. Adds a relationship between pages and images
+2. A new "Images" tab will appear when editing a page in the "Pages" section
+
+This allows you to relate one or more images to any page in Refinery which makes it really easy for you to create simple image galleries with lightbox style popups on the front end page views.
+
+## Install
+
+Add this line to your applications `Gemfile`
+
+    gem 'refinerycms-page-images', '= 0.9'
+    
+Next run
+
+    bundle install
+    rails g refinerycms_page_images
+    rake db:migrate
+    
+Now when you start up your Refinery application, edit a page and there should be a b=new "Images" tab.
+
+## Todo
+
+Reordering doesn't store it's position yet.

metadata

@@ -1,20 +1,22 @@
 --- !ruby/object:Gem::Specification 
 name: refinerycms-page-images
 version: !ruby/object:Gem::Version 
-  hash: 25
+  hash: 57
   prerelease: false
   segments: 
   - 0
   - 9
-  version: "0.9"
+  - 1
+  version: 0.9.1
 platform: ruby
 authors: 
-- Resolve Digital, David Jones
+- Resolve Digital
+- David Jones
 autorequire: 
 bindir: bin
 cert_chain: []
 
-date: 2010-10-05 00:00:00 +13:00
+date: 2010-10-07 00:00:00 +13:00
 default_executable: 
 dependencies: []
 
@@ -27,10 +29,14 @@ extensions: []
 extra_rdoc_files: []
 
 files: 
-- lib/generators/refinerycms_page_images_generator.rb
-- lib/refinerycms-page-images.rb
+- readme.md
 - app/models/images_pages.rb
 - app/views/admin/pages/tabs/_images.html.erb
+- lib/gemspec.rb
+- lib/generators/refinerycms_page_images_generator.rb
+- lib/refinerycms-page-images.rb
+- public/javascripts/page-image-picker.js
+- public/stylesheets/page-image-picker.css
 has_rdoc: true
 homepage: http://github.com/resolve/refinerycms-page-images
 licenses: []