scratch – Blame information for rev 115
?pathlinks?
Rev | Author | Line No. | Line |
---|---|---|---|
115 | office | 1 | /* |
2 | * blueimp Gallery Indicator JS |
||
3 | * https://github.com/blueimp/Gallery |
||
4 | * |
||
5 | * Copyright 2013, Sebastian Tschan |
||
6 | * https://blueimp.net |
||
7 | * |
||
8 | * Licensed under the MIT license: |
||
9 | * https://opensource.org/licenses/MIT |
||
10 | */ |
||
11 | |||
12 | /* global define, window, document */ |
||
13 | |||
14 | ;(function (factory) { |
||
15 | 'use strict' |
||
16 | if (typeof define === 'function' && define.amd) { |
||
17 | // Register as an anonymous AMD module: |
||
18 | define([ |
||
19 | './blueimp-helper', |
||
20 | './blueimp-gallery' |
||
21 | ], factory) |
||
22 | } else { |
||
23 | // Browser globals: |
||
24 | factory( |
||
25 | window.blueimp.helper || window.jQuery, |
||
26 | window.blueimp.Gallery |
||
27 | ) |
||
28 | } |
||
29 | }(function ($, Gallery) { |
||
30 | 'use strict' |
||
31 | |||
32 | $.extend(Gallery.prototype.options, { |
||
33 | // The tag name, Id, element or querySelector of the indicator container: |
||
34 | indicatorContainer: 'ol', |
||
35 | // The class for the active indicator: |
||
36 | activeIndicatorClass: 'active', |
||
37 | // The list object property (or data attribute) with the thumbnail URL, |
||
38 | // used as alternative to a thumbnail child element: |
||
39 | thumbnailProperty: 'thumbnail', |
||
40 | // Defines if the gallery indicators should display a thumbnail: |
||
41 | thumbnailIndicators: true |
||
42 | }) |
||
43 | |||
44 | var initSlides = Gallery.prototype.initSlides |
||
45 | var addSlide = Gallery.prototype.addSlide |
||
46 | var resetSlides = Gallery.prototype.resetSlides |
||
47 | var handleClick = Gallery.prototype.handleClick |
||
48 | var handleSlide = Gallery.prototype.handleSlide |
||
49 | var handleClose = Gallery.prototype.handleClose |
||
50 | |||
51 | $.extend(Gallery.prototype, { |
||
52 | createIndicator: function (obj) { |
||
53 | var indicator = this.indicatorPrototype.cloneNode(false) |
||
54 | var title = this.getItemProperty(obj, this.options.titleProperty) |
||
55 | var thumbnailProperty = this.options.thumbnailProperty |
||
56 | var thumbnailUrl |
||
57 | var thumbnail |
||
58 | if (this.options.thumbnailIndicators) { |
||
59 | if (thumbnailProperty) { |
||
60 | thumbnailUrl = this.getItemProperty(obj, thumbnailProperty) |
||
61 | } |
||
62 | if (thumbnailUrl === undefined) { |
||
63 | thumbnail = obj.getElementsByTagName && $(obj).find('img')[0] |
||
64 | if (thumbnail) { |
||
65 | thumbnailUrl = thumbnail.src |
||
66 | } |
||
67 | } |
||
68 | if (thumbnailUrl) { |
||
69 | indicator.style.backgroundImage = 'url("' + thumbnailUrl + '")' |
||
70 | } |
||
71 | } |
||
72 | if (title) { |
||
73 | indicator.title = title |
||
74 | } |
||
75 | return indicator |
||
76 | }, |
||
77 | |||
78 | addIndicator: function (index) { |
||
79 | if (this.indicatorContainer.length) { |
||
80 | var indicator = this.createIndicator(this.list[index]) |
||
81 | indicator.setAttribute('data-index', index) |
||
82 | this.indicatorContainer[0].appendChild(indicator) |
||
83 | this.indicators.push(indicator) |
||
84 | } |
||
85 | }, |
||
86 | |||
87 | setActiveIndicator: function (index) { |
||
88 | if (this.indicators) { |
||
89 | if (this.activeIndicator) { |
||
90 | this.activeIndicator |
||
91 | .removeClass(this.options.activeIndicatorClass) |
||
92 | } |
||
93 | this.activeIndicator = $(this.indicators[index]) |
||
94 | this.activeIndicator |
||
95 | .addClass(this.options.activeIndicatorClass) |
||
96 | } |
||
97 | }, |
||
98 | |||
99 | initSlides: function (reload) { |
||
100 | if (!reload) { |
||
101 | this.indicatorContainer = this.container.find( |
||
102 | this.options.indicatorContainer |
||
103 | ) |
||
104 | if (this.indicatorContainer.length) { |
||
105 | this.indicatorPrototype = document.createElement('li') |
||
106 | this.indicators = this.indicatorContainer[0].children |
||
107 | } |
||
108 | } |
||
109 | initSlides.call(this, reload) |
||
110 | }, |
||
111 | |||
112 | addSlide: function (index) { |
||
113 | addSlide.call(this, index) |
||
114 | this.addIndicator(index) |
||
115 | }, |
||
116 | |||
117 | resetSlides: function () { |
||
118 | resetSlides.call(this) |
||
119 | this.indicatorContainer.empty() |
||
120 | this.indicators = [] |
||
121 | }, |
||
122 | |||
123 | handleClick: function (event) { |
||
124 | var target = event.target || event.srcElement |
||
125 | var parent = target.parentNode |
||
126 | if (parent === this.indicatorContainer[0]) { |
||
127 | // Click on indicator element |
||
128 | this.preventDefault(event) |
||
129 | this.slide(this.getNodeIndex(target)) |
||
130 | } else if (parent.parentNode === this.indicatorContainer[0]) { |
||
131 | // Click on indicator child element |
||
132 | this.preventDefault(event) |
||
133 | this.slide(this.getNodeIndex(parent)) |
||
134 | } else { |
||
135 | return handleClick.call(this, event) |
||
136 | } |
||
137 | }, |
||
138 | |||
139 | handleSlide: function (index) { |
||
140 | handleSlide.call(this, index) |
||
141 | this.setActiveIndicator(index) |
||
142 | }, |
||
143 | |||
144 | handleClose: function () { |
||
145 | if (this.activeIndicator) { |
||
146 | this.activeIndicator |
||
147 | .removeClass(this.options.activeIndicatorClass) |
||
148 | } |
||
149 | handleClose.call(this) |
||
150 | } |
||
151 | |||
152 | }) |
||
153 | |||
154 | return Gallery |
||
155 | })) |