From 811f24f9b7003117eeee4050c53e98c6373e2f76 Mon Sep 17 00:00:00 2001 From: Hadi Nategh Date: Mon, 19 Jan 2015 17:21:11 +0000 Subject: [PATCH] Add expose plugin widget --- etemplate/js/expose.js | 209 +++++++++++++++++++++++++++++++++++++++++ 1 file changed, 209 insertions(+) create mode 100644 etemplate/js/expose.js diff --git a/etemplate/js/expose.js b/etemplate/js/expose.js new file mode 100644 index 0000000000..02f5f19e3b --- /dev/null +++ b/etemplate/js/expose.js @@ -0,0 +1,209 @@ +/*egw:uses + jquery.jquery; + /phpgwapi/js/jquery/blueimp/js/jquery.blueimp-gallery.min.js; +*/ + +/** + * Interface all exposed widget must support in order to getMedia for the blueimp Gallery. + */ +var et2_IExposable = new Interface({ + + /** + * get media an array of media objects to pass to blueimp Gallery + * @param {array} _attrs + */ + getMedia: function(_attrs) {}, + +}); + +/** + * This function extends the given widget with blueimp gallery plugin + * + * @param {type} widget + * @returns {widget} + */ +function expose (widget) +{ + return widget.extend([et2_IExposable],{ + + + /** + * Initialize the expose media gallery + */ + init: function() { + this._super.apply(this, arguments); + expose.options = { + // The Id, element or querySelector of the gallery widget: + container: '#blueimp-gallery', + // The tag name, Id, element or querySelector of the slides container: + slidesContainer: 'div', + // The tag name, Id, element or querySelector of the title element: + titleElement: 'h3', + // The class to add when the gallery is visible: + displayClass: 'blueimp-gallery-display', + // The class to add when the gallery controls are visible: + controlsClass: 'blueimp-gallery-controls', + // The class to add when the gallery only displays one element: + singleClass: 'blueimp-gallery-single', + // The class to add when the left edge has been reached: + leftEdgeClass: 'blueimp-gallery-left', + // The class to add when the right edge has been reached: + rightEdgeClass: 'blueimp-gallery-right', + // The class to add when the automatic slideshow is active: + playingClass: 'blueimp-gallery-playing', + // The class for all slides: + slideClass: 'slide', + // The slide class for loading elements: + slideLoadingClass: 'slide-loading', + // The slide class for elements that failed to load: + slideErrorClass: 'slide-error', + // The class for the content element loaded into each slide: + slideContentClass: 'slide-content', + // The class for the "toggle" control: + toggleClass: 'toggle', + // The class for the "prev" control: + prevClass: 'prev', + // The class for the "next" control: + nextClass: 'next', + // The class for the "close" control: + closeClass: 'close', + // The class for the "play-pause" toggle control: + playPauseClass: 'play-pause', + // The list object property (or data attribute) with the object type: + typeProperty: 'type', + // The list object property (or data attribute) with the object title: + titleProperty: 'title', + // The list object property (or data attribute) with the object URL: + urlProperty: 'href', + // The gallery listens for transitionend events before triggering the + // opened and closed events, unless the following option is set to false: + displayTransition: true, + // Defines if the gallery slides are cleared from the gallery modal, + // or reused for the next gallery initialization: + clearSlides: false, + // Defines if images should be stretched to fill the available space, + // while maintaining their aspect ratio (will only be enabled for browsers + // supporting background-size="contain", which excludes IE < 9). + // Set to "cover", to make images cover all available space (requires + // support for background-size="cover", which excludes IE < 9): + stretchImages: true, + // Toggle the controls on pressing the Return key: + toggleControlsOnReturn: true, + // Toggle the automatic slideshow interval on pressing the Space key: + toggleSlideshowOnSpace: true, + // Navigate the gallery by pressing left and right on the keyboard: + enableKeyboardNavigation: true, + // Close the gallery on pressing the ESC key: + closeOnEscape: true, + // Close the gallery when clicking on an empty slide area: + closeOnSlideClick: true, + // Close the gallery by swiping up or down: + closeOnSwipeUpOrDown: true, + // Emulate touch events on mouse-pointer devices such as desktop browsers: + emulateTouchEvents: true, + // Stop touch events from bubbling up to ancestor elements of the Gallery: + stopTouchEventsPropagation: false, + // Hide the page scrollbars: + hidePageScrollbars: true, + // Stops any touches on the container from scrolling the page: + disableScroll: true, + // Carousel mode (shortcut for carousel specific options): + carousel: true, + // Allow continuous navigation, moving from last to first + // and from first to last slide: + continuous: false, + // Remove elements outside of the preload range from the DOM: + unloadElements: true, + // Start with the automatic slideshow: + startSlideshow: false, + // Delay in milliseconds between slides for the automatic slideshow: + slideshowInterval: 3000, + // The starting index as integer. + // Can also be an object of the given list, + // or an equal object with the same url property: + index: 0, + // The number of elements to load around the current index: + preloadRange: 2, + // The transition speed between slide changes in milliseconds: + transitionSpeed: 400, + // The transition speed for automatic slide changes, set to an integer + // greater 0 to override the default transition speed: + slideshowTransitionSpeed: undefined, + // The tag name, Id, element or querySelector of the indicator container: + indicatorContainer: 'ol', + // The class for the active indicator: + activeIndicatorClass: 'active', + // The list object property (or data attribute) with the thumbnail URL, + // used as alternative to a thumbnail child element: + thumbnailProperty: 'thumbnail', + // Defines if the gallery indicators should display a thumbnail: + thumbnailIndicators: true, + // The event object for which the default action will be canceled + // on Gallery initialization (e.g. the click event to open the Gallery): + event: jQuery.proxy(this.expose_event,this), + // Callback function executed when the Gallery is initialized. + // Is called with the gallery instance as "this" object: + onopen: jQuery.proxy(this.expose_onopen,this), + // Callback function executed when the Gallery has been initialized + // and the initialization transition has been completed. + // Is called with the gallery instance as "this" object: + onopened: jQuery.proxy(this.expose_onopened,this), + // Callback function executed on slide change. + // Is called with the gallery instance as "this" object and the + // current index and slide as arguments: + onslide: jQuery.proxy(this.expose_onslide,this), + // Callback function executed after the slide change transition. + // Is called with the gallery instance as "this" object and the + // current index and slide as arguments: + onslideend: jQuery.proxy(this.expose_onslideend,this), + // Callback function executed on slide content load. + // Is called with the gallery instance as "this" object and the + // slide index and slide element as arguments: + onslidecomplete: jQuery.proxy(this.expose_onslidecomplete,this), + // Callback function executed when the Gallery is about to be closed. + // Is called with the gallery instance as "this" object: + onclose:jQuery.proxy(this.expose_onclose,this), + // Callback function executed when the Gallery has been closed + // and the closing transition has been completed. + // Is called with the gallery instance as "this" object: + onclosed: jQuery.proxy(this.expose_onclosed,this) + }; + var self = this; + var $body = jQuery('body'); + if ($body.find('#blueimp-gallery').length == 0) + { + // Gallery Main DIV container + var $expose_node = jQuery(document.createElement('div')).attr({id:"blueimp-gallery", class:"blueimp-gallery"}); + // Create Gallery DOM NODE + $expose_node.append('

×
    '); + // Append the gallery Node to DOM + $body.append($expose_node); + } + + jQuery(this.node).on('click', function (){ + self._init_blueimp_gallery(); + }); + }, + _init_blueimp_gallery: function () + { + var mediaContent = this.getMedia(); + blueimp.Gallery(mediaContent, expose.options); + }, + expose_event:function (event){ + console.log(event); + }, + expose_onopen: function (event){}, + expose_onopened: function (event){}, + /** + * Trigger on slide left/right + * @param {type} event + * @param {type} _callback + */ + expose_onslide: function (event){}, + expose_onslideend: function (event){}, + expose_onslidecomplete:function (event){}, + expose_onclose: function(event){}, + expose_onclosed: function (event){} + + }); +}