spree_product_hover_zoom 1.0.2

data/vendor/assets/stylesheets/drift-basic.css

@@ -0,0 +1,151 @@
+@keyframes drift-fadeZoomIn {
+  0% { transform: scale(1.5); opacity: 0; }
+  100% { transform: scale(1); opacity: 1; }
+}
+
+@keyframes drift-fadeZoomOut {
+  0% { transform: scale(1); opacity: 1; }
+  15% { transform: scale(1.1); opacity: 1; }
+  100% { transform: scale(0.5); opacity: 0; }
+}
+
+@keyframes drift-loader-rotate {
+  0% { transform: translate(-50%, -50%) rotate(0); }
+  50% { transform: translate(-50%, -50%) rotate(-180deg); }
+  100% { transform: translate(-50%, -50%) rotate(-360deg); }
+}
+
+@keyframes drift-loader-before {
+  0% { transform: scale(1); }
+  10% { transform: scale(1.2) translateX(6px); }
+  25% { transform: scale(1.3) translateX(8px); }
+  40% { transform: scale(1.2) translateX(6px); }
+  50% { transform: scale(1); }
+  60% { transform: scale(0.8) translateX(6px); }
+  75% { transform: scale(0.7) translateX(8px); }
+  90% { transform: scale(0.8) translateX(6px); }
+  100% { transform: scale(1); }
+}
+
+@keyframes drift-loader-after {
+  0% { transform: scale(1); }
+  10% { transform: scale(1.2) translateX(-6px); }
+  25% { transform: scale(1.3) translateX(-8px); }
+  40% { transform: scale(1.2) translateX(-6px); }
+  50% { transform: scale(1); }
+  60% { transform: scale(0.8) translateX(-6px); }
+  75% { transform: scale(0.7) translateX(-8px); }
+  90% { transform: scale(0.8) translateX(-6px); }
+  100% { transform: scale(1); }
+}
+
+@-webkit-keyframes drift-fadeZoomIn {
+  0% { -webkit-transform: scale(1.5); opacity: 0; }
+  100% { -webkit-transform: scale(1); opacity: 1; }
+}
+
+@-webkit-keyframes drift-fadeZoomOut {
+  0% { -webkit-transform: scale(1); opacity: 1; }
+  15% { -webkit-transform: scale(1.1); opacity: 1; }
+  100% { -webkit-transform: scale(0.5); opacity: 0; }
+}
+
+@-webkit-keyframes drift-loader-rotate {
+  0% { -webkit-transform: translate(-50%, -50%) rotate(0); }
+  50% { -webkit-transform: translate(-50%, -50%) rotate(-180deg); }
+  100% { -webkit-transform: translate(-50%, -50%) rotate(-360deg); }
+}
+
+@-webkit-keyframes drift-loader-before {
+  0% { -webkit-transform: scale(1); }
+  10% { -webkit-transform: scale(1.2) translateX(6px); }
+  25% { -webkit-transform: scale(1.3) translateX(8px); }
+  40% { -webkit-transform: scale(1.2) translateX(6px); }
+  50% { -webkit-transform: scale(1); }
+  60% { -webkit-transform: scale(0.8) translateX(6px); }
+  75% { -webkit-transform: scale(0.7) translateX(8px); }
+  90% { -webkit-transform: scale(0.8) translateX(6px); }
+  100% { -webkit-transform: scale(1); }
+}
+
+@-webkit-keyframes drift-loader-after {
+  0% { -webkit-transform: scale(1); }
+  10% { -webkit-transform: scale(1.2) translateX(-6px); }
+  25% { -webkit-transform: scale(1.3) translateX(-8px); }
+  40% { -webkit-transform: scale(1.2) translateX(-6px); }
+  50% { -webkit-transform: scale(1); }
+  60% { -webkit-transform: scale(0.8) translateX(-6px); }
+  75% { -webkit-transform: scale(0.7) translateX(-8px); }
+  90% { -webkit-transform: scale(0.8) translateX(-6px); }
+  100% { -webkit-transform: scale(1); }
+}
+
+.drift-zoom-pane {
+  background: rgba(0, 0, 0, 0.5);
+  /* This is required because of a bug that causes border-radius to not
+  work with child elements in certain cases. */
+  transform: translate3d(0, 0, 0);
+  -webkit-transform: translate3d(0, 0, 0);
+  z-index: 100;
+}
+
+.drift-zoom-pane.drift-opening {
+  animation: drift-fadeZoomIn 180ms ease-out;
+  -webkit-animation: drift-fadeZoomIn 180ms ease-out;
+}
+
+.drift-zoom-pane.drift-closing {
+  animation: drift-fadeZoomOut 210ms ease-in;
+  -webkit-animation: drift-fadeZoomOut 210ms ease-in;
+}
+
+.drift-zoom-pane.drift-inline {
+  position: absolute;
+  width: 150px;
+  height: 150px;
+  border-radius: 75px;
+  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
+}
+
+.drift-loading .drift-zoom-pane-loader {
+  display: block;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  -webkit-transform: translate(-50%, -50%);
+  width: 66px;
+  height: 20px;
+  animation: drift-loader-rotate 1800ms infinite linear;
+  -webkit-animation: drift-loader-rotate 1800ms infinite linear;
+}
+
+.drift-zoom-pane-loader:before, .drift-zoom-pane-loader:after {
+  content: "";
+  display: block;
+  width: 20px;
+  height: 20px;
+  position: absolute;
+  top: 50%;
+  margin-top: -10px;
+  border-radius: 20px;
+  background: rgba(255, 255, 255, 0.9);
+}
+
+.drift-zoom-pane-loader:before {
+  left: 0;
+  animation: drift-loader-before 1800ms infinite linear;
+  -webkit-animation: drift-loader-before 1800ms infinite linear;
+}
+
+.drift-zoom-pane-loader:after {
+  right: 0;
+  animation: drift-loader-after 1800ms infinite linear;
+  -webkit-animation: drift-loader-after 1800ms infinite linear;
+  animation-delay: -900ms;
+  -webkit-animation-delay: -900ms;
+}
+
+.drift-bounding-box {
+  background-color: rgba(0, 0, 0, 0.4);
+}

data/vendor/assets/stylesheets/luminous-basic.css

@@ -0,0 +1,195 @@
+@keyframes lum-fade {
+  0% { opacity: 0; }
+  100% { opacity: 1; }
+}
+
+@keyframes lum-fadeZoom {
+  0% { transform: scale(0.5); opacity: 0; }
+  100% { transform: scale(1); opacity: 1; }
+}
+
+@keyframes lum-loader-rotate {
+  0% { transform: translate(-50%, -50%) rotate(0); }
+  50% { transform: translate(-50%, -50%) rotate(-180deg); }
+  100% { transform: translate(-50%, -50%) rotate(-360deg); }
+}
+
+@keyframes lum-loader-before {
+  0% { transform: scale(1); }
+  10% { transform: scale(1.2) translateX(6px); }
+  25% { transform: scale(1.3) translateX(8px); }
+  40% { transform: scale(1.2) translateX(6px); }
+  50% { transform: scale(1); }
+  60% { transform: scale(0.8) translateX(6px); }
+  75% { transform: scale(0.7) translateX(8px); }
+  90% { transform: scale(0.8) translateX(6px); }
+  100% { transform: scale(1); }
+}
+
+@keyframes lum-loader-after {
+  0% { transform: scale(1); }
+  10% { transform: scale(1.2) translateX(-6px); }
+  25% { transform: scale(1.3) translateX(-8px); }
+  40% { transform: scale(1.2) translateX(-6px); }
+  50% { transform: scale(1); }
+  60% { transform: scale(0.8) translateX(-6px); }
+  75% { transform: scale(0.7) translateX(-8px); }
+  90% { transform: scale(0.8) translateX(-6px); }
+  100% { transform: scale(1); }
+}
+
+.lum-lightbox {
+  background: rgba(0, 0, 0, 0.6);
+  z-index: 101;
+}
+
+.lum-lightbox-inner {
+  top: 2.5%;
+  right: 2.5%;
+  bottom: 2.5%;
+  left: 2.5%;
+}
+
+.lum-lightbox-inner img {
+  position: relative;
+}
+
+.lum-lightbox-inner .lum-lightbox-caption {
+  margin: 0 auto;
+  color: #fff;
+  max-width: 700px;
+  text-align: center;
+}
+
+.lum-loading .lum-lightbox-loader {
+  display: block;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 66px;
+  height: 20px;
+  animation: lum-loader-rotate 1800ms infinite linear;
+}
+
+.lum-lightbox-loader:before, .lum-lightbox-loader:after {
+  content: "";
+  display: block;
+  width: 20px;
+  height: 20px;
+  position: absolute;
+  top: 50%;
+  margin-top: -10px;
+  border-radius: 20px;
+  background: rgba(255, 255, 255, 0.9);
+}
+
+.lum-lightbox-loader:before {
+  left: 0;
+  animation: lum-loader-before 1800ms infinite linear;
+}
+
+.lum-lightbox-loader:after {
+  right: 0;
+  animation: lum-loader-after 1800ms infinite linear;
+  animation-delay: -900ms;
+}
+
+.lum-lightbox.lum-opening {
+  animation: lum-fade 180ms ease-out;
+}
+
+.lum-lightbox.lum-opening .lum-lightbox-inner {
+  animation: lum-fadeZoom 180ms ease-out;
+}
+
+.lum-lightbox.lum-closing {
+  animation: lum-fade 300ms ease-in;
+  animation-direction: reverse;
+}
+
+.lum-lightbox.lum-closing .lum-lightbox-inner {
+  animation: lum-fadeZoom 300ms ease-in;
+  animation-direction: reverse;
+}
+
+.lum-img {
+  transition: opacity 120ms ease-out;
+}
+
+.lum-loading .lum-img {
+  opacity: 0;
+}
+
+.lum-gallery-button {
+  overflow: hidden;
+  text-indent: 150%;
+  white-space: nowrap;
+  background: transparent;
+  border: 0;
+  margin: 0;
+  padding: 0;
+  outline: 0;
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  height: 100px;
+  max-height: 100%;
+  width: 60px;
+  cursor: pointer;
+}
+
+.lum-previous-button {
+  left: 12px;
+}
+
+.lum-next-button {
+  right: 12px;
+}
+
+.lum-gallery-button:after {
+  content: "";
+  display: block;
+  position: absolute;
+  top: 50%;
+  width: 36px;
+  height: 36px;
+  border-top: 4px solid rgba(255, 255, 255, 0.8);
+}
+
+.lum-previous-button:after {
+  transform: translateY(-50%) rotate(-45deg);
+  border-left: 4px solid rgba(255, 255, 255, 0.8);
+  box-shadow: -2px 0 rgba(0, 0, 0, 0.2);
+  left: 12%;
+  border-radius: 3px 0 0 0;
+}
+
+.lum-next-button:after {
+  transform: translateY(-50%) rotate(45deg);
+  border-right: 4px solid rgba(255, 255, 255, 0.8);
+  box-shadow: 2px 0 rgba(0, 0, 0, 0.2);
+  right: 12%;
+  border-radius: 0 3px 0 0;
+}
+
+/* This media query makes screens less than 460px wide display in a "fullscreen"-esque mode. Users can then scroll around inside the lightbox to see the entire image. */
+@media (max-width: 460px) {
+  .lum-lightbox-image-wrapper {
+    display: block;
+    overflow: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  .lum-lightbox-caption {
+    width: 100%;
+    position: absolute;
+    bottom: 0;
+  }
+
+  .lum-lightbox-inner img {
+    max-width: none;
+    max-height: none;
+    display: block;
+  }
+}

metadata

@@ -0,0 +1,245 @@
+--- !ruby/object:Gem::Specification
+name: spree_product_hover_zoom
+version: !ruby/object:Gem::Version
+  version: 1.0.2
+platform: ruby
+authors:
+- Vinz Loh
+autorequire: 
+bindir: bin
+cert_chain: []
+date: 2017-06-12 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: spree_core
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '3.2'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '3.2'
+- !ruby/object:Gem::Dependency
+  name: spree_frontend
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '3.2'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '3.2'
+- !ruby/object:Gem::Dependency
+  name: capybara
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '2.4'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '2.4'
+- !ruby/object:Gem::Dependency
+  name: database_cleaner
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+- !ruby/object:Gem::Dependency
+  name: factory_girl
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '4.5'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '4.5'
+- !ruby/object:Gem::Dependency
+  name: ffaker
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+- !ruby/object:Gem::Dependency
+  name: rspec-rails
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '3.1'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '3.1'
+- !ruby/object:Gem::Dependency
+  name: sass-rails
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '5.0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '5.0'
+- !ruby/object:Gem::Dependency
+  name: coffee-rails
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - '='
+      - !ruby/object:Gem::Version
+        version: '4.2'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - '='
+      - !ruby/object:Gem::Version
+        version: '4.2'
+- !ruby/object:Gem::Dependency
+  name: selenium-webdriver
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+- !ruby/object:Gem::Dependency
+  name: sqlite3
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+description: 
+email: vincent.ml@gmail.com
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- ".gitignore"
+- ".rspec"
+- ".ruby-gemset"
+- ".ruby-version"
+- Gemfile
+- LICENSE
+- README.md
+- Rakefile
+- Versionfile
+- app/assets/images/zoom.gif
+- app/assets/javascripts/spree/backend/spree_product_hover_zoom.js
+- app/assets/javascripts/spree/frontend/spree_product_hover_zoom.js.coffee.erb
+- app/assets/stylesheets/spree/backend/spree_product_hover_zoom.css
+- app/assets/stylesheets/spree/frontend/spree_product_hover_zoom.css
+- app/models/spree/product_zoom_configuration.rb
+- app/overrides/spree/products/_thumbnails/add_lightbox_to_thumbnails.html.erb.deface
+- app/overrides/spree/products/_thumbnails/add_lightbox_to_thumbnails.html.erb.deface~HEAD
+- app/overrides/spree/products/_thumbnails/swap_product_variant_images.deface
+- app/overrides/spree/products/show.rb
+- app/views/spree/products/_hover_zoom.html.erb
+- app/views/spree/products/_image.html.erb
+- app/views/spree/products/_image0.html.erb
+- config/locales/en.yml
+- config/routes.rb
+- lib/generators/spree_product_hover_zoom/install/install_generator.rb
+- lib/spree_product_hover_zoom.rb
+- lib/spree_product_hover_zoom/engine.rb
+- lib/spree_product_hover_zoom/factories.rb
+- script/rails
+- spec/features/zoom_spec.rb
+- spec/products_images/1/mini/product1.jpg
+- spec/products_images/1/product/product1.jpg
+- spec/products_images/2/mini/product2.jpg
+- spec/products_images/2/product/product2.jpg
+- spec/products_images/3/mini/product1.jpg
+- spec/products_images/3/product/product1.jpg
+- spec/products_images/4/mini/product2.jpg
+- spec/products_images/4/product/product2.jpg
+- spec/products_images/info.txt
+- spec/spec_helper.rb
+- spree-zoom-on-hover.gif
+- spree_product_hover_zoom.gemspec
+- vendor/assets/images/store/blank.gif
+- vendor/assets/javascripts/drift.min.js
+- vendor/assets/javascripts/luminous.js
+- vendor/assets/stylesheets/drift-basic.css
+- vendor/assets/stylesheets/luminous-basic.css
+homepage: http://cloudcoder.com.my
+licenses: []
+metadata: {}
+post_install_message: 
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: 1.8.7
+required_rubygems_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+requirements:
+- none
+rubyforge_project: 
+rubygems_version: 2.6.11
+signing_key: 
+specification_version: 4
+summary: A Spree extension that adds gallery view and zoom-on-hover functionality
+  for product images.
+test_files: []