workarea-jquery_magnify 1.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/.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 +21 -0
- data/.rubocop.yml +2 -0
- data/CHANGELOG.md +1 -0
- data/CODE_OF_CONDUCT.md +3 -0
- data/CONTRIBUTING.md +3 -0
- data/Gemfile +7 -0
- data/LICENSE.md +3 -0
- data/README.md +99 -0
- data/Rakefile +109 -0
- data/app/assets/javascripts/jquery_magnify/jquery.magnify.js +236 -0
- data/bin/rails +20 -0
- data/config/initializers/appends.rb +6 -0
- data/config/initializers/workarea.rb +3 -0
- data/config/routes.rb +2 -0
- data/lib/tasks/jquery_magnify_tasks.rake +4 -0
- data/lib/workarea/jquery_magnify.rb +11 -0
- data/lib/workarea/jquery_magnify/engine.rb +8 -0
- data/lib/workarea/jquery_magnify/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 +38 -0
- data/test/dummy/bin/update +29 -0
- data/test/dummy/bin/yarn +11 -0
- data/test/dummy/config.ru +5 -0
- data/test/dummy/config/application.rb +28 -0
- data/test/dummy/config/boot.rb +5 -0
- data/test/dummy/config/cable.yml +10 -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 +91 -0
- data/test/dummy/config/environments/test.rb +44 -0
- data/test/dummy/config/initializers/application_controller_renderer.rb +8 -0
- data/test/dummy/config/initializers/assets.rb +14 -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 +33 -0
- data/test/dummy/config/puma.rb +56 -0
- data/test/dummy/config/routes.rb +5 -0
- data/test/dummy/config/secrets.yml +32 -0
- data/test/dummy/config/spring.rb +6 -0
- data/test/dummy/db/seeds.rb +2 -0
- data/test/dummy/lib/assets/.keep +0 -0
- data/test/dummy/log/.keep +0 -0
- data/test/dummy/package.json +5 -0
- data/test/teaspoon_env.rb +6 -0
- data/test/test_helper.rb +10 -0
- data/workarea-jquery_magnify.gemspec +20 -0
- metadata +130 -0
checksums.yaml
ADDED
@@ -0,0 +1,7 @@
|
|
1
|
+
---
|
2
|
+
SHA256:
|
3
|
+
metadata.gz: 85422a157552b0b4970f5ab7e13b9baa321f28fe428385e930d5901e203b6d58
|
4
|
+
data.tar.gz: 57afd6220dd041ea02d7eb15ecedfa6fbaf86745555c61a9d2057224ead50c03
|
5
|
+
SHA512:
|
6
|
+
metadata.gz: 1d3f93171998bbbd23eb7082232c9ab717faa6aa0121180bcb8b73f39d6882867d30434e11a96ac11d4565e7747336d95d03705f2d4a2e5c6ab396db22143a01
|
7
|
+
data.tar.gz: 49278183b6c7387533e6d5a4c001b8e5e9367dca6a12fb3a6c780dea7668ff0178008fb2779da62a45efb8b06b7d810d2d64850e08d3491ca3cf9e4e5ef91a26
|
data/.editorconfig
ADDED
@@ -0,0 +1,20 @@
|
|
1
|
+
# editorconfig.org
|
2
|
+
root = true
|
3
|
+
|
4
|
+
[*]
|
5
|
+
charset = utf-8
|
6
|
+
indent_style = space
|
7
|
+
end_of_line = lf
|
8
|
+
trim_trailing_whitespace = true
|
9
|
+
insert_final_newline = true
|
10
|
+
|
11
|
+
[{*.rb,*.haml,*.decorator,*.yml,*.yaml,*.jbuilder}]
|
12
|
+
indent_size = 2
|
13
|
+
indent_style = space
|
14
|
+
|
15
|
+
[{*.js,*.jst,*.ejs,*.scss}]
|
16
|
+
indent_size = 4
|
17
|
+
|
18
|
+
[*.md]
|
19
|
+
indent_size = 4
|
20
|
+
trim_trailing_whitespace = false
|
@@ -0,0 +1,37 @@
|
|
1
|
+
---
|
2
|
+
name: Bug report
|
3
|
+
about: Create a report to help us improve Workarea
|
4
|
+
title: ''
|
5
|
+
labels: bug
|
6
|
+
assignees: ''
|
7
|
+
|
8
|
+
---
|
9
|
+
|
10
|
+
⚠️**Before you create**⚠️
|
11
|
+
Please verify the issue you're experiencing is not part of your Workarea project customizations. The best way to do this is with a [vanilla Workarea installation](https://developer.workarea.com/articles/create-a-new-host-application.html). This will help us spend time on fixes/improvements for the whole community. Thank you!
|
12
|
+
|
13
|
+
**Describe the bug**
|
14
|
+
A clear and concise description of what the bug is.
|
15
|
+
|
16
|
+
**To Reproduce**
|
17
|
+
Steps to reproduce the behavior:
|
18
|
+
1. Go to '...'
|
19
|
+
2. Click on '....'
|
20
|
+
3. Scroll down to '....'
|
21
|
+
4. See error
|
22
|
+
|
23
|
+
**Expected behavior**
|
24
|
+
A clear and concise description of what you expected to happen.
|
25
|
+
|
26
|
+
**Workarea Setup (please complete the following information):**
|
27
|
+
- Workarea Version: [e.g. v3.4.6]
|
28
|
+
- Plugins [e.g. workarea-blog, workarea-sitemaps]
|
29
|
+
|
30
|
+
**Attachments**
|
31
|
+
If applicable, add any attachments to help explain your problem, things like:
|
32
|
+
- screenshots
|
33
|
+
- Gemfile.lock
|
34
|
+
- test cases
|
35
|
+
|
36
|
+
**Additional context**
|
37
|
+
Add any other context about the problem here.
|
@@ -0,0 +1,17 @@
|
|
1
|
+
---
|
2
|
+
name: Documentation request
|
3
|
+
about: Suggest documentation
|
4
|
+
title: ''
|
5
|
+
labels: documentation
|
6
|
+
assignees: ''
|
7
|
+
|
8
|
+
---
|
9
|
+
|
10
|
+
**Is your documentation related to a problem? Please describe.**
|
11
|
+
A clear and concise description of what the problem is. Ex. I'm confused by [...]
|
12
|
+
|
13
|
+
**Describe the article you'd like**
|
14
|
+
A clear and concise description of what would be in the documentation article.
|
15
|
+
|
16
|
+
**Additional context**
|
17
|
+
Add any other context or screenshots about the feature request here.
|
@@ -0,0 +1,20 @@
|
|
1
|
+
---
|
2
|
+
name: Feature request
|
3
|
+
about: Suggest an idea for Workarea
|
4
|
+
title: ''
|
5
|
+
labels: enhancement
|
6
|
+
assignees: ''
|
7
|
+
|
8
|
+
---
|
9
|
+
|
10
|
+
**Is your feature request related to a problem? Please describe.**
|
11
|
+
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
|
12
|
+
|
13
|
+
**Describe the solution you'd like**
|
14
|
+
A clear and concise description of what you want to happen.
|
15
|
+
|
16
|
+
**Describe alternatives you've considered**
|
17
|
+
A clear and concise description of any alternative solutions or features you've considered.
|
18
|
+
|
19
|
+
**Additional context**
|
20
|
+
Add any other context or screenshots about the feature request here.
|
@@ -0,0 +1,54 @@
|
|
1
|
+
name: CI
|
2
|
+
on: [push]
|
3
|
+
|
4
|
+
jobs:
|
5
|
+
static_analysis:
|
6
|
+
runs-on: ubuntu-latest
|
7
|
+
steps:
|
8
|
+
- uses: actions/checkout@v1
|
9
|
+
- uses: workarea-commerce/ci/bundler-audit@v1
|
10
|
+
- uses: workarea-commerce/ci/rubocop@v1
|
11
|
+
|
12
|
+
admin_tests:
|
13
|
+
runs-on: ubuntu-latest
|
14
|
+
steps:
|
15
|
+
- uses: actions/checkout@v1
|
16
|
+
- uses: actions/setup-ruby@v1
|
17
|
+
with:
|
18
|
+
ruby-version: 2.6.x
|
19
|
+
- uses: workarea-commerce/ci/test@v1
|
20
|
+
with:
|
21
|
+
command: bin/rails app:workarea:test:admin
|
22
|
+
|
23
|
+
core_tests:
|
24
|
+
runs-on: ubuntu-latest
|
25
|
+
steps:
|
26
|
+
- uses: actions/checkout@v1
|
27
|
+
- uses: actions/setup-ruby@v1
|
28
|
+
with:
|
29
|
+
ruby-version: 2.6.x
|
30
|
+
- uses: workarea-commerce/ci/test@v1
|
31
|
+
with:
|
32
|
+
command: bin/rails app:workarea:test:core
|
33
|
+
|
34
|
+
storefront_tests:
|
35
|
+
runs-on: ubuntu-latest
|
36
|
+
steps:
|
37
|
+
- uses: actions/checkout@v1
|
38
|
+
- uses: actions/setup-ruby@v1
|
39
|
+
with:
|
40
|
+
ruby-version: 2.6.x
|
41
|
+
- uses: workarea-commerce/ci/test@v1
|
42
|
+
with:
|
43
|
+
command: bin/rails app:workarea:test:storefront
|
44
|
+
|
45
|
+
plugins_tests:
|
46
|
+
runs-on: ubuntu-latest
|
47
|
+
steps:
|
48
|
+
- uses: actions/checkout@v1
|
49
|
+
- uses: actions/setup-ruby@v1
|
50
|
+
with:
|
51
|
+
ruby-version: 2.6.x
|
52
|
+
- uses: workarea-commerce/ci/test@v1
|
53
|
+
with:
|
54
|
+
command: bin/rails app:workarea:test:plugins
|
data/.gitignore
ADDED
@@ -0,0 +1,21 @@
|
|
1
|
+
.bundle/
|
2
|
+
log/*.log
|
3
|
+
pkg/
|
4
|
+
test/dummy/db/*.sqlite3
|
5
|
+
test/dummy/db/*.sqlite3-journal
|
6
|
+
test/dummy/log/*.log
|
7
|
+
test/dummy/tmp/
|
8
|
+
.DS_Store
|
9
|
+
.byebug_history
|
10
|
+
.bundle/
|
11
|
+
.sass-cache/
|
12
|
+
Gemfile.lock
|
13
|
+
pkg/
|
14
|
+
test/dummy/tmp/
|
15
|
+
test/dummy/public/
|
16
|
+
log/*.log
|
17
|
+
test/dummy/log/*.log
|
18
|
+
test/dummy/db/*.sqlite3
|
19
|
+
test/dummy/db/*.sqlite3-journal
|
20
|
+
node_modules/
|
21
|
+
.rubocop-https-*
|
data/.rubocop.yml
ADDED
data/CHANGELOG.md
ADDED
@@ -0,0 +1 @@
|
|
1
|
+
|
data/CODE_OF_CONDUCT.md
ADDED
data/CONTRIBUTING.md
ADDED
data/Gemfile
ADDED
data/LICENSE.md
ADDED
data/README.md
ADDED
@@ -0,0 +1,99 @@
|
|
1
|
+
Workarea Jquery Magnify
|
2
|
+
================================================================================
|
3
|
+
|
4
|
+
Note: This work is in progress and part of the workarea-zoom plugin.
|
5
|
+
|
6
|
+
About
|
7
|
+
--------------------------------------------------------------------------------
|
8
|
+
Jquery Magnify let your user enlarge images on mouseover, it's a great candidate for non-touch enabled devices with a small support for touch-enabled devices.
|
9
|
+
|
10
|
+
If you are looking for a better experience on touch-enabled devices, you should check out: https://stash.tools.weblinc.com/projects/WP/repos/workarea-jquery-zoom/browse.
|
11
|
+
|
12
|
+
|
13
|
+
Getting Started
|
14
|
+
--------------------------------------------------------------------------------
|
15
|
+
|
16
|
+
Add the gem to your application's Gemfile:
|
17
|
+
|
18
|
+
# ...
|
19
|
+
gem 'workarea-jquery_magnify'
|
20
|
+
# ...
|
21
|
+
|
22
|
+
This Gem will mount the jquery.magnify asset in your application.
|
23
|
+
|
24
|
+
Example
|
25
|
+
--------------------------------------------------------------------------------
|
26
|
+
|
27
|
+
```html
|
28
|
+
<div class="magnify">
|
29
|
+
<div data-magnify-src="http://example.com/big-image.jpg" class="magnify__container">
|
30
|
+
<img src="http://example.com/small-image.jpg" class="magnify__image">
|
31
|
+
</div>
|
32
|
+
</div>
|
33
|
+
```
|
34
|
+
|
35
|
+
```css
|
36
|
+
.magnify {
|
37
|
+
width: 320px;
|
38
|
+
}
|
39
|
+
|
40
|
+
.magnify__container {
|
41
|
+
position: relative;
|
42
|
+
}
|
43
|
+
|
44
|
+
.magnify__image{
|
45
|
+
display: block;
|
46
|
+
width: 100%;
|
47
|
+
min-width: 100%;
|
48
|
+
}
|
49
|
+
```
|
50
|
+
|
51
|
+
```javascript
|
52
|
+
$(document).ready(function() {
|
53
|
+
$('.magnify__container').magnify();
|
54
|
+
});
|
55
|
+
```
|
56
|
+
|
57
|
+
|
58
|
+
Options
|
59
|
+
--------------------------------------------------------------------------------
|
60
|
+
|
61
|
+
You have the ability to pass your options like this:
|
62
|
+
|
63
|
+
```javascript
|
64
|
+
$('.magnify').magnify({
|
65
|
+
url: null,
|
66
|
+
touchSupport: false
|
67
|
+
});
|
68
|
+
```
|
69
|
+
|
70
|
+
Different options are available:
|
71
|
+
|
72
|
+
Name | Default | Description
|
73
|
+
------------- | ------------- | -------------
|
74
|
+
touchSupport | ```false``` | Enable/Disable finger gestures on touch-enabled devices
|
75
|
+
url | ```null``` | The url of the big magnify image, if not defined, jquery.magnify will fetch the attribute ```data-magnify-src```given.
|
76
|
+
|
77
|
+
Events
|
78
|
+
--------------------------------------------------------------------------------
|
79
|
+
|
80
|
+
You can destroy the widget for the instance given, it's helpful when you want to go back to a clean state.
|
81
|
+
|
82
|
+
```javascript
|
83
|
+
// Create instance
|
84
|
+
$('.magnify__container').magnify();
|
85
|
+
|
86
|
+
// Remove instance
|
87
|
+
$('.magnify__container').trigger('magnify.destroy');
|
88
|
+
```
|
89
|
+
|
90
|
+
Workarea Commerce Documentation
|
91
|
+
--------------------------------------------------------------------------------
|
92
|
+
|
93
|
+
See [https://developer.workarea.com](https://developer.workarea.com) for Workarea Commerce documentation.
|
94
|
+
|
95
|
+
License
|
96
|
+
--------------------------------------------------------------------------------
|
97
|
+
|
98
|
+
Workarea Styled Selects is released under the [Business Software License](LICENSE)
|
99
|
+
|
data/Rakefile
ADDED
@@ -0,0 +1,109 @@
|
|
1
|
+
begin
|
2
|
+
require 'bundler/setup'
|
3
|
+
rescue LoadError
|
4
|
+
puts 'You must `gem install bundler` and `bundle install` to run rake tasks'
|
5
|
+
end
|
6
|
+
|
7
|
+
require 'rdoc/task'
|
8
|
+
RDoc::Task.new(:rdoc) do |rdoc|
|
9
|
+
rdoc.rdoc_dir = 'rdoc'
|
10
|
+
rdoc.title = 'Jquery Magnify'
|
11
|
+
rdoc.options << '--line-numbers'
|
12
|
+
rdoc.rdoc_files.include('README.md')
|
13
|
+
rdoc.rdoc_files.include('lib/**/*.rb')
|
14
|
+
end
|
15
|
+
|
16
|
+
APP_RAKEFILE = File.expand_path("../test/dummy/Rakefile", __FILE__)
|
17
|
+
load 'rails/tasks/engine.rake'
|
18
|
+
load 'rails/tasks/statistics.rake'
|
19
|
+
|
20
|
+
require 'rake/testtask'
|
21
|
+
Rake::TestTask.new(:test) do |t|
|
22
|
+
t.libs << 'lib'
|
23
|
+
t.libs << 'test'
|
24
|
+
t.pattern = 'test/**/*_test.rb'
|
25
|
+
t.verbose = false
|
26
|
+
end
|
27
|
+
task default: :test
|
28
|
+
|
29
|
+
$LOAD_PATH.unshift File.expand_path('../lib', __FILE__)
|
30
|
+
require 'workarea/jquery_magnify/version'
|
31
|
+
|
32
|
+
desc 'Generate the changelog based on git history'
|
33
|
+
task :changelog, :from, :to do |t, args|
|
34
|
+
require 'date'
|
35
|
+
|
36
|
+
from = args[:from] || `git describe --tags --abbrev=0`.strip
|
37
|
+
to = args[:to] || 'HEAD'
|
38
|
+
log = `git log #{from}..#{to} --pretty=format:'%an|%B___'`
|
39
|
+
|
40
|
+
puts "Workarea Jquery Magnify #{Workarea::JqueryMagnify::VERSION} (#{Time.zone.today})"
|
41
|
+
puts '-' * 80
|
42
|
+
puts
|
43
|
+
|
44
|
+
log.split(/___/).each do |commit|
|
45
|
+
pieces = commit.split('|').reverse
|
46
|
+
author = pieces.pop.strip
|
47
|
+
message = pieces.join.strip
|
48
|
+
|
49
|
+
next if message =~ /^\s*Merge pull request/
|
50
|
+
next if message =~ /No changelog/i
|
51
|
+
|
52
|
+
project_key = nil # TODO Replace with your Project's Jira key
|
53
|
+
|
54
|
+
if project_key.blank?
|
55
|
+
puts "To clean up your release notes, add your project's Jira key to the Changelog Rake task!"
|
56
|
+
else
|
57
|
+
ticket = message.scan(/#{project_key}-\d+/)[0]
|
58
|
+
next if ticket.nil?
|
59
|
+
next if message =~ /^\s*Merge branch/ && ticket.nil?
|
60
|
+
end
|
61
|
+
|
62
|
+
first_line = false
|
63
|
+
|
64
|
+
message.each_line do |line|
|
65
|
+
if !first_line
|
66
|
+
first_line = true
|
67
|
+
puts "* #{line}"
|
68
|
+
elsif line.strip.empty?
|
69
|
+
puts
|
70
|
+
else
|
71
|
+
puts " #{line}"
|
72
|
+
end
|
73
|
+
end
|
74
|
+
|
75
|
+
puts " #{author}"
|
76
|
+
puts
|
77
|
+
end
|
78
|
+
end
|
79
|
+
|
80
|
+
desc "Release version #{Workarea::JqueryMagnify::VERSION} of the gem"
|
81
|
+
task :release do
|
82
|
+
host = "https://#{ENV['BUNDLE_GEMS__WEBLINC__COM']}@gems.weblinc.com"
|
83
|
+
|
84
|
+
system 'touch CHANGELOG.md'
|
85
|
+
system 'echo "$(rake changelog)
|
86
|
+
|
87
|
+
|
88
|
+
$(cat CHANGELOG.md)" > CHANGELOG.md'
|
89
|
+
system 'git add CHANGELOG.md && git commit -m "Update changelog" && git push origin HEAD'
|
90
|
+
|
91
|
+
system "git tag -a v#{Workarea::JqueryMagnify::VERSION} -m 'Tagging #{Workarea::JqueryMagnify::VERSION}'"
|
92
|
+
system 'git push --tags'
|
93
|
+
|
94
|
+
system "gem build workarea-jquery_magnify.gemspec"
|
95
|
+
system "gem push workarea-jquery_magnify-#{Workarea::JqueryMagnify::VERSION}.gem"
|
96
|
+
system "gem push workarea-jquery_magnify-#{Workarea::JqueryMagnify::VERSION}.gem --host #{host}"
|
97
|
+
system "rm workarea-jquery_magnify-#{Workarea::JqueryMagnify::VERSION}.gem"
|
98
|
+
end
|
99
|
+
|
100
|
+
desc 'Run the JavaScript tests'
|
101
|
+
ENV['TEASPOON_RAILS_ENV'] = File.expand_path('../test/dummy/config/environment', __FILE__)
|
102
|
+
task teaspoon: 'app:teaspoon'
|
103
|
+
|
104
|
+
desc 'Start a server at http://localhost:3000/teaspoon for JavaScript tests'
|
105
|
+
task :teaspoon_server do
|
106
|
+
Dir.chdir("test/dummy")
|
107
|
+
teaspoon_env = File.expand_path('../test/teaspoon_env.rb', __FILE__)
|
108
|
+
system "RAILS_ENV=test TEASPOON_ENV=#{teaspoon_env} rails s"
|
109
|
+
end
|
@@ -0,0 +1,236 @@
|
|
1
|
+
/**
|
2
|
+
* @author Jeremie Ges <jges@weblinc.com>
|
3
|
+
*/
|
4
|
+
(function($) {
|
5
|
+
|
6
|
+
function Magnify() {
|
7
|
+
|
8
|
+
/**
|
9
|
+
* DOM accessors
|
10
|
+
* @type {Object}
|
11
|
+
*/
|
12
|
+
this.$dom = {
|
13
|
+
container: null,
|
14
|
+
image: null
|
15
|
+
},
|
16
|
+
|
17
|
+
/**
|
18
|
+
* Keep track of things
|
19
|
+
* @type {Object}
|
20
|
+
*/
|
21
|
+
this.flags = {
|
22
|
+
imageLoaded: false,
|
23
|
+
},
|
24
|
+
|
25
|
+
/**
|
26
|
+
* Contains every options of $.fn.magnify.defaults
|
27
|
+
* merged with the options provided by the user
|
28
|
+
* @type {Object}
|
29
|
+
*/
|
30
|
+
this.options = {},
|
31
|
+
|
32
|
+
/**
|
33
|
+
* Initialize the widget with the right options,
|
34
|
+
* scope (container) and boot
|
35
|
+
* @param {HTMLElement} container - The container of the zoom element
|
36
|
+
* @param {Object} options - The options provided by the user
|
37
|
+
*/
|
38
|
+
this.init = function(container, options) {
|
39
|
+
this.$dom.container = $(container);
|
40
|
+
this.options = _.extend($.fn.magnify.defaults, options);
|
41
|
+
this.setup();
|
42
|
+
this.events();
|
43
|
+
},
|
44
|
+
|
45
|
+
/**
|
46
|
+
* Setup minimal dependencies
|
47
|
+
*/
|
48
|
+
this.setup = function() {
|
49
|
+
this.setupImage();
|
50
|
+
},
|
51
|
+
|
52
|
+
/**
|
53
|
+
* Create a blank <img> tag which
|
54
|
+
* will be used as the zoom image.
|
55
|
+
*/
|
56
|
+
this.setupImage = function() {
|
57
|
+
this.$dom.image = $('<img/>');
|
58
|
+
},
|
59
|
+
|
60
|
+
/**
|
61
|
+
* Attach events and start listen
|
62
|
+
*/
|
63
|
+
this.events = function() {
|
64
|
+
this.$dom.image.on('load', this.onLoadImage.bind(this));
|
65
|
+
|
66
|
+
this.$dom.container
|
67
|
+
.on('mouseenter', this.onEnterContainer.bind(this))
|
68
|
+
.on('mouseleave', this.onLeaveContainer.bind(this))
|
69
|
+
.on('mousemove', this.onMoveContainer.bind(this));
|
70
|
+
|
71
|
+
if (this.options.touchSupport) {
|
72
|
+
this.$dom.container
|
73
|
+
.on('touchstart', this.onEnterContainer.bind(this))
|
74
|
+
.on('touchend', this.onLeaveContainer.bind(this))
|
75
|
+
.on('touchmove', this.onMoveContainer.bind(this));
|
76
|
+
}
|
77
|
+
|
78
|
+
this.$dom.container.on('magnify.destroy', this.destroy.bind(this));
|
79
|
+
},
|
80
|
+
|
81
|
+
/**
|
82
|
+
* Callback when the zoom image is loaded
|
83
|
+
*/
|
84
|
+
this.onLoadImage = function() {
|
85
|
+
// Insert zoom image in page
|
86
|
+
this.$dom.image
|
87
|
+
.css({
|
88
|
+
position: 'absolute',
|
89
|
+
top: 0,
|
90
|
+
left: 0,
|
91
|
+
width: this.$dom.image.get(0).width,
|
92
|
+
height: this.$dom.image.get(0).height,
|
93
|
+
border: 'none',
|
94
|
+
maxWidth: 'none',
|
95
|
+
maxHeight: 'none',
|
96
|
+
})
|
97
|
+
.attr('role', 'presentation')
|
98
|
+
.appendTo(this.$dom.container);
|
99
|
+
|
100
|
+
this.$dom.container.css('overflow', 'hidden');
|
101
|
+
this.flags.imageLoaded = true;
|
102
|
+
},
|
103
|
+
|
104
|
+
/**
|
105
|
+
* Callback when the mouse / finger enters inside
|
106
|
+
* the container
|
107
|
+
*/
|
108
|
+
this.onEnterContainer = function(e) {
|
109
|
+
e.preventDefault();
|
110
|
+
|
111
|
+
if (!this.flags.imageLoaded) {
|
112
|
+
this.loadImage();
|
113
|
+
}
|
114
|
+
|
115
|
+
this.showImage();
|
116
|
+
},
|
117
|
+
|
118
|
+
/**
|
119
|
+
* Callback when the mouse / finger leaves
|
120
|
+
* the container
|
121
|
+
*/
|
122
|
+
this.onLeaveContainer = function(e) {
|
123
|
+
e.preventDefault();
|
124
|
+
this.hideImage();
|
125
|
+
},
|
126
|
+
|
127
|
+
/**
|
128
|
+
* Callback when the mouse / finger is moving
|
129
|
+
* in the container
|
130
|
+
*/
|
131
|
+
this.onMoveContainer = function(e) {
|
132
|
+
e.preventDefault();
|
133
|
+
this.refreshPositionImage(e);
|
134
|
+
},
|
135
|
+
|
136
|
+
/**
|
137
|
+
* Depending the current position of the mouse / finger,
|
138
|
+
* moves the properties top/left of the zoom image.
|
139
|
+
*/
|
140
|
+
this.refreshPositionImage = function(e) {
|
141
|
+
var pageX = e.pageX || e.originalEvent.pageX,
|
142
|
+
pageY = e.pageY || e.originalEvent.pageY,
|
143
|
+
containerOffset = this.$dom.container.offset(),
|
144
|
+
containerWidth = this.$dom.container.outerWidth(),
|
145
|
+
containerHeight = this.$dom.container.outerHeight(),
|
146
|
+
xRatio = (this.$dom.image.prop('width') - containerWidth) / containerWidth,
|
147
|
+
yRatio = (this.$dom.image.prop('height') - containerHeight) / containerHeight,
|
148
|
+
top = (pageY - containerOffset.top),
|
149
|
+
left = (pageX - containerOffset.left);
|
150
|
+
|
151
|
+
top = Math.max(Math.min(top, containerHeight), 0);
|
152
|
+
left = Math.max(Math.min(left, containerWidth), 0);
|
153
|
+
|
154
|
+
this.$dom.image.css({
|
155
|
+
top: (top * -yRatio) + 'px',
|
156
|
+
left: (left * -xRatio) + 'px'
|
157
|
+
});
|
158
|
+
},
|
159
|
+
|
160
|
+
/**
|
161
|
+
* Add the attribute src of the zoom image,
|
162
|
+
* therefore it triggers the load of the zoom
|
163
|
+
* image.
|
164
|
+
*/
|
165
|
+
this.loadImage = function() {
|
166
|
+
this.$dom.image.attr('src', this.getUrlImage());
|
167
|
+
},
|
168
|
+
|
169
|
+
/**
|
170
|
+
* Hide the zoom image
|
171
|
+
*/
|
172
|
+
this.hideImage = function() {
|
173
|
+
this.$dom.image.css('opacity', 0);
|
174
|
+
},
|
175
|
+
|
176
|
+
/**
|
177
|
+
* Show the zoom image
|
178
|
+
*/
|
179
|
+
this.showImage = function() {
|
180
|
+
this.$dom.image.css('opacity', 1);
|
181
|
+
},
|
182
|
+
|
183
|
+
/**
|
184
|
+
* Get the src url of the zoom image
|
185
|
+
*/
|
186
|
+
this.getUrlImage = function() {
|
187
|
+
if (!_.isEmpty(this.options.url)) {
|
188
|
+
return this.options.url;
|
189
|
+
}
|
190
|
+
|
191
|
+
return this.$dom.container.data('magnify-src');
|
192
|
+
},
|
193
|
+
|
194
|
+
/**
|
195
|
+
* Teardown the changes
|
196
|
+
*/
|
197
|
+
this.destroy = function() {
|
198
|
+
this.$dom.container.off('mouseenter mouseleave mousemove magnify.destroy');
|
199
|
+
this.$dom.image.off('load');
|
200
|
+
this.$dom.image.remove();
|
201
|
+
this.$dom.container.css('overflow', '');
|
202
|
+
}
|
203
|
+
}
|
204
|
+
|
205
|
+
/**
|
206
|
+
* Public jQuery API
|
207
|
+
*/
|
208
|
+
|
209
|
+
$.fn.magnify = function(options) {
|
210
|
+
|
211
|
+
var options = options || {};
|
212
|
+
|
213
|
+
return this.each(function() {
|
214
|
+
new Magnify().init(this, options);
|
215
|
+
});
|
216
|
+
};
|
217
|
+
|
218
|
+
$.fn.magnify.defaults = {
|
219
|
+
|
220
|
+
/**
|
221
|
+
* The url of the zoom image.
|
222
|
+
* If not specified, the plugin will look for the data attribute
|
223
|
+
* data-magnify-src on the thumbnail <img>.
|
224
|
+
* @type {String}
|
225
|
+
*/
|
226
|
+
url: null,
|
227
|
+
|
228
|
+
/**
|
229
|
+
* Do you want to enable finger gestures on
|
230
|
+
* touch-enabled devices?
|
231
|
+
* @type {Boolean}
|
232
|
+
*/
|
233
|
+
touchSupport: false
|
234
|
+
};
|
235
|
+
|
236
|
+
})(window.jQuery);
|