workarea-jquery_magnify 1.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- 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);
|