X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/0494b8d9b9bb03ab6c22b34dae81261e3cd7e3e6..7a654f8d43fdb43d78b63d90528bed6e86b608cc:/src/ext-core/examples/lightbox/lightbox.js

diff --git a/src/ext-core/examples/lightbox/lightbox.js b/src/ext-core/examples/lightbox/lightbox.js
deleted file mode 100644
index 951846f7..00000000
--- a/src/ext-core/examples/lightbox/lightbox.js
+++ /dev/null
@@ -1,366 +0,0 @@
-/*!
- * Ext JS Library 3.3.1
- * Copyright(c) 2006-2010 Sencha Inc.
- * licensing@sencha.com
- * http://www.sencha.com/license
- */
-Ext.ns('Ext.ux');
-
-Ext.ux.Lightbox = (function(){
-    var els = {},
-        images = [],
-        activeImage,
-        initialized = false,
-        selectors = [];
-
-    return {
-        overlayOpacity: 0.85,
-        animate: true,
-        resizeSpeed: 8,
-        borderSize: 10,
-        labelImage: "Image",
-        labelOf: "of",
-
-        init: function() {
-            this.resizeDuration = this.animate ? ((11 - this.resizeSpeed) * 0.15) : 0;
-            this.overlayDuration = this.animate ? 0.2 : 0;
-
-            if(!initialized) {
-                Ext.apply(this, Ext.util.Observable.prototype);
-                Ext.util.Observable.constructor.call(this);
-                this.addEvents('open', 'close');
-                this.initMarkup();
-                this.initEvents();
-                initialized = true;
-            }
-        },
-
-        initMarkup: function() {
-            els.shim = Ext.DomHelper.append(document.body, {
-                tag: 'iframe',
-                id: 'ux-lightbox-shim'
-            }, true);
-            els.overlay = Ext.DomHelper.append(document.body, {
-                id: 'ux-lightbox-overlay'
-            }, true);
-            
-            var lightboxTpl = new Ext.Template(this.getTemplate());
-            els.lightbox = lightboxTpl.append(document.body, {}, true);
-
-            var ids =
-                ['outerImageContainer', 'imageContainer', 'image', 'hoverNav', 'navPrev', 'navNext', 'loading', 'loadingLink',
-                'outerDataContainer', 'dataContainer', 'data', 'details', 'caption', 'imageNumber', 'bottomNav', 'navClose'];
-
-            Ext.each(ids, function(id){
-                els[id] = Ext.get('ux-lightbox-' + id);
-            });
-
-            Ext.each([els.overlay, els.lightbox, els.shim], function(el){
-                el.setVisibilityMode(Ext.Element.DISPLAY)
-                el.hide();
-            });
-
-            var size = (this.animate ? 250 : 1) + 'px';
-            els.outerImageContainer.setStyle({
-                width: size,
-                height: size
-            });
-        },
-
-        getTemplate : function() {
-            return [
-                '<div id="ux-lightbox">',
-                    '<div id="ux-lightbox-outerImageContainer">',
-                        '<div id="ux-lightbox-imageContainer">',
-                            '<img id="ux-lightbox-image">',
-                            '<div id="ux-lightbox-hoverNav">',
-                                '<a href="#" id="ux-lightbox-navPrev"></a>',
-                                '<a href="#" id="ux-lightbox-navNext"></a>',
-                            '</div>',
-                            '<div id="ux-lightbox-loading">',
-                                '<a id="ux-lightbox-loadingLink"></a>',
-                            '</div>',
-                        '</div>',
-                    '</div>',
-                    '<div id="ux-lightbox-outerDataContainer">',
-                        '<div id="ux-lightbox-dataContainer">',
-                            '<div id="ux-lightbox-data">',
-                                '<div id="ux-lightbox-details">',
-                                    '<span id="ux-lightbox-caption"></span>',
-                                    '<span id="ux-lightbox-imageNumber"></span>',
-                                '</div>',
-                                '<div id="ux-lightbox-bottomNav">',
-                                    '<a href="#" id="ux-lightbox-navClose"></a>',
-                                '</div>',
-                            '</div>',
-                        '</div>',
-                    '</div>',
-                '</div>'
-            ];
-        },
-
-        initEvents: function() {
-            var close = function(ev) {
-                ev.preventDefault();
-                this.close();
-            };
-
-            els.overlay.on('click', close, this);
-            els.loadingLink.on('click', close, this);
-            els.navClose.on('click', close, this);
-
-            els.lightbox.on('click', function(ev) {
-                if(ev.getTarget().id == 'ux-lightbox') {
-                    this.close();
-                }
-            }, this);
-
-            els.navPrev.on('click', function(ev) {
-                ev.preventDefault();
-                this.setImage(activeImage - 1);
-            }, this);
-
-            els.navNext.on('click', function(ev) {
-                ev.preventDefault();
-                this.setImage(activeImage + 1);
-            }, this);
-        },
-
-        register: function(sel, group) {
-            if(selectors.indexOf(sel) === -1) {
-                selectors.push(sel);
-
-                Ext.fly(document).on('click', function(ev){
-                    var target = ev.getTarget(sel);
-
-                    if (target) {
-                        ev.preventDefault();
-                        this.open(target, sel, group);
-                    }
-                }, this);
-            }
-        },
-
-        open: function(image, sel, group) {
-            group = group || false;
-            this.setViewSize();
-            els.overlay.fadeIn({
-                duration: this.overlayDuration,
-                endOpacity: this.overlayOpacity,
-                callback: function() {
-                    images = [];
-
-                    var index = 0;
-                    if(!group) {
-                        images.push([image.href, image.title]);
-                    }
-                    else {
-                        var setItems = Ext.query(sel);
-                        Ext.each(setItems, function(item) {
-                            if(item.href) {
-                                images.push([item.href, item.title]);
-                            }
-                        });
-
-                        while (images[index][0] != image.href) {
-                            index++;
-                        }
-                    }
-
-                    // calculate top and left offset for the lightbox
-                    var pageScroll = Ext.fly(document).getScroll();
-
-                    var lightboxTop = pageScroll.top + (Ext.lib.Dom.getViewportHeight() / 10);
-                    var lightboxLeft = pageScroll.left;
-                    els.lightbox.setStyle({
-                        top: lightboxTop + 'px',
-                        left: lightboxLeft + 'px'
-                    }).show();
-
-                    this.setImage(index);
-                    
-                    this.fireEvent('open', images[index]);                                        
-                },
-                scope: this
-            });
-        },
-        
-        setViewSize: function(){
-            var viewSize = this.getViewSize();
-            els.overlay.setStyle({
-                width: viewSize[0] + 'px',
-                height: viewSize[1] + 'px'
-            });
-            els.shim.setStyle({
-                width: viewSize[0] + 'px',
-                height: viewSize[1] + 'px'
-            }).show();
-        },
-
-        setImage: function(index){
-            activeImage = index;
-                      
-            this.disableKeyNav();            
-            if (this.animate) {
-                els.loading.show();
-            }
-
-            els.image.hide();
-            els.hoverNav.hide();
-            els.navPrev.hide();
-            els.navNext.hide();
-            els.dataContainer.setOpacity(0.0001);
-            els.imageNumber.hide();
-
-            var preload = new Image();
-            preload.onload = (function(){
-                els.image.dom.src = images[activeImage][0];
-                this.resizeImage(preload.width, preload.height);
-            }).createDelegate(this);
-            preload.src = images[activeImage][0];
-        },
-
-        resizeImage: function(w, h){
-            var wCur = els.outerImageContainer.getWidth();
-            var hCur = els.outerImageContainer.getHeight();
-
-            var wNew = (w + this.borderSize * 2);
-            var hNew = (h + this.borderSize * 2);
-
-            var wDiff = wCur - wNew;
-            var hDiff = hCur - hNew;
-
-            var afterResize = function(){
-                els.hoverNav.setWidth(els.imageContainer.getWidth() + 'px');
-
-                els.navPrev.setHeight(h + 'px');
-                els.navNext.setHeight(h + 'px');
-
-                els.outerDataContainer.setWidth(wNew + 'px');
-
-                this.showImage();
-            };
-            
-            if (hDiff != 0 || wDiff != 0) {
-                els.outerImageContainer.shift({
-                    height: hNew,
-                    width: wNew,
-                    duration: this.resizeDuration,
-                    scope: this,
-                    callback: afterResize,
-                    delay: 50
-                });
-            }
-            else {
-                afterResize.call(this);
-            }
-        },
-
-        showImage: function(){
-            els.loading.hide();
-            els.image.fadeIn({
-                duration: this.resizeDuration,
-                scope: this,
-                callback: function(){
-                    this.updateDetails();
-                }
-            });
-            this.preloadImages();
-        },
-
-        updateDetails: function(){
-            var detailsWidth = els.data.getWidth(true) - els.navClose.getWidth() - 10;
-            els.details.setWidth((detailsWidth > 0 ? detailsWidth : 0) + 'px');
-            
-            els.caption.update(images[activeImage][1]);
-
-            els.caption.show();
-            if (images.length > 1) {
-                els.imageNumber.update(this.labelImage + ' ' + (activeImage + 1) + ' ' + this.labelOf + '  ' + images.length);
-                els.imageNumber.show();
-            }
-
-            els.dataContainer.fadeIn({
-                duration: this.resizeDuration/2,
-                scope: this,
-                callback: function() {
-                    var viewSize = this.getViewSize();
-                    els.overlay.setHeight(viewSize[1] + 'px');
-                    this.updateNav();
-                }
-            });
-        },
-
-        updateNav: function(){
-            this.enableKeyNav();
-
-            els.hoverNav.show();
-
-            // if not first image in set, display prev image button
-            if (activeImage > 0)
-                els.navPrev.show();
-
-            // if not last image in set, display next image button
-            if (activeImage < (images.length - 1))
-                els.navNext.show();
-        },
-
-        enableKeyNav: function() {
-            Ext.fly(document).on('keydown', this.keyNavAction, this);
-        },
-
-        disableKeyNav: function() {
-            Ext.fly(document).un('keydown', this.keyNavAction, this);
-        },
-
-        keyNavAction: function(ev) {
-            var keyCode = ev.getKey();
-
-            if (
-                keyCode == 88 || // x
-                keyCode == 67 || // c
-                keyCode == 27
-            ) {
-                this.close();
-            }
-            else if (keyCode == 80 || keyCode == 37){ // display previous image
-                if (activeImage != 0){
-                    this.setImage(activeImage - 1);
-                }
-            }
-            else if (keyCode == 78 || keyCode == 39){ // display next image
-                if (activeImage != (images.length - 1)){
-                    this.setImage(activeImage + 1);
-                }
-            }
-        },
-
-        preloadImages: function(){
-            var next, prev;
-            if (images.length > activeImage + 1) {
-                next = new Image();
-                next.src = images[activeImage + 1][0];
-            }
-            if (activeImage > 0) {
-                prev = new Image();
-                prev.src = images[activeImage - 1][0];
-            }
-        },
-
-        close: function(){
-            this.disableKeyNav();
-            els.lightbox.hide();
-            els.overlay.fadeOut({
-                duration: this.overlayDuration
-            });
-            els.shim.hide();
-            this.fireEvent('close', activeImage);
-        },
-
-        getViewSize: function() {
-            return [Ext.lib.Dom.getViewWidth(), Ext.lib.Dom.getViewHeight()];
-        }
-    }
-})();
-
-Ext.onReady(Ext.ux.Lightbox.init, Ext.ux.Lightbox);
\ No newline at end of file