workarea-hover_zoom 3.0.0

data/LICENSE.md

@@ -0,0 +1,3 @@
+View this plugin's license here: 
+
+<https://github.com/workarea-commerce/workarea/blob/master/LICENSE.md>

data/README.md

@@ -0,0 +1,130 @@
+Workarea Hover Zoom
+================================================================================
+
+Hover Zoom plugin for the Workarea commerce platform adds zoom capabilities (desktop/mobile) on your product primary images.
+
+
+Setup
+--------------------------------------------------------------------------------
+
+#### New Build
+
+This plugin is intended to be fairly automatic and will work out of the box if you are making a new build.
+
+The only thing you will have to do is to remove the `data-dialog-button` attached to the container `.product-details__primary-image` in `workarea/storefront/products/templates/_generic.html.haml`.
+
+In the Workarea platform we call that ["Overriding a View"](https://developer.workarea.com/workarea-3/guides/override-a-view).
+
+#### Custom Build
+
+If you are not creating a new build and you have already made some customisation on it, we will have to dig a bit.
+
+The plugin assumes the container ```.product-details__primary-image``` exists _(this can be tweaked in the configuration)_ and contains the following tags: ```<a>```, ```<img>```.
+
+Example markup:
+
+```html
+<div class="product-details__primary-image">
+    <!-- /zoom.jpg is the asset used by the plugin as the zoom image -->
+    <a href="/zoom.jpg">
+        <img class="product-details__primary-image-link-image" src="/detail.jpg">
+    </a>
+</div>
+```
+
+Example markup after initialization of the plugin:
+
+```html
+<div class="product-details__primary-image">
+   <!-- Link used as a container -->
+    <a class="hover-zoom__container" href="/zoom.jpg" style="overflow: hidden;">
+        <img src="/detail.jpg">
+
+        <!-- Zoom image added -->
+        <img src="/zoom.jpg" role="presentation" style="opacity: 0; top: -219.917px; left: -136.677px; position: absolute; width: 670px; height: 1006px; border: none; max-width: none; max-height: none;">
+        </a>
+</div>
+```
+
+Configuration
+--------------------------------------------------------------------------------
+
+If any of this configuration needs adjustment, feel free to make changes in your project-specific storefront config file. Your project's config file should be loaded after the "Configuration" section of the manifest:
+
+```
+// application.js.erb manifest
+
+...
+
+# Configuration
+%w(
+  workarea/core/config
+  workarea/storefront/config
+).each do |asset|
+  require_asset asset
+end
+
+# Project Specific Configuration
+require_asset 'workarea/storefront/my_project_config'
+
+...
+
+```
+
+And you should override and modify the hover-zoom configuration in your Project's Config file, as needed:
+
+```
+// in my_project_config.js
+
+...
+
+WORKAREA.config.hoverZooms = {
+    primaryImageContainer: '.selector'
+};
+
+...
+
+```
+
+##### Available configuration variables
+
+| Variable  | Description | Default
+| ------------- | ------------- | ------------- |
+| primaryImageContainer  | The container where the zoom system will be initialized  | .product-details__primary-image |
+
+
+Advanced
+--------------------------------------------------------------------------------
+
+This plugin is acting as an orchestrator of two jQuery plugins:
+- [workarea-jquery-zoom](https://stash.tools.weblinc.com/projects/WP/repos/workarea-jquery-zoom/browse)
+- [workarea-jquery-magnify](https://stash.tools.weblinc.com/projects/WP/repos/workarea-jquery-magnify/browse)
+
+Therefore if you need more flexibility you can come up with your own solution without re-inventing the wheel.
+
+Getting Started
+--------------------------------------------------------------------------------
+
+This gem contains a Rails engine that must be mounted onto a host Rails application.
+
+Then add the gem to your application's Gemfile specifying the source:
+
+    # ...
+    gem 'workarea-hover_zoom'
+    # ...
+
+Update your application's bundle.
+
+    cd path/to/application
+    bundle
+
+
+Workarea Platform Documentation
+--------------------------------------------------------------------------------
+
+See [https://developer.workarea.com](https://developer.workarea.com) for Workarea platform documentation.
+
+License
+--------------------------------------------------------------------------------
+
+Workarea Hover Zoom is released under the [Business Software License](LICENSE)

data/Rakefile

@@ -0,0 +1,43 @@
+#!/usr/bin/env rake
+begin
+  require 'bundler/setup'
+rescue LoadError
+  puts 'You must `gem install bundler` and `bundle install` to run rake tasks'
+end
+
+APP_RAKEFILE = File.expand_path('../test/dummy/Rakefile', __FILE__)
+load 'rails/tasks/engine.rake'
+load 'rails/tasks/statistics.rake'
+load 'workarea/changelog.rake'
+
+require 'rake/testtask'
+
+Rake::TestTask.new(:test) do |t|
+  t.libs << 'lib'
+  t.libs << 'test'
+  t.pattern = 'test/**/*_test.rb'
+  t.verbose = false
+end
+
+task default: :test
+
+$LOAD_PATH.unshift File.expand_path('../lib', __FILE__)
+require 'workarea/hover_zoom/version'
+
+desc "Release version #{Workarea::HoverZoom::VERSION} of the gem"
+task :release do
+  host = "https://#{ENV['BUNDLE_GEMS__WEBLINC__COM']}@gems.weblinc.com"
+
+  Rake::Task['workarea:changelog'].execute
+  system 'git add CHANGELOG.md'
+  system 'git commit -m "Update CHANGELOG"'
+  system 'git push origin HEAD'
+
+  system "git tag -a v#{Workarea::HoverZoom::VERSION} -m 'Tagging #{Workarea::HoverZoom::VERSION}'"
+  system 'git push --tags'
+
+  system 'gem build workarea-hover_zoom.gemspec'
+  system "gem push workarea-hover_zoom-#{Workarea::HoverZoom::VERSION}.gem"
+  system "gem push workarea-hover_zoom-#{Workarea::HoverZoom::VERSION}.gem --host #{host}"
+  system "rm workarea-hover_zoom-#{Workarea::HoverZoom::VERSION}.gem"
+end

data/app/assets/javascripts/workarea/storefront/hover_zoom/config.js

@@ -0,0 +1,12 @@
+(function () {
+    'use strict';
+
+    /**
+     * Module Configuration
+     */
+
+    WORKAREA.config.hoverZooms = {
+        primaryImageContainer: '.product-details__primary-image'
+    };
+
+})();

data/app/assets/javascripts/workarea/storefront/hover_zoom/modules/hover_zooms.js

@@ -0,0 +1,64 @@
+/**
+ * @namespace WORKAREA.hoverZooms
+ */
+WORKAREA.registerModule('hoverZooms', (function () {
+    'use strict';
+
+    var attachZoom = function($container) {
+            var $link = $container.find('a');
+
+            $container.addClass('hover-zoom hover-zoom--zoom');
+            $link.addClass('hover-zoom__container');
+
+            $link.zoom({
+                url: $link.attr('href'),
+                lazyLoad: false
+            });
+        },
+
+        attachMagnify = function($container) {
+            var $link = $container.find('a');
+
+            $container.addClass('hover-zoom hover-zoom--magnify');
+            $link.addClass('hover-zoom__container');
+
+            $link.magnify({
+                url: $link.attr('href'),
+                touchSupport: true
+            });
+        },
+
+        detachPlugins = function($container) {
+            $container
+                .removeClass('hover-zoom--magnify hover-zoom--zoom')
+                .find('a')
+                .trigger('magnify.destroy')
+                .trigger('zoom.destroy');
+        },
+
+        setup = function($container) {
+
+            detachPlugins($container);
+
+            if (WORKAREA.breakPoints.currentlyLessThan('medium')) {
+                attachZoom($container);
+            } else {
+                attachMagnify($container);
+            }
+        },
+
+        events = function($container) {
+            $container.find('img').on('load', _.partial(setup, $container));
+        },
+
+        init = function($scope) {
+            var $container = $(WORKAREA.config.hoverZooms.primaryImageContainer);
+
+            setup($container);
+            events($container);
+        };
+
+    return {
+        init: init
+    };
+}()));

data/app/assets/stylesheets/workarea/storefront/hover_zoom/components/_hover_zoom.scss

@@ -0,0 +1,5 @@
+.hover-zoom {}
+
+    .hover-zoom__container {
+        position: relative;
+    }

data/bin/rails

@@ -0,0 +1,14 @@
+#!/usr/bin/env ruby
+# This command will automatically be run when you run "rails" with Rails gems
+# installed from the root of your application.
+ENGINE_ROOT = File.expand_path('../..', __FILE__)
+ENGINE_PATH = File.expand_path('../../lib/workarea/hover_zoom/engine', __FILE__)
+# Set up gems listed in the Gemfile.
+ENV['BUNDLE_GEMFILE'] ||= File.expand_path('../../Gemfile', __FILE__)
+require 'bundler/setup' if File.exist?(ENV['BUNDLE_GEMFILE'])
+require 'action_controller/railtie'
+require 'action_view/railtie'
+require 'action_mailer/railtie'
+require 'rails/test_unit/railtie'
+require 'sprockets/railtie'
+require 'rails/engine/commands'

data/config/initializers/appends.rb

@@ -0,0 +1,16 @@
+module Workarea
+  Plugin.append_stylesheets(
+    'storefront.components',
+    'workarea/storefront/hover_zoom/components/hover_zoom.scss'
+  )
+
+  Plugin.append_javascripts(
+    'storefront.config',
+    'workarea/storefront/hover_zoom/config'
+  )
+
+  Plugin.append_javascripts(
+    'storefront.modules',
+    'workarea/storefront/hover_zoom/modules/hover_zooms'
+  )
+end

data/lib/workarea/hover_zoom.rb

@@ -0,0 +1,13 @@
+require 'workarea'
+require 'workarea/storefront'
+require 'workarea/admin'
+
+require 'workarea/jquery_zoom'
+require 'workarea/jquery_magnify'
+
+require 'workarea/hover_zoom/engine'
+
+module Workarea
+  module HoverZoom
+  end
+end

data/lib/workarea/hover_zoom/engine.rb

@@ -0,0 +1,8 @@
+module Workarea
+  module HoverZoom
+    class Engine < ::Rails::Engine
+      include Workarea::Plugin
+      isolate_namespace Workarea::HoverZoom
+    end
+  end
+end

data/lib/workarea/hover_zoom/version.rb

@@ -0,0 +1,5 @@
+module Workarea
+  module HoverZoom
+    VERSION = '3.0.0'.freeze
+  end
+end

data/test/dummy/Rakefile

@@ -0,0 +1,6 @@
+# Add your own tasks in files placed in lib/tasks ending in .rake,
+# for example lib/tasks/capistrano.rake, and they will automatically be available to Rake.
+
+require_relative 'config/application'
+
+Rails.application.load_tasks

data/test/dummy/app/assets/config/manifest.js

@@ -0,0 +1,4 @@
+
+//= link_tree ../images
+//= link_directory ../javascripts .js
+//= link_directory ../stylesheets .css

data/test/dummy/app/assets/javascripts/application.js

@@ -0,0 +1,13 @@
+// This is a manifest file that'll be compiled into application.js, which will include all the files
+// listed below.
+//
+// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
+// or any plugin's vendor/assets/javascripts directory can be referenced here using a relative path.
+//
+// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
+// compiled file. JavaScript code in this file should be added after the last require_* statement.
+//
+// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
+// about supported directives.
+//
+//= require_tree .

data/test/dummy/app/assets/stylesheets/application.css

@@ -0,0 +1,15 @@
+/*
+ * This is a manifest file that'll be compiled into application.css, which will include all the files
+ * listed below.
+ *
+ * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
+ * or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path.
+ *
+ * You're free to add application-wide styles to this file and they'll appear at the bottom of the
+ * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
+ * files in this directory. Styles in this file should be added after the last require_* statement.
+ * It is generally better to create a new file per style scope.
+ *
+ *= require_tree .
+ *= require_self
+ */

data/test/dummy/app/controllers/application_controller.rb

@@ -0,0 +1,3 @@
+class ApplicationController < ActionController::Base
+  protect_from_forgery with: :exception
+end

data/test/dummy/app/helpers/application_helper.rb

@@ -0,0 +1,2 @@
+module ApplicationHelper
+end

data/test/dummy/app/jobs/application_job.rb

@@ -0,0 +1,2 @@
+class ApplicationJob < ActiveJob::Base
+end

data/test/dummy/app/mailers/application_mailer.rb

@@ -0,0 +1,4 @@
+class ApplicationMailer < ActionMailer::Base
+  default from: 'from@example.com'
+  layout 'mailer'
+end

data/test/dummy/app/views/layouts/application.html.erb

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Dummy</title>
+    <%= csrf_meta_tags %>
+
+    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
+    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
+  </head>
+
+  <body>
+    <%= yield %>
+  </body>
+</html>

data/test/dummy/app/views/layouts/mailer.html.erb

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+    <style>
+      /* Email styles need to be inline */
+    </style>
+  </head>
+
+  <body>
+    <%= yield %>
+  </body>
+</html>

data/test/dummy/app/views/layouts/mailer.text.erb

@@ -0,0 +1 @@
+<%= yield %>

data/test/dummy/bin/bundle

@@ -0,0 +1,3 @@
+#!/usr/bin/env ruby
+ENV['BUNDLE_GEMFILE'] ||= File.expand_path('../../Gemfile', __FILE__)
+load Gem.bin_path('bundler', 'bundle')

data/test/dummy/bin/rails

@@ -0,0 +1,4 @@
+#!/usr/bin/env ruby
+APP_PATH = File.expand_path('../config/application', __dir__)
+require_relative '../config/boot'
+require 'rails/commands'

data/test/dummy/bin/rake

@@ -0,0 +1,4 @@
+#!/usr/bin/env ruby
+require_relative '../config/boot'
+require 'rake'
+Rake.application.run