workarea-hover_zoom 3.0.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +7 -0
- data/.editorconfig +20 -0
- data/.eslintignore +2 -0
- data/.eslintrc +24 -0
- data/.github/ISSUE_TEMPLATE/bug_report.md +37 -0
- data/.github/ISSUE_TEMPLATE/documentation-request.md +17 -0
- data/.github/ISSUE_TEMPLATE/feature_request.md +20 -0
- data/.github/workflows/ci.yml +54 -0
- data/.gitignore +13 -0
- data/.rspec +2 -0
- data/.rubocop.yml +2 -0
- data/.scss-lint.yml +188 -0
- data/CHANGELOG.md +25 -0
- data/CODE_OF_CONDUCT.md +3 -0
- data/CONTRIBUTING.md +3 -0
- data/Gemfile +8 -0
- data/LICENSE.md +3 -0
- data/README.md +130 -0
- data/Rakefile +43 -0
- data/app/assets/javascripts/workarea/storefront/hover_zoom/config.js +12 -0
- data/app/assets/javascripts/workarea/storefront/hover_zoom/modules/hover_zooms.js +64 -0
- data/app/assets/stylesheets/workarea/storefront/hover_zoom/components/_hover_zoom.scss +5 -0
- data/bin/rails +14 -0
- data/config/initializers/appends.rb +16 -0
- data/lib/workarea/hover_zoom.rb +13 -0
- data/lib/workarea/hover_zoom/engine.rb +8 -0
- data/lib/workarea/hover_zoom/version.rb +5 -0
- data/test/dummy/Rakefile +6 -0
- data/test/dummy/app/assets/config/manifest.js +4 -0
- data/test/dummy/app/assets/images/.keep +0 -0
- data/test/dummy/app/assets/javascripts/application.js +13 -0
- data/test/dummy/app/assets/stylesheets/application.css +15 -0
- data/test/dummy/app/controllers/application_controller.rb +3 -0
- data/test/dummy/app/controllers/concerns/.keep +0 -0
- data/test/dummy/app/helpers/application_helper.rb +2 -0
- data/test/dummy/app/jobs/application_job.rb +2 -0
- data/test/dummy/app/mailers/application_mailer.rb +4 -0
- data/test/dummy/app/models/concerns/.keep +0 -0
- data/test/dummy/app/views/layouts/application.html.erb +14 -0
- data/test/dummy/app/views/layouts/mailer.html.erb +13 -0
- data/test/dummy/app/views/layouts/mailer.text.erb +1 -0
- data/test/dummy/bin/bundle +3 -0
- data/test/dummy/bin/rails +4 -0
- data/test/dummy/bin/rake +4 -0
- data/test/dummy/bin/setup +34 -0
- data/test/dummy/bin/update +29 -0
- data/test/dummy/config.ru +5 -0
- data/test/dummy/config/application.rb +26 -0
- data/test/dummy/config/boot.rb +5 -0
- data/test/dummy/config/cable.yml +9 -0
- data/test/dummy/config/environment.rb +5 -0
- data/test/dummy/config/environments/development.rb +54 -0
- data/test/dummy/config/environments/production.rb +86 -0
- data/test/dummy/config/environments/test.rb +43 -0
- data/test/dummy/config/initializers/application_controller_renderer.rb +6 -0
- data/test/dummy/config/initializers/assets.rb +11 -0
- data/test/dummy/config/initializers/backtrace_silencers.rb +7 -0
- data/test/dummy/config/initializers/cookies_serializer.rb +5 -0
- data/test/dummy/config/initializers/filter_parameter_logging.rb +4 -0
- data/test/dummy/config/initializers/inflections.rb +16 -0
- data/test/dummy/config/initializers/mime_types.rb +4 -0
- data/test/dummy/config/initializers/workarea.rb +5 -0
- data/test/dummy/config/initializers/wrap_parameters.rb +14 -0
- data/test/dummy/config/locales/en.yml +23 -0
- data/test/dummy/config/puma.rb +47 -0
- data/test/dummy/config/routes.rb +5 -0
- data/test/dummy/config/secrets.yml +22 -0
- data/test/dummy/config/spring.rb +6 -0
- data/test/dummy/lib/assets/.keep +0 -0
- data/test/dummy/log/.keep +0 -0
- data/test/dummy/public/404.html +67 -0
- data/test/dummy/public/422.html +67 -0
- data/test/dummy/public/500.html +66 -0
- data/test/dummy/public/apple-touch-icon-precomposed.png +0 -0
- data/test/dummy/public/apple-touch-icon.png +0 -0
- data/test/dummy/public/favicon.ico +0 -0
- data/test/system/workarea/storefront/hover_zoom_test.rb +49 -0
- data/test/test_helper.rb +10 -0
- data/workarea-hover_zoom.gemspec +23 -0
- metadata +164 -0
data/LICENSE.md
ADDED
data/README.md
ADDED
@@ -0,0 +1,130 @@
|
|
1
|
+
Workarea Hover Zoom
|
2
|
+
================================================================================
|
3
|
+
|
4
|
+
Hover Zoom plugin for the Workarea commerce platform adds zoom capabilities (desktop/mobile) on your product primary images.
|
5
|
+
|
6
|
+
|
7
|
+
Setup
|
8
|
+
--------------------------------------------------------------------------------
|
9
|
+
|
10
|
+
#### New Build
|
11
|
+
|
12
|
+
This plugin is intended to be fairly automatic and will work out of the box if you are making a new build.
|
13
|
+
|
14
|
+
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`.
|
15
|
+
|
16
|
+
In the Workarea platform we call that ["Overriding a View"](https://developer.workarea.com/workarea-3/guides/override-a-view).
|
17
|
+
|
18
|
+
#### Custom Build
|
19
|
+
|
20
|
+
If you are not creating a new build and you have already made some customisation on it, we will have to dig a bit.
|
21
|
+
|
22
|
+
The plugin assumes the container ```.product-details__primary-image``` exists _(this can be tweaked in the configuration)_ and contains the following tags: ```<a>```, ```<img>```.
|
23
|
+
|
24
|
+
Example markup:
|
25
|
+
|
26
|
+
```html
|
27
|
+
<div class="product-details__primary-image">
|
28
|
+
<!-- /zoom.jpg is the asset used by the plugin as the zoom image -->
|
29
|
+
<a href="/zoom.jpg">
|
30
|
+
<img class="product-details__primary-image-link-image" src="/detail.jpg">
|
31
|
+
</a>
|
32
|
+
</div>
|
33
|
+
```
|
34
|
+
|
35
|
+
Example markup after initialization of the plugin:
|
36
|
+
|
37
|
+
```html
|
38
|
+
<div class="product-details__primary-image">
|
39
|
+
<!-- Link used as a container -->
|
40
|
+
<a class="hover-zoom__container" href="/zoom.jpg" style="overflow: hidden;">
|
41
|
+
<img src="/detail.jpg">
|
42
|
+
|
43
|
+
<!-- Zoom image added -->
|
44
|
+
<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;">
|
45
|
+
</a>
|
46
|
+
</div>
|
47
|
+
```
|
48
|
+
|
49
|
+
Configuration
|
50
|
+
--------------------------------------------------------------------------------
|
51
|
+
|
52
|
+
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:
|
53
|
+
|
54
|
+
```
|
55
|
+
// application.js.erb manifest
|
56
|
+
|
57
|
+
...
|
58
|
+
|
59
|
+
# Configuration
|
60
|
+
%w(
|
61
|
+
workarea/core/config
|
62
|
+
workarea/storefront/config
|
63
|
+
).each do |asset|
|
64
|
+
require_asset asset
|
65
|
+
end
|
66
|
+
|
67
|
+
# Project Specific Configuration
|
68
|
+
require_asset 'workarea/storefront/my_project_config'
|
69
|
+
|
70
|
+
...
|
71
|
+
|
72
|
+
```
|
73
|
+
|
74
|
+
And you should override and modify the hover-zoom configuration in your Project's Config file, as needed:
|
75
|
+
|
76
|
+
```
|
77
|
+
// in my_project_config.js
|
78
|
+
|
79
|
+
...
|
80
|
+
|
81
|
+
WORKAREA.config.hoverZooms = {
|
82
|
+
primaryImageContainer: '.selector'
|
83
|
+
};
|
84
|
+
|
85
|
+
...
|
86
|
+
|
87
|
+
```
|
88
|
+
|
89
|
+
##### Available configuration variables
|
90
|
+
|
91
|
+
| Variable | Description | Default
|
92
|
+
| ------------- | ------------- | ------------- |
|
93
|
+
| primaryImageContainer | The container where the zoom system will be initialized | .product-details__primary-image |
|
94
|
+
|
95
|
+
|
96
|
+
Advanced
|
97
|
+
--------------------------------------------------------------------------------
|
98
|
+
|
99
|
+
This plugin is acting as an orchestrator of two jQuery plugins:
|
100
|
+
- [workarea-jquery-zoom](https://stash.tools.weblinc.com/projects/WP/repos/workarea-jquery-zoom/browse)
|
101
|
+
- [workarea-jquery-magnify](https://stash.tools.weblinc.com/projects/WP/repos/workarea-jquery-magnify/browse)
|
102
|
+
|
103
|
+
Therefore if you need more flexibility you can come up with your own solution without re-inventing the wheel.
|
104
|
+
|
105
|
+
Getting Started
|
106
|
+
--------------------------------------------------------------------------------
|
107
|
+
|
108
|
+
This gem contains a Rails engine that must be mounted onto a host Rails application.
|
109
|
+
|
110
|
+
Then add the gem to your application's Gemfile specifying the source:
|
111
|
+
|
112
|
+
# ...
|
113
|
+
gem 'workarea-hover_zoom'
|
114
|
+
# ...
|
115
|
+
|
116
|
+
Update your application's bundle.
|
117
|
+
|
118
|
+
cd path/to/application
|
119
|
+
bundle
|
120
|
+
|
121
|
+
|
122
|
+
Workarea Platform Documentation
|
123
|
+
--------------------------------------------------------------------------------
|
124
|
+
|
125
|
+
See [https://developer.workarea.com](https://developer.workarea.com) for Workarea platform documentation.
|
126
|
+
|
127
|
+
License
|
128
|
+
--------------------------------------------------------------------------------
|
129
|
+
|
130
|
+
Workarea Hover Zoom is released under the [Business Software License](LICENSE)
|
data/Rakefile
ADDED
@@ -0,0 +1,43 @@
|
|
1
|
+
#!/usr/bin/env rake
|
2
|
+
begin
|
3
|
+
require 'bundler/setup'
|
4
|
+
rescue LoadError
|
5
|
+
puts 'You must `gem install bundler` and `bundle install` to run rake tasks'
|
6
|
+
end
|
7
|
+
|
8
|
+
APP_RAKEFILE = File.expand_path('../test/dummy/Rakefile', __FILE__)
|
9
|
+
load 'rails/tasks/engine.rake'
|
10
|
+
load 'rails/tasks/statistics.rake'
|
11
|
+
load 'workarea/changelog.rake'
|
12
|
+
|
13
|
+
require 'rake/testtask'
|
14
|
+
|
15
|
+
Rake::TestTask.new(:test) do |t|
|
16
|
+
t.libs << 'lib'
|
17
|
+
t.libs << 'test'
|
18
|
+
t.pattern = 'test/**/*_test.rb'
|
19
|
+
t.verbose = false
|
20
|
+
end
|
21
|
+
|
22
|
+
task default: :test
|
23
|
+
|
24
|
+
$LOAD_PATH.unshift File.expand_path('../lib', __FILE__)
|
25
|
+
require 'workarea/hover_zoom/version'
|
26
|
+
|
27
|
+
desc "Release version #{Workarea::HoverZoom::VERSION} of the gem"
|
28
|
+
task :release do
|
29
|
+
host = "https://#{ENV['BUNDLE_GEMS__WEBLINC__COM']}@gems.weblinc.com"
|
30
|
+
|
31
|
+
Rake::Task['workarea:changelog'].execute
|
32
|
+
system 'git add CHANGELOG.md'
|
33
|
+
system 'git commit -m "Update CHANGELOG"'
|
34
|
+
system 'git push origin HEAD'
|
35
|
+
|
36
|
+
system "git tag -a v#{Workarea::HoverZoom::VERSION} -m 'Tagging #{Workarea::HoverZoom::VERSION}'"
|
37
|
+
system 'git push --tags'
|
38
|
+
|
39
|
+
system 'gem build workarea-hover_zoom.gemspec'
|
40
|
+
system "gem push workarea-hover_zoom-#{Workarea::HoverZoom::VERSION}.gem"
|
41
|
+
system "gem push workarea-hover_zoom-#{Workarea::HoverZoom::VERSION}.gem --host #{host}"
|
42
|
+
system "rm workarea-hover_zoom-#{Workarea::HoverZoom::VERSION}.gem"
|
43
|
+
end
|
@@ -0,0 +1,64 @@
|
|
1
|
+
/**
|
2
|
+
* @namespace WORKAREA.hoverZooms
|
3
|
+
*/
|
4
|
+
WORKAREA.registerModule('hoverZooms', (function () {
|
5
|
+
'use strict';
|
6
|
+
|
7
|
+
var attachZoom = function($container) {
|
8
|
+
var $link = $container.find('a');
|
9
|
+
|
10
|
+
$container.addClass('hover-zoom hover-zoom--zoom');
|
11
|
+
$link.addClass('hover-zoom__container');
|
12
|
+
|
13
|
+
$link.zoom({
|
14
|
+
url: $link.attr('href'),
|
15
|
+
lazyLoad: false
|
16
|
+
});
|
17
|
+
},
|
18
|
+
|
19
|
+
attachMagnify = function($container) {
|
20
|
+
var $link = $container.find('a');
|
21
|
+
|
22
|
+
$container.addClass('hover-zoom hover-zoom--magnify');
|
23
|
+
$link.addClass('hover-zoom__container');
|
24
|
+
|
25
|
+
$link.magnify({
|
26
|
+
url: $link.attr('href'),
|
27
|
+
touchSupport: true
|
28
|
+
});
|
29
|
+
},
|
30
|
+
|
31
|
+
detachPlugins = function($container) {
|
32
|
+
$container
|
33
|
+
.removeClass('hover-zoom--magnify hover-zoom--zoom')
|
34
|
+
.find('a')
|
35
|
+
.trigger('magnify.destroy')
|
36
|
+
.trigger('zoom.destroy');
|
37
|
+
},
|
38
|
+
|
39
|
+
setup = function($container) {
|
40
|
+
|
41
|
+
detachPlugins($container);
|
42
|
+
|
43
|
+
if (WORKAREA.breakPoints.currentlyLessThan('medium')) {
|
44
|
+
attachZoom($container);
|
45
|
+
} else {
|
46
|
+
attachMagnify($container);
|
47
|
+
}
|
48
|
+
},
|
49
|
+
|
50
|
+
events = function($container) {
|
51
|
+
$container.find('img').on('load', _.partial(setup, $container));
|
52
|
+
},
|
53
|
+
|
54
|
+
init = function($scope) {
|
55
|
+
var $container = $(WORKAREA.config.hoverZooms.primaryImageContainer);
|
56
|
+
|
57
|
+
setup($container);
|
58
|
+
events($container);
|
59
|
+
};
|
60
|
+
|
61
|
+
return {
|
62
|
+
init: init
|
63
|
+
};
|
64
|
+
}()));
|
data/bin/rails
ADDED
@@ -0,0 +1,14 @@
|
|
1
|
+
#!/usr/bin/env ruby
|
2
|
+
# This command will automatically be run when you run "rails" with Rails gems
|
3
|
+
# installed from the root of your application.
|
4
|
+
ENGINE_ROOT = File.expand_path('../..', __FILE__)
|
5
|
+
ENGINE_PATH = File.expand_path('../../lib/workarea/hover_zoom/engine', __FILE__)
|
6
|
+
# Set up gems listed in the Gemfile.
|
7
|
+
ENV['BUNDLE_GEMFILE'] ||= File.expand_path('../../Gemfile', __FILE__)
|
8
|
+
require 'bundler/setup' if File.exist?(ENV['BUNDLE_GEMFILE'])
|
9
|
+
require 'action_controller/railtie'
|
10
|
+
require 'action_view/railtie'
|
11
|
+
require 'action_mailer/railtie'
|
12
|
+
require 'rails/test_unit/railtie'
|
13
|
+
require 'sprockets/railtie'
|
14
|
+
require 'rails/engine/commands'
|
@@ -0,0 +1,16 @@
|
|
1
|
+
module Workarea
|
2
|
+
Plugin.append_stylesheets(
|
3
|
+
'storefront.components',
|
4
|
+
'workarea/storefront/hover_zoom/components/hover_zoom.scss'
|
5
|
+
)
|
6
|
+
|
7
|
+
Plugin.append_javascripts(
|
8
|
+
'storefront.config',
|
9
|
+
'workarea/storefront/hover_zoom/config'
|
10
|
+
)
|
11
|
+
|
12
|
+
Plugin.append_javascripts(
|
13
|
+
'storefront.modules',
|
14
|
+
'workarea/storefront/hover_zoom/modules/hover_zooms'
|
15
|
+
)
|
16
|
+
end
|
data/test/dummy/Rakefile
ADDED
File without changes
|
@@ -0,0 +1,13 @@
|
|
1
|
+
// This is a manifest file that'll be compiled into application.js, which will include all the files
|
2
|
+
// listed below.
|
3
|
+
//
|
4
|
+
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
|
5
|
+
// or any plugin's vendor/assets/javascripts directory can be referenced here using a relative path.
|
6
|
+
//
|
7
|
+
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
|
8
|
+
// compiled file. JavaScript code in this file should be added after the last require_* statement.
|
9
|
+
//
|
10
|
+
// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
|
11
|
+
// about supported directives.
|
12
|
+
//
|
13
|
+
//= require_tree .
|
@@ -0,0 +1,15 @@
|
|
1
|
+
/*
|
2
|
+
* This is a manifest file that'll be compiled into application.css, which will include all the files
|
3
|
+
* listed below.
|
4
|
+
*
|
5
|
+
* Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
|
6
|
+
* or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path.
|
7
|
+
*
|
8
|
+
* You're free to add application-wide styles to this file and they'll appear at the bottom of the
|
9
|
+
* compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
|
10
|
+
* files in this directory. Styles in this file should be added after the last require_* statement.
|
11
|
+
* It is generally better to create a new file per style scope.
|
12
|
+
*
|
13
|
+
*= require_tree .
|
14
|
+
*= require_self
|
15
|
+
*/
|
File without changes
|
File without changes
|
@@ -0,0 +1,14 @@
|
|
1
|
+
<!DOCTYPE html>
|
2
|
+
<html>
|
3
|
+
<head>
|
4
|
+
<title>Dummy</title>
|
5
|
+
<%= csrf_meta_tags %>
|
6
|
+
|
7
|
+
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
|
8
|
+
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
|
9
|
+
</head>
|
10
|
+
|
11
|
+
<body>
|
12
|
+
<%= yield %>
|
13
|
+
</body>
|
14
|
+
</html>
|
@@ -0,0 +1 @@
|
|
1
|
+
<%= yield %>
|
data/test/dummy/bin/rake
ADDED