https://automates-boites-musique.com/shadowbox/player/shadowbox-img.js

1/**
2 * The Shadowbox image player class.
3 *
4 * This file is part of Shadowbox.
5 *
6 * Shadowbox is an online media viewer application that supports all of the
7 * web's most popular media publishing formats. Shadowbox is written entirely
8 * in JavaScript and CSS and is highly customizable. Using Shadowbox, website
9 * authors can showcase a wide assortment of media in all major browsers without
10 * navigating users away from the linking page.
11 *
12 * Shadowbox is released under version 3.0 of the Creative Commons Attribution-
13 * Noncommercial-Share Alike license. This means that it is absolutely free
14 * for personal, noncommercial use provided that you 1) make attribution to the
15 * author and 2) release any derivative work under the same or a similar
16 * license.
17 *
18 * If you wish to use Shadowbox for commercial purposes, licensing information
19 * can be found at http://mjijackson.com/shadowbox/.
20 *
21 * @author      Michael J. I. Jackson <[email protected]>
22 * @copyright   2007-2008 Michael J. I. Jackson
23 * @license     http://creativecommons.org/licenses/by-nc-sa/3.0/
24 * @version     SVN: $Id: shadowbox-img.js 103 2008-06-27 06:19:21Z mjijackson $
25 */
26
27(function(){
28
29    // shorthand
30    var SB = Shadowbox;
31    var SL = SB.lib;
32    var C = SB.getClient();
33
34    /**
35     * Keeps track of 4 floating values (x, y, start_x, & start_y) that are used
36     * in the drag calculations.
37     *
38     * @property    {Object}        drag
39     * @private
40     */
41    var drag;
42
43    /**
44     * Holds the draggable element so we don't have to fetch it every time
45     * the mouse moves.
46     *
47     * @property    {HTMLElement}   draggable
48     * @private
49     */
50    var draggable;
51
52    /**
53     * The id to use for the drag layer.
54     *

55     * @property    {String}        drag_id
56     * @private
57     */
58    var drag_id = 'shadowbox_drag_layer';
59
60    /**
61     * Resource used to preload images. It's class-level so that when a new
62     * image is requested, the same resource can be reassigned, cancelling
63     * the original's callback.
64     *
65     * @property    {HTMLElement}   preloader
66     * @private
67     */
68    var preloader;
69
70    /**
71     * Resets the class drag variable.
72     *
73     * @return  void
74     * @private
75     */
76    var resetDrag = function(){
77        drag = {
78            x:          0,
79            y:          0,
80            start_x:    null,
81            start_y:    null
82        };
83    };
84
85    /**
86     * Toggles the drag function on and off.
87     *
88     * @param   {Boolean}   on      True to toggle on, false to toggle off
89     * @param   {Number}    h       The height of the drag layer
90     * @param   {Number}    w       The width of the drag layer
91     * @return  void
92     * @private
93     */
94    var toggleDrag = function(on, h, w){
95        if(on){
96            resetDrag();
97            // add transparent drag layer to prevent browser dragging of actual image
98            var styles = [
99                'position:absolute',
100                'height:' + h + 'px',
101                'width:' + w + 'px',
102                'cursor:' + (C.isGecko ? '-moz-grab' : 'move'),
103                'background-color:' + (C.isIE ? '#fff;filter:alpha(opacity=0)' : 'transparent')
104            ];
105            SL.append(SL.get('shadowbox_body_inner'), '<div id="' + drag_id + '" style="' + styles.join(';') + '"></div>');
106            SL.addEvent(SL.get(drag_id), 'mousedown', listenDrag);
107        }else{
108            var d = SL.get(drag_id);
109            if(d){
110                SL.removeEvent(d, 'mousedown', listenDrag);
111                SL.remove(d);
112            }
113        }
114    };
115
116    /**
117     * Sets up a drag listener on the document. Called when the mouse button is
118     * pressed (mousedown).
119     *
120     * @param   {mixed}     e       The mousedown event
121     * @return  void
122     * @private
123     */
124    var listenDrag = function(e){
125        // prevent browser dragging
126        SL.preventDefault(e);
127
128        var coords = SL.getPageXY(e);
129        drag.start_x = coords[0];
130        drag.start_y = coords[1];
131
132        draggable = SL.get('shadowbox_content');
133        SL.addEvent(document, 'mousemove', positionDrag);
134        SL.addEvent(document, 'mouseup', unlistenDrag);
135        if(C.isGecko) SL.setStyle(SL.get(drag_id), 'cursor', '-moz-grabbing');
136    };
137
138    /**
139     * Removes the drag listener. Called when the mouse button is released
140     * (mouseup).
141     *
142     * @return  void
143     * @private
144     */
145    var unlistenDrag = function(){
146        SL.removeEvent(document, 'mousemove', positionDrag);
147        SL.removeEvent(document, 'mouseup', unlistenDrag); // clean up
148        if(C.isGecko) SL.setStyle(SL.get(drag_id), 'cursor', '-moz-grab');
149    };
150
151    /**
152     * Positions an oversized image on drag.
153     *
154     * @param   {mixed}     e       The drag event
155     * @return  void
156     * @private
157     */
158    var positionDrag = function(e){
159        var content = SB.getContent();
160        var dims = SB.getDimensions();
161        var coords = SL.getPageXY(e);
162
163        var move_x = coords[0] - drag.start_x;
164        drag.start_x += move_x;
165        drag.x = Math.max(Math.min(0, drag.x + move_x), dims.inner_w - content.width); // x boundaries
166        SL.setStyle(draggable, 'left', drag.x + 'px');
167
168        var move_y = coords[1] - drag.start_y;
169        drag.start_y += move_y;
170        drag.y = Math.max(Math.min(0, drag.y + move_y), dims.inner_h - content.height); // y boundaries
171        SL.setStyle(draggable, 'top', drag.y + 'px');
172    };
173
174    /**
175     * Constructor. This class is used to display images.
176     *
177     * @param   {String}    id      The id to use for this content
178     * @param   {Object}    obj     The content object
179     * @public
180     */
181    Shadowbox.img = function(id, obj){
182        this.id = id;
183        this.obj = obj;
184
185        // images are resizable
186        this.resizable = true;
187
188        // preload the image
189        this.ready = false;

190        var self = this; // needed inside preloader callback
191        preloader = new Image();
192        preloader.onload = function(){
193            // height defaults to image height
194            self.height = self.obj.height ? parseInt(self.obj.height, 10) : preloader.height;
195
196            // width defaults to image width
197            self.width = self.obj.width ? parseInt(self.obj.width, 10) : preloader.width;
198
199            // ready to go
200            self.ready = true;
201
202            // clean up to prevent memory leak in IE
203            preloader.onload = '';
204            preloader = null;
205        };
206        preloader.src = obj.content;
207    };
208
209    Shadowbox.img.prototype = {
210
211        /**
212         * Returns an object containing the markup for this content, suitable
213         * to pass to Shadowbox.lib.createHTML().
214         *
215         * @param   {Object}    dims    The current Shadowbox dimensions
216         * @return  {Object}            The markup for this content item
217         * @public
218         */
219        markup: function(dims){
220            return {
221                tag:    'img',
222                id:     this.id,
223                height: dims.resize_h, // use resized dimensions
224                width:  dims.resize_w,
225                src:    this.obj.content,
226                style:  'position:absolute'
227            };
228        },
229
230        /**
231         * An optional callback function to process after this content has been
232         * loaded.
233         *
234         * @return  void
235         * @public
236         */
237        onLoad: function(){
238            var dims = SB.getDimensions();
239            if(dims.drag && SB.getOptions().handleOversize == 'drag'){
240                // listen for drag
241                // in the case of oversized images, the "resized" height and
242                // width will actually be the original image height and width
243                toggleDrag(true, dims.resize_h, dims.resize_w);
244            }
245        },
246
247        /**
248         * Removes this image from the document.
249         *
250         * @return  void
251         * @public
252         */
253        remove: function(){
254            var el = SL.get(this.id);
255            if(el) SL.remove(el);
256
257            // disable drag layer
258            toggleDrag(false);
259
260            // prevent old image requests from loading
261            if(preloader){
262                preloader.onload = '';
263                preloader = null;
264            }
265        }
266
267    };
268
269})();