spree_product_hover_zoom 1.0.2

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA1:
+  metadata.gz: 328d354609d873fa6e05617148d57d2eed38856c
+  data.tar.gz: 05c94321bfc32ccad918a852089637899f7d689f
+SHA512:
+  metadata.gz: d8f10f86edaeb77feae35254030fb841d4223bc2e27f883b032d7c6f4c98a0b632e88c5d3ebe780027c3202e79d24f13197456aa326e138dd01acd20dbddbd44
+  data.tar.gz: 1804aaa4a63ccc24a6dea198518aa6f62658f8ffba688a82ce2496581e21c590cdf500e4ef6f068bd85ad063a10bc7c9e1fd36e58fd8358d9fcacdc6c2849e18

data/.gitignore

@@ -0,0 +1,15 @@
+\#*
+*~
+.#*
+.DS_Store
+.idea
+.project
+tmp
+nbproject
+*.swp
+spec/dummy
+Gemfile.lock
+
+/*.iml
+/.rakeTasks
+/.generators

data/.rspec

@@ -0,0 +1 @@
+--colour

data/.ruby-gemset

@@ -0,0 +1 @@
+spree_product_hover_zoom

data/.ruby-version

@@ -0,0 +1 @@
+ruby-2.4.1

data/Gemfile

@@ -0,0 +1,3 @@
+source 'https://rubygems.org'
+
+gemspec

data/LICENSE

@@ -0,0 +1,26 @@
+Copyright (c) 2017 [name of plugin creator]
+All rights reserved.
+
+Redistribution and use in source and binary forms, with or without modification,
+are permitted provided that the following conditions are met:
+
+    * Redistributions of source code must retain the above copyright notice,
+      this list of conditions and the following disclaimer.
+    * Redistributions in binary form must reproduce the above copyright notice,
+      this list of conditions and the following disclaimer in the documentation
+      and/or other materials provided with the distribution.
+    * Neither the name Spree nor the names of its contributors may be used to
+      endorse or promote products derived from this software without specific
+      prior written permission.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+"AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR
+CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
+EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO,
+PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR
+PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF
+LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING
+NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
+SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

data/README.md

@@ -0,0 +1,54 @@
+Spree Product - Gallery View and Hover Zoom
+===========================================
+
+A Spree extension that adds gallery view and zoom-on-hover functionality for product images.
+Gallery view is available thanks to the amazing work done on [Luminous](https://github.com/imgix/luminous).
+Zoom on hover is available thanks to the amazing work done on [Drift](http://github.com/imgix/drift).
+Forked from [robert-hromej/spree_product_zoom](https://github.com/robert-hromej/spree_product_zoom).
+
+[![N|Solid](https://github.com/vinzloh/spree_product_hover_zoom/raw/master/spree-zoom-on-hover.gif)]()
+
+Installation
+=======
+
+Add this extension to your Gemfile:
+
+```ruby
+gem "spree_product_hover_zoom", :git => "git://github.com/vinzloh/spree_product_hover_zoom.git"
+```
+
+Then run:
+
+```
+bundle install
+```
+
+Run:
+
+```
+rails g spree_product_hover_zoom:install
+```
+
+in order to copy over the required css and js files.
+
+Once installation is complete, clicking on product thumbnails opens the gallery view, and hovering over the main product image opens a quick preview.
+
+Customization
+=============
+
+To change the zoom factor, add the line below to your .js file:
+```
+SpreeProductHoverZoom.zoomFactor = 1
+```
+
+To change the hover pane height, override the css:
+```
+.product-hover-zoom {
+  height: 500px;
+}
+```
+
+License
+=======
+
+This project has been released under the New BSD License, Copyright (c) 2017 Vinz Loh.

data/Rakefile

@@ -0,0 +1,29 @@
+require 'rake'
+require 'rake/testtask'
+require 'rake/packagetask'
+require 'rubygems/package_task'
+require 'rspec/core/rake_task'
+require 'spree/testing_support/common_rake'
+
+RSpec::Core::RakeTask.new
+
+task :default => [:spec]
+
+spec = eval(File.read('spree_product_hover_zoom.gemspec'))
+
+Gem::PackageTask.new(spec) do |p|
+  p.gem_spec = spec
+end
+
+desc 'Release to gemcutter'
+task :release => :package do
+  require 'rake/gemcutter'
+  Rake::Gemcutter::Tasks.new(spec).define
+  Rake::Task['gem:push'].invoke
+end
+
+desc 'Generates a dummy app for testing'
+task :test_app do
+  ENV['LIB_NAME'] = 'spree_product_hover_zoom'
+  Rake::Task['common:test_app'].invoke
+end

data/Versionfile

@@ -0,0 +1 @@
+'2.1.x'  => { :branch => 'master' }

data/app/assets/javascripts/spree/backend/spree_product_hover_zoom.js

@@ -0,0 +1,2 @@
+// Placeholder manifest file.
+// the installer will append this file to the app vendored assets here: vendor/assets/javascripts/spree/frontend/all.js'

data/app/assets/javascripts/spree/frontend/spree_product_hover_zoom.js.coffee.erb

@@ -0,0 +1,52 @@
+add_image_handlers = ->
+  ($ '#main-image').data 'selectedThumb', ($ '#main-image img').attr('src')
+  ($ 'ul.thumbnails li').eq(0).addClass 'selected'
+  ($ 'ul.thumbnails a').on 'click', (event) ->
+    ($ '#main-image').data 'selectedThumb', ($ event.currentTarget).attr('href')
+    ($ '#main-image').data 'selectedThumbId', ($ event.currentTarget).parent().attr('id')
+    ($ 'ul.thumbnails').find('li').removeClass 'selected'
+    ($ event.currentTarget).parent('li').addClass 'selected'
+    false
+
+  ($ 'ul.thumbnails li').on 'mouseenter', (event) ->
+    ($ '#main-image img').first().attr 'src', ($ event.currentTarget).find('a').attr('href')
+    ($ '[data-drift]').first().attr 'href', ($ event.currentTarget).find('a').attr('href')
+
+  # ($ 'ul.thumbnails li').on 'mouseleave', (event) ->
+  #   ($ '#main-image img').first().attr 'src', ($ '#main-image').data('selectedThumb')
+  #   ($ '[data-drift]').first().attr 'href', ($ '#main-image').data('selectedThumb')
+
+window.SpreeProductHoverZoom = {
+  zoomFactor: 4,
+  handleTouch: true,
+  touchDelay: 0,
+}
+
+$ ->
+  add_image_handlers()
+
+  el_drift = $('[data-drift]')[0]
+
+  driftOptions =
+    paneContainer: $('[data-hook=product_hover_zoom]')[0]
+    zoomFactor: SpreeProductHoverZoom.zoomFactor
+    sourceAttribute: 'href'
+    handleTouch: SpreeProductHoverZoom.handleTouch
+    touchDelay: SpreeProductHoverZoom.touchDelay
+
+  new Drift(el_drift, driftOptions) if (el_drift && $(el_drift).attr('href').length > 0)
+
+  # Single zoom view for main product image
+  # new Luminous($('[data-luminous]')[0]);
+  # do nothing on main product image click
+  $('[data-luminous]').on 'click', (e) ->
+    e.preventDefault()
+    return
+
+  # Gallery view for thumbnails
+
+  # Whether pressing the arrow keys should move to the next/previous slide.
+  galleryOpts = arrowNavigation: true
+  # These options have the same defaults and potential values as the Luminous class.
+  luminousOpts = {}
+  new LuminousGallery($('ul.thumbnails > li > a'), galleryOpts, luminousOpts)

data/app/assets/stylesheets/spree/backend/spree_product_hover_zoom.css

@@ -0,0 +1,4 @@
+/*
+Placeholder manifest file.
+the installer will append this file to the app vendored assets here: 'vendor/assets/stylesheets/spree/backend/all.css'
+*/

data/app/assets/stylesheets/spree/frontend/spree_product_hover_zoom.css

@@ -0,0 +1,25 @@
+/*
+Placeholder manifest file.
+the installer will append this file to the app vendored assets here: 'vendor/assets/stylesheets/spree/frontend/all.css'
+*/
+
+/*
+ *= require drift-basic
+*/
+
+/*
+ #product-images #main-image img.click-to-zoom { min-height: 0px; height: 12px; }
+*/
+.product-hover-zoom {
+  position: absolute;
+  top: 0;
+  right: 0;
+  left: 0;
+  height: 400px;
+}
+
+.drift-link {
+  float: left;
+  cursor: zoom-in;
+  width: 100%;
+}

data/app/models/spree/product_zoom_configuration.rb

@@ -0,0 +1,3 @@
+class Spree::ProductZoomConfiguration < Spree::Preferences::Configuration
+  preference :default_image_style, :symbol, :default => :original
+end

data/app/overrides/spree/products/_thumbnails/add_lightbox_to_thumbnails.html.erb.deface

@@ -0,0 +1,3 @@
+<!-- replace "erb[loud]:contains('image_tag')" -->
+<!--original '1e84d3a5d442db03ee2f370d7b2f2988e9bfb66a'-->
+<%= link_to(image_tag(i.attachment.url(:mini)), i.attachment.url(:product),:data => { :original => i.attachment.url(:original) }) %>

data/app/overrides/spree/products/_thumbnails/add_lightbox_to_thumbnails.html.erb.deface~HEAD

@@ -0,0 +1,2 @@
+<!-- replace "erb[loud]:contains('image_tag')" -->
+<%= link_to(image_tag(i.attachment.url(:mini)), i.attachment.url(:product),:data => { :original => i.attachment.url(:original) }) %>

data/app/overrides/spree/products/_thumbnails/swap_product_variant_images.deface

@@ -0,0 +1,3 @@
+insert_bottom '#product-thumbnails'
+cut :start => 'erb:contains("@product.images.each do |i|")', :end => 'erb:contains("end")'
+original 'ac7f68f024a55240dd25de7c792ebbdcbdfd2121'

data/app/overrides/spree/products/show.rb

@@ -0,0 +1,6 @@
+Deface::Override.new(
+  virtual_path: 'spree/products/show',
+  name: 'add_hover_zoom_to_products_show',
+  insert_after: '[data-hook="product_right_part_wrap"]',
+  partial: 'spree/products/hover_zoom.html.erb'
+)

data/app/views/spree/products/_hover_zoom.html.erb

@@ -0,0 +1 @@
+<div data-hook="product_hover_zoom" class="product-hover-zoom"></div>

data/app/views/spree/products/_image.html.erb

@@ -0,0 +1,7 @@
+<% if defined?(image) && image %>
+  <%= image_tag image.attachment.url(:product), :itemprop => "image" %>
+<% else %>
+  <a data-luminous data-drift href="<%= @product.images.first.attachment.url(:product) if @product.images.present? %>" class="drift-link">
+    <%= product_image(@product, :itemprop => "image", data: { image: '' }) %>
+  </a>
+<% end %>

data/app/views/spree/products/_image0.html.erb

@@ -0,0 +1,40 @@
+<% if defined?(image) && image %>
+  <%= link_to image_tag(image.attachment.url(:product), :itemprop => "image"), image.attachment.url(:original), :class => 'fancybox zoom-image' %>
+  <br />
+  <%= link_to image.attachment.url(:original), :class => 'fancybox zoom-image' %>
+<% else %>
+  <% if @product.images.empty? and @product.has_variants? and @product.variant_images.empty? %>
+    <%= product_image(@product, :itemprop => "large") %>
+  <% else %>
+    <% if @product.images.empty? %>
+      <% @p = @product.variants.first %>
+    <% else %>
+      <% @p = @product %>
+    <% end %>
+    <%= link_to product_image(@product, :itemprop => "image", :class => 'zoom-click', data: { zoom: @p.images.first.attachment.url(Spree::ProductZoom::Config.default_image_style) }), @p.images.first.attachment.url(Spree::ProductZoom::Config.default_image_style), :class => 'zoom-image large-image zoom-click', :rel => 'gallery' %>
+    <br/>
+    <!-- PROBLEM: still in div#main-image, will be overwritten by javascript -->
+    <%= link_to image_tag('zoom.gif', alt: 'zoom image', class: 'click-to-zoom'), @p.images.first.attachment.url(Spree::ProductZoom::Config.default_image_style), :class => 'zoom-image click-to-zoom', :rel => 'gallery' %>
+    <div id="gallery" style="display:none;">
+      <% if @product.has_variants? %>
+        <% first_variant_id = @product.variants.first.id %>
+        <% @product.variants.each do |variant| %>
+          <% clazz = 'fancybox productid-' + variant.id.to_s %>
+          <% if first_variant_id == variant.id %>
+            <% clazz = 'fancybox productid-' + variant.id.to_s %>
+          <% else %>
+            <% clazz = 'productid-' + variant.id.to_s %>
+          <% end %>
+          <% variant.images.each do |i| %>
+            <% next if @product.images.include?(i) %>
+            <%= link_to image_tag(i.attachment.url(:product)), i.attachment.url(Spree::ProductZoom::Config.default_image_style), :class => clazz, :rel => 'gallery' %>
+          <% end %>
+        <% end %>
+      <% end %>
+      <% @product.images.each do |img| %>
+        <% clazz = 'master productid-' + @p.id.to_s + ' fancybox' %>
+        <%= link_to image_tag(img.attachment.url(:product)), img.attachment.url(Spree::ProductZoom::Config.default_image_style), :class => clazz, :rel => 'gallery' %>
+      <% end %>
+    </div>
+  <% end %>
+<% end %>

data/config/locales/en.yml

@@ -0,0 +1,5 @@
+# Sample localization file for English. Add more files in this directory for other locales.
+# See https://github.com/svenfuchs/rails-i18n/tree/master/rails%2Flocale for starting points.
+
+en:
+  hello: "Hello world"

data/config/routes.rb

@@ -0,0 +1,3 @@
+Spree::Core::Engine.routes.draw do
+  # Add your extension routes here
+end

data/lib/generators/spree_product_hover_zoom/install/install_generator.rb

@@ -0,0 +1,17 @@
+module SpreeProductHoverZoom
+  module Generators
+    class InstallGenerator < Rails::Generators::Base
+
+      def add_javascripts
+        append_file 'vendor/assets/javascripts/spree/frontend/all.js', "//= require drift.min\n"
+        append_file 'vendor/assets/javascripts/spree/frontend/all.js', "//= require luminous\n"
+        append_file 'vendor/assets/javascripts/spree/frontend/all.js', "//= require spree/frontend/spree_product_hover_zoom\n"
+      end
+
+      def add_stylesheets
+        inject_into_file 'vendor/assets/stylesheets/spree/frontend/all.css', " *= require luminous-basic\n", :before => /\*\//, :verbose => true
+        inject_into_file 'vendor/assets/stylesheets/spree/frontend/all.css', " *= require spree/frontend/spree_product_hover_zoom\n", :before => /\*\//, :verbose => true
+      end
+    end
+  end
+end

data/lib/spree_product_hover_zoom.rb

@@ -0,0 +1,2 @@
+require 'spree_core'
+require 'spree_product_hover_zoom/engine'

data/lib/spree_product_hover_zoom/engine.rb

@@ -0,0 +1,34 @@
+module Spree::ProductZoom; end
+
+module SpreeProductHoverZoom
+  class Engine < Rails::Engine
+    require 'spree/core'
+    isolate_namespace Spree
+    engine_name 'spree_product_hover_zoom'
+
+    config.autoload_paths += %W(#{config.root}/lib)
+
+    # use rspec for tests
+    config.generators do |g|
+      g.test_framework :rspec
+    end
+
+    initializer :assets do |config|
+      Rails.application.config.assets.precompile += %w( store/blank.gif )
+    end
+
+    initializer("spree.product_zoom.preferences",
+                :after => "spree.environment",
+                :before => :load_config_initializers) do |app|
+      Spree::ProductZoom::Config = Spree::ProductZoomConfiguration.new
+    end
+
+    def self.activate
+      Dir.glob(File.join(File.dirname(__FILE__), '../../app/**/*_decorator*.rb')) do |c|
+        Rails.configuration.cache_classes ? require(c) : load(c)
+      end
+    end
+
+    config.to_prepare &method(:activate).to_proc
+  end
+end

data/lib/spree_product_hover_zoom/factories.rb

@@ -0,0 +1,47 @@
+include ActionDispatch::TestProcess
+
+FactoryGirl.define do
+  factory :product1, class: Spree::Product do
+    name "Some Product"
+    available_on { 1.year.ago }
+    shipping_category_id 1
+    tax_category_id 1
+    price 29.99
+    sku 'p1v'
+  end
+
+  factory :variant1, class: Spree::Variant do
+    sku 'p1v1'
+    is_master '0'
+  end
+  factory :variant2, class: Spree::Variant do
+    sku 'p1v2'
+    is_master '0'
+  end
+
+  factory :option_type1, class: Spree::OptionType do
+    name "opt"
+    presentation "Some Option"
+  end
+  factory :option_value1, class: Spree::OptionValue do
+    name "a"
+    presentation "a option value"
+  end
+  factory :option_value2, class: Spree::OptionValue do
+    name "b"
+    presentation "b option value"
+  end
+
+
+
+  factory :image1, class: Spree::Image do
+    attachment_content_type "image/jpeg"
+    attachment_file_name "product1.jpg"
+    alt "Product Image 1"
+  end
+  factory :image2, class: Spree::Image do
+    attachment_content_type "image/jpeg"
+    attachment_file_name "product2.jpg"
+    alt "Product Image 2"
+  end
+end