Bugzilla – Attachment 51175 Details for
Bug 10756
Add carousel/coverflow display of new titles to the OPAC
Home
|
New
|
Browse
|
Search
|
[?]
|
Reports
|
Help
|
New Account
|
Log In
[x]
|
Forgot Password
Login:
[x]
[patch]
Bug 10756 - Carousel Display of New Titles on OPAC home page
Bug-10756---Carousel-Display-of-New-Titles-on-OPAC.patch (text/plain), 264.25 KB, created by
Magnus Enger
on 2016-05-04 06:28:43 UTC
(
hide
)
Description:
Bug 10756 - Carousel Display of New Titles on OPAC home page
Filename:
MIME Type:
Creator:
Magnus Enger
Created:
2016-05-04 06:28:43 UTC
Size:
264.25 KB
patch
obsolete
>From 0e09b83a30ba68723200bee241dae5e6c7ff644e Mon Sep 17 00:00:00 2001 >From: Mason James <mtj@kohaaloha.com> >Date: Thu, 28 Apr 2016 13:54:26 +1200 >Subject: [PATCH] Bug 10756 - Carousel Display of New Titles on OPAC home page > >add ContentFlow dir > > http://www.jacksasylum.eu/ContentFlow > >Signed-off-by: Magnus Enger <magnus@libriotech.no> >Comment on the other patch. >--- > .../opac-tmpl/bootstrap/lib/contentflow/CHANGELOG | 269 +++ > .../lib/contentflow/ContentFlowAddOn_DEFAULT.css | 154 ++ > .../lib/contentflow/ContentFlowAddOn_DEFAULT.js | 290 +++ > .../opac-tmpl/bootstrap/lib/contentflow/LICENSE | 19 + > .../bootstrap/lib/contentflow/changelog.html | 291 +++ > .../bootstrap/lib/contentflow/contentflow.css | 1 + > .../bootstrap/lib/contentflow/contentflow.js | 2 + > .../bootstrap/lib/contentflow/contentflow_src.css | 248 ++ > .../bootstrap/lib/contentflow/contentflow_src.js | 2549 ++++++++++++++++++++ > .../opac-tmpl/bootstrap/lib/contentflow/docu.html | 1018 ++++++++ > .../lib/contentflow/img/1x1_0.5_black.png | Bin 0 -> 82 bytes > .../bootstrap/lib/contentflow/img/blank.gif | Bin 0 -> 43 bytes > .../bootstrap/lib/contentflow/img/loader.gif | Bin 0 -> 8238 bytes > .../lib/contentflow/img/scrollbar_white.png | Bin 0 -> 82 bytes > .../bootstrap/lib/contentflow/img/slider_white.png | Bin 0 -> 178 bytes > .../opac-tmpl/bootstrap/lib/contentflow/index.html | 113 + > .../bootstrap/lib/contentflow/license.html | 50 + > .../bootstrap/lib/contentflow/mycontentflow.css | 3 + > .../lib/contentflow/mycontentflow.css.example | 119 + > .../bootstrap/lib/contentflow/pics/pic0.png | Bin 0 -> 1208 bytes > .../bootstrap/lib/contentflow/pics/pic1.png | Bin 0 -> 1063 bytes > .../bootstrap/lib/contentflow/pics/pic2.png | Bin 0 -> 773 bytes > .../opac-tmpl/bootstrap/lib/contentflow/styles.css | 219 ++ > .../opac-tmpl/bootstrap/lib/contentflow/title.png | Bin 0 -> 3947 bytes > 24 files changed, 5345 insertions(+) > create mode 100755 koha-tmpl/opac-tmpl/bootstrap/lib/contentflow/CHANGELOG > create mode 100755 koha-tmpl/opac-tmpl/bootstrap/lib/contentflow/ContentFlowAddOn_DEFAULT.css > create mode 100755 koha-tmpl/opac-tmpl/bootstrap/lib/contentflow/ContentFlowAddOn_DEFAULT.js > create mode 100755 koha-tmpl/opac-tmpl/bootstrap/lib/contentflow/LICENSE > create mode 100755 koha-tmpl/opac-tmpl/bootstrap/lib/contentflow/changelog.html > create mode 100755 koha-tmpl/opac-tmpl/bootstrap/lib/contentflow/contentflow.css > create mode 100755 koha-tmpl/opac-tmpl/bootstrap/lib/contentflow/contentflow.js > create mode 100755 koha-tmpl/opac-tmpl/bootstrap/lib/contentflow/contentflow_src.css > create mode 100755 koha-tmpl/opac-tmpl/bootstrap/lib/contentflow/contentflow_src.js > create mode 100755 koha-tmpl/opac-tmpl/bootstrap/lib/contentflow/docu.html > create mode 100755 koha-tmpl/opac-tmpl/bootstrap/lib/contentflow/img/1x1_0.5_black.png > create mode 100755 koha-tmpl/opac-tmpl/bootstrap/lib/contentflow/img/blank.gif > create mode 100755 koha-tmpl/opac-tmpl/bootstrap/lib/contentflow/img/loader.gif > create mode 100755 koha-tmpl/opac-tmpl/bootstrap/lib/contentflow/img/scrollbar_white.png > create mode 100755 koha-tmpl/opac-tmpl/bootstrap/lib/contentflow/img/slider_white.png > create mode 100755 koha-tmpl/opac-tmpl/bootstrap/lib/contentflow/index.html > create mode 100755 koha-tmpl/opac-tmpl/bootstrap/lib/contentflow/license.html > create mode 100755 koha-tmpl/opac-tmpl/bootstrap/lib/contentflow/mycontentflow.css > create mode 100755 koha-tmpl/opac-tmpl/bootstrap/lib/contentflow/mycontentflow.css.example > create mode 100755 koha-tmpl/opac-tmpl/bootstrap/lib/contentflow/pics/pic0.png > create mode 100755 koha-tmpl/opac-tmpl/bootstrap/lib/contentflow/pics/pic1.png > create mode 100755 koha-tmpl/opac-tmpl/bootstrap/lib/contentflow/pics/pic2.png > create mode 100755 koha-tmpl/opac-tmpl/bootstrap/lib/contentflow/styles.css > create mode 100755 koha-tmpl/opac-tmpl/bootstrap/lib/contentflow/title.png > >diff --git a/koha-tmpl/opac-tmpl/bootstrap/lib/contentflow/CHANGELOG b/koha-tmpl/opac-tmpl/bootstrap/lib/contentflow/CHANGELOG >new file mode 100755 >index 0000000..2910354 >--- /dev/null >+++ b/koha-tmpl/opac-tmpl/bootstrap/lib/contentflow/CHANGELOG >@@ -0,0 +1,269 @@ >+ContenFolw ChangeLog >+==================== >+ >+version 1.0 (2010/02/09) >+------------------------- >+ >+ Beware: Because of a major restructuring, this release will break with older >+ AddOns and possibly with user defined configurations. If you have >+ defined your own calculation methods (calcSize, calcCoordinates, >+ calcRelativeItemPosition, calcZIndex or calcFontSize) you have to >+ rework them. >+ If you use AddOns please update to the new version of the AddOn. >+ >+ * moved to relative return values for the following methods: >+ calcSize := returns values ranging from 0.0 - 1.0 >+ calcCoordinates := returns values ranging from -1.0 to 1.0 >+ calcRelativeItemPosition := returns values ranging from -1.0 to 1.0 >+ >+ * changed the paramters of the following methods: >+ calcStepWidth : ( diff ) >+ calcSize : ( item ) >+ calcCoordinates : ( item ) >+ calcRelativeItemPosition : ( item ) >+ calcZIndex : ( item ) >+ calcFontSize : ( item ) >+ >+ * added the following properties to the item object: >+ next, position, pre, relativePosition, relativePositionNormed, side, size >+ >+ * better image scaling in IE7 (bicubic interpolation) >+ >+ * changed landscapeScaleFactor default value to 1.33 >+ >+ * moved from 20 to 25 redraws/recalculations/frames per second >+ >+ * refined calculation of flow size >+ >+ * speedup by internel code cleanup >+ >+ * unified AddOn configuration >+ >+ * renamed 'container' to 'Container' >+ >+ * documentation update >+ >+ >+ * addeded direct usage of image tags as items >+ >+ * added support for transparent PNGs on IE6 >+ >+ * added touch handling on iPhone >+ Dragging of the whole Flow and the scrollbar works now on the iPhone >+ >+ * added onDrawItem method >+ >+ * added fluid opacity change >+ - option: endOpacity >+ - method: calcOpacity >+ >+ * added fixItemSize option >+ >+ * added reflectionGap option >+ >+ * added scaleFactorPortrait option >+ >+ * automatic scrolling to item will now be supressed if the onclickInactiveItem >+ method returns 'false' >+ >+ * added conf object to flow >+ >+ >+ * removed server side reflections >+ - removed reflectionType option >+ reflectionHeight = 0 deactivetes the reflection >+ - removed negativeMarginOnFloat option >+ - removed reflectionServerSrc option >+ >+ * removed obsolete contentPosition option >+ >+ >+ * fixed FF drag problem >+ >+ * fixed addItem method >+ >+ * fixed rmItem method >+ >+ >+ >+version 0.7.2 (2009/10/01) >+------------------------- >+ * fixed possible conflict with jquery, prototype >+ * fixed Konqueror 4 init bug >+ * fixed iPhone init bug >+ * fixed IE 6,7,8 / mootools compatibility >+ thanks to Michael Birchler >+ * fixed IE6 scalefactor bug >+ * simplified internal click event handling >+ * added 'return' key to call the onclickActiveItem method >+ >+version 0.7 (2009/04/09) >+------------------------ >+ Beware: Because of a major restructuring, this release will break with older >+ AddOns and possibly with user defined configurations. If you have >+ defined your own methods (i.e. calcCoordinates or onclickActiveItem) >+ you have to move the definitions into the configuration object. >+ If you use AddOns please update to the new version of the AddOn. >+ >+ In any other case you can use the new version without any modification. >+ >+ * moved user definable method definitions to configuration >+ * speedup by reducing number of calculations >+ * flow element will now be centered within ContentFlow element >+ * better handling of large images by Canvas supporting Browsers (all except IE) >+ * removed reflectionOverlay option >+ * removed set* methods to set methods >+ * removed getConfig method >+ * added cursermove style to slider >+ * added "left" and "right" to position keywords (same as 'pre' and 'next') >+ >+ * added optional 'useAddOns' attribute to ContentFlow (X)HTML element >+ * added optional deactivation of mousewheel >+ * added revers mousewheel scrolling >+ * added optional deactivation of keyboard >+ * added optional deactivation of drag 'n throw >+ >+ * added keys option >+ * added verticalFlow option >+ * added contentPosition option >+ * added relativeItemPosition option >+ >+ * added onReachTarget method >+ * added onMoveTo method >+ * added onMakeInactive method >+ * added onclickInactiveItem method >+ >+ * fixed reload bug in Firefox 3 (Gecko 1.9) >+ * fixed keyboard actions on FireFox (Gecko) and Safari (WebKit) >+ * fixed refelctions on iPhone >+ * fixed bug in moveTo method >+ * fixed item positioning >+ * fixed bug if 'scrollInFrom' was set to 'none' >+ * fixed disappearing position label >+ >+ * structure cleanup >+ >+ >+version 0.6 (2008/09/27) >+------------------------ >+ This release contains major changes and could break with previous versions. >+ But most times it can be used as a drop-in replacement. >+ >+ * added AddOn System >+ >+ * handles now 'href' and 'target' attributes of 'item' and 'content' items >+ by default >+ >+ * will respect style-height attributes of ContentFlow and flow elements >+ (has to be defined on the element it self) >+ >+ * moved fancyScrollbar to AddOn >+ >+ * added optional 'label' element to item (will be used as slider label) >+ (great for time lines) >+ >+ * scrollbar will be hidden until loader is hidden >+ >+ * default loader height fixed >+ >+ * switched from array based structure to object based structure for items >+ >+ * switched from index based calculations to global position based calculations >+ >+ * merged mycontentflow.css into contentflow.css and and added mycontentflow.css.example >+ >+ * new Initialization System >+ - init when DOM is fully loaded >+ - auto init of flows >+ - auto loading of stylesheets >+ - auto load of AddOns >+ - background init of images >+ >+ * changed calculation methods >+ - added calcCoordinates >+ - added calcRelativeItemPosition >+ - removed calcPosition >+ >+ * new methods >+ - onMakeActive >+ - onclickPreButton >+ - onclickNextButton >+ >+ * new options >+ - useAddOns >+ - circularFlow >+ - activeElement >+ >+ * enhanced options >+ - added scaleFactorLandscape option value "max" >+ - flowDragFriction deactivates drag 'n throw if set to '0' >+ - scrollWheelSpeed deactivates scrollwheel if set to '0' >+ >+ * internal restructuring and cleanup >+ >+ * removed unneeded images >+ >+ * switched to yuicompressor for javascript compression >+ >+ * squashed many bugs >+ >+ >+version 0.5.3 (2008/05/22) >+------------------------ >+ * resize bug fixed >+ * renamed maxHeight configuration option to maxItemHeight >+ >+version 0.5.2 (2008/05/21) >+------------------------ >+ * bugfixes >+ >+version 0.5.1 (2008/05/18) >+------------------------ >+ * bugfixes >+ >+version 0.5 (2008/05/18) >+------------------------ >+ * if reflections are used images scale nicer and scrolling is more fluid >+ in Firefox, Safari and Opera (or any other browser which knows about 'canvas') >+ * added fancy scrollbar (with pre and next button) >+ * added maxHeight conf property >+ (if set content will be scaled depending on maxHeight) >+ * moveTo method can handle keywords like 'pre', 'next', 'start' or 'end' >+ * code cleanup >+ >+version 0.4 (2008/02/12) >+------------------------ >+ * dynamically add and remove items ! >+ * caption of item is now optional >+ * added setter for: clickActiveItem, calcSize, calcPosition, calcZIndex, calcFontSize >+ * added getter for: config, activeItem, numberOfItems >+ * squashed some bugs >+ * some clean up >+ >+version 0.3 (2008/01/26) >+------------------------ >+ * revamp of reflection handling: >+ - added client side reflection generation !!! >+ YES! Browser generated reflections without flash! >+ - bedder handling of reflection sizes >+ - bedder handling of server side reflection sources >+ - bedder handling of overlays in IE6 >+ - removed unneeded options >+ - added more flexible options >+ - fix positioning of items in IE6 >+ * fixed resize event handling in IE >+ * fixed slider-position element handling in IE6 >+ * fixed some minor bugs >+ >+version 0.2 (2008/01/22) >+------------------------ >+ * handles now node-object and node-id string on object creation >+ * configuration options are now given as configuration object >+ * auto initialization on window load >+ * auto detection of usage of load indicator, global caption and scrollbar >+ * removed obsolete configuration options >+ * minor cleanups >+ >+version 0.1 (2008/01/10) >+------------------------ >+ * initial release >diff --git a/koha-tmpl/opac-tmpl/bootstrap/lib/contentflow/ContentFlowAddOn_DEFAULT.css b/koha-tmpl/opac-tmpl/bootstrap/lib/contentflow/ContentFlowAddOn_DEFAULT.css >new file mode 100755 >index 0000000..45e114c >--- /dev/null >+++ b/koha-tmpl/opac-tmpl/bootstrap/lib/contentflow/ContentFlowAddOn_DEFAULT.css >@@ -0,0 +1,154 @@ >+/* ContentFlowAddOn_DEFAULT, version 1.0.0 >+ * (c) 2008 - 2010 Sebastian Kutsch >+ * <http://www.jacksasylum.eu/ContentFlow/> >+ * >+ * This file is distributed under the terms of the MIT license. >+ * (see http://www.jacksasylum.eu/ContentFlow/LICENSE) >+ * >+ *--------------------------------------------------------------------------*/ >+ >+/* >+ * This is an example file of an AddOn stylesheet. All values are the default >+ * values as they are found in 'mycontentflow.css'. >+ * >+ * It should give you a good idea which elements of the ContentFlow you can >+ * style and how to excess them. >+ * >+ * To use this stylesheet follow this guideline: >+ * >+ * 1. Create a new AddOn and use the addStylesheet method in the init method. >+ * Take a look at ContentFlowAddOn_DEFAULT.js to know how. >+ * So a minimal AddOn file just to apply this stylesheet would look like this: >+ * new ContentFlowAddOn ('ADDONNAME', { >+ * init: function () { this.addStylesheet(); } >+ * }); >+ * >+ * 2. Rename all class definitions '.ContentFlowAddOn_DEFAULT' to >+ * '.ContentFlowAddOn_ADDONNAME'. >+ * Where ADDONNAME is the name of your AddOn. >+ * >+ * 3. Make the changes you like >+ * >+ * 4. Reload your page :-) >+ * >+ */ >+ >+/* ========== ContentFlow ========== */ >+/* >+ * Within this file you can adjust the styling of ContentFlow >+ * to your personal needs. The default styling is the same as found on the >+ * project page. >+ * >+ */ >+ >+.ContentFlowAddOn_DEFAULT { >+} >+ >+ /* ----- styling of items ----- */ >+ .ContentFlowAddOn_DEFAULT .flow .item.active { >+ cursor: pointer; >+ } >+ .ContentFlowAddOn_DEFAULT .flow .item .caption { >+ font-size: 100%; >+ font-weight: bold; >+ text-align: center; >+ color: white; >+ max-height: 30%; >+ bottom: 10%; >+ background: url(img/1x1_0.5_black.png); >+ width: 100%; >+ } >+ * html .ContentFlowAddOn_DEFAULT .flow .item .caption { >+ background-image: none; >+ filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src='img/1x1_0.5_black.png'); >+ } >+ .ContentFlowAddOn_DEFAULT .flow .item .caption a, >+ .ContentFlowAddOn_DEFAULT .flow .item .caption a:link, >+ .ContentFlowAddOn_DEFAULT .flow .item .caption a:visited, >+ .ContentFlowAddOn_DEFAULT .flow .item .caption a:active, >+ .ContentFlowAddOn_DEFAULT .flow .item .caption a:hover { >+ text-decoration: none; >+ color: white; >+ font-style: italic; >+ font-size: 0.8em; >+ } >+ .ContentFlowAddOn_DEFAULT .flow .item .caption a:hover { >+ text-decoration: underline; >+ } >+ .ContentFlowAddOn_DEFAULT .flow .item.active .caption { >+ /*display: block;*/ /* uncomment to show caption inside item */ >+ } >+ >+ /* ----- scrollbar ----- */ >+ .ContentFlowAddOn_DEFAULT .scrollbar { >+ width: 50%; >+ margin: 0px auto; >+ height: 16px; >+ background: url(img/scrollbar_white.png) left center repeat-x; >+ position: relative; >+ } >+ >+ .ContentFlowAddOn_DEFAULT .scrollbar .slider { >+ width: 16px; >+ height: 16px; >+ background: url(img/slider_white.png) center center no-repeat; >+ } >+ >+ /* only for IE <= 6 and a alphatransparent slider image */ >+ * html .ContentFlow .scrollbar .slider { background-image: none; } >+ * html .ContentFlow .scrollbar .slider .virtualSlider { >+ filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=crop, src='img/slider_white.png'); >+ } >+ >+ .ContentFlowAddOn_DEFAULT .scrollbar .slider .position { >+ top: 120%; >+ font-size: 16px; >+ font-weight: bold; >+ color: silver >+ } >+ >+ /* ----- global caption ----- */ >+ .ContentFlowAddOn_DEFAULT .globalCaption { >+ text-align: center; >+ font-weight: bold; >+ color: white; >+ font-size: 14px; >+ height: 20px; >+ margin: 2em auto; >+ } >+ .ContentFlowAddOn_DEFAULT .globalCaption .caption { >+ } >+ .ContentFlowAddOn_DEFAULT .globalCaption .caption a, >+ .ContentFlowAddOn_DEFAULT .globalCaption .caption a:link, >+ .ContentFlowAddOn_DEFAULT .globalCaption .caption a:visited, >+ .ContentFlowAddOn_DEFAULT .globalCaption .caption a:active, >+ .ContentFlowAddOn_DEFAULT .globalCaption .caption a:hover { >+ text-decoration: none; >+ color: white; >+ font-style: italic; >+ font-size: 0.8em; >+ } >+ >+ .ContentFlowAddOn_DEFAULT .globalCaption .caption a:hover { >+ text-decoration: underline; >+ } >+ >+ /* ----- load indicator ----- */ >+ .ContentFlowAddOn_DEFAULT .loadIndicator { >+ width: 100%; >+ height: 100%; >+ top: 0px; >+ left: 0px; >+ background: url(img/1x1_0.5_black.png); >+ } >+ * html .ContentFlowAddOn_DEFAULT .loadIndicator { >+ background-image: none; >+ filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src='img/1x1_0.5_black.png'); >+ } >+ .ContentFlowAddOn_DEFAULT .loadIndicator .indicator { >+ background: url(img/loader.gif) center center no-repeat; >+ width: 100%; >+ height: 100%; >+ } >+ >+/* ================================= */ >diff --git a/koha-tmpl/opac-tmpl/bootstrap/lib/contentflow/ContentFlowAddOn_DEFAULT.js b/koha-tmpl/opac-tmpl/bootstrap/lib/contentflow/ContentFlowAddOn_DEFAULT.js >new file mode 100755 >index 0000000..599f751 >--- /dev/null >+++ b/koha-tmpl/opac-tmpl/bootstrap/lib/contentflow/ContentFlowAddOn_DEFAULT.js >@@ -0,0 +1,290 @@ >+/* ContentFlowAddOn_DEFAULT, version 1.0.0 >+ * (c) 2008 - 2010 Sebastian Kutsch >+ * <http://www.jacksasylum.eu/ContentFlow/> >+ * >+ * This file is distributed under the terms of the MIT license. >+ * (see http://www.jacksasylum.eu/ContentFlow/LICENSE) >+ */ >+ >+/* >+ * This is an example file of an AddOn file and will not be used by ContentFlow. >+ * All values are the default values of ContentFlow. >+ * >+ * To create a new AddOn follow this guideline: >+ * (replace ADDONNAME by the name of your AddOn) >+ * >+ * 1. rename this file to ContentFlowAddOn_ADDONNAME.js >+ * 2. Change the string 'DEFAULT' in the 'new ContentFlowAddOn' line to 'ADDONNAME' >+ * 3. Make the changes you like/need >+ * 4. Remove all settings you do not need (or comment out for testing). >+ * 5. Add 'ADDONNAME' to the load attribute of the ContentFlow script tag in your web page >+ * 6. Reload your page :-) >+ * >+ */ >+new ContentFlowAddOn ('DEFAULT', { >+ >+ /* >+ * AddOn configuration object, defining the default configuration values. >+ */ >+ conf: {}, >+ >+ /* >+ * This function will be executed on creation of this object (on load of this file). >+ * It's mostly intended to automatically add additional stylesheets and javascripts. >+ * >+ * Object helper methods and parameters: >+ * scriptpath: basepath of this AddOn (without the filename) >+ * addScript(path): adds a javascript-script tag to the head with the src set to 'path' >+ * i.e. this.addScript(scriptpath+"MyScript.js") . >+ * >+ * addStylesheet(path): adds a css-stylesheet-link tag to the head with href set to >+ * 'path' i.e. this.addStylesheet(scriptpath+"MyStylesheet.css") . >+ * If path is omittet it defaults to : >+ * scriptpath+'ContentFlowAddOn_ADDONNAME.css'. >+ * >+ */ >+ init: function() { >+ // this.addScript(); >+ // this.addStylesheet(); >+ }, >+ >+ /* >+ * This method will be executed for each ContentFlow on the page after the >+ * HTML document is loaded (when the whole DOM exists). You can use it to >+ * add elements automatically to the flow. >+ * >+ * flow: the DOM object of the ContentFlow >+ * flow.Flow: the DOM object of the 'flow' element >+ * flow.Scrollbar: the DOM object of the 'scrollbar' element >+ * flow.Slider: the DOM object of the 'slider' element >+ * flow.globalCaption: the DOM object of the 'globalCaption' element >+ * >+ * You can access also all public methods of the flow by 'flow.METHOD' (see documentation). >+ */ >+ onloadInit: function (flow) { >+ }, >+ >+ /* >+ * This method will be executed _after_ the initialization of each ContentFlow. >+ */ >+ afterContentFlowInit: function (flow) { >+ }, >+ /* >+ * ContentFlow configuration. >+ * Will overwrite the default configuration (or configuration of previously loaded AddOns). >+ * For a detailed explanation of each value take a look at the documentation. >+ */ >+ ContentFlowConf: { >+ loadingTimeout: 30000, // milliseconds >+ activeElement: 'content', // item or content >+ >+ maxItemHeight: 0, // 0 == auto, >0 max item height in px >+ scaleFactor: 1.0, // overall scale factor of content >+ scaleFactorLandscape: 1.33, // scale factor of landscape images ('max' := height= maxItemHeight) >+ scaleFactorPortrait: 1.0, // scale factor of portraoit and square images ('max' := width = item width) >+ fixItemSize: false, // don't scale item size to fit image, crop image if bigger than item >+ relativeItemPosition: "top center", // align top/above, bottom/below, left, right, center of position coordinate >+ >+ circularFlow: true, // should the flow wrap around at begging and end? >+ verticalFlow: false, // turn ContentFlow 90 degree counterclockwise >+ visibleItems: -1, // how man item are visible on each side (-1 := auto) >+ endOpacity: 1, // opacity of last visible item on both sides >+ startItem: "center", // which item should be shown on startup? >+ scrollInFrom: "pre", // from where should be scrolled in? >+ >+ flowSpeedFactor: 1.0, // how fast should it scroll? >+ flowDragFriction: 1.0, // how hard should it be be drag the floe (0 := no dragging) >+ scrollWheelSpeed: 1.0, // how fast should the mouse wheel scroll. nagive values will revers the scroll direction (0:= deactivate mouse wheel) >+ keys: { // key => function definition, if set to {} keys ar deactivated >+ 13: function () { this.conf.onclickActiveItem(this._activeItem) }, >+ 37: function () { this.moveTo('pre') }, >+ 38: function () { this.moveTo('visibleNext') }, >+ 39: function () { this.moveTo('next') }, >+ 40: function () { this.moveTo('visiblePre') } >+ }, >+ >+ reflectionColor: "transparent", // none, transparent, overlay or hex RGB CSS style #RRGGBB >+ reflectionHeight: 0.5, // float (relative to original image height) >+ reflectionGap: 0.0, // gap between the image and the reflection >+ >+ >+ /* >+ * ==================== helper and calculation methods ==================== >+ * >+ * This section contains all user definable methods. With thees you can >+ * change the behavior and the visual effects of the flow. >+ * For an explanation of each method take a look at the documentation. >+ * >+ * BEWARE: All methods are bond to the ContentFlow!!! >+ * This means that the keyword 'this' refers to the ContentFlow >+ * which called the method. >+ */ >+ >+ /* ==================== actions ==================== */ >+ >+ /* >+ * called after the inactive item is clicked. >+ */ >+ onclickInactiveItem : function (item) {}, >+ >+ /* >+ * called after the active item is clicked. >+ */ >+ onclickActiveItem: function (item) { >+ var url, target; >+ >+ if (url = item.content.getAttribute('href')) { >+ target = item.content.getAttribute('target'); >+ } >+ else if (url = item.element.getAttribute('href')) { >+ target = item.element.getAttribute('target'); >+ } >+ else if (url = item.content.getAttribute('src')) { >+ target = item.content.getAttribute('target'); >+ } >+ >+ if (url) { >+ if (target) >+ window.open(url, target).focus(); >+ else >+ window.location.href = url; >+ } >+ }, >+ >+ /* >+ * called when an item becomes inactive. >+ */ >+ onMakeInactive: function (item) {}, >+ >+ /* >+ * called when an item becomes active. >+ */ >+ onMakeActive: function (item) {}, >+ >+ /* >+ * called when the target item/position is reached >+ */ >+ onReachTarget: function(item) {}, >+ >+ /* >+ * called when a new target is set >+ */ >+ onMoveTo: function(item) {}, >+ >+ /* >+ * called each item an item is drawn (after scaling and positioning) >+ */ >+ onDrawItem: function(item) {}, >+ >+ /* >+ * called if the pre-button is clicked. >+ */ >+ onclickPreButton: function (event) { >+ this.moveToIndex('pre'); >+ Event.stop(event); >+ }, >+ >+ /* >+ * called if the next-button is clicked. >+ */ >+ onclickNextButton: function (event) { >+ this.moveToIndex('next'); >+ Event.stop(event); >+ }, >+ >+ /* ==================== calculations ==================== */ >+ >+ /* >+ * calculates the width of the step. >+ */ >+ calcStepWidth: function(diff) { >+ var vI = this.conf.visibleItems; >+ var items = this.items.length; >+ items = items == 0 ? 1 : items; >+ if (Math.abs(diff) > vI) { >+ if (diff > 0) { >+ var stepwidth = diff - vI; >+ } else { >+ var stepwidth = diff + vI; >+ } >+ } else if (vI >= this.items.length) { >+ var stepwidth = diff / items; >+ } else { >+ var stepwidth = diff * ( vI / items); >+ } >+ return stepwidth; >+ }, >+ >+ >+ /* >+ * calculates the size of the item at its relative position x >+ * >+ * relativePosition: Math.round(Position(activeItem)) - Position(item) >+ * side: -1, 0, 1 :: Position(item)/Math.abs(Position(item)) or 0 >+ * returns a size object >+ */ >+ calcSize: function (item) { >+ var rP = item.relativePosition; >+ >+ var h = 1/(Math.abs(rP)+1); >+ var w = h; >+ return {width: w, height: h}; >+ }, >+ >+ /* >+ * calculates the position of an item within the flow depending on it's relative position >+ * >+ * relativePosition: Math.round(Position(activeItem)) - Position(item) >+ * side: -1, 0, 1 :: Position(item)/Math.abs(Position(item)) or 0 >+ */ >+ calcCoordinates: function (item) { >+ var rP = item.relativePosition; >+ //var rPN = item.relativePositionNormed; >+ var vI = this.conf.visibleItems; >+ >+ var f = 1 - 1/Math.exp( Math.abs(rP)*0.75); >+ var x = item.side * vI/(vI+1)* f; >+ var y = 1; >+ >+ return {x: x, y: y}; >+ }, >+ >+ /* >+ * calculates the position of an item relative to it's calculated coordinates >+ * x,y = 0 ==> center of item has the position calculated by >+ * calculateCoordinates >+ * >+ * relativePosition: Math.round(Position(activeItem)) - Position(item) >+ * side: -1, 0, 1 :: Position(item)/Math.abs(Position(item)) or 0 >+ * size: size object calculated by calcSize >+ */ >+ calcRelativeItemPosition: function (item) { >+ var x = 0; >+ var y = -1; >+ return {x: x, y: y}; >+ }, >+ >+ /* >+ * calculates and returns the relative z-index of an item >+ */ >+ calcZIndex: function (item) { >+ return -Math.abs(item.relativePositionNormed); >+ }, >+ >+ /* >+ * calculates and returns the relative font-size of an item >+ */ >+ calcFontSize: function (item) { >+ return item.size; >+ }, >+ >+ /* >+ * calculates and returns the opacity of an item >+ */ >+ calcOpacity: function (item) { >+ return Math.max(1 - ((1 - this.conf.endOpacity ) * Math.sqrt(Math.abs(item.relativePositionNormed))), this.conf.endOpacity); >+ } >+ >+ } >+ >+}); >diff --git a/koha-tmpl/opac-tmpl/bootstrap/lib/contentflow/LICENSE b/koha-tmpl/opac-tmpl/bootstrap/lib/contentflow/LICENSE >new file mode 100755 >index 0000000..fb0b0df >--- /dev/null >+++ b/koha-tmpl/opac-tmpl/bootstrap/lib/contentflow/LICENSE >@@ -0,0 +1,19 @@ >+Copyright (c) 2007 - 2010 Sebastian Kutsch >+ >+Permission is hereby granted, free of charge, to any person obtaining a copy >+of this software and associated documentation files (the "Software"), to deal >+in the Software without restriction, including without limitation the rights >+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell >+copies of the Software, and to permit persons to whom the Software is >+furnished to do so, subject to the following conditions: >+ >+The above copyright notice and this permission notice shall be included in >+all copies or substantial portions of the Software. >+ >+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR >+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, >+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE >+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER >+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, >+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN >+THE SOFTWARE. >diff --git a/koha-tmpl/opac-tmpl/bootstrap/lib/contentflow/changelog.html b/koha-tmpl/opac-tmpl/bootstrap/lib/contentflow/changelog.html >new file mode 100755 >index 0000000..6e0ad7f >--- /dev/null >+++ b/koha-tmpl/opac-tmpl/bootstrap/lib/contentflow/changelog.html >@@ -0,0 +1,291 @@ >+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" >+ "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> >+<html xmlns="http://www.w3.org/1999/xhtml" lang="en"> >+<head> >+ <link rel="stylesheet" title="Standard" href="styles.css" type="text/css" media="screen" /> >+</head> >+<body> >+ >+ <h1 id="title"><img src="title.png"/></h1> >+ <h3 style="text-align: center; margin: 10px 0 30px 0; text-decoration: none;">version 1.0.0</h3> >+ >+ <ul id="menu"> >+ <li><a href="index.html">start</a></li> >+ <li><a href="docu.html">documentation</a></li> >+ <li><a href="changelog.html">changelog</a></li> >+ <li><a href="license.html">license</a></li> >+ <li><a href="mailto:contentflow@jacksasylum.eu">contact</a></li> >+ </ul> >+ >+ <pre class="simpleBlack"> >+ContenFolw ChangeLog >+==================== >+ >+version 1.0 (2010/02/09) >+------------------------- >+ >+ Beware: Because of a major restructuring, this release will break with older >+ AddOns and possibly with user defined configurations. If you have >+ defined your own calculation methods (calcSize, calcCoordinates, >+ calcRelativeItemPosition, calcZIndex or calcFontSize) you have to >+ rework them. >+ If you use AddOns please update to the new version of the AddOn. >+ >+ * moved to relative return values for the following methods: >+ calcSize := returns values ranging from 0.0 - 1.0 >+ calcCoordinates := returns values ranging from -1.0 to 1.0 >+ calcRelativeItemPosition := returns values ranging from -1.0 to 1.0 >+ >+ * changed the paramters of the following methods: >+ calcStepWidth : ( diff ) >+ calcSize : ( item ) >+ calcCoordinates : ( item ) >+ calcRelativeItemPosition : ( item ) >+ calcZIndex : ( item ) >+ calcFontSize : ( item ) >+ >+ * added the following properties to the item object: >+ next, position, pre, relativePosition, relativePositionNormed, side, size >+ >+ * better image scaling in IE7 (bicubic interpolation) >+ >+ * changed landscapeScaleFactor default value to 1.33 >+ >+ * moved from 20 to 25 redraws/recalculations/frames per second >+ >+ * refined calculation of flow size >+ >+ * speedup by internel code cleanup >+ >+ * unified AddOn configuration >+ >+ * renamed 'container' to 'Container' >+ >+ * documentation update >+ >+ >+ * addeded direct usage of image tags as items >+ >+ * added support for transparent PNGs on IE6 >+ >+ * added touch handling on iPhone >+ Dragging of the whole Flow and the scrollbar works now on the iPhone >+ >+ * added onDrawItem method >+ >+ * added fluid opacity change >+ - option: endOpacity >+ - method: calcOpacity >+ >+ * added fixItemSize option >+ >+ * added reflectionGap option >+ >+ * added scaleFactorPortrait option >+ >+ * automatic scrolling to item will now be supressed if the onclickInactiveItem >+ method returns 'false' >+ >+ * added conf object to flow >+ >+ >+ * removed server side reflections >+ - removed reflectionType option >+ reflectionHeight = 0 deactivetes the reflection >+ - removed negativeMarginOnFloat option >+ - removed reflectionServerSrc option >+ >+ * removed obsolete contentPosition option >+ >+ >+ * fixed FF drag problem >+ >+ * fixed addItem method >+ >+ * fixed rmItem method >+ >+ >+ >+version 0.7.2 (2009/10/01) >+------------------------- >+ * fixed possible conflict with jquery, prototype >+ * fixed Konqueror 4 init bug >+ * fixed iPhone init bug >+ * fixed IE 6,7,8 / mootools compatibility >+ thanks to Michael Birchler >+ * fixed IE6 scalefactor bug >+ * simplified internal click event handling >+ * added 'return' key to call the onclickActiveItem method >+ >+version 0.7 (2009/04/09) >+------------------------ >+ Beware: Because of a major restructuring, this release will break with older >+ AddOns and possibly with user defined configurations. If you have >+ defined your own methods (i.e. calcCoordinates or onclickActiveItem) >+ you have to move the definitions into the configuration object. >+ If you use AddOns please update to the new version of the AddOn. >+ >+ In any other case you can use the new version without any modification. >+ >+ * moved user definable method definitions to configuration >+ * speedup by reducing number of calculations >+ * flow element will now be centered within ContentFlow element >+ * better handling of large images by Canvas supporting Browsers (all except IE) >+ * removed reflectionOverlay option >+ * removed set* methods to set methods >+ * removed getConfig method >+ * added cursermove style to slider >+ * added "left" and "right" to position keywords (same as 'pre' and 'next') >+ >+ * added optional 'useAddOns' attribute to ContentFlow (X)HTML element >+ * added optional deactivation of mousewheel >+ * added revers mousewheel scrolling >+ * added optional deactivation of keyboard >+ * added optional deactivation of drag 'n throw >+ >+ * added keys option >+ * added verticalFlow option >+ * added contentPosition option >+ * added relativeItemPosition option >+ >+ * added onReachTarget method >+ * added onMoveTo method >+ * added onMakeInactive method >+ * added onclickInactiveItem method >+ >+ * fixed reload bug in Firefox 3 (Gecko 1.9) >+ * fixed keyboard actions on FireFox (Gecko) and Safari (WebKit) >+ * fixed refelctions on iPhone >+ * fixed bug in moveTo method >+ * fixed item positioning >+ * fixed bug if 'scrollInFrom' was set to 'none' >+ * fixed disappearing position label >+ >+ * structure cleanup >+ >+ >+version 0.6 (2008/09/27) >+------------------------ >+ This release contains major changes and could break with previous versions. >+ But most times it can be used as a drop-in replacement. >+ >+ * added AddOn System >+ >+ * handles now 'href' and 'target' attributes of 'item' and 'content' items >+ by default >+ >+ * will respect style-height attributes of ContentFlow and flow elements >+ (has to be defined on the element it self) >+ >+ * moved fancyScrollbar to AddOn >+ >+ * added optional 'label' element to item (will be used as slider label) >+ (great for time lines) >+ >+ * scrollbar will be hidden until loader is hidden >+ >+ * default loader height fixed >+ >+ * switched from array based structure to object based structure for items >+ >+ * switched from index based calculations to global position based calculations >+ >+ * merged mycontentflow.css into contentflow.css and and added mycontentflow.css.example >+ >+ * new Initialization System >+ - init when DOM is fully loaded >+ - auto init of flows >+ - auto loading of stylesheets >+ - auto load of AddOns >+ - background init of images >+ >+ * changed calculation methods >+ - added calcCoordinates >+ - added calcRelativeItemPosition >+ - removed calcPosition >+ >+ * new methods >+ - onMakeActive >+ - onclickPreButton >+ - onclickNextButton >+ >+ * new options >+ - useAddOns >+ - circularFlow >+ - activeElement >+ >+ * enhanced options >+ - added scaleFactorLandscape option value "max" >+ - flowDragFriction deactivates drag 'n throw if set to '0' >+ - scrollWheelSpeed deactivates scrollwheel if set to '0' >+ >+ * internal restructuring and cleanup >+ >+ * removed unneeded images >+ >+ * switched to yuicompressor for javascript compression >+ >+ * squashed many bugs >+ >+ >+version 0.5.3 (2008/05/22) >+------------------------ >+ * resize bug fixed >+ * renamed maxHeight configuration option to maxItemHeight >+ >+version 0.5.2 (2008/05/21) >+------------------------ >+ * bugfixes >+ >+version 0.5.1 (2008/05/18) >+------------------------ >+ * bugfixes >+ >+version 0.5 (2008/05/18) >+------------------------ >+ * if reflections are used images scale nicer and scrolling is more fluid >+ in Firefox, Safari and Opera (or any other browser which knows about 'canvas') >+ * added fancy scrollbar (with pre and next button) >+ * added maxHeight conf property >+ (if set content will be scaled depending on maxHeight) >+ * moveTo method can handle keywords like 'pre', 'next', 'start' or 'end' >+ * code cleanup >+ >+version 0.4 (2008/02/12) >+------------------------ >+ * dynamically add and remove items ! >+ * caption of item is now optional >+ * added setter for: clickActiveItem, calcSize, calcPosition, calcZIndex, calcFontSize >+ * added getter for: config, activeItem, numberOfItems >+ * squashed some bugs >+ * some clean up >+ >+version 0.3 (2008/01/26) >+------------------------ >+ * revamp of reflection handling: >+ - added client side reflection generation !!! >+ YES! Browser generated reflections without flash! >+ - bedder handling of reflection sizes >+ - bedder handling of server side reflection sources >+ - bedder handling of overlays in IE6 >+ - removed unneeded options >+ - added more flexible options >+ - fix positioning of items in IE6 >+ * fixed resize event handling in IE >+ * fixed slider-position element handling in IE6 >+ * fixed some minor bugs >+ >+version 0.2 (2008/01/22) >+------------------------ >+ * handles now node-object and node-id string on object creation >+ * configuration options are now given as configuration object >+ * auto initialization on window load >+ * auto detection of usage of load indicator, global caption and scrollbar >+ * removed obsolete configuration options >+ * minor cleanups >+ >+version 0.1 (2008/01/10) >+------------------------ >+ * initial release >+ >+</pre></body></html> >diff --git a/koha-tmpl/opac-tmpl/bootstrap/lib/contentflow/contentflow.css b/koha-tmpl/opac-tmpl/bootstrap/lib/contentflow/contentflow.css >new file mode 100755 >index 0000000..e97ef6a >--- /dev/null >+++ b/koha-tmpl/opac-tmpl/bootstrap/lib/contentflow/contentflow.css >@@ -0,0 +1 @@ >+.ContentFlow .flow .item canvas.content{height:100%;width:100%}.ContentFlow .flow .item.active{cursor:pointer}.ContentFlow .flow .item .caption{font-size:100%;font-weight:700;text-align:center;color:#FFF;max-height:30%;bottom:10%;background:url(img/1x1_0.5_black.png);width:100%;position:absolute;display:none}* html .ContentFlow .flow .item .caption{background-image:none;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src='img/1x1_0.5_black.png')}.ContentFlow .scrollbar{width:50%;height:16px;background:url(img/scrollbar_white.png) left center repeat-x;overflow:visible;position:relative;z-index:1;visibility:hidden;margin:10px auto 0}.ContentFlow .scrollbar .slider{width:16px;height:16px;background:url(img/slider_white.png) center center no-repeat;cursor:move;position:absolute}* html .ContentFlow .scrollbar .slider{background-image:none}* html .ContentFlow .scrollbar .slider .virtualSlider{filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=crop, src='img/slider_white.png');height:100%}.ContentFlow .scrollbar .slider .position{top:120%;font-size:16px;font-weight:700;color:silver;position:absolute;text-align:center}.ContentFlow .globalCaption{text-align:center;font-weight:700;color:#FFF;font-size:14px;height:20px;position:relative;z-index:1;margin:2em auto}.ContentFlow .loadIndicator{width:100%;height:100%;top:0;left:0;background:#000;position:absolute;z-index:65000}.ContentFlow .loadIndicator .indicator{background:url(img/loader.gif) center center no-repeat;width:100%;height:100%}* html .ContentFlow .loadIndicator .indicator{height:100px}.ContentFlow{position:relative;overflow:hidden}.ContentFlow *{margin:0;padding:0}.ContentFlow img{-ms-interpolation-mode:bicubic}.ContentFlow .mouseoverCheckElement{position:absolute;width:0;height:0;left:0;visibility:hidden}.ContentFlow:hover .mouseoverCheckElement{left:1px}.ContentFlow .flow{position:relative;z-index:0;visibility:hidden;width:100%;margin:0 auto}.ContentFlow .flow.hidden{visibility:hidden}.ContentFlow .flow .item{position:absolute;visibility:hidden;top:0;left:0}.ContentFlow .flow .item div.content{width:100%;height:100%}.ContentFlow .flow .item .label{display:none}.ContentFlow .flow .item canvas.reflection{margin-top:-1px}.ContentFlow .flow .item img.content,.ContentFlow .flow .item img.reflection,.ContentFlow .flow .item canvas.reflection{width:100%}.ContentFlow .flow .item .caption a,.ContentFlow .flow .item .caption a:link,.ContentFlow .flow .item .caption a:visited,.ContentFlow .flow .item .caption a:active,.ContentFlow .flow .item .caption a:hover,.ContentFlow .globalCaption .caption a,.ContentFlow .globalCaption .caption a:link,.ContentFlow .globalCaption .caption a:visited,.ContentFlow .globalCaption .caption a:active,.ContentFlow .globalCaption .caption a:hover{color:#FFF;font-size:0.8em;font-style:italic;text-decoration:none}.ContentFlow .flow .item .caption a:hover,.ContentFlow .globalCaption .caption a:hover{text-decoration:underline}.ContentFlow .flow .item .content,.ContentFlow .flow .item .reflection{display:block} >diff --git a/koha-tmpl/opac-tmpl/bootstrap/lib/contentflow/contentflow.js b/koha-tmpl/opac-tmpl/bootstrap/lib/contentflow/contentflow.js >new file mode 100755 >index 0000000..8e7a18b >--- /dev/null >+++ b/koha-tmpl/opac-tmpl/bootstrap/lib/contentflow/contentflow.js >@@ -0,0 +1,2 @@ >+/* ContentFlow, version 1.0.0 | (c) 2007 - 2010 Sebastian Kutsch | <http://www.jacksasylum.eu/ContentFlow/> | ContentFlow is distributed under the terms of the MIT license. | (see http://www.jacksasylum.eu/ContentFlow/LICENSE) */ >+var ContentFlowGlobal={Flows:new Array,AddOns:{},scriptName:"contentflow.js",scriptElement:null,Browser:new (function(){this.Opera=window.opera?true:false;this.IE=document.all&&!this.Opera?true:false;this.IE6=this.IE&&typeof (window.XMLHttpRequest)=="undefined"?true:false;this.IE8=this.IE&&typeof (document.querySelectorAll)!="undefined"?true:false;this.IE7=this.IE&&!this.IE6&&!this.IE8?true:false;this.WebKit=/WebKit/i.test(navigator.userAgent)?true:false,this.iPhone=/iPhone|iPod/i.test(navigator.userAgent)?true:false;this.Chrome=/Chrome/i.test(navigator.userAgent)?true:false;this.Safari=/Safari/i.test(navigator.userAgent)&&!this.Chrome?true:false;this.Konqueror=navigator.vendor=="KDE"?true:false;this.Konqueror4=this.Konqueror&&/native code/.test(document.getElementsByClassName)?true:false;this.Gecko=!this.WebKit&&navigator.product=="Gecko"?true:false;this.Gecko19=this.Gecko&&Array.reduce?true:false})(),getAddOnConf:function(A){if(this.AddOns[A]){return this.AddOns[A].conf}else{return{}}},setAddOnConf:function(B,A){this.AddOns[B].setConfig(A)},getScriptElement:function(D){var C=new RegExp(D);var A=document.getElementsByTagName("script");for(var B=0;B<A.length;B++){if(A[B].src&&C.test(A[B].src)){return A[B]}}return""},getScriptPath:function(C,B){var A=new RegExp(B+".*");return C.src.replace(A,"")},addScript:function(B){if(this.Browser.IE||this.Browser.WebKit||this.Browser.Konqueror){document.write('<script type="text/javascript" src="'+B+'"><\/script>')}else{var A=document.createElement("script");A.src=B;A.setAttribute("type","text/javascript");document.getElementsByTagName("head")[0].appendChild(A)}},addScripts:function(C,B){for(var A=0;A<filename.length;A++){this.addScript(basepath+B[A])}},addStylesheet:function(B){if(this.Browser.Gecko19){var A=document.createElement("link");A.setAttribute("rel","stylesheet");A.setAttribute("titel","Standard");A.setAttribute("href",B);A.setAttribute("type","text/css");A.setAttribute("media","screen");document.getElementsByTagName("head")[0].appendChild(A)}else{document.write('<link rel="stylesheet" title="Standard" href="'+B+'" type="text/css" media="screen" />')}},addStylesheets:function(C,B){for(var A=0;A<filename.length;A++){this.addStylesheet(basepath+B[A])}},initPath:function(){this.scriptElement=this.getScriptElement(this.scriptName);if(!this.scriptElement){this.scriptName="contentflow_src.js";this.scriptElement=this.getScriptElement(this.scriptName)}this.BaseDir=this.getScriptPath(this.scriptElement,this.scriptName);if(!this.AddOnBaseDir){this.AddOnBaseDir=this.BaseDir}if(!this.CSSBaseDir){this.CSSBaseDir=this.BaseDir}},init:function(){this.addStylesheet(this.CSSBaseDir+"contentflow.css");this.addStylesheet(this.CSSBaseDir+"mycontentflow.css");this.loadAddOns=new Array();if(this.scriptElement.getAttribute("load")){var A=this.loadAddOns=this.scriptElement.getAttribute("load").replace(/\ +/g," ").split(" ");for(var C=0;C<A.length;C++){if(A[C]==""){continue}this.addScript(this.AddOnBaseDir+"ContentFlowAddOn_"+A[C]+".js")}}var E=this;if(document.addEventListener){if(this.Browser.WebKit){var D=setInterval(function(){if(/loaded|complete/.test(document.readyState)){clearInterval(D);E.onloadInit()}},10)}else{document.addEventListener("DOMContentLoaded",E.onloadInit,false)}}else{if(this.Browser.IE){document.write("<script id=__ie_cf_onload defer src=javascript:void(0)><\/script>");var B=document.getElementById("__ie_cf_onload");B.onreadystatechange=function(){if(this.readyState=="complete"){E.onloadInit()}}}}window.addEvent("load",E.onloadInit,false)},onloadInit:function(){if(arguments.callee.done){return }for(var C=0;C<ContentFlowGlobal.loadAddOns.length;C++){var A=ContentFlowGlobal.loadAddOns[C];if(!ContentFlowGlobal.AddOns[A]){var G=ContentFlowGlobal;window.setTimeout(G.onloadInit,10);return }}arguments.callee.done=true;if(window.Element&&Element.implement&&document.all&&!window.opera){for(var H in window.CFElement.prototype){if(!window.Element.prototype[H]){var F={};F[H]=window.CFElement.prototype[H];Element.implement(F)}}}for(var C=0;C<ContentFlowGlobal.Flows.length;C++){ContentFlowGlobal.Flows[C].init()}var D=document.getElementsByTagName("div");DIVS:for(var C=0;C<D.length;C++){if(D[C].className.match(/\bContentFlow\b/)){for(var B=0;B<ContentFlowGlobal.Flows.length;B++){if(D[C]==ContentFlowGlobal.Flows[B].Container){continue DIVS}}var E=new ContentFlow(D[C],{},false);E.init()}}}};ContentFlowGlobal.initPath();var ContentFlowAddOn=function(B,A,C){if(typeof C=="undefined"||C!=false){ContentFlowGlobal.AddOns[B]=this}this.name=B;if(!A){A={}}this.methods=A;this.conf={};if(this.methods.conf){this.setConfig(this.methods.conf);delete this.methods.conf}this.scriptpath=ContentFlowGlobal.AddOnBaseDir;if(A.init){var D=A.init.bind(this);D(this)}};ContentFlowAddOn.prototype={Browser:ContentFlowGlobal.Browser,addScript:ContentFlowGlobal.addScript,addScripts:ContentFlowGlobal.addScripts,addStylesheet:function(A){if(!A){A=this.scriptpath+"ContentFlowAddOn_"+this.name+".css"}ContentFlowGlobal.addStylesheet(A)},addStylesheets:ContentFlowGlobal.addStylesheets,setConfig:function(A){for(var B in A){this.conf[B]=A[B]}},_init:function(A){if(this.methods.ContentFlowConf){A.setConfig(this.methods.ContentFlowConf)}}};var ContentFlowGUIElement=function(A,B){B.setDimensions=function(){this.dimensions=this.getDimensions();this.center={x:this.dimensions.width/2,y:this.dimensions.height/2};this.position=this.findPos()};B.addObserver=function(D,E){var C=this.eventMethod=E.bind(A);this.observedEvent=D;this.addEvent(D,C,false)};B.makeDraggable=function(F,E,G){this.stopDrag=function(I){if(!I){var I=window.event}if(this.Browser.iPhone){window.removeEvent("touchemove",F,false);if(!this.ontochmove){var H=I.target;if(H.firstChild){H=H.firstChild}var J=document.createEvent("MouseEvents");J.initEvent("click",true,true);H.dispatchEvent(J)}}else{window.removeEvent("mousemove",F,false)}G(I)}.bind(this);this.initDrag=function(H){if(!H){var H=window.event}var I=H;if(H.touches){I=H.touches[0]}this.mouseX=I.clientX;this.mouseY=I.clientY;E(H)}.bind(this);this.startDrag=function(J){if(!J){var J=window.event}var H=this.stopDrag;if(this.Browser.iPhone){var I=this;I.ontouchmove=false;window.addEvent("touchmove",function(K){I.ontouchmove=true;F(K)},false);J.preventDefault();window.addEvent("touchend",H,false)}else{window.addEvent("mousemove",F,false);window.addEvent("mouseup",H,false)}if(J.preventDefault){J.preventDefault()}}.bind(this);var D=this.startDrag;var C=function(H){var I=H.touches[0];document.getElementById("info").innerHTML=I.clientX;H.preventDefault()};if(this.Browser.iPhone){this.addEventListener("touchstart",D,false)}else{this.addEvent("mousedown",D,false)}};B.Browser=ContentFlowGlobal.Browser;$CF(B).setDimensions();return B};var ContentFlowItem=function(B,E,C){this.CFobj=B;this._activeElement=B.conf.activeElement;this.pre=null;this.next=null;this.clickItem=function(K){if(!K){var K=window.event}var I=K.target?K.target:K.srcElement;var H=I.itemIndex?I.itemIndex:I.parentNode.itemIndex;var J=this.items[H];if(this._activeItem==J){this.conf.onclickActiveItem(J)}else{if(this.conf.onclickInactiveItem(J)!=false){this.moveToIndex(H)}}}.bind(B),this.setIndex=function(H){this.index=H;this.element.itemIndex=H};this.getIndex=function(){return this.index};if($CF(E).nodeName=="IMG"){var F=document.createElement("div");F.className="item";var A=E.parentNode.replaceChild(F,E);A.className="content";F.appendChild(A);if(E.title){var D=document.createElement("div");D.className="caption";D.innerHTML=E.title;F.appendChild(D)}E=F}this.element=$CF(E);this.item=E;if(typeof C!="undefined"){this.setIndex(C)}this.content=this.element.getChildrenByClassName("content")[0];this.caption=this.element.getChildrenByClassName("caption")[0];this.label=this.element.getChildrenByClassName("label")[0];if(this.content.nodeName=="IMG"){B._imagesToLoad++;var G=function(){B._imagesToLoad--;this.image=this.content;this.setImageFormat(this.image);if(B.conf.reflectionHeight>0){this.addReflection()}this.initClick()}.bind(this);if(this.content.complete&&this.content.width>0){G()}else{this.content.onload=G}}else{this.initClick()}};ContentFlowItem.prototype={Browser:ContentFlowGlobal.Browser,makeActive:function(){this.element.addClassName("active");this.CFobj.conf.onMakeActive(this)},makeInactive:function(){this.element.removeClassName("active");this.CFobj.conf.onMakeInactive(this)},initClick:function(){var A=this.clickItem;this[this._activeElement].addEvent("click",A,false)},setImageFormat:function(A){if(this.Browser.IE6||this.Browser.IE7){A.style.width="auto"}A.origProportion=A.width/A.height;A.setAttribute("origProportion",A.width/A.height);if(this.Browser.IE6||this.Browser.IE7){A.style.width=""}if(A.origProportion<=1){A.addClassName("portray")}else{A.addClassName("landscape")}},addReflection:function(){var F=this.CFobj;var S;var K=this.content;if(this.Browser.IE){var Q="progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)";if(F._reflectionColorRGB){if(F.conf.reflectionColor=="transparent"){var N=S=this.reflection=document.createElement("img");S.src=K.src}else{S=this.reflection=document.createElement("div");var N=document.createElement("img");N.src=K.src;S.width=N.width;S.height=N.height;N.style.width="100%";N.style.height="100%";var M=F._reflectionColorRGB;S.style.backgroundColor="#"+M.hR+M.hG+M.hB;S.appendChild(N)}Q+=" progid:DXImageTransform.Microsoft.Alpha(opacity=0, finishOpacity=50, style=1, finishX=0, startY="+F.conf.reflectionHeight*100+" finishY=0)"}else{var N=S=this.reflection=document.createElement("img");S.src=K.src}Q+=" progid:DXImageTransform.Microsoft.Matrix(M11=1, M12=0, M21=0, M22="+1/F.conf.reflectionHeight+")";if(ContentFlowGlobal.Browser.IE6){if(K.src.match(/\.png$/)){K.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+K.src+"', sizingMethod=scale )";K.filterString="progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+K.src+"', sizingMethod=scale )";Q+=" progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+K.src+"', sizingMethod=scale )";K.origSrc=K.src;K.src="img/blank.gif";N.src="img/blank.gif"}}S.filterString=Q;N.style.filter=Q}else{if(F._reflectionWithinImage){var D=this.canvas=$CF(document.createElement("canvas"))}else{var D=S=this.reflection=document.createElement("canvas")}if(D.getContext){if(F._reflectionWithinImage){for(var R=0;R<K.attributes.length;R++){D.setAttributeNode(K.attributes[R].cloneNode(true))}}var C=D.getContext("2d");var P=F.maxHeight;var I=F._scaleImageSize(this,{width:P,height:P},P);var L=I.width;var J=I.height;if(F._reflectionWithinImage){D.width=L;D.height=J;this.setImageFormat(D);D.height=J*(1+F.conf.reflectionHeight+F.conf.reflectionGap)}else{D.width=L;D.height=J*F.conf.reflectionHeight}C.save();if(F._reflectionWithinImage){C.drawImage(K,0,0,L,J)}if(F._reflectionWithinImage){var O=J*(1+F.conf.reflectionGap/2)*2}else{var O=K.height}O-=1;C.translate(0,O);C.scale(1,-1);C.drawImage(K,0,0,L,J);C.restore();if(F._reflectionColorRGB){var B=C.createLinearGradient(0,0,0,D.height);var E=[0,0.5,1];if(F._reflectionColor=="transparent"){C.globalCompositeOperation="destination-in";E=[1,0.5,0]}var G=F._reflectionColorRGB.iR;var H=F._reflectionColorRGB.iG;var A=F._reflectionColorRGB.iB;if(F._reflectionWithinImage){B.addColorStop(0,"rgba("+G+","+H+","+A+","+E[0]+")");B.addColorStop(J/D.height,"rgba("+G+","+H+","+A+","+E[0]+")");B.addColorStop(J/D.height,"rgba("+G+","+H+","+A+","+E[1]+")")}else{B.addColorStop(0,"rgba("+G+","+H+","+A+","+E[1]+")")}B.addColorStop(1,"rgba("+G+","+H+","+A+","+E[2]+")");C.fillStyle=B;C.fillRect(0,0,D.width,D.height)}if(F._reflectionWithinImage){K.parentNode.replaceChild(D,K);this.content=D;this.origContent=D;delete this.image}}else{F._reflectionWithinImage=false;delete this.reflection}}if(S){S.className="reflection";this.element.appendChild(S);if(this.caption){this.element.appendChild(this.caption)}}}};var ContentFlow=function(A,B){if(A){ContentFlowGlobal.Flows.push(this);this.Container=A;this._userConf=B?B:{};this.conf={};this._loadedAddOns=new Array()}else{throw ("ContentFlow ERROR: No flow container node or id given")}};ContentFlow.prototype={_imagesToLoad:0,_activeItem:0,_currentPosition:0,_targetPosition:0,_stepLock:false,_millisecondsPerStep:40,_reflectionWithinImage:true,Browser:ContentFlowGlobal.Browser,_defaultConf:{useAddOns:"all",biggestItemPos:0,loadingTimeout:30000,activeElement:"content",maxItemHeight:0,scaleFactor:1,scaleFactorLandscape:1.33,scaleFactorPortrait:1,fixItemSize:false,relativeItemPosition:"top center",circularFlow:true,verticalFlow:false,visibleItems:-1,endOpacity:1,startItem:"center",scrollInFrom:"pre",flowSpeedFactor:1,flowDragFriction:1,scrollWheelSpeed:1,keys:{13:function(){this.conf.onclickActiveItem(this._activeItem)},37:function(){this.moveTo("pre")},38:function(){this.moveTo("visibleNext")},39:function(){this.moveTo("next")},40:function(){this.moveTo("visiblePre")}},reflectionColor:"transparent",reflectionHeight:0.5,reflectionGap:0,onInit:function(){},onclickInactiveItem:function(A){},onclickActiveItem:function(B){var A,C;if(A=B.content.getAttribute("href")){C=B.content.getAttribute("target")}else{if(A=B.element.getAttribute("href")){C=B.element.getAttribute("target")}else{if(A=B.content.getAttribute("src")){C=B.content.getAttribute("target")}}}if(A){if(C){window.open(A,C).focus()}else{window.location.href=A}}},onMakeInactive:function(A){},onMakeActive:function(A){},onReachTarget:function(A){},onMoveTo:function(A){},onDrawItem:function(A){},onclickPreButton:function(A){this.moveToIndex("pre");return Event.stop(A)},onclickNextButton:function(A){this.moveToIndex("next");return Event.stop(A)},calcStepWidth:function(D){var C=this.conf.visibleItems;var A=this.items.length;A=A==0?1:A;if(Math.abs(D)>C){if(D>0){var B=D-C}else{var B=D+C}}else{if(C>=this.items.length){var B=D/A}else{var B=D*(C/A)}}return B},calcSize:function(D){var B=D.relativePosition;var C=1/(Math.abs(B)+1);var A=C;return{width:A,height:C}},calcCoordinates:function(C){var B=C.relativePosition;var E=this.conf.visibleItems;var D=1-1/Math.exp(Math.abs(B)*0.75);var A=C.side*E/(E+1)*D;var F=1;return{x:A,y:F}},calcZIndex:function(A){return -Math.abs(A.relativePositionNormed)},calcFontSize:function(A){return A.size.height},calcOpacity:function(A){return Math.max(1-((1-this.conf.endOpacity)*Math.sqrt(Math.abs(A.relativePositionNormed))),this.conf.endOpacity)}},_checkIndex:function(A){A=Math.max(A,0);A=Math.min(A,this.itemsLastIndex);return A},_setLastIndex:function(){this.itemsLastIndex=this.items.length-1},_getItemByIndex:function(A){return this.items[this._checkIndex(A)]},_getItemByPosition:function(A){return this._getItemByIndex(this._getIndexByPosition(A))},_getPositionByIndex:function(B){if(!this.conf.circularFlow){return this._checkIndex(B)}var A=this._getIndexByPosition(this._currentPosition);var C=B-A;if(Math.abs(C)>C+this.items.length){C+=this.items.length}else{if(Math.abs(C)>(Math.abs(C-this.items.length))){C-=this.items.length}}return this._currentPosition+C},_getIndexByPosition:function(A){if(A<0){var C=0}else{var C=1}var B=(Math.round(A)+C)%this.items.length;if(B>0){B-=C}else{if(B<0){B+=this.items.length-C}else{if(A<0){B=0}else{B=this.items.length-1}}}return B},_getIndexByKeyWord:function(B,D,A){if(D){var C=D}else{if(this._activeItem){var C=this._activeItem.index}else{var C=0}}if(isNaN(B)){switch(B){case"first":case"start":C=0;break;case"last":case"end":C=this.itemsLastIndex;break;case"middle":case"center":C=Math.round(this.itemsLastIndex/2);break;case"right":case"next":C+=1;break;case"left":case"pre":case"previous":C-=1;break;case"visible":case"visiblePre":case"visibleLeft":C-=this.conf.visibleItems;break;case"visibleNext":case"visibleRight":C+=this.conf.visibleItems;break;default:C=C}}else{C=B}if(A!=false){C=this._checkIndex(C)}return C},_setCaptionLabel:function(A){if(this.Position&&!this.Slider.locked){this.Position.setLabel(A)}this._setGlobalCaption()},getAddOnConf:function(A){return ContentFlowGlobal.getAddOnConf(A)},setAddOnConf:function(B,A){ContentFlowGlobal.setAddOnConf(B,A)},init:function(){if(this.isInit){return }this._init()},setConfig:function(A){if(!A){return }var E=this._defaultConf;for(var F in A){if(E[F]=="undefined"){continue}switch(F){case"scrollInFrom":case"startItem":if(typeof (A[F])=="number"||typeof (A[F])=="string"){this.conf[F]=A[F]}break;default:if(typeof (E[F]==A[F])){if(typeof A[F]=="function"){this.conf[F]=A[F].bind(this)}else{this.conf[F]=A[F]}}}}switch(this.conf.reflectionColor){case this.conf.reflectionColor.search(/#[0-9a-fA-F]{6}/)>=0?this.conf.reflectionColor:this.conf.reflectionColor+"x":this._reflectionColorRGB={hR:this.conf.reflectionColor.slice(1,3),hG:this.conf.reflectionColor.slice(3,5),hB:this.conf.reflectionColor.slice(5,7),iR:parseInt(this.conf.reflectionColor.slice(1,3),16),iG:parseInt(this.conf.reflectionColor.slice(3,5),16),iB:parseInt(this.conf.reflectionColor.slice(5,7),16)};break;case"none":case"transparent":default:this._reflectionColor="transparent";this._reflectionColorRGB={hR:0,hG:0,hB:0,iR:0,iG:0,iB:0};break}if(this.items){if(this.conf.visibleItems<0){this.conf.visibleItems=Math.round(Math.sqrt(this.items.length))}this.conf.visibleItems=Math.min(this.conf.visibleItems,this.items.length-1)}if(this.conf.relativeItemPosition){var C={x:{left:function(J){return -1},center:function(J){return 0},right:function(J){return 1}},y:{top:function(J){return -1},center:function(J){return 0},bottom:function(J){return 1}}};var I=this.conf.relativeItemPosition;I=I.replace(/above/,"top").replace(/below/,"bottom");var H,G=null;H=I.match(/left|right/);G=I.match(/top|bottom/);c=I.match(/center/);if(!H){if(c){H="center"}else{H="center"}}if(!G){if(c){G="center"}else{G="top"}}var D=C.x[H];var B=C.y[G];this.conf.calcRelativeItemPosition=function(K){var J=D(K.size);var L=B(K.size);return{x:J,y:L}};this.conf.relativeItemPosition=null}if(this._reflectionType&&this._reflectionType!="clientside"){this.conf.reflectionHeight=0}},getItem:function(A){return this.items[this._checkIndex(Math.round(A))]},getActiveItem:function(){return this._activeItem},getNumberOfItems:function(){return this.items.length},resize:function(){this._initSizes();this._initStep()},moveToPosition:function(B,A){if(!this.conf.circularFlow){B=this._checkIndex(B)}this._targetPosition=B;this.conf.onMoveTo(this._getItemByPosition(B));this._initStep(false,A)},moveToIndex:function(A){this._targetPosition=Math.round(this._getPositionByIndex(this._getIndexByKeyWord(A,this._activeItem.index,!this.conf.circularFlow)));this.conf.onMoveTo(this._getItemByPosition(this._targetPosition));this._initStep()},moveToItem:function(B){var A;if(B.itemIndex){A=B.itemIndex}else{A=B.index}this.moveToIndex(A)},moveTo:function(A){if(typeof A=="object"){this.moveToItem(A)}else{if(isNaN(A)||(A==Math.floor(A)&&A<this.items.length)){this.moveToIndex(A)}else{this.moveToPosition(A)}}},addItem:function(C,A){if(typeof A=="string"){switch(A){case"first":case"start":A=0;break;case"last":case"end":A=this.itemsLastIndex+1;break;default:A=this._getIndexByKeyWord(A)}}A=Math.max(A,0);A=Math.min(A,this.itemsLastIndex+1);this.Flow.appendChild(C);var D=new ContentFlowItem(this,C,A);if(this.items.length==0){if(this.conf.circularFlow){D.pre=D;D.next=D}}else{if(A==this.itemsLastIndex+1){D.pre=this.items[this.itemsLastIndex];D.next=D.pre.next}else{D.next=this.items[A];D.pre=D.next.pre}if(D.pre){D.pre.next=D}if(D.next){D.next.pre=D}}this.items.splice(A,0,D);for(var B=A;B<this.items.length;B++){this.items[B].setIndex(B)}this._setLastIndex();if(Math.round(this._getPositionByIndex(A))<=Math.round(this._targetPosition)){this._targetPosition++;if(!this.conf.circularFlow){this._targetPosition=Math.min(this._targetPosition,this.itemsLastIndex)}}if(this._getPositionByIndex(A)<=this._currentPosition){this._currentPosition++;if(!this.conf.circularFlow){this._currentPosition=Math.min(this._currentPosition,this.itemsLastIndex)}}var E=this;window.setTimeout(function(){if(E.items.length==1){E._currentPosition=-0.01;E._targetPosition=0;E.resize()}else{E._initStep()}},100);return A},rmItem:function(A){if(A=="undefined"){A=this._activeItem.index}A=this._getIndexByKeyWord(A);if(!this.items[A]){return null}var D=this.items[A];if(D.pre){D.pre.next=D.next}if(D.next){D.next.pre=D.pre}this.items.splice(A,1);for(var B=A;B<this.items.length;B++){this.items[B].setIndex(B)}this._setLastIndex();if(Math.round(this._getPositionByIndex(A))<Math.round(this._targetPosition)){this._targetPosition--;if(!this.conf.circularFlow){this._targetPosition=this._checkIndex(this._targetPosition)}}if(this._getPositionByIndex(A)<this._currentPosition){this._currentPosition--;if(!this.conf.circularFlow){this._currentPosition=this._checkIndex(this._currentPosition)}}this._activeItem=this._getItemByPosition(this._currentPosition);var C=D.element.parentNode.removeChild(D.element);var E=this;window.setTimeout(function(){E._initStep()},10);return C},_init:function(){if(typeof (this.Container)=="string"){var B=document.getElementById(this.Container);if(B){this.Container=B}else{throw ("ContentFlow ERROR: No element with id '"+this.Container+"' found!");return }}$CF(this.Container).addClassName("ContentFlow");var A=$CF(this.Container).getChildrenByClassName("flow")[0];if(!A){throw ("ContentFlow ERROR: No element with class'flow' found!");return }this.Flow=new ContentFlowGUIElement(this,A);var M=this.Container.getChildrenByClassName("scrollbar")[0];if(M){this.Scrollbar=new ContentFlowGUIElement(this,M);var F=this.Scrollbar.getChildrenByClassName("slider")[0];if(F){this.Slider=new ContentFlowGUIElement(this,F);var H=this.Slider.getChildrenByClassName("position")[0];if(H){this.Position=new ContentFlowGUIElement(this,H)}}}this.setConfig(this._defaultConf);this._initAddOns();this.setConfig(this._userConf);this._initSizes();var J=this.Flow.getChildrenByClassName("item");this.items=new Array();for(var G=0;G<J.length;G++){var K=this.items[G]=new ContentFlowItem(this,J[G],G);if(G>0){K.pre=this.items[G-1];K.pre.next=K}}this._setLastIndex();if(this.conf.circularFlow&&this.items.length>0){var L=this.items[0];L.pre=this.items[this.items.length-1];L.pre.next=L}this._initGUI();if(this._activeElement!="content"){this._activeElement="element"}if(this.conf.visibleItems<0){this.conf.visibleItems=Math.round(Math.sqrt(this.items.length))}this.conf.visibleItems=Math.min(this.conf.visibleItems,this.items.length-1);this._targetPosition=this._getIndexByKeyWord(this.conf.startItem,0);var I=this._getIndexByKeyWord(this.conf.scrollInFrom,this._targetPosition);switch(this.conf.scrollInFrom){case"next":case"right":I-=0.5;break;case"pre":case"previous":case"left":I+=0.5;break}this._currentPosition=I;var E=new Date();var D=this;var C=window.setInterval(function(){if(D._imagesToLoad==0||new Date()-E>D._loadingTimeout){clearInterval(C);D._activeItem=D.getItem(D._currentPosition);if(D._activeItem){D._activeItem.makeActive();D._setCaptionLabel(D._activeItem.index)}D.Flow.style.visibility="visible";if(D.loadIndicator){D.loadIndicator.style.display="none"}if(D.Scrollbar){D.Scrollbar.style.visibility="visible"}D.resize();for(var O=0;O<D._loadedAddOns.length;O++){var N=ContentFlowGlobal.AddOns[D._loadedAddOns[O]];if(N.methods.afterContentFlowInit){N.methods.afterContentFlowInit(D)}}D.conf.onInit()}},10);this.isInit=true},_initAddOns:function(){var C=[];if(this._userConf.useAddOns){if(typeof this._userConf.useAddOns=="string"){C=this._userConf.useAddOns.split(" ")}else{if(typeof this._userConf.useAddOns=="array"){C=this._userConf.useAddOns}}}else{if(this.Container.getAttribute("useAddOns")){C=this.Container.getAttribute("useAddOns").split(" ")}else{C=this.conf.useAddOns.split(" ")}}for(var B=0;B<C.length;B++){if(C[B]=="none"){C=new Array();break}else{if(C[B]=="all"){C=new Array();for(var A in ContentFlowGlobal.AddOns){C.push(A)}break}}}for(var B=0;B<C.length;B++){var A=ContentFlowGlobal.AddOns[C[B]];if(A){this._loadedAddOns.push(C[B]);A._init(this);this.Container.addClassName("ContentFlowAddOn_"+A.name);if(A.methods.onloadInit){A.methods.onloadInit(this)}}}},_initGUI:function(){var C=this.resize.bind(this);window.addEvent("resize",C,false);var K=this.Container.getElementsByTagName("div");for(var G=0;G<K.length;G++){if($CF(K[G]).hasClassName("preButton")){var F=K[G];var A=this.conf.onclickPreButton;F.addEvent("click",A,false)}else{if(K[G].hasClassName("nextButton")){var I=K[G];var A=this.conf.onclickNextButton;I.addEvent("click",A,false)}}}if(this.conf.scrollWheelSpeed!=0){var J=this._wheel.bind(this);if(window.addEventListener){this.Container.addEventListener("DOMMouseScroll",J,false)}this.Container.onmousewheel=J}var L=this._keyStroke.bind(this);if(this.conf.keys&&!this.Browser.iPhone){if(document.addEventListener){if(!this.Browser.Opera){var D=document.createElement("div");D.addClassName("mouseoverCheckElement");this.Container.appendChild(D);if(this.Browser.WebKit){document.body.addEvent("keydown",function(O){if(D.offsetLeft>0){L(O)}})}else{window.addEvent("keydown",function(O){if(D.offsetLeft>0){L(O)}})}}else{this.Container.addEvent("keydown",L)}}else{this.Container.onkeydown=L}}if(this.conf.flowDragFriction>0){var E=function(R){var U=R;if(R.touches){U=R.touches[0]}var Q=U.clientX;var P=U.clientY;if(this.conf.verticalFlow){var V=P-this.Flow.mouseY;var T=this.Flow.dimensions.height}else{var V=Q-this.Flow.mouseX;var T=this.Flow.dimensions.width}var O=(V/T)*(2*this.conf.visibleItems+1);var S=this._currentPosition-O*2*this.conf.visibleItems/this.conf.flowDragFriction;this.Flow.mouseX=Q;this.Flow.mouseY=P;this.moveToPosition(S,true)}.bind(this);var N=function(){};var H=function(P){var O=Math.round(this._targetPosition);if(Math.abs(O-this._currentPosition)>0.001){this.moveToPosition(O)}}.bind(this);this.Flow.makeDraggable(E,N,H)}if(this.Scrollbar){var M=function(R){if(!R){var R=window.event}if(!this.Scrollbar.clickLocked){var Q=R.clientX;var P=Q-this.Scrollbar.position.left;var O=Math.round(P/this.Scrollbar.dimensions.width*this.itemsLastIndex);this.moveToIndex(O)}else{this.Scrollbar.clickLocked=false}}.bind(this);this.Scrollbar.addObserver("click",M)}if(this.Slider){if(this.Browser.IE6){var B=document.createElement("div");B.className="virtualSlider";this.Slider.appendChild(B)}this.Slider.setPosition=function(O){O=O-Math.floor(O)+this._getIndexByPosition(Math.floor(O));if(Math.round(O)<0){O=this.itemsLastIndex}else{if(O<=0){O=0}else{if(Math.round(O)>this.itemsLastIndex){O=0}else{if(O>=this.itemsLastIndex){O=this.itemsLastIndex}}}}if(this.items.length>1){var P=(O/this.itemsLastIndex)*this.Scrollbar.dimensions.width}else{var P=0.5*this.Scrollbar.dimensions.width}this.Slider.style.left=P-this.Slider.center.x+"px";this.Slider.style.top=this.Scrollbar.center.y-this.Slider.center.y+"px"}.bind(this);var N=function(O){this.Scrollbar.clickLocked=true}.bind(this);var E=function(P){var Q=P;if(P.touches){Q=P.touches[0]}var O=this._checkIndex((Q.clientX-this.Scrollbar.position.left)/this.Scrollbar.dimensions.width*this.itemsLastIndex);this._targetPosition=this._getPositionByIndex(O);this.Slider.setPosition(O);if(this.Position){this.Position.setLabel(O)}this._initStep(true,true)}.bind(this);var H=function(O){this._targetPosition=Math.round(this._targetPosition);this.conf.onMoveTo(this._getItemByPosition(this._targetPosition));this._initStep(true)}.bind(this);this.Slider.makeDraggable(E,N,H)}if(this.Position){this.Position.setLabel=function(O){O=this._checkIndex(Math.round(O));if(this.items&&this.items[O].label){this.Position.innerHTML=this.items[O].label.innerHTML}else{this.Position.innerHTML=O+1}}.bind(this)}this.globalCaption=this.Container.getChildrenByClassName("globalCaption")[0];this.loadIndicator=this.Container.getChildrenByClassName("loadIndicator")[0]},_initSizes:function(A){this._initMaxHeight();var E=this._initScrollbarSize();if(!this.conf.verticalFlow&&this.Container.style.height&&this.Container.style.height!="auto"){this.maxHeight-=E}if(!this._activeItem){return }var D=this._findBiggestItem();var F=this.Flow.findPos();if(this.conf.verticalFlow){this.Flow.style.width=D.width.width+"px";this.Flow.style.height=3*D.width.width*(1+this.conf.reflectionHeight+this.conf.reflectionGap)+"px"}else{this.Flow.style.height=D.height.height+(D.height.top-F.top)+"px"}var C=this.conf.verticalFlow?D.width.width:D.height.height;var B=C/(1+this.conf.reflectionHeight+this.conf.reflectionGap);this.Flow.style.marginBottom=-(C-B)+"px";this.Flow.dimensions=this.Flow.getDimensions();if(!this.Browser.IE6){if(this.conf.verticalFlow&&this.Container.clientWidth<this.Flow.dimensions.width){}else{if(this.Container.clientHeight<this.Flow.dimensions.height){this.Container.style.height=this.Flow.dimensions.height+"px"}}}if(this.conf.verticalFlow){this.Flow.center={x:this.Flow.dimensions.height/2,y:D.width.width/2}}else{this.Flow.center={x:this.Flow.dimensions.width/2,y:D.height.height/2}}},_initScrollbarSize:function(){var C;var I;var F;if(C=this.Scrollbar){C.setDimensions();var B=C.dimensions.height;if(I=this.Slider){I.setDimensions();B+=I.dimensions.height;if(F=this.Position){var K=F.innerHTML;var G=maxW=0;F.style.width="auto";if(this.items){for(var D=0;D<this.items.length;D++){var J=this.items[D];if(J.label){F.innerHTML=J.label.innerHTML}else{F.innerHTML=J.index}var E=F.clientHeight;var H=F.clientWidth;if(E>G){G=E}if(H>maxW){maxW=H}}}else{F.innerHTML=" ";G=F.clientHeight;maxW=F.clientWidth}F.innerHTML=K;F.setDimensions();F.style.width=maxW+"px";F.style.left=(I.dimensions.width-maxW)/2+"px";var A=F.position.top-I.position.top;if(A>0){A+=-C.dimensions.height+G;C.style.marginBottom=A+"px"}else{A*=-1;C.style.marginTop=A+"px"}B+=A}}}else{B=0}return B},_initMaxHeight:function(){if(this.conf.verticalFlow){var G=screen.width/screen.height;var D=this.Container.style.width;var E=this.Container.clientWidth;var C=this.Flow.style.width;var F=this.Flow.clientWidth;var A=this.Flow.clientHeight}else{var G=screen.height/screen.width;var D=this.Container.style.height;var E=this.Container.clientHeight;var C=this.Flow.style.height;var F=this.Flow.clientHeight;var A=this.Flow.clientWidth}if(this.ContainerOldDim){D=this.ContainerOldDim}if(this.FlowOldDim){C=this.FlowOldDim}this.ContainerOldDim="auto";this.FlowOldDim="auto";if(this.conf.maxItemHeight<=0){this.maxHeight=A/3*G/1*this.conf.scaleFactor;if(this.conf.verticalFlow&&(this.maxHeight==0||this.maxHeight>F)){this.maxHeight=F}if(D&&D!="auto"){var H=this.conf.verticalFlow?0:this.conf.reflectionGap;var B=this.conf.verticalFlow?0:this.conf.reflectionHeight;this.maxHeight=E/(this.conf.scaleFactor*(1+B+H));this.ContainerOldDim=D}else{if(C&&C!="auto"){var H=this.conf.verticalFlow?0:this.conf.reflectionGap;this.maxHeight=F/(this.conf.scaleFactor*(1+this.conf.reflectionHeight+H));this.FlowOldDim=C}}}else{this.maxHeight=this.conf.maxItemHeight}},_findBiggestItem:function(){var G=this._activeItem;var A=G.pre;var B=G.next;var E=maxFlowSize={width:{width:0,left:0,height:0,top:0,item:null,rI:0},height:{width:0,left:0,height:0,top:0,item:null,rI:0}};var F=function(N,J){var M=N.element;M.style.display="block";var O=M.findPos();var L=M.clientHeight;var K=M.clientWidth;if(L+O.top>=E.height.height+E.height.top){E.height.height=L;E.height.top=O.top;E.height.item=N;E.height.rI=J}if(K+O.left>=E.width.width+E.width.left){E.width.width=K;E.width.left=O.left;E.width.item=N;E.width.rI=J}M.style.display="none"};var H=this._currentPosition;this._currentPosition=this.conf.visibleItems+1;for(var C=-this.conf.visibleItems;C<=this.conf.visibleItems;C++){G.element.style.display="none";this._positionItem(G,C);F(G,C)}var D=E.height.rI;for(var C=0;C<this.items.length;C++){var I=this.items[C];I.element.style.display="none";this._positionItem(I,D);F(I,D)}this._currentPosition=H;return E},_keyStroke:function(A){if(!A){var A=window.event}if(A.which){var B=A.which}else{if(A.keyCode){var B=A.keyCode}}if(this.conf.keys[B]){this.conf.keys[B].bind(this)();return Event.stop(A)}else{return true}},_wheel:function(A){if(!A){var A=window.event}var C=0;if(A.wheelDelta){C=A.wheelDelta/120}else{if(A.detail){C=-A.detail/3}}if(C){var B=this._targetPosition;if(C<0){B+=(1*this.conf.scrollWheelSpeed)}else{B-=(1*this.conf.scrollWheelSpeed)}this.moveToPosition(Math.round(B))}return Event.stop(A)},_setGlobalCaption:function(){if(this.globalCaption){this.globalCaption.innerHTML="";if(this._activeItem&&this._activeItem.caption){this.globalCaption.appendChild(this._activeItem.caption.cloneNode(true))}}},_initStep:function(B,A){if(this.Slider){if(B){this.Slider.locked=true}else{this.Slider.locked=false}}this._holdPos=A==true?true:false;if(!this._stepLock){this._stepLock=true;this._step()}},_step:function(){var D=this._targetPosition-this._currentPosition;var C=Math.abs(D);if(C>0.001){this._currentPosition+=this.conf.flowSpeedFactor*this.conf.calcStepWidth(D,C,this.items.length,this.conf.visibleItems);var A=this.items[(this._getIndexByPosition(this._currentPosition))];if(A&&A!=this._activeItem){if(this._activeItem){this._activeItem.makeInactive()}this._activeItem=A;this._activeItem.makeActive();this._setCaptionLabel(this._activeItem.index);if(Math.abs(this._targetPosition-this._currentPosition)<=0.5){this.conf.onReachTarget(this._activeItem)}}this._positionItems();var B=this._step.bind(this);window.setTimeout(B,this._millisecondsPerStep)}else{if(!this._holdPos){if(this.Slider){this.Slider.locked=false}this._currentPosition=Math.round(this._currentPosition);if(this.Position&&!this.Slider.locked&&this._activeItem){this._setCaptionLabel(this._activeItem.index)}this._positionItems();this._stepLock=false}else{this._stepLock=false}}if(this.Slider&&!this.Slider.locked){this.Slider.setPosition(this._currentPosition)}},_positionItems:function(){if(this._lastStart){var E=this._lastStart;while(E){E.element.style.display="none";E=E.next;if(E==this._lastStart){break}if(E&&E.pre==this._lastEnd){break}}}else{this._lastStart=this._activeItem}if(!this._activeItem){return }var C=this._activeItem;var B=C.pre;var D=C.next;this._positionItem(C,0);for(var A=1;A<=this.conf.visibleItems&&2*A<this.items.length;A++){if(B){this._positionItem(B,-A);this._lastStart=B;B=B.pre}if(D){this._positionItem(D,A);this._lastEnd=D;D=D.next}}},_positionItem:function(S,A){var I=this.conf;var N=I.verticalFlow;var E=S.element.style;var L=S.position=this._currentPosition+A;var M=S.relativePosition=Math.round(L)-this._currentPosition;var Q=S.relativePositionNormed=I.visibleItems>0?M/I.visibleItems:0;var B=M<0?-1:1;B*=M==0?0:1;S.side=B;var J=I.calcSize(S);J.height=Math.max(J.height,0);J.width=Math.max(J.width,0);if(S.content.origProportion){J=this._scaleImageSize(S,J)}S.size=J;var P=S.coordinates=I.calcCoordinates(S);var H=S.relativeItemPosition=I.calcRelativeItemPosition(S);var K=S.zIndex=I.calcZIndex(S);var C=S.fontSize=I.calcFontSize(S);var D=S.opacity=I.calcOpacity(S);J.height*=this.maxHeight;J.width*=this.maxHeight;var R=N?J.height:J.width;var O=N?J.width:J.height;var G=this.Flow.center.x*(1+P.x)+(H.x-1)*R/2;var F=this.maxHeight/2*(1+P.y)+(H.y-1)*O/2;E.left=(N?F:G)+"px";E.top=(N?G:F)+"px";this._setItemSize(S,J);if(I.endOpacity!=1){this._setItemOpacity(S)}if(!this.Browser.IE){E.fontSize=(C*100)+"%"}E.zIndex=32768+Math.round(K*this.items.length);I.onDrawItem(S);E.visibility="visible";E.display="block"},_scaleImageSize:function(N,P,I){var E=this.conf.scaleFactorLandscape;var D=this.conf.scaleFactorPortrait;var M=this.conf.verticalFlow;var B=N.content.origProportion;var C=P.width;var L=P.height;var H=N.content;if(M){if(B<=1){if(E!="max"&&E!=1){L*=E;C=Math.min(L*B,I?I:1)}L=C/B}else{if(B>1){if(D=="max"){L=I?I:1}else{if(D!=1){C*=D;L=Math.min(C/B,I?I:1)}else{L=C/B}}C=L*B}}}else{if(B>1){if(E!="max"&&E!=1){C*=E;L=Math.min(C/B,I?I:1)}C=L*B}else{if(B<=1){if(D=="max"){C=I?I:1}else{if(D!=1){L*=D;C=Math.min(L*B,I?I:1)}else{C=L*B}}L=C/B}}}L=isNaN(L)?0:L;C=isNaN(C)?0:C;if(!I&&this.conf.fixItemSize){var A=P.width/P.height;var I=Math.max(P.width,P.height);var O=this._scaleImageSize(N,{width:I,height:I},I);if(A<1){L=O.height/P.height;C=L*B/A}else{C=O.width/P.width;L=C/B*A}var G=L*100;var K=C*100;var J=(1-C)/2*100;var F=(1-L)/A*100*(M?0.5:1);H.style.height=G+"%";if(N.reflection){N.reflection.style.height=G*this.conf.reflectionHeight+"%"}H.style.width=K+"%";if(N.reflection){N.reflection.style.width=K+"%"}H.style.marginLeft=J+"%";if(N.reflection){N.reflection.style.marginLeft=J+"%"}H.style.marginTop=F+"%";N.element.style.overflow="hidden";return P}else{return{width:C,height:L}}},_setItemSize:(function(){if(ContentFlowGlobal.Browser.IE){var A=function(E,C){if(!this.conf.fixItemSize){E.content.style.height=C.height+"px"}else{if(ContentFlowGlobal.Browser.IE6){var D=parseInt(E.content.style.height)/100;E.content.style.height=C.height*D+"px";var B=parseInt(E.content.style.marginTop)/100;E.content.style.marginTop=C.height*B+"px"}}if(E.reflection){var D=parseInt(E.content.style.height);E.reflection.style.height=D*this.conf.reflectionHeight+"px";E.reflection.style.marginTop=D*this.conf.reflectionGap+"px"}E.element.style.width=C.width+"px";E.element.style.height=C.height*(1+this.conf.reflectionHeight+this.conf.reflectionGap)+"px"}}else{var A=function(C,B){if(C.reflection){C.element.style.height=B.height*(1+this.conf.reflectionHeight+this.conf.reflectionGap)+"px";C.reflection.style.marginTop=B.height*this.conf.reflectionGap+"px"}else{if(this._reflectionWithinImage){C.element.style.height=B.height*(1+this.conf.reflectionHeight+this.conf.reflectionGap)+"px"}else{C.element.style.height=B.height+"px"}}C.element.style.width=B.width+"px"}}return A})(),_setItemOpacity:(function(){if(ContentFlowGlobal.Browser.IE6){var A=function(C){if(C.content.origSrc&&C.content.origSrc.match(/\.png$/)){var B=C.content.src;C.content.src=C.content.origSrc;C.content.style.filter=C.content.filterString+" progid:DXImageTransform.Microsoft.BasicImage(opacity="+C.opacity+")";C.content.src=B}else{C.content.style.filter="progid:DXImageTransform.Microsoft.BasicImage(opacity="+C.opacity+")"}if(C.reflection){C.reflection.style.filter=C.reflection.filterString+"progid:DXImageTransform.Microsoft.BasicImage(opacity="+C.opacity+")"}}}else{if(ContentFlowGlobal.Browser.IE){var A=function(B){B.element.style.filter="progid:DXImageTransform.Microsoft.BasicImage(opacity="+B.opacity+")"}}else{var A=function(B){B.element.style.opacity=B.opacity}}}return A})()};if(!Function.bind){Function.prototype.bind=function(A){var B=this;return function(){return B.apply(A,arguments)}}}if(!Math.erf2){Math.erf2=function(A){var B=-(8*(Math.PI-3)/(3*Math.PI*(Math.PI-4)));var C=A*A;var D=1-Math.pow(Math.E,-C*(4/Math.PI+B*C)/(1+B*C));return D}}if(!Math._2PI05){Math._2PI05=Math.sqrt(2*Math.PI)}if(!Math.normDist){Math.normDist=function(A,C,B){if(!C){var C=1}if(!B){var B=0}if(!A){var A=-B}return 1/(C*Math._2PI05)*Math.pow(Math.E,-(A-B)*(A-B)/(2*C*C))}}if(!Math.normedNormDist){Math.normedNormDist=function(A,C,B){return this.normDist(A,C,B)/this.normDist(B,C,B)}}if(!Math.exp){Math.exp=function(A){return Math.pow(Math.E,A)}}if(!Math.ln){Math.ln=Math.log}if(!Math.log2){Math.log2=function(A){return Math.log(A)/Math.LN2}}if(!Math.log10){Math.log10=function(A){return Math.log(A)/Math.LN10}}if(!Math.logerithm){Math.logerithm=function(B,A){if(!A||A==Math.E){return Math.log(B)}else{if(A==2){return Math.log2(B)}else{if(A==10){return Math.log10(B)}else{return Math.log(B)/Math.log(A)}}}}}if(!Event){var Event={}}if(!Event.stop){Event.stop=function(A){A.cancelBubble=true;if(A.preventDefault){A.preventDefault()}if(A.stopPropagation){A.stopPropagation()}return false}}if(document.all&&!window.opera){window.$CF=function(A){if(typeof A=="string"){return window.$CF(document.getElementById(A))}else{if(CFElement.prototype.extend&&A&&!A.extend){CFElement.prototype.extend(A)}}return A}}else{window.$CF=function(A){return A}}if(!window.HTMLElement){CFElement={};CFElement.prototype={};CFElement.prototype.extend=function(A){for(var B in this){if(!A[B]){A[B]=this[B]}}}}else{CFElement=window.HTMLElement}if(!CFElement.findPos){CFElement.prototype.findPos=function(){var B=this;var C=curtop=0;try{if(B.offsetParent){C=B.offsetLeft;curtop=B.offsetTop;while(B=B.offsetParent){C+=B.offsetLeft;curtop+=B.offsetTop}}}catch(A){}return{left:C,top:curtop}}}if(!CFElement.getDimensions){CFElement.prototype.getDimensions=function(){return{width:this.clientWidth,height:this.clientHeight}}}if(!CFElement.hasClassName){CFElement.prototype.hasClassName=function(A){return(new RegExp("\\b"+A+"\\b").test(this.className))}}if(!CFElement.addClassName){CFElement.prototype.addClassName=function(A){if(!this.hasClassName(A)){this.className+=(this.className?" ":"")+A}}}if(!CFElement.removeClassName){CFElement.prototype.removeClassName=function(A){this.className=this.className.replace(new RegExp("\\b"+A+"\\b"),"").replace(/\s\s/g," ")}}if(!CFElement.toggleClassName){CFElement.prototype.toggleClassName=function(A){if(this.hasClassName(A)){this.removeClassName(A)}else{this.addClassName(A)}}}if(!CFElement.getChildrenByClassName){CFElement.prototype.getChildrenByClassName=function(C){var B=new Array();for(var A=0;A<this.childNodes.length;A++){var D=this.childNodes[A];if(D.nodeType==1&&$CF(D).hasClassName(C)){B.push(D)}}return B}}if(!CFElement.addEvent){CFElement.prototype.addEvent=function(B,C,A){if(this.addEventListener){this.addEventListener(B,C,A)}else{this.attachEvent("on"+B,C)}}}if(!CFElement.removeEvent){CFElement.prototype.removeEvent=function(B,C,A){if(this.removeEventListener){this.removeEventListener(B,C,A)}else{this.detachEvent("on"+B,C)}}}if(!window.addEvent){window.addEvent=function(B,C,A){if(this.addEventListener){this.addEventListener(B,C,A)}else{if(B!="load"&&B!="resize"){document.attachEvent("on"+B,C)}else{this.attachEvent("on"+B,C)}}}}if(!window.removeEvent){window.removeEvent=function(B,C,A){if(this.removeEventListener){this.removeEventListener(B,C,A)}else{if(B!="load"&&B!="resize"){document.detachEvent("on"+B,C)}else{this.detachEvent("on"+B,C)}}}}ContentFlowGlobal.init(); >diff --git a/koha-tmpl/opac-tmpl/bootstrap/lib/contentflow/contentflow_src.css b/koha-tmpl/opac-tmpl/bootstrap/lib/contentflow/contentflow_src.css >new file mode 100755 >index 0000000..4ef4981 >--- /dev/null >+++ b/koha-tmpl/opac-tmpl/bootstrap/lib/contentflow/contentflow_src.css >@@ -0,0 +1,248 @@ >+ >+/* ========== ContentFlow ========== */ >+/* >+ * default style to look nice >+ */ >+ >+.ContentFlow { >+} >+ .ContentFlow .flow { >+ /*border: 1px solid green;*/ >+ } >+ .ContentFlow .flow * { >+ } >+ >+ .ContentFlow .flow .item { >+ /*border: 1px solid red;*/ >+ } >+ .ContentFlow .flow .item canvas.content { >+ height: 100%; >+ width: 100%; >+ /*border: 1px solid yellow;*/ >+ } >+ .ContentFlow .flow .item img.content { >+ /*border: 1px solid yellow;*/ >+ width: 100%; >+ } >+ .ContentFlow .flow .item img.reflection, >+ .ContentFlow .flow .item canvas.reflection { >+ width: 100%; >+ } >+ /* ----- styling of items ----- */ >+ .ContentFlow .flow .item.active { >+ cursor: pointer; >+ } >+ .ContentFlow .flow .item .caption { >+ font-size: 100%; >+ font-weight: bold; >+ text-align: center; >+ color: white; >+ max-height: 30%; >+ bottom: 10%; >+ background: url(img/1x1_0.5_black.png); >+ width: 100%; >+ } >+ * html .ContentFlow .flow .item .caption { >+ background-image: none; >+ filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src='img/1x1_0.5_black.png'); >+ } >+ .ContentFlow .flow .item .caption a, >+ .ContentFlow .flow .item .caption a:link, >+ .ContentFlow .flow .item .caption a:visited, >+ .ContentFlow .flow .item .caption a:active, >+ .ContentFlow .flow .item .caption a:hover { >+ text-decoration: none; >+ color: white; >+ font-style: italic; >+ font-size: 0.8em; >+ } >+ .ContentFlow .flow .item .caption a:hover { >+ text-decoration: underline; >+ } >+ .ContentFlow .flow .item.active .caption { >+ /*display: block;*/ /* uncomment to show caption inside item */ >+ } >+ >+ /* ----- scrollbar ----- */ >+ .ContentFlow .scrollbar { >+ width: 50%; >+ margin: 0px auto; >+ margin-top: 10px; >+ height: 16px; >+ background: url(img/scrollbar_white.png) left center repeat-x; >+ position: relative; >+ overflow: visible; >+ } >+ >+ .ContentFlow .scrollbar .slider { >+ width: 16px; >+ height: 16px; >+ background: url(img/slider_white.png) center center no-repeat; >+ cursor: move; >+ } >+ >+ /* only for IE <= 6 and a alphatransparent slider image */ >+ * html .ContentFlow .scrollbar .slider { background-image: none; } >+ * html .ContentFlow .scrollbar .slider .virtualSlider { >+ filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=crop, src='img/slider_white.png'); >+ } >+ .ContentFlow .scrollbar .slider .position { >+ top: 120%; >+ font-size: 16px; >+ font-weight: bold; >+ color: silver >+ } >+ >+ /* ----- global caption ----- */ >+ .ContentFlow .globalCaption { >+ text-align: center; >+ font-weight: bold; >+ color: white; >+ font-size: 14px; >+ height: 20px; >+ margin: 2em auto; >+ } >+ .ContentFlow .globalCaption .caption { >+ } >+ .ContentFlow .globalCaption .caption a, >+ .ContentFlow .globalCaption .caption a:link, >+ .ContentFlow .globalCaption .caption a:visited, >+ .ContentFlow .globalCaption .caption a:active, >+ .ContentFlow .globalCaption .caption a:hover { >+ text-decoration: none; >+ color: white; >+ font-style: italic; >+ font-size: 0.8em; >+ } >+ >+ .ContentFlow .globalCaption .caption a:hover { >+ text-decoration: underline; >+ } >+ >+ /* ----- load indicator ----- */ >+ .ContentFlow .loadIndicator { >+ width: 100%; >+ height: 100%; >+ top: 0px; >+ left: 0px; >+ background: black; >+ } >+ .ContentFlow .loadIndicator .indicator { >+ background: url(img/loader.gif) center center no-repeat; >+ width: 100%; >+ height: 100%; >+ } >+ * html .ContentFlow .loadIndicator .indicator { >+ height: 100px; >+ } >+ >+/* ================================= */ >+ >+ >+ >+ >+/* ========== ContentFlow ========== */ >+/* >+ * This is the basic CSS file needed for the correct functioning of ContentFlow. >+ * DON'T CHANGE IT. >+ * >+ */ >+.ContentFlow { >+ position: relative; /* needed so overlay dimensions are constrained to the ContentFlow */ >+ overflow: hidden; >+} >+.ContentFlow * { >+ margin: 0px; >+ padding: 0px; >+ /*border: none;*/ >+} >+.ContentFlow img { >+ -ms-interpolation-mode: bicubic; >+} >+ >+.ContentFlow .mouseoverCheckElement { >+ position: absolute; >+ width: 0px; >+ height: 0px; >+ left: 0px; >+ /*display: none;*/ >+ visibility: hidden; >+} >+.ContentFlow:hover .mouseoverCheckElement { >+ left: 1px; >+ /*width: 1px;*/ >+ /*left: -1px;*/ >+ /*background-color: red;*/ >+} >+.ContentFlow .flow { >+ position: relative; /* needed so that items can be positioned relative to flow*/ >+ z-index: 0; /* need so every item has a z-index relative to the flow-box */ >+ visibility: hidden; /* needed so that content is hidden while loading */ >+ width: 100%; /* needed for IE6 */ >+ margin: 0 auto; >+} >+.ContentFlow .flow.hidden { >+ visibility: hidden; >+} >+ >+.ContentFlow .flow .item { >+ position: absolute; /* needed */ >+ visibility: hidden; >+ top: 0px; >+ left: 0px; >+} >+.ContentFlow .flow .item.active { >+} >+.ContentFlow .flow .item .content { >+ display: block; >+} >+.ContentFlow .flow .item div.content { >+ width: 100%; >+ height: 100%; >+} >+.ContentFlow .flow .item .label { >+ display: none; >+} >+.ContentFlow .flow .item .reflection { >+ display: block; >+} >+.ContentFlow .flow .item canvas.reflection { >+ margin-top: -1px; /* for FF */ >+} >+.ContentFlow .flow .item .caption { >+ position: absolute; /* needed */ >+ display: none; /* needed to hide it on inactive items */ >+} >+.ContentFlow .flow .item.active .caption { >+ /*display: block;*/ /* uncomment to show caption inside item */ >+} >+ >+/* ----- scrollbar ----- */ >+ >+.ContentFlow .scrollbar { >+ position: relative; /* needed for z-index */ >+ z-index: 1; /* set above flow */ >+ visibility: hidden; >+} >+ >+.ContentFlow .scrollbar .slider { >+ position: absolute; /* needed */ >+} >+* html .ContentFlow .scrollbar .slider .virtualSlider { >+ height: 100%; >+} >+.ContentFlow .scrollbar .slider .position { >+ position: absolute; /* needed */ >+ text-align: center; >+} >+ >+/* ----- global caption ----- */ >+.ContentFlow .globalCaption { >+ position: relative; /* needed for z-index */ >+ z-index: 1; /* set above flow */ >+} >+/* ----- load indicator ----- */ >+.ContentFlow .loadIndicator { >+ position: absolute; /* needed */ >+ z-index: 65000; /* set above everything */ >+} >diff --git a/koha-tmpl/opac-tmpl/bootstrap/lib/contentflow/contentflow_src.js b/koha-tmpl/opac-tmpl/bootstrap/lib/contentflow/contentflow_src.js >new file mode 100755 >index 0000000..d387daa >--- /dev/null >+++ b/koha-tmpl/opac-tmpl/bootstrap/lib/contentflow/contentflow_src.js >@@ -0,0 +1,2549 @@ >+/* ContentFlow, version 1.0.0 >+ * (c) 2007 - 2010 Sebastian Kutsch >+ * <http://www.jacksasylum.eu/ContentFlow/> >+ * >+ * ContentFlow is distributed under the terms of the MIT license. >+ * (see http://www.jacksasylum.eu/ContentFlow/LICENSE) >+ * >+ *--------------------------------------------------------------------------*/ >+/* >+ * ============================================================ >+ * Global configutaion and initilization object >+ * ============================================================ >+ */ >+var ContentFlowGlobal = { >+ Flows: new Array, >+ AddOns: {}, >+ scriptName: 'contentflow.js', >+ scriptElement: null, >+ Browser: new (function () { >+ this.Opera = window.opera ? true : false; >+ this.IE = document.all && !this.Opera ? true : false; >+ this.IE6 = this.IE && typeof(window.XMLHttpRequest) == "undefined" ? true : false; >+ this.IE8 = this.IE && typeof(document.querySelectorAll) != "undefined" ? true : false; >+ this.IE7 = this.IE && ! this.IE6 && !this.IE8 ? true : false; >+ this.WebKit = /WebKit/i.test(navigator.userAgent) ? true : false, >+ this.iPhone = /iPhone|iPod/i.test(navigator.userAgent)? true : false; >+ this.Chrome = /Chrome/i.test(navigator.userAgent) ? true : false; >+ this.Safari = /Safari/i.test(navigator.userAgent) && !this.Chrome ? true : false; >+ this.Konqueror = navigator.vendor == "KDE" ? true : false; >+ this.Konqueror4 = this.Konqueror && /native code/.test(document.getElementsByClassName) ? true : false; >+ this.Gecko = !this.WebKit && navigator.product == "Gecko" ? true : false; >+ this.Gecko19 = this.Gecko && Array.reduce ? true : false; >+ })(), >+ >+ getAddOnConf: function(name) { >+ if(this.AddOns[name]) >+ return this.AddOns[name].conf; >+ else >+ return {}; >+ }, >+ >+ setAddOnConf: function (name, conf) { >+ this.AddOns[name].setConfig(conf); >+ }, >+ >+ getScriptElement:function (scriptName) { >+ var regex = new RegExp(scriptName); >+ var scripts = document.getElementsByTagName('script'); >+ for (var i=0; i<scripts.length; i++) { >+ if (scripts[i].src && regex.test(scripts[i].src)) >+ return scripts[i]; >+ } >+ return ''; >+ }, >+ >+ getScriptPath: function (scriptElement, scriptName) { >+ var regex = new RegExp(scriptName+".*"); >+ return scriptElement.src.replace(regex, ''); >+ }, >+ >+ addScript: function (path) { >+ if (this.Browser.IE || this.Browser.WebKit || this.Browser.Konqueror) { >+ document.write('<script type="text/javascript" src="'+path+'"><\/script>'); >+ } >+ else { >+ var script = document.createElement('script'); >+ script.src = path; >+ script.setAttribute('type', 'text/javascript'); >+ document.getElementsByTagName('head')[0].appendChild(script); >+ } >+ }, >+ >+ addScripts: function (basePath, filenames) { >+ for (var i=0; i<filename.length; i++) >+ this.addScript(basepath+filenames[i]); >+ }, >+ >+ addStylesheet: function (path) { >+ if (this.Browser.Gecko19) { >+ var link = document.createElement('link'); >+ link.setAttribute('rel', 'stylesheet'); >+ link.setAttribute('titel', 'Standard'); >+ link.setAttribute('href', path); >+ link.setAttribute('type', 'text/css'); >+ link.setAttribute('media', 'screen'); >+ document.getElementsByTagName('head')[0].appendChild(link); >+ } >+ else { >+ document.write('<link rel="stylesheet" title="Standard" href="'+path+'" type="text/css" media="screen" />'); >+ } >+ >+ }, >+ >+ addStylesheets: function (basePath, filenames) { >+ for (var i=0; i<filename.length; i++) >+ this.addStylesheet(basepath+filenames[i]); >+ }, >+ >+ initPath: function () { >+ /* get / set basic values */ >+ this.scriptElement = this.getScriptElement(this.scriptName); >+ if (!this.scriptElement) { >+ this.scriptName = 'contentflow_src.js'; >+ this.scriptElement = this.getScriptElement(this.scriptName); >+ } >+ >+ this.BaseDir = this.getScriptPath(this.scriptElement, this.scriptName) ; >+ if (!this.AddOnBaseDir) this.AddOnBaseDir = this.BaseDir; >+ if (!this.CSSBaseDir) this.CSSBaseDir = this.BaseDir; >+ }, >+ >+ init: function () { >+ /* add default stylesheets */ >+ this.addStylesheet(this.CSSBaseDir+'contentflow.css'); >+ this.addStylesheet(this.CSSBaseDir+'mycontentflow.css'); // FF2: without adding a css-file FF2 hangs on a reload. >+ // I don't have the slidest idea why >+ // Could be timing problem >+ this.loadAddOns = new Array(); >+ /* add AddOns scripts */ >+ if (this.scriptElement.getAttribute('load')) { >+ var AddOns = this.loadAddOns = this.scriptElement.getAttribute('load').replace(/\ +/g,' ').split(' '); >+ for (var i=0; i<AddOns.length; i++) { >+ if (AddOns[i] == '') continue; >+ //if (AddOns[i] == 'myStyle') { >+ //this.addStylesheet(this.BaseDir+'mycontentflow.css'); >+ //continue; >+ //} >+ this.addScript(this.AddOnBaseDir+'ContentFlowAddOn_'+AddOns[i]+'.js'); >+ } >+ } >+ >+ /* ========== ContentFlow auto initialization on document load ========== >+ * thanks to Dean Edwards >+ * http://dean.edwards.name/weblog/2005/02/order-of-events/ >+ */ >+ var CFG = this; >+ >+ /* for Mozilla, Opera 9, Safari */ >+ if (document.addEventListener) { >+ /* for Safari */ >+ if (this.Browser.WebKit) { >+ var _timer = setInterval(function() { >+ if (/loaded|complete/.test(document.readyState)) { >+ clearInterval(_timer); >+ CFG.onloadInit(); // call the onload handler >+ } >+ }, 10); >+ } >+ else { >+ document.addEventListener("DOMContentLoaded", CFG.onloadInit, false); >+ } >+ } >+ else if (this.Browser.IE) { >+ document.write("<script id=__ie_cf_onload defer src=javascript:void(0)><\/script>"); >+ var script = document.getElementById("__ie_cf_onload"); >+ script.onreadystatechange = function() { >+ if (this.readyState == "complete") { >+ CFG.onloadInit(); // call the onload handler >+ } >+ }; >+ } >+ >+ /* for all other browsers */ >+ window.addEvent('load', CFG.onloadInit, false); >+ >+ /* ================================================================== */ >+ >+ }, >+ >+ onloadInit: function () { >+ // quit if this function has already been called >+ if (arguments.callee.done) return; >+ for (var i=0; i< ContentFlowGlobal.loadAddOns.length; i++) { >+ var a = ContentFlowGlobal.loadAddOns[i]; >+ if (!ContentFlowGlobal.AddOns[a]) { >+ var CFG = ContentFlowGlobal; >+ window.setTimeout( CFG.onloadInit, 10); >+ return; >+ } >+ } >+ // flag this function so we don't do the same thing twice >+ arguments.callee.done = true; >+ >+ /* fix for mootools */ >+ if (window.Element && Element.implement && document.all && !window.opera) { >+ for (var prop in window.CFElement.prototype) { >+ if(!window.Element.prototype[prop]) { >+ var implement = {}; >+ implement[prop] = window.CFElement.prototype[prop]; >+ Element.implement(implement); >+ } >+ } >+ } >+ >+ /* init all manualy created flows */ >+ for (var i=0; i< ContentFlowGlobal.Flows.length; i++) { >+ ContentFlowGlobal.Flows[i].init(); >+ } >+ >+ /* init the rest */ >+ var divs = document.getElementsByTagName('div'); >+ DIVS: for (var i = 0; i < divs.length; i++) { >+ if (divs[i].className.match(/\bContentFlow\b/)) { >+ for (var j=0; j<ContentFlowGlobal.Flows.length; j++) { >+ if (divs[i] == ContentFlowGlobal.Flows[j].Container) continue DIVS; >+ } >+ var CF = new ContentFlow(divs[i],{}, false); >+ CF.init(); >+ } >+ } >+ } >+ >+}; >+ >+ContentFlowGlobal.initPath(); >+ >+ >+/* >+ * ============================================================ >+ * ContentFlowAddOn >+ * ============================================================ >+ */ >+var ContentFlowAddOn = function (name, methods, register) { >+ if (typeof register == "undefined" || register != false) >+ ContentFlowGlobal.AddOns[name] = this; >+ >+ this.name = name; >+ if (!methods) methods = {}; >+ this.methods = methods; >+ this.conf = {}; >+ if (this.methods.conf) { >+ this.setConfig(this.methods.conf); >+ delete this.methods.conf; >+ } >+ >+ >+ this.scriptpath = ContentFlowGlobal.AddOnBaseDir; >+ if (methods.init) { >+ var init = methods.init.bind(this); >+ init(this); >+ } >+}; >+ >+ContentFlowAddOn.prototype = { >+ Browser: ContentFlowGlobal.Browser, >+ >+ addScript: ContentFlowGlobal.addScript, >+ addScripts: ContentFlowGlobal.addScripts, >+ >+ addStylesheet: function (path) { >+ if (!path) >+ path = this.scriptpath+'ContentFlowAddOn_'+this.name+'.css'; >+ ContentFlowGlobal.addStylesheet(path); >+ }, >+ addStylesheets: ContentFlowGlobal.addStylesheets, >+ >+ setConfig: function (conf) { >+ for (var c in conf) { >+ this.conf[c] = conf[c]; >+ } >+ }, >+ >+ _init: function (flow) { >+ if (this.methods.ContentFlowConf) { >+ flow.setConfig(this.methods.ContentFlowConf); >+ } >+ } >+ >+ >+}; >+ >+ >+ >+/* >+ * ============================================================ >+ * ContentFlowGUIElement >+ * ============================================================ >+ */ >+ >+var ContentFlowGUIElement = function (CFobj, element) { >+ element.setDimensions = function () { >+ this.dimensions = this.getDimensions(); >+ this.center = {x: this.dimensions.width/2, y:this.dimensions.height/2}; >+ this.position = this.findPos(); >+ }; >+ element.addObserver = function (eventName, method) { >+ var m = this.eventMethod = method.bind(CFobj); >+ this.observedEvent = eventName; >+ this.addEvent(eventName, m, false); >+ }; >+ >+ element.makeDraggable = function (onDrag, beforeDrag, afterDrag) { >+ >+ this.stopDrag = function(event) { >+ if (!event) var event = window.event; >+ if (this.Browser.iPhone) { >+ window.removeEvent('touchemove', onDrag, false); >+ if (!this.ontochmove) { >+ var t = event.target; >+ if (t.firstChild) t = t.firstChild; >+ var e = document.createEvent('MouseEvents'); >+ e.initEvent('click', true, true); >+ t.dispatchEvent(e); >+ } >+ } >+ else { >+ window.removeEvent('mousemove', onDrag, false); >+ } >+ afterDrag(event); >+ }.bind(this); >+ >+ this.initDrag = function (event) { >+ if (!event) var event = window.event; >+ var e = event; >+ if (event.touches) e = event.touches[0]; >+ >+ this.mouseX = e.clientX; >+ this.mouseY = e.clientY; >+ >+ beforeDrag(event); >+ >+ }.bind(this); >+ >+ this.startDrag = function (event) { >+ if (!event) var event = window.event; >+ >+ var stopDrag = this.stopDrag; >+ >+ if (this.Browser.iPhone) { >+ var s = this; >+ s.ontouchmove = false >+ window.addEvent('touchmove', function (e) { >+ s.ontouchmove = true; >+ onDrag(e); >+ }, false); >+ event.preventDefault(); >+ window.addEvent('touchend', stopDrag, false); >+ } >+ else { >+ window.addEvent('mousemove', onDrag, false); >+ window.addEvent('mouseup', stopDrag, false); >+ } >+ if(event.preventDefault) { event.preventDefault() } >+ >+ }.bind(this); >+ >+ var startDrag = this.startDrag; >+ var xxx = function (ev) { >+ var e = ev.touches[0]; >+ document.getElementById('info').innerHTML = e.clientX; >+ ev.preventDefault(); >+ } >+ if (this.Browser.iPhone) { >+ this.addEventListener('touchstart', startDrag, false); >+ } >+ else { >+ this.addEvent('mousedown', startDrag, false); >+ } >+ >+ }; >+ >+ element.Browser = ContentFlowGlobal.Browser; >+ $CF(element).setDimensions(); >+ return element; >+}; >+ >+ >+/* >+ * ============================================================ >+ * ContentFlowItem >+ * ============================================================ >+ */ >+var ContentFlowItem = function (CFobj, element, index) { >+ this.CFobj = CFobj; >+ this._activeElement = CFobj.conf.activeElement; >+ this.pre = null; >+ this.next = null; >+ /* >+ * ==================== item click events ==================== >+ * handles the click event on an active and none active item >+ */ >+ >+ this.clickItem = function (event) { >+ if(!event) var event = window.event; >+ var el = event.target ? event.target : event.srcElement; >+ var index = el.itemIndex ? el.itemIndex : el.parentNode.itemIndex; >+ var item = this.items[index]; >+ if (this._activeItem == item) { >+ this.conf.onclickActiveItem(item); >+ } >+ else { >+ if (this.conf.onclickInactiveItem(item) != false ) this.moveToIndex(index); >+ } >+ }.bind(CFobj), >+ >+ this.setIndex = function (index) { >+ this.index = index; >+ this.element.itemIndex = index; >+ }; >+ this.getIndex = function () { >+ return this.index; >+ }; >+ >+ >+ /* generate deault HTML structure if item is an image */ >+ if ($CF(element).nodeName == "IMG") { >+ var el = document.createElement('div'); >+ el.className = "item"; >+ >+ var cont = element.parentNode.replaceChild( el, element); >+ cont.className = "content"; >+ el.appendChild(cont); >+ >+ if (element.title) { >+ var cap = document.createElement('div'); >+ cap.className = "caption"; >+ cap.innerHTML = element.title; >+ el.appendChild(cap); >+ } >+ element = el; >+ } >+ /* create item object */ >+ this.element = $CF(element); >+ this.item = element; >+ if (typeof index != "undefined") this.setIndex(index); >+ this.content = this.element.getChildrenByClassName('content')[0]; >+ this.caption = this.element.getChildrenByClassName('caption')[0]; >+ this.label = this.element.getChildrenByClassName('label')[0]; >+ >+ /* if content is image set properties */ >+ if (this.content.nodeName == "IMG") { >+ CFobj._imagesToLoad++; >+ >+ var foobar = function () { >+ CFobj._imagesToLoad--; >+ this.image = this.content; >+ this.setImageFormat(this.image); >+ if ( CFobj.conf.reflectionHeight > 0) { >+ this.addReflection(); >+ } >+ this.initClick(); >+ }.bind(this); >+ >+ if (this.content.complete && this.content.width > 0) >+ foobar(); >+ else >+ this.content.onload = foobar; >+ } >+ else { >+ this.initClick(); >+ } >+ >+}; >+ >+ContentFlowItem.prototype = { >+ >+ Browser: ContentFlowGlobal.Browser, >+ >+ makeActive: function () { >+ this.element.addClassName('active'); >+ this.CFobj.conf.onMakeActive(this); >+ }, >+ >+ makeInactive: function () { >+ this.element.removeClassName('active'); >+ this.CFobj.conf.onMakeInactive(this); >+ }, >+ >+ initClick: function () { >+ var cItem = this.clickItem; >+ this[this._activeElement].addEvent('click', cItem, false); >+ }, >+ >+ setImageFormat: function (img) { >+ if (this.Browser.IE6 || this.Browser.IE7) img.style.width = "auto"; >+ img.origProportion = img.width / img.height; >+ img.setAttribute('origProportion', img.width / img.height); >+ if (this.Browser.IE6 || this.Browser.IE7) img.style.width = ""; >+ //img.origWidth = img.width; >+ //img.origHeight = img.height; >+ if (img.origProportion <= 1) >+ img.addClassName('portray'); >+ else >+ img.addClassName('landscape'); >+ }, >+ >+ /* >+ * add reflection to item >+ */ >+ addReflection: function() { >+ var CFobj = this.CFobj; >+ var reflection; >+ var image = this.content; >+ >+ >+ if (this.Browser.IE) { >+ var filterString = 'progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)'; >+ if (CFobj._reflectionColorRGB) { >+ // transparent gradient >+ if (CFobj.conf.reflectionColor == "transparent") { >+ var RefImg = reflection = this.reflection = document.createElement('img'); >+ reflection.src = image.src; >+ } >+ // color gradient >+ else { >+ reflection = this.reflection = document.createElement('div'); >+ var RefImg = document.createElement('img'); >+ RefImg.src = image.src; >+ reflection.width = RefImg.width; >+ reflection.height = RefImg.height; >+ RefImg.style.width = '100%'; >+ RefImg.style.height = '100%'; >+ var color = CFobj._reflectionColorRGB; >+ reflection.style.backgroundColor = '#'+color.hR+color.hG+color.hB; >+ reflection.appendChild(RefImg); >+ } >+ filterString += ' progid:DXImageTransform.Microsoft.Alpha(opacity=0, finishOpacity=50, style=1, finishX=0, startY='+CFobj.conf.reflectionHeight*100+' finishY=0)'; >+ } else { >+ var RefImg = reflection = this.reflection = document.createElement('img'); >+ reflection.src = image.src; >+ } >+ // crop image (streches and crops (clip on default dimensions), original proportions will be restored through CSS) >+ filterString += ' progid:DXImageTransform.Microsoft.Matrix(M11=1, M12=0, M21=0, M22='+1/CFobj.conf.reflectionHeight+')'; >+ >+ if (ContentFlowGlobal.Browser.IE6) { >+ if (image.src.match(/\.png$/) ) { >+ image.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+image.src+"', sizingMethod=scale )"; >+ image.filterString = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+image.src+"', sizingMethod=scale )"; >+ filterString += " progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+image.src+"', sizingMethod=scale )"; >+ image.origSrc = image.src; >+ image.src='img/blank.gif'; >+ RefImg.src="img/blank.gif"; >+ } >+ } >+ >+ reflection.filterString = filterString; >+ RefImg.style.filter = filterString; >+ >+ } else { >+ if (CFobj._reflectionWithinImage) >+ var canvas = this.canvas = $CF(document.createElement('canvas')); >+ else >+ var canvas = reflection = this.reflection = document.createElement('canvas'); >+ >+ if (canvas.getContext) { >+ if (CFobj._reflectionWithinImage) { >+ for (var i=0; i <image.attributes.length; i++) { >+ canvas.setAttributeNode(image.attributes[i].cloneNode(true)); >+ } >+ } >+ >+ var context = canvas.getContext("2d"); >+ >+ /* calc image size */ >+ var max = CFobj.maxHeight; >+ var size = CFobj._scaleImageSize(this, {width: max, height: max }, max) >+ var width = size.width; >+ var height = size.height; >+ >+ // overwrite default height and width >+ if (CFobj._reflectionWithinImage) { >+ canvas.width = width; >+ canvas.height = height; >+ this.setImageFormat(canvas); >+ canvas.height = height * (1 + CFobj.conf.reflectionHeight + CFobj.conf.reflectionGap); >+ >+ } >+ else { >+ canvas.width = width; >+ canvas.height = height * CFobj.conf.reflectionHeight; >+ } >+ >+ context.save(); /* save default context */ >+ >+ /* draw image into canvas */ >+ if (CFobj._reflectionWithinImage) { >+ context.drawImage(image, 0, 0, width, height); >+ } >+ >+ /* mirror image by transformation of context and image drawing */ >+ if (CFobj._reflectionWithinImage) { >+ var contextHeight = height * ( 1 + CFobj.conf.reflectionGap/2) * 2; >+ } >+ else { >+ var contextHeight = image.height; >+ } >+ // -1 for FF 1.5 >+ contextHeight -= 1; >+ >+ context.translate(0, contextHeight); >+ context.scale(1, -1); >+ /* draw reflection image into canvas */ >+ context.drawImage(image, 0, 0, width, height); >+ >+ /* restore default context for simpler further canvas manupulation */ >+ context.restore(); >+ >+ if (CFobj._reflectionColorRGB) { >+ var gradient = context.createLinearGradient(0, 0, 0, canvas.height); >+ >+ var alpha = [0, 0.5, 1]; >+ if (CFobj._reflectionColor == "transparent") { >+ context.globalCompositeOperation = "destination-in"; >+ alpha = [1, 0.5, 0]; >+ } >+ >+ var red = CFobj._reflectionColorRGB.iR; >+ var green = CFobj._reflectionColorRGB.iG; >+ var blue = CFobj._reflectionColorRGB.iB; >+ if (CFobj._reflectionWithinImage) { >+ gradient.addColorStop(0, 'rgba('+red+','+green+','+blue+','+alpha[0]+')'); >+ gradient.addColorStop(height/canvas.height, 'rgba('+red+','+green+','+blue+','+alpha[0]+')'); >+ gradient.addColorStop(height/canvas.height, 'rgba('+red+','+green+','+blue+','+alpha[1]+')'); >+ } >+ else { >+ gradient.addColorStop(0, 'rgba('+red+','+green+','+blue+','+alpha[1]+')'); >+ } >+ gradient.addColorStop(1, 'rgba('+red+','+green+','+blue+','+alpha[2]+')'); >+ >+ context.fillStyle = gradient; >+ context.fillRect(0, 0, canvas.width, canvas.height); >+ >+ } >+ >+ if (CFobj._reflectionWithinImage) { >+ image.parentNode.replaceChild(canvas, image); >+ this.content = canvas; >+ this.origContent = canvas; >+ delete this.image;// = true; >+ >+ } >+ >+ } else { >+ CFobj._reflectionWithinImage = false; >+ delete this.reflection; >+ } >+ >+ } >+ if (reflection) { >+ reflection.className = "reflection"; >+ this.element.appendChild(reflection); >+ >+ /* be shure that caption is last child */ >+ if (this.caption) this.element.appendChild(this.caption); >+ } >+ >+ } >+ >+ >+ }; >+ >+/* >+ * ============================================================ >+ * ContentFlow >+ * ============================================================ >+ */ >+var ContentFlow = function (container, config) { >+ >+ if (container) { >+ ContentFlowGlobal.Flows.push(this); >+ this.Container = container; >+ this._userConf = config?config:{}; >+ this.conf = {}; >+ this._loadedAddOns = new Array(); >+ } else { >+ throw ('ContentFlow ERROR: No flow container node or id given'); >+ } >+ >+}; >+ >+ContentFlow.prototype = { >+ _imagesToLoad: 0, >+ _activeItem: 0, >+ _currentPosition: 0, >+ _targetPosition: 0, >+ _stepLock: false, >+ _millisecondsPerStep: 40, >+ _reflectionWithinImage: true, >+ Browser: ContentFlowGlobal.Browser, >+ >+ _defaultConf: { >+ /* pre conf */ >+ useAddOns: 'all', // all, none, [AddOn1, ... , AddOnN] >+ >+ biggestItemPos: 0, >+ loadingTimeout: 30000, //milliseconds >+ activeElement: 'content', // item or content >+ >+ maxItemHeight: 0, >+ scaleFactor: 1, >+ scaleFactorLandscape: 1.33, >+ scaleFactorPortrait: 1.0, >+ fixItemSize: false, >+ relativeItemPosition: "top center", // align top/above, bottom/below, left, right, center of position coordinate >+ >+ circularFlow: true, >+ verticalFlow: false, >+ visibleItems: -1, >+ endOpacity: 1, >+ startItem: "center", >+ scrollInFrom: "pre", >+ >+ flowSpeedFactor: 1.0, >+ flowDragFriction: 1.0, >+ scrollWheelSpeed: 1.0, >+ keys: { >+ 13: function () { this.conf.onclickActiveItem(this._activeItem) }, >+ 37: function () { this.moveTo('pre') }, >+ 38: function () { this.moveTo('visibleNext') }, >+ 39: function () { this.moveTo('next') }, >+ 40: function () { this.moveTo('visiblePre') } >+ }, >+ >+ reflectionColor: "transparent", // none, transparent or hex RGB CSS style #RRGGBB >+ reflectionHeight: 0.5, // float (relative to original image height) >+ reflectionGap: 0.0, >+ >+ /* ==================== actions ==================== */ >+ >+ onInit: function () {}, >+ >+ onclickInactiveItem: function (item) {}, >+ >+ onclickActiveItem: function (item) { >+ var url, target; >+ >+ if (url = item.content.getAttribute('href')) { >+ target = item.content.getAttribute('target'); >+ } >+ else if (url = item.element.getAttribute('href')) { >+ target = item.element.getAttribute('target'); >+ } >+ else if (url = item.content.getAttribute('src')) { >+ target = item.content.getAttribute('target'); >+ } >+ >+ if (url) { >+ if (target) >+ window.open(url, target).focus(); >+ else >+ window.location.href = url; >+ } >+ }, >+ >+ onMakeInactive: function (item) {}, >+ >+ onMakeActive: function (item) {}, >+ >+ onReachTarget: function(item) {}, >+ >+ onMoveTo: function(item) {}, >+ >+ //onDrawItem: function(item, relativePosition, relativePositionNormed, side, size) {}, >+ onDrawItem: function(item) {}, >+ >+ onclickPreButton: function (event) { >+ this.moveToIndex('pre'); >+ return Event.stop(event); >+ }, >+ >+ onclickNextButton: function (event) { >+ this.moveToIndex('next'); >+ return Event.stop(event); >+ }, >+ >+ /* ==================== calculations ==================== */ >+ >+ calcStepWidth: function(diff) { >+ var vI = this.conf.visibleItems; >+ var items = this.items.length; >+ items = items == 0 ? 1 : items; >+ if (Math.abs(diff) > vI) { >+ if (diff > 0) { >+ var stepwidth = diff - vI; >+ } else { >+ var stepwidth = diff + vI; >+ } >+ } else if (vI >= this.items.length) { >+ var stepwidth = diff / items; >+ } else { >+ var stepwidth = diff * ( vI / items); >+ //var stepwidth = diff/absDiff * Math.max(diff * diff,Math.min(absDiff,0.3)) * ( vI / this.items.length); >+ //var stepwidth = this.flowSpeedFactor * diff / this.visibleItems; >+ //var stepwidth = this.flowSpeedFactor * diff * ( this.visibleItems / this.items.length) >+ //var stepwidth = this.flowSpeedFactor * diff / this._millisecondsPerStep * 2; // const. speed >+ } >+ return stepwidth; >+ }, >+ >+ calcSize: function (item) { >+ var rP = item.relativePosition; >+ //var rPN = relativePositionNormed; >+ //var vI = this.conf.visibleItems; >+ >+ var h = 1/(Math.abs(rP)+1); >+ var w = h; >+ return {width: w, height: h}; >+ }, >+ >+ calcCoordinates: function (item) { >+ var rP = item.relativePosition; >+ //var rPN = item.relativePositionNormed; >+ var vI = this.conf.visibleItems; >+ >+ var f = 1 - 1/Math.exp( Math.abs(rP)*0.75); >+ var x = item.side * vI/(vI+1)* f; >+ var y = 1; >+ >+ return {x: x, y: y}; >+ }, >+ >+ /* >+ calcRelativeItemPosition: function (item) { >+ var x = 0; >+ var y = -1; >+ return {x: x, y: y}; >+ }, >+ */ >+ >+ calcZIndex: function (item) { >+ return -Math.abs(item.relativePositionNormed); >+ }, >+ >+ calcFontSize: function (item) { >+ return item.size.height; >+ }, >+ >+ calcOpacity: function (item) { >+ return Math.max(1 - ((1 - this.conf.endOpacity ) * Math.sqrt(Math.abs(item.relativePositionNormed))), this.conf.endOpacity); >+ } >+ }, >+ >+ /* ---------- end of defaultConf ---------- */ >+ >+ >+ /* >+ * ==================== index helper methods ==================== >+ */ >+ >+ /* >+ * checks if index is within the index range of the this.items array >+ * returns a value that is within this range >+ */ >+ _checkIndex: function (index) { >+ index = Math.max(index, 0); >+ index = Math.min(index, this.itemsLastIndex); >+ return index; >+ }, >+ >+ /* >+ * sets the object property itemsLastIndex >+ */ >+ _setLastIndex: function () { >+ this.itemsLastIndex = this.items.length - 1; >+ }, >+ >+ /* >+*/ >+ _getItemByIndex: function (index) { >+ return this.items[this._checkIndex(index)]; >+ }, >+ >+ _getItemByPosition: function (position) { >+ return this._getItemByIndex(this._getIndexByPosition(position)); >+ }, >+ >+ /* returns the position of an item-index relative to current position */ >+ _getPositionByIndex: function(index) { >+ if (!this.conf.circularFlow) return this._checkIndex(index); >+ var cI = this._getIndexByPosition(this._currentPosition); >+ var dI = index - cI; >+ if (Math.abs(dI) > dI+this.items.length) >+ dI += this.items.length; >+ else if (Math.abs(dI) > (Math.abs(dI-this.items.length))) >+ dI -= this.items.length; >+ >+ return this._currentPosition + dI; >+ >+ }, >+ >+ /* returns the index an item at position p would have */ >+ _getIndexByPosition: function (position) { >+ if (position < 0) var mod = 0; >+ else var mod = 1; >+ >+ var I = (Math.round(position) + mod) % this.items.length; >+ if (I>0) I -= mod; >+ else if(I<0) I += this.items.length - mod; >+ else if(position<0) I = 0; >+ else I = this.items.length - 1; >+ >+ return I; >+ }, >+ >+ _getIndexByKeyWord: function (keyword, relativeTo, check) { >+ if (relativeTo) >+ var index = relativeTo; >+ else if (this._activeItem) >+ var index = this._activeItem.index; >+ else >+ var index = 0; >+ >+ if (isNaN(keyword)) { >+ switch (keyword) { >+ case "first": >+ case "start": >+ index = 0; >+ break; >+ case "last": >+ case "end": >+ index = this.itemsLastIndex; >+ break; >+ case "middle": >+ case "center": >+ index = Math.round(this.itemsLastIndex/2); >+ break; >+ case "right": >+ case "next": >+ index += 1; >+ break; >+ case "left": >+ case "pre": >+ case "previous": >+ index -= 1; >+ break; >+ case 'visible': >+ case 'visiblePre': >+ case 'visibleLeft': >+ index -= this.conf.visibleItems; >+ break; >+ case 'visibleNext': >+ case 'visibleRight': >+ index += this.conf.visibleItems; >+ break; >+ default: >+ index = index; >+ } >+ } >+ else { >+ index = keyword; >+ } >+ if (check != false) >+ index = this._checkIndex(index); >+ >+ return index; >+ }, >+ >+ >+ _setCaptionLabel: function (index) { >+ if(this.Position && !this.Slider.locked) >+ this.Position.setLabel(index); >+ this._setGlobalCaption(); >+ }, >+ >+ >+ /* >+ * ==================== public methods ==================== >+ */ >+ getAddOnConf: function(name) { >+ return ContentFlowGlobal.getAddOnConf(name); >+ }, >+ >+ setAddOnConf: function(name, conf) { >+ ContentFlowGlobal.setAddOnConf(name, conf); >+ }, >+ >+ >+ /* >+ * calls _init() if ContentFlow has not been initialized before >+ * needed if ContentFlow is not automatically initialized on window.load >+ */ >+ init: function () { >+ if(this.isInit) return; >+ this._init(); >+ }, >+ >+ /* >+ * parses configuration object and initializes configuration values >+ */ >+ setConfig: function(config) { >+ if (!config) return; >+ var dC = this._defaultConf; >+ for (var option in config) { >+ if (dC[option] == "undefined" ) continue; >+ switch (option) { >+ case "scrollInFrom": >+ case "startItem": >+ if (typeof(config[option]) == "number" || typeof(config[option]) == "string") { >+ //this["_"+option] = config[option]; >+ this.conf[option] = config[option]; >+ } >+ break; >+ default: >+ if (typeof(dC[option] == config[option])) { >+ //this["_"+option] = config[option]; >+ if (typeof config[option] == "function") { >+ this.conf[option] = config[option].bind(this); >+ } >+ else { >+ this.conf[option] = config[option]; >+ } >+ } >+ } >+ } >+ switch (this.conf.reflectionColor) { >+ case this.conf.reflectionColor.search(/#[0-9a-fA-F]{6}/)>= 0?this.conf.reflectionColor:this.conf.reflectionColor+"x": >+ this._reflectionColorRGB = { >+ hR: this.conf.reflectionColor.slice(1,3), >+ hG: this.conf.reflectionColor.slice(3,5), >+ hB: this.conf.reflectionColor.slice(5,7), >+ iR: parseInt(this.conf.reflectionColor.slice(1,3), 16), >+ iG: parseInt(this.conf.reflectionColor.slice(3,5), 16), >+ iB: parseInt(this.conf.reflectionColor.slice(5,7), 16) >+ }; >+ break; >+ case "none": >+ case "transparent": >+ default: >+ this._reflectionColor = "transparent"; >+ this._reflectionColorRGB = { >+ hR: 0, hG: 0, hB:0, >+ iR: 0, iG: 0, iB:0 >+ }; >+ break; >+ } >+ if (this.items) { >+ if (this.conf.visibleItems < 0) >+ this.conf.visibleItems = Math.round(Math.sqrt(this.items.length)); >+ this.conf.visibleItems = Math.min(this.conf.visibleItems, this.items.length - 1); >+ } >+ >+ if (this.conf.relativeItemPosition) { >+ var calcRP = { >+ x: { >+ left: function(size) { return -1 }, >+ center: function(size) { return 0 }, >+ right: function(size) { return 1 } >+ }, >+ y: { >+ top: function(size) { return -1 }, >+ center: function(size) { return 0 }, >+ bottom: function(size) { return 1 } >+ } >+ }; >+ >+ var iP = this.conf.relativeItemPosition; >+ iP = iP.replace(/above/,"top").replace(/below/,"bottom"); >+ var x, y = null; >+ x = iP.match(/left|right/); >+ y = iP.match(/top|bottom/); >+ c = iP.match(/center/); >+ if (!x) { >+ if (c) x = "center"; >+ else x = "center"; >+ } >+ if (!y) { >+ if (c) y = "center"; >+ else y = "top"; >+ } >+ var calcX = calcRP.x[x]; >+ var calcY = calcRP.y[y]; >+ this.conf.calcRelativeItemPosition = function (item) { >+ var x = calcX(item.size); >+ var y = calcY(item.size); >+ return {x: x, y: y}; >+ }; >+ this.conf.relativeItemPosition = null; >+ } >+ >+ if (this._reflectionType && this._reflectionType != "clientside") { >+ this.conf.reflectionHeight = 0; >+ } >+ >+ }, >+ >+ getItem: function (index) { >+ return this.items[this._checkIndex(Math.round(index))]; >+ }, >+ >+ /* >+ * returns the index number of the active item >+ */ >+ getActiveItem: function() { >+ return this._activeItem; >+ }, >+ >+ /* >+ * returns the number of items the flow contains >+ */ >+ getNumberOfItems: function () { >+ return this.items.length; >+ }, >+ >+ /* >+ * reinitializes sizes. >+ * called on window.resize >+ */ >+ resize: function () { >+ this._initSizes(); >+ this._initStep(); >+ }, >+ >+ /* >+ * scrolls flow to item i >+ */ >+ moveToPosition: function (p, holdPos) { >+ if (!this.conf.circularFlow) p = this._checkIndex(p); >+ this._targetPosition = p; >+ this.conf.onMoveTo(this._getItemByPosition(p)); >+ this._initStep(false, holdPos); >+ }, >+ moveToIndex: function (index) { >+ this._targetPosition = Math.round(this._getPositionByIndex(this._getIndexByKeyWord(index, this._activeItem.index, !this.conf.circularFlow))); >+ this.conf.onMoveTo(this._getItemByPosition(this._targetPosition)); >+ this._initStep(); >+ }, >+ moveToItem: function (item) { >+ var i; >+ if (item.itemIndex) i = item.itemIndex; >+ else i = item.index; >+ this.moveToIndex(i); >+ }, >+ moveTo: function (i) { >+ if (typeof i == "object") this.moveToItem(i); >+ else if (isNaN(i) || (i == Math.floor(i) && i < this.items.length) ) this.moveToIndex(i); >+ else this.moveToPosition(i); >+ }, >+ >+ /* >+ * initializes item and adds it at index position >+ */ >+ addItem: function(el, index) { >+ if (typeof index == "string") { >+ switch (index) { >+ case "first": >+ case "start": >+ index = 0; >+ break; >+ case "last": >+ case "end": >+ index = this.itemsLastIndex + 1; >+ break; >+ default: >+ index = this._getIndexByKeyWord(index); >+ } >+ } >+ >+ index = Math.max(index, 0); >+ index = Math.min(index, this.itemsLastIndex + 1); >+ >+ this.Flow.appendChild(el); >+ >+ /* init item after insertion. that way it's part of the document and all styles are applied */ >+ var item = new ContentFlowItem(this, el, index); >+ if (this.items.length == 0 ) { >+ if (this.conf.circularFlow) { >+ item.pre = item; >+ item.next = item; >+ } >+ } >+ else { >+ if (index == this.itemsLastIndex + 1) { >+ item.pre = this.items[this.itemsLastIndex]; >+ item.next = item.pre.next; >+ } >+ else { >+ item.next = this.items[index]; >+ item.pre = item.next.pre; >+ } >+ if (item.pre) item.pre.next = item; >+ if (item.next) item.next.pre = item; >+ } >+ this.items.splice(index,0, item); >+ >+ /* adjust item indices */ >+ for (var i = index; i < this.items.length; i++) { >+ this.items[i].setIndex(i); >+ } >+ this._setLastIndex(); >+ >+ /* adjust targetItem, currentPos so that current view does not change*/ >+ if (Math.round(this._getPositionByIndex(index)) <= Math.round(this._targetPosition)) { >+ this._targetPosition++; >+ if (!this.conf.circularFlow) >+ this._targetPosition = Math.min(this._targetPosition, this.itemsLastIndex); >+ } >+ if (this._getPositionByIndex(index) <= this._currentPosition) { >+ this._currentPosition++; >+ if (!this.conf.circularFlow) >+ this._currentPosition = Math.min(this._currentPosition, this.itemsLastIndex); >+ } >+ >+ // avoid display errors (wrong sizing) >+ var CF = this; >+ window.setTimeout(function () { >+ if(CF.items.length == 1 ) { >+ CF._currentPosition = -0.01; >+ CF._targetPosition = 0; >+ CF.resize(); >+ } >+ else { >+ CF._initStep(); >+ } >+ }, 100); >+ >+ return index; >+ >+ }, >+ >+ /* >+ * removes item at index position, cleans it up and returns it >+ */ >+ rmItem: function(index) { >+ if (index == "undefined") index = this._activeItem.index; >+ index = this._getIndexByKeyWord(index); >+ if (!this.items[index]) return null; >+ >+ var item = this.items[index]; >+ >+ if (item.pre) item.pre.next = item.next; >+ if (item.next) item.next.pre = item.pre; >+ this.items.splice(index,1); >+ >+ /* adjust item indices */ >+ for (var i = index ; i < this.items.length; i++) { >+ this.items[i].setIndex(i); >+ } >+ this._setLastIndex(); >+ >+ /* adjust targetItem, currentPos and activeItem so that current view does not change*/ >+ if (Math.round(this._getPositionByIndex(index)) < Math.round(this._targetPosition)) { >+ this._targetPosition--; >+ if (!this.conf.circularFlow) >+ this._targetPosition = this._checkIndex(this._targetPosition); >+ } >+ if (this._getPositionByIndex(index) < this._currentPosition) { >+ this._currentPosition--; >+ if (!this.conf.circularFlow) >+ this._currentPosition = this._checkIndex(this._currentPosition); >+ } >+ this._activeItem = this._getItemByPosition(this._currentPosition); >+ >+ /* remove item from DOM tree, take the next step and return removed item */ >+ var removedItem = item.element.parentNode.removeChild(item.element); >+ // avoid display errors (wrong sizing) >+ var CF = this; >+ window.setTimeout(function () { CF._initStep() }, 10); >+ return removedItem; >+ >+ }, >+ >+ >+ /* >+ * ==================== initialization ==================== >+ */ >+ >+ >+ /* -------------------- main init -------------------- */ >+ _init: function () { >+ >+ if (typeof(this.Container) == 'string') { // no node >+ var container = document.getElementById(this.Container); >+ if (container) { >+ this.Container = container; >+ } else { >+ throw ('ContentFlow ERROR: No element with id \''+this.Container+'\' found!'); >+ return; >+ } >+ } >+ >+ /* ---------- reserve CSS namespace */ >+ >+ $CF(this.Container).addClassName('ContentFlow'); >+ >+ /* ---------- detect GUI elements */ >+ var flow = $CF(this.Container).getChildrenByClassName('flow')[0]; >+ if (!flow) { >+ throw ('ContentFlow ERROR: No element with class\'flow\' found!'); >+ return; >+ } >+ this.Flow = new ContentFlowGUIElement(this, flow); >+ >+ var scrollbar = this.Container.getChildrenByClassName('scrollbar')[0]; >+ if (scrollbar) { >+ this.Scrollbar = new ContentFlowGUIElement(this, scrollbar); >+ var slider = this.Scrollbar.getChildrenByClassName('slider')[0]; >+ if (slider) { >+ this.Slider = new ContentFlowGUIElement(this, slider); >+ var position = this.Slider.getChildrenByClassName('position')[0]; >+ if (position) { >+ this.Position = new ContentFlowGUIElement(this, position); >+ } >+ } >+ >+ } >+ >+ /* ---------- init configuration */ >+ this.setConfig(this._defaultConf); >+ this._initAddOns(); /* init AddOns */ >+ this.setConfig(this._userConf); >+ >+ this._initSizes(); // ...... >+ >+ >+ /* ---------- init item lists ---------- */ >+ var items = this.Flow.getChildrenByClassName('item'); >+ >+ this.items = new Array(); >+ for (var i=0; i<items.length; i++) { >+ var item = this.items[i] = new ContentFlowItem(this, items[i], i); >+ if (i > 0) { >+ item.pre = this.items[i-1]; >+ item.pre.next = item; >+ } >+ } >+ this._setLastIndex(); >+ if (this.conf.circularFlow && this.items.length > 0) { >+ var s = this.items[0]; >+ s.pre = this.items[this.items.length-1]; >+ s.pre.next = s; >+ } >+ >+ /* ---------- init GUI */ >+ this._initGUI(); >+ >+ /* ---------- init start parameters ---------- */ >+ if (this._activeElement != "content") >+ this._activeElement = "element"; >+ >+ if (this.conf.visibleItems < 0) >+ this.conf.visibleItems = Math.round(Math.sqrt(this.items.length)); >+ this.conf.visibleItems = Math.min(this.conf.visibleItems, this.items.length - 1); >+ >+ this._targetPosition = this._getIndexByKeyWord(this.conf.startItem, 0); >+ >+ var index = this._getIndexByKeyWord(this.conf.scrollInFrom, this._targetPosition); >+ switch (this.conf.scrollInFrom) { >+ case "next": >+ case "right": >+ index -= 0.5; >+ break; >+ case "pre": >+ case "previous": >+ case "left": >+ index += 0.5; >+ break; >+ } >+ this._currentPosition = index; >+ >+ >+ /* ---------- wait till all images are loaded or >+ * grace time is up to show all and take the first step >+ */ >+ var now = new Date(); >+ var cf = this; >+ var timer = window.setInterval ( >+ function() { >+ if ( cf._imagesToLoad == 0 || new Date() - now > cf._loadingTimeout ) { >+ clearInterval(timer); >+ >+ cf._activeItem = cf.getItem(cf._currentPosition); >+ if (cf._activeItem) { >+ cf._activeItem.makeActive(); >+ cf._setCaptionLabel(cf._activeItem.index); >+ } >+ >+ cf.Flow.style.visibility = "visible"; // show flow after images are loaded >+ if (cf.loadIndicator) cf.loadIndicator.style.display = "none"; >+ if (cf.Scrollbar) cf.Scrollbar.style.visibility = "visible"; >+ >+ cf.resize(); >+ for (var i=0; i < cf._loadedAddOns.length; i++) { >+ var a = ContentFlowGlobal.AddOns[cf._loadedAddOns[i]]; >+ if (a.methods.afterContentFlowInit) >+ a.methods.afterContentFlowInit(cf); >+ } >+ cf.conf.onInit(); >+ } >+ }, 10 >+ ); >+ >+ this.isInit = true; >+ >+ }, >+ >+ /* ---------- init AddOns ---------- */ >+ _initAddOns: function () { >+ >+ // get an array of names of all AddOns that should be used >+ var loadAddOns = []; >+ if (this._userConf.useAddOns) { >+ if (typeof this._userConf.useAddOns == "string") { >+ loadAddOns = this._userConf.useAddOns.split(" "); >+ } >+ else if (typeof this._userConf.useAddOns == "array") { >+ loadAddOns = this._userConf.useAddOns; >+ } >+ } >+ else if (this.Container.getAttribute("useAddOns")) { >+ loadAddOns = this.Container.getAttribute("useAddOns").split(" "); >+ } >+ else { >+ loadAddOns = this.conf.useAddOns.split(' '); >+ } >+ >+ >+ // check the names for keywords >+ for (var i=0; i<loadAddOns.length; i++) { >+ if (loadAddOns[i] == "none") { >+ loadAddOns = new Array(); >+ break; >+ } >+ else if (loadAddOns[i] == "all") { >+ loadAddOns = new Array(); >+ for (var AddOn in ContentFlowGlobal.AddOns) >+ loadAddOns.push(AddOn); >+ break; >+ } >+ } >+ >+ // init all AddOns that should be used and exist >+ for (var i=0; i<loadAddOns.length; i++) { >+ var AddOn = ContentFlowGlobal.AddOns[loadAddOns[i]]; >+ if (AddOn) { >+ this._loadedAddOns.push(loadAddOns[i]); >+ AddOn._init(this); >+ this.Container.addClassName('ContentFlowAddOn_'+AddOn.name); >+ if (AddOn.methods.onloadInit) >+ AddOn.methods.onloadInit(this); >+ } >+ } >+ >+ }, >+ >+ >+ _initGUI: function () { >+ >+ // resize >+ //if (!this.Browser.iPhone) { >+ var resize = this.resize.bind(this); >+ window.addEvent('resize', resize, false); >+ //} >+ //else { >+ //var g = this; >+ //window.addEvent('resize', function () { >+ //g._initSizes(); >+ //g._initStep(); >+ //} , false); >+ //} >+ >+ // pre and next buttons >+ var divs = this.Container.getElementsByTagName('div'); >+ for (var i = 0; i < divs.length; i++) { >+ if ($CF(divs[i]).hasClassName('preButton')) { >+ var pre = divs[i]; >+ var mt = this.conf.onclickPreButton; >+ pre.addEvent('click', mt, false); >+ } >+ else if (divs[i].hasClassName('nextButton')) { >+ var next = divs[i]; >+ var mt = this.conf.onclickNextButton; >+ next.addEvent('click', mt, false); >+ } >+ } >+ >+ // Container object >+ // mousewheel >+ if (this.conf.scrollWheelSpeed != 0) { >+ var wheel = this._wheel.bind(this); >+ if(window.addEventListener) this.Container.addEventListener('DOMMouseScroll', wheel, false); >+ this.Container.onmousewheel = wheel; >+ } >+ >+ // key strokes >+ var key = this._keyStroke.bind(this); >+ if (this.conf.keys && !this.Browser.iPhone) { >+ if (document.addEventListener) { >+ if (!this.Browser.Opera) { >+ var mouseoverCheck = document.createElement('div'); >+ mouseoverCheck.addClassName('mouseoverCheckElement'); >+ this.Container.appendChild(mouseoverCheck); >+ >+ if (this.Browser.WebKit) { >+ document.body.addEvent('keydown', function (event) { >+ if (mouseoverCheck.offsetLeft > 0) key(event) ; >+ }); >+ } else { >+ window.addEvent('keydown', function (event) { >+ if (mouseoverCheck.offsetLeft > 0) key(event) ; >+ }); >+ } >+ } >+ else { >+ this.Container.addEvent('keydown', key); >+ } >+ } >+ else { >+ this.Container.onkeydown = key; >+ } >+ } >+ >+ >+ // Flow object >+ if (this.conf.flowDragFriction > 0) { >+ var onDrag = function (event) { >+ var e = event; >+ if (event.touches) e = event.touches[0]; >+ var mouseX = e.clientX; >+ var mouseY = e.clientY; >+ >+ if (this.conf.verticalFlow) { >+ var dist = mouseY - this.Flow.mouseY; // px / or px per sec because _dragFlow wil be called in shorter intervalls if draged fast >+ var dim = this.Flow.dimensions.height; >+ } >+ else { >+ var dist = mouseX - this.Flow.mouseX; // px / or px per sec because _dragFlow wil be called in shorter intervalls if draged fast >+ var dim = this.Flow.dimensions.width; >+ } >+ var itemDist = (dist / dim )* (2*this.conf.visibleItems +1); // items >+ var target = this._currentPosition - itemDist * 2*this.conf.visibleItems / this.conf.flowDragFriction ; >+ >+ this.Flow.mouseX = mouseX; >+ this.Flow.mouseY = mouseY; >+ >+ this.moveToPosition(target, true); >+ }.bind(this); >+ >+ var beforeDrag = function () {}; >+ >+ var afterDrag = function (event) { >+ var t = Math.round(this._targetPosition); >+ if (Math.abs( t - this._currentPosition) > 0.001 ) >+ this.moveToPosition(t); >+ }.bind(this); >+ >+ >+ this.Flow.makeDraggable(onDrag, beforeDrag, afterDrag); >+ } >+ >+ // Scrollbar Object >+ if (this.Scrollbar) { >+ var click = function(event) { >+ if (!event) var event = window.event; >+ >+ if (!this.Scrollbar.clickLocked) { >+ var mouseX = event.clientX; >+ var positionOnScrollbar = mouseX - this.Scrollbar.position.left; >+ var targetIndex = Math.round(positionOnScrollbar/this.Scrollbar.dimensions.width * this.itemsLastIndex); >+ this.moveToIndex(targetIndex); >+ } >+ else >+ this.Scrollbar.clickLocked = false; >+ }.bind(this); >+ this.Scrollbar.addObserver('click', click); >+ } >+ >+ // Slider Object >+ if (this.Slider) { >+ >+ if (this.Browser.IE6) { >+ var virtualSlider = document.createElement('div'); >+ virtualSlider.className = 'virtualSlider'; >+ this.Slider.appendChild(virtualSlider); >+ } >+ >+ // position slider on scrollbar >+ this.Slider.setPosition = function (relPos) { >+ relPos = relPos - Math.floor(relPos) + this._getIndexByPosition(Math.floor(relPos)); >+ if (Math.round(relPos) < 0) >+ relPos = this.itemsLastIndex; >+ else if (relPos <= 0) >+ relPos = 0; >+ else if (Math.round(relPos) > this.itemsLastIndex) >+ relPos = 0; >+ else if (relPos >= this.itemsLastIndex) >+ relPos = this.itemsLastIndex; >+ >+ >+ if (this.items.length > 1) { >+ var sPos = (relPos / this.itemsLastIndex)* this.Scrollbar.dimensions.width; >+ } else { >+ var sPos = 0.5 * this.Scrollbar.dimensions.width; >+ } >+ this.Slider.style.left = sPos - this.Slider.center.x+ "px"; >+ this.Slider.style.top = this.Scrollbar.center.y - this.Slider.center.y +"px"; >+ >+ }.bind(this); >+ >+ // make slider draggable >+ var beforeDrag = function (event) { >+ this.Scrollbar.clickLocked = true; >+ }.bind(this); >+ >+ var onDrag = function (event) { >+ var e = event; >+ if (event.touches) e = event.touches[0]; >+ var selectedIndex = this._checkIndex((e.clientX - this.Scrollbar.position.left) / this.Scrollbar.dimensions.width * this.itemsLastIndex); >+ this._targetPosition = this._getPositionByIndex(selectedIndex); >+ this.Slider.setPosition(selectedIndex); >+ if (this.Position) this.Position.setLabel(selectedIndex); >+ this._initStep(true, true); >+ }.bind(this); >+ >+ var afterDrag = function (event) { >+ this._targetPosition = Math.round(this._targetPosition); >+ this.conf.onMoveTo(this._getItemByPosition(this._targetPosition)); >+ this._initStep(true); >+ }.bind(this); >+ >+ this.Slider.makeDraggable(onDrag, beforeDrag, afterDrag); >+ } >+ >+ >+ // Position object >+ if (this.Position) { >+ this.Position.setLabel = function (index) { >+ index = this._checkIndex(Math.round(index)); >+ if (this.items && this.items[index].label) >+ this.Position.innerHTML = this.items[index].label.innerHTML; >+ else >+ this.Position.innerHTML = index + 1; >+ }.bind(this); >+ } >+ >+ >+ this.globalCaption = this.Container.getChildrenByClassName('globalCaption')[0]; >+ this.loadIndicator = this.Container.getChildrenByClassName('loadIndicator')[0]; >+ }, >+ >+ /* ---------- init element sizes ---------- */ >+ _initSizes: function (x) { >+ //if (this.Browser.Konqueror4 && x != true) { >+ //var t = this; >+ //window.setTimeout( function () { t._initSizes(true) }, 0); >+ //return; >+ //} >+ >+ // sets this.maxHeight >+ this._initMaxHeight(); >+ >+ var scrollbarHeight = this._initScrollbarSize(); >+ >+ // reduce maxHeit if container has a fixed height >+ if (!this.conf.verticalFlow && this.Container.style.height && this.Container.style.height != "auto") >+ this.maxHeight -= scrollbarHeight; >+ >+ if (!this._activeItem) return; >+ >+ var mFS = this._findBiggestItem(); >+ >+ var pF = this.Flow.findPos(); >+ >+ /* set height / width of flow */ >+ if (this.conf.verticalFlow) { >+ this.Flow.style.width = mFS.width.width+"px"; >+ this.Flow.style.height =3* mFS.width.width * (1 + this.conf.reflectionHeight + this.conf.reflectionGap) + "px"; >+ } else { >+ this.Flow.style.height = mFS.height.height +(mFS.height.top - pF.top)+"px"; >+ } >+ >+ /* remove gap */ >+ var s = this.conf.verticalFlow ? mFS.width.width : mFS.height.height; >+ var cH = s /(1 + this.conf.reflectionHeight + this.conf.reflectionGap); >+ this.Flow.style.marginBottom = - (s - cH)+ "px"; >+ >+ this.Flow.dimensions = this.Flow.getDimensions(); >+ >+ if (!this.Browser.IE6) { >+ if (this.conf.verticalFlow && this.Container.clientWidth < this.Flow.dimensions.width) { >+ //this.Container.style.width = this.Flow.dimensions.width+"px"; >+ } >+ else if (this.Container.clientHeight < this.Flow.dimensions.height) { >+ this.Container.style.height = this.Flow.dimensions.height+"px"; >+ } >+ } >+ >+ if (this.conf.verticalFlow) { >+ this.Flow.center = {x: this.Flow.dimensions.height/2, y:mFS.width.width/2}; >+ } else { >+ this.Flow.center = {x: this.Flow.dimensions.width/2, y:mFS.height.height/2}; >+ } >+ >+ }, >+ >+ /* -------------------------------------------------------------------------------- */ >+ >+ _initScrollbarSize: function () { >+ var SB; >+ var SL; >+ var PO; >+ if (SB = this.Scrollbar) { >+ SB.setDimensions(); >+ var scrollbarHeight = SB.dimensions.height; >+ >+ if (SL = this.Slider) { >+ SL.setDimensions(); >+ scrollbarHeight += SL.dimensions.height; >+ >+ if (PO = this.Position) { >+ >+ var oldLabel = PO.innerHTML; >+ var maxH = maxW = 0; >+ PO.style.width = "auto"; >+ >+ if (this.items) { >+ for (var i=0; i < this.items.length; i++) { >+ var item = this.items[i]; >+ if (item.label) { >+ PO.innerHTML = item.label.innerHTML; >+ } >+ else { >+ PO.innerHTML = item.index; >+ } >+ var h = PO.clientHeight; >+ var w = PO.clientWidth; >+ if ( h > maxH) maxH = h; >+ if ( w > maxW) maxW = w; >+ } >+ } >+ else { >+ PO.innerHTML = " "; >+ maxH = PO.clientHeight; >+ maxW = PO.clientWidth; >+ } >+ >+ PO.innerHTML = oldLabel; >+ >+ PO.setDimensions(); >+ >+ PO.style.width = maxW +"px"; >+ PO.style.left = (SL.dimensions.width - maxW)/2 + "px"; >+ >+ var extraSpace = PO.position.top - SL.position.top; >+ if (extraSpace > 0) { >+ extraSpace += -SB.dimensions.height + maxH; >+ SB.style.marginBottom = extraSpace + "px"; >+ } >+ else { >+ extraSpace *= -1; >+ SB.style.marginTop = extraSpace + "px"; >+ } >+ scrollbarHeight += extraSpace; >+ } >+ } >+ } >+ else { >+ scrollbarHeight = 0; >+ } >+ >+ return scrollbarHeight; >+ >+ }, >+ >+ /* -------------------------------------------------------------------------------- */ >+ >+ _initMaxHeight: function () { >+ >+ if (this.conf.verticalFlow) { >+ var proportion = screen.width/screen.height; >+ var Csd = this.Container.style.width; >+ var Cdim = this.Container.clientWidth; >+ var Fsd = this.Flow.style.width; >+ var Fdim = this.Flow.clientWidth; >+ var Fdim_o = this.Flow.clientHeight; >+ } else { >+ var proportion = screen.height/screen.width; >+ var Csd = this.Container.style.height; >+ var Cdim = this.Container.clientHeight; >+ var Fsd = this.Flow.style.height; >+ var Fdim = this.Flow.clientHeight; >+ var Fdim_o = this.Flow.clientWidth; >+ } >+ >+ // set height of container and flow >+ if (this.ContainerOldDim) >+ Csd = this.ContainerOldDim; >+ if (this.FlowOldDim) >+ Fsd = this.FlowOldDim; >+ >+ this.ContainerOldDim = "auto"; >+ this.FlowOldDim = "auto"; >+ >+ >+ /* calc maxHeight */ >+ if (this.conf.maxItemHeight <= 0) { >+ >+ this.maxHeight = Fdim_o / 3 * proportion/1 * this.conf.scaleFactor; // divided by 3 because of left/center/right, yes it's a magic number >+ >+ if (this.conf.verticalFlow && (this.maxHeight == 0 || this.maxHeight > Fdim)) { >+ this.maxHeight = Fdim; >+ } >+ >+ if (Csd && Csd != "auto") { >+ var gap = this.conf.verticalFlow ? 0 : this.conf.reflectionGap; >+ var rH = this.conf.verticalFlow ? 0 : this.conf.reflectionHeight; >+ this.maxHeight = Cdim/ (this.conf.scaleFactor* (1 + rH + gap)); >+ this.ContainerOldDim = Csd; >+ } >+ else if (Fsd && Fsd != "auto") { >+ var gap = this.conf.verticalFlow ? 0 : this.conf.reflectionGap; >+ this.maxHeight = Fdim / (this.conf.scaleFactor* (1 + this.conf.reflectionHeight + gap)); >+ this.FlowOldDim = Fsd; >+ } >+ } >+ else { >+ this.maxHeight = this.conf.maxItemHeight; >+ } >+ }, >+ >+ /* -------------------------------------------------------------------------------- */ >+ >+ _findBiggestItem: function () { >+ >+ var currentItem = this._activeItem; >+ >+ var itemP = currentItem.pre; >+ var itemN = currentItem.next; >+ var mFS = maxFlowSize = { >+ width: { width: 0, left: 0, height:0, top: 0, item: null, rI: 0 }, >+ height: { width: 0, left: 0, height:0, top: 0, item: null, rI: 0 } >+ } >+ >+ >+ var checkMax = function (item, rI) { >+ var el = item.element; >+ el.style.display = "block"; >+ var p = el.findPos(); >+ var h = el.clientHeight; >+ var w = el.clientWidth; >+ if (h + p.top >= mFS.height.height + mFS.height.top) { >+ mFS.height.height = h; >+ mFS.height.top = p.top; >+ mFS.height.item = item; >+ mFS.height.rI = rI; >+ } >+ if (w + p.left >= mFS.width.width + mFS.width.left) { >+ mFS.width.width = w; >+ mFS.width.left = p.left; >+ mFS.width.item = item; >+ mFS.width.rI = rI; >+ } >+ el.style.display = "none"; >+ } >+ >+ var ocp = this._currentPosition; >+ this._currentPosition = this.conf.visibleItems+1; >+ >+ // find the position with highest y-value >+ for (var i=-this.conf.visibleItems; i <= this.conf.visibleItems; i++) { >+ currentItem.element.style.display = "none"; >+ this._positionItem(currentItem, i); >+ checkMax(currentItem, i); >+ } >+ >+ // find the biggest item >+ var index = mFS.height.rI; >+ for (var i=0; i < this.items.length; i++) { >+ var item = this.items[i]; >+ item.element.style.display = "none"; >+ this._positionItem(item, index); >+ checkMax(item, index); >+ } >+ >+ this._currentPosition = ocp; >+ >+ return mFS >+ }, >+ >+ >+ >+ /* >+ * ==================== Key strok ==================== >+ */ >+ >+ /* >+ * handles keystroke events >+ */ >+ _keyStroke: function(event) { >+ if(!event) var event = window.event; >+ >+ if (event.which) { >+ var keyCode = event.which; >+ } else if (event.keyCode) { >+ var keyCode = event.keyCode; >+ } >+ >+ if (this.conf.keys[keyCode]) { >+ this.conf.keys[keyCode].bind(this)(); >+ return Event.stop(event); >+ } >+ else { >+ return true; >+ } >+ }, >+ >+ /* >+ * ==================== mouse wheel ==================== >+ * Event handler for mouse wheel event >+ * http://adomas.org/javascript-mouse-wheel/ >+ */ >+ >+ _wheel: function (event) { >+ if (!event) var event = window.event; // MS >+ >+ var delta = 0; >+ if (event.wheelDelta) { >+ delta = event.wheelDelta/120; >+ } else if (event.detail) { >+ delta = -event.detail/3; >+ } >+ >+ if (delta) { >+ var target = this._targetPosition ; >+ if (delta < 0 ) { >+ target += (1 * this.conf.scrollWheelSpeed); >+ } else { >+ target -= (1 * this.conf.scrollWheelSpeed); >+ } >+ this.moveToPosition(Math.round(target)); >+ } >+ >+ return Event.stop(event); >+ }, >+ >+ >+ /* >+ * ==================== set global Caption ==================== >+ */ >+ _setGlobalCaption: function () { >+ if (this.globalCaption) { >+ this.globalCaption.innerHTML = ''; >+ if(this._activeItem && this._activeItem.caption) >+ this.globalCaption.appendChild(this._activeItem.caption.cloneNode(true)); >+ } >+ }, >+ >+ /* >+ * ==================== move items ==================== >+ */ >+ >+ /* >+ * intend to make a step >+ */ >+ _initStep: function (holdSlider, holdPos) { >+ if (this.Slider) { >+ if(holdSlider) { >+ this.Slider.locked = true; >+ } else { >+ this.Slider.locked = false; >+ } >+ } >+ this._holdPos = holdPos == true ? true : false; >+ if (!this._stepLock) { >+ this._stepLock = true; >+ this._step(); >+ } >+ }, >+ >+ /* >+ * make a step >+ */ >+ _step: function () { >+ >+ var diff = this._targetPosition - this._currentPosition; >+ var absDiff = Math.abs(diff); >+ if ( absDiff > 0.001) { // till activeItem is nearly at position 0 >+ >+ this._currentPosition += this.conf.flowSpeedFactor * this.conf.calcStepWidth(diff, absDiff, this.items.length, this.conf.visibleItems); >+ >+ var AI = this.items[(this._getIndexByPosition(this._currentPosition))]; >+ >+ if (AI && AI != this._activeItem) { >+ if (this._activeItem) this._activeItem.makeInactive(); >+ this._activeItem = AI; >+ this._activeItem.makeActive(); >+ this._setCaptionLabel(this._activeItem.index); >+ if (Math.abs(this._targetPosition - this._currentPosition) <= 0.5 ) this.conf.onReachTarget(this._activeItem); >+ } >+ >+ this._positionItems(); >+ >+ var st = this._step.bind(this); >+ window.setTimeout(st,this._millisecondsPerStep); >+ >+ } else if (!this._holdPos) { >+ if (this.Slider) this.Slider.locked = false; >+ this._currentPosition = Math.round(this._currentPosition); >+ if(this.Position && !this.Slider.locked && this._activeItem) { >+ this._setCaptionLabel(this._activeItem.index); >+ } >+ this._positionItems(); >+ this._stepLock = false; >+ } else { >+ this._stepLock = false; >+ } >+ >+ if (this.Slider && !this.Slider.locked) { >+ this.Slider.setPosition(this._currentPosition); >+ } >+ }, >+ >+ >+ >+/* ------------------------------------------------------------------------------------------------------ */ >+ >+ /* >+ * position items >+ */ >+ _positionItems: function () { >+ >+ if (this._lastStart) { >+ var item = this._lastStart; >+ while (item) { >+ item.element.style.display="none"; >+ item = item.next; >+ if (item == this._lastStart) break; >+ if (item && item.pre == this._lastEnd) break; >+ } >+ } >+ else { >+ this._lastStart = this._activeItem; >+ } >+ >+ if (!this._activeItem) return; >+ var currentItem = this._activeItem; >+ var itemP = currentItem.pre; >+ var itemN = currentItem.next; >+ >+ this._positionItem(currentItem, 0); >+ for (var i=1; i <= this.conf.visibleItems && 2*i < this.items.length ; i++) { >+ if (itemP) { >+ this._positionItem(itemP, -i); >+ this._lastStart = itemP; >+ itemP = itemP.pre; >+ } >+ if (itemN) { >+ this._positionItem(itemN, i); >+ this._lastEnd = itemN; >+ itemN = itemN.next; >+ } >+ } >+ >+ }, >+ >+ _positionItem: function (item, relativeIndex) { >+ >+ var conf = this.conf; >+ var vF = conf.verticalFlow; >+ >+ var els = item.element.style; >+ //els.display =" none"; >+ //if (els.display != "none") return; >+ >+ /* Index and position relative to activeItem */ >+ var p = item.position = this._currentPosition + relativeIndex; >+ var relativePosition = item.relativePosition = Math.round(p) - this._currentPosition; >+ var relativePositionNormed = item.relativePositionNormed = conf.visibleItems > 0 ? relativePosition/conf.visibleItems : 0; >+ var side = relativePosition < 0 ? -1 : 1; >+ side *= relativePosition == 0 ? 0 : 1; >+ item.side = side; >+ >+ var size = conf.calcSize(item); >+ size.height = Math.max(size.height, 0); >+ size.width = Math.max(size.width, 0); >+ if (item.content.origProportion) size = this._scaleImageSize(item, size); >+ item.size = size; >+ >+ var coords = item.coordinates = conf.calcCoordinates (item); >+ var relItemPos = item.relativeItemPosition = conf.calcRelativeItemPosition(item); >+ var zIndex = item.zIndex = conf.calcZIndex (item); >+ var fontSize = item.fontSize = conf.calcFontSize (item); >+ var opacity = item.opacity = conf.calcOpacity(item); >+ >+ size.height *= this.maxHeight; >+ size.width *= this.maxHeight; >+ >+ /* set position */ >+ var sA = vF ? size.height : size.width; >+ var sB = vF ? size.width : size.height; >+ var pX = this.Flow.center.x * ( 1 + coords.x ) + (relItemPos.x - 1) * sA/2; >+ var pY = this.maxHeight/2 * ( 1 + coords.y ) + (relItemPos.y - 1 )* sB/2; >+ els.left = (vF ? pY : pX)+"px"; >+ els.top = (vF ? pX : pY)+"px"; >+ >+ this._setItemSize(item, size); >+ >+ /* set opacity */ >+ if (conf.endOpacity != 1) { >+ this._setItemOpacity(item); >+ } >+ >+ /* set font size */ >+ if (!this.Browser.IE) els.fontSize = (fontSize * 100) +"%"; >+ >+ /* set z-index */ >+ els.zIndex = 32768 + Math.round(zIndex * this.items.length); // just for FF >+ >+ conf.onDrawItem(item); >+ >+ els.visibility = "visible"; >+ els.display = "block"; >+ }, >+ >+ _scaleImageSize: function (item, size, max) { >+ var sFL = this.conf.scaleFactorLandscape; >+ var sFP = this.conf.scaleFactorPortrait; >+ var vF = this.conf.verticalFlow; >+ var prop = item.content.origProportion; >+ var width = size.width; >+ var height = size.height; >+ var c = item.content; >+ >+ if (vF) { >+ if (prop <= 1) { >+ if (sFL != "max" && sFL != 1) { >+ height *= sFL; >+ width = Math.min(height * prop, max ? max : 1 ); >+ } >+ height = width / prop; >+ } >+ else if (prop > 1) { >+ if (sFP == "max") { >+ height = max ? max : 1; >+ } >+ else if (sFP != 1) { >+ width *= sFP; >+ height = Math.min(width/prop, max ? max : 1) >+ } >+ else { >+ height = width / prop; >+ } >+ width = height * prop; >+ } >+ } >+ else { >+ if (prop > 1) { >+ if (sFL != "max" && sFL != 1) { >+ width *= sFL; >+ height = Math.min(width / prop, max ? max : 1); >+ } >+ width = height * prop; >+ } >+ else if (prop <= 1) { >+ if (sFP == "max") { >+ width = max ? max : 1; >+ } >+ else if (sFP != 1) { >+ height *= sFP; >+ width = Math.min(height*prop, max ? max : 1); >+ } >+ else { >+ width = height * prop; >+ } >+ height = width / prop; >+ } >+ } >+ >+ height = isNaN(height) ? 0 : height; >+ width = isNaN(width) ? 0 : width; >+ >+ if (!max && this.conf.fixItemSize) { >+ >+ var propS = size.width / size.height; >+ >+ var max = Math.max(size.width, size.height); >+ var s = this._scaleImageSize(item, {width: max, height: max}, max); >+ >+ if (propS < 1) { >+ height = s.height/size.height; >+ width = height * prop / propS; >+ } >+ else { >+ width = s.width/size.width; >+ height = width / prop * propS; >+ } >+ >+ var h = height * 100; >+ var w = width * 100; >+ var mL= (1 - width)/2 * 100; >+ var mT= ( 1 - height ) / propS * 100 * (vF ? 0.5 : 1 ); >+ c.style.height = h+"%"; >+ if (item.reflection) item.reflection.style.height = h*this.conf.reflectionHeight+"%"; >+ c.style.width = w+"%"; >+ if (item.reflection) item.reflection.style.width = w+"%"; >+ c.style.marginLeft = mL+"%"; >+ if (item.reflection) item.reflection.style.marginLeft = mL+"%"; >+ c.style.marginTop = mT+"%"; >+ >+ item.element.style.overflow = "hidden"; >+ >+ return size; >+ } >+ else { >+ return {width: width, height: height}; >+ } >+ >+ }, >+ >+ _setItemSize: (function () { >+ if (ContentFlowGlobal.Browser.IE) { >+ var _setItemSize = function (item, size) { >+ if (!this.conf.fixItemSize) { >+ item.content.style.height = size.height+"px"; >+ } >+ else if (ContentFlowGlobal.Browser.IE6) { >+ var h = parseInt(item.content.style.height)/100; >+ item.content.style.height = size.height*h+"px"; >+ var mT = parseInt(item.content.style.marginTop)/100; >+ item.content.style.marginTop = size.height*mT+"px"; >+ } >+ if (item.reflection) { >+ var h = parseInt(item.content.style.height); >+ item.reflection.style.height = h*this.conf.reflectionHeight+"px"; >+ item.reflection.style.marginTop = h * this.conf.reflectionGap + "px"; >+ } >+ item.element.style.width = size.width +"px"; >+ item.element.style.height = size.height*(1+this.conf.reflectionHeight+this.conf.reflectionGap)+"px"; >+ } >+ } >+ else { >+ var _setItemSize = function (item, size) { >+ if (item.reflection) { >+ item.element.style.height = size.height*(1+this.conf.reflectionHeight + this.conf.reflectionGap) +"px"; >+ item.reflection.style.marginTop = size.height * this.conf.reflectionGap + "px"; >+ } >+ else if (this._reflectionWithinImage) { >+ item.element.style.height = size.height*(1+this.conf.reflectionHeight + this.conf.reflectionGap) +"px"; >+ } >+ else { >+ item.element.style.height = size.height +"px"; >+ } >+ item.element.style.width = size.width +"px"; >+ } >+ } >+ return _setItemSize; >+ >+ })(), >+ >+ _setItemOpacity: (function () { >+ if (ContentFlowGlobal.Browser.IE6) { >+ var _setItemOpacity = function (item) { >+ if (item.content.origSrc && item.content.origSrc.match(/\.png$/) ) { >+ var s = item.content.src; >+ item.content.src = item.content.origSrc; >+ item.content.style.filter = item.content.filterString+" progid:DXImageTransform.Microsoft.BasicImage(opacity="+item.opacity+")"; >+ item.content.src = s; >+ } >+ else { >+ item.content.style.filter = "progid:DXImageTransform.Microsoft.BasicImage(opacity="+item.opacity+")"; >+ } >+ if (item.reflection) item.reflection.style.filter = item.reflection.filterString+"progid:DXImageTransform.Microsoft.BasicImage(opacity="+item.opacity+")"; >+ } >+ } >+ else if (ContentFlowGlobal.Browser.IE) { >+ var _setItemOpacity = function (item) { item.element.style.filter = "progid:DXImageTransform.Microsoft.BasicImage(opacity="+item.opacity+")"; } >+ } >+ else { >+ var _setItemOpacity = function (item) { item.element.style.opacity = item.opacity; } >+ } >+ return _setItemOpacity; >+ })() >+ >+ >+}; >+ >+ >+/* ==================== extendig javascript/DOM objects ==================== */ >+ >+/* >+ * adds bind method to Function class >+ * http://www.digital-web.com/articles/scope_in_javascript/ >+ */ >+ >+if (!Function.bind) { >+ Function.prototype.bind = function(obj) { >+ var method = this; >+ return function () { >+ return method.apply(obj, arguments); >+ }; >+ }; >+} >+ >+ >+/* >+ * extending Math object >+ */ >+if (!Math.erf2) { >+ // error function (http://en.wikipedia.org/wiki/Error_function), implemented as erf(x)^2 >+ Math.erf2 = function (x) { >+ var a = - (8*(Math.PI -3)/(3*Math.PI*(Math.PI -4))); >+ var x2 = x*x; >+ var f = 1 - Math.pow(Math.E, -x2 * (4/Math.PI + a*x2)/(1+a*x2)); >+ return f; >+ }; >+} >+ >+if (!Math._2PI05) { >+ Math._2PI05 = Math.sqrt(2*Math.PI); >+} >+ >+if (!Math.normDist) { >+ // normal distribution >+ Math.normDist = function (x, sig, mu) { >+ if (!sig) var sig = 1; >+ if (!mu) var mu = 0; >+ if (!x) var x = - mu; >+ return 1/(sig * Math._2PI05) * Math.pow(Math.E, - (x-mu)*(x-mu)/(2*sig*sig) ); >+ }; >+} >+ >+if (!Math.normedNormDist) { >+ Math.normedNormDist = function (x, sig, mu) { >+ return this.normDist(x, sig, mu)/this.normDist(mu, sig, mu); >+ }; >+} >+ >+if (!Math.exp) { >+ Math.exp = function(x) { >+ return Math.pow(Math.E, x); >+ }; >+} >+ >+if (!Math.ln) { >+ Math.ln = Math.log; >+} >+ >+if (!Math.log2) { >+ Math.log2 = function (x) { >+ return Math.log(x)/Math.LN2; >+ }; >+} >+ >+if (!Math.log10) { >+ Math.log10 = function (x) { >+ return Math.log(x)/Math.LN10; >+ }; >+} >+ >+if (!Math.logerithm) { >+ Math.logerithm = function (x, b) { >+ if (!b || b == Math.E) >+ return Math.log(x); >+ else if (b == 2) >+ return Math.log2(x); >+ else if (b == 10) >+ return Math.log10(x); >+ else >+ return Math.log(x)/Math.log(b); >+ }; >+} >+ >+ >+/* >+ * extending Event object >+ */ >+if (!Event) var Event = {}; >+ >+if (!Event.stop) { >+ Event.stop = function (event) { >+ event.cancelBubble = true; >+ if (event.preventDefault) event.preventDefault(); >+ if (event.stopPropagation) event.stopPropagation(); >+ return false; >+ }; >+} >+ >+/* >+ * extending Element object >+ */ >+if (document.all && !window.opera) { >+ window.$CF = function (el) { >+ if (typeof el == "string") { >+ return window.$CF(document.getElementById(el)); >+ } >+ else { >+ if (CFElement.prototype.extend && el && !el.extend) CFElement.prototype.extend(el); >+ } >+ return el; >+ }; >+} else { >+ window.$CF = function (el) { >+ return el; >+ }; >+} >+ >+if (!window.HTMLElement) { >+ CFElement = {}; >+ CFElement.prototype = {}; >+ CFElement.prototype.extend = function (el) { >+ for (var method in this) { >+ if (!el[method]) el[method] = this[method]; >+ } >+ }; >+} >+else { >+ CFElement = window.HTMLElement; >+} >+ >+ >+/* >+ * Thanks to Peter-Paul Koch >+ * http://www.quirksmode.org/js/findpos.html >+ */ >+if (!CFElement.findPos) { >+ CFElement.prototype.findPos = function() { >+ var obj = this; >+ var curleft = curtop = 0; >+ try { >+ if (obj.offsetParent) { >+ curleft = obj.offsetLeft; >+ curtop = obj.offsetTop; >+ while (obj = obj.offsetParent) { >+ curleft += obj.offsetLeft; >+ curtop += obj.offsetTop; >+ } >+ } >+ } >+ catch (ex) {} >+ return {left:curleft, top:curtop}; >+ }; >+} >+ >+if (!CFElement.getDimensions) { >+ CFElement.prototype.getDimensions = function() { >+ return {width: this.clientWidth, height: this.clientHeight}; >+ }; >+} >+ >+/* >+ * checks if an element has the class className >+ */ >+if (!CFElement.hasClassName) { >+ CFElement.prototype.hasClassName = function(className) { >+ return (new RegExp('\\b'+className+'\\b').test(this.className)); >+ }; >+} >+ >+/* >+ * adds the class className to the element >+ */ >+if (!CFElement.addClassName) { >+ CFElement.prototype.addClassName = function(className) { >+ if(!this.hasClassName(className)) { >+ this.className += (this.className ? ' ':'') + className ; >+ } >+ }; >+} >+ >+/* >+ * removes the class className from the element el >+ */ >+if (!CFElement.removeClassName) { >+ CFElement.prototype.removeClassName = function(className) { >+ this.className = this.className.replace(new RegExp('\\b'+className+'\\b'), '').replace(/\s\s/g,' '); >+ }; >+} >+ >+/* >+ * removes or adds the class className from/to the element el >+ * depending if the element has the class className or not. >+ */ >+if (!CFElement.toggleClassName) { >+ CFElement.prototype.toggleClassName = function(className) { >+ if(this.hasClassName(className)) { >+ this.removeClassName(className); >+ } else { >+ this.addClassName(className); >+ } >+ }; >+} >+ >+/* >+ * returns all children of element el, which have the class className >+ */ >+if (!CFElement.getChildrenByClassName) { >+ CFElement.prototype.getChildrenByClassName = function(className) { >+ var children = new Array(); >+ for (var i=0; i < this.childNodes.length; i++) { >+ var c = this.childNodes[i]; >+ if (c.nodeType == 1 && $CF(c).hasClassName(className)) { >+ children.push(c); >+ } >+ } >+ return children; >+ }; >+} >+ >+/* >+ * Browser independent event handling method. >+ * adds the eventListener eventName to element el and attaches the function method to it. >+ */ >+if (!CFElement.addEvent) { >+ CFElement.prototype.addEvent = function(eventName, method, capture) { >+ if (this.addEventListener) >+ this.addEventListener(eventName, method, capture); >+ else >+ this.attachEvent('on'+eventName, method); >+ }; >+} >+ >+/* >+ * Browser independent event handling method. >+ * removes the eventListener eventName with the attached function method from element el. >+ */ >+if (!CFElement.removeEvent) { >+ CFElement.prototype.removeEvent = function(eventName, method, capture) { >+ if (this.removeEventListener) >+ this.removeEventListener(eventName, method, capture); >+ else >+ this.detachEvent('on'+eventName, method); >+ }; >+} >+ >+/* >+ * Browser independent event handling method. >+ * adds the eventListener eventName to element el and attaches the function method to it. >+ */ >+if (!window.addEvent) { >+ window.addEvent = function(eventName, method, capture) { >+ if (this.addEventListener) { >+ this.addEventListener(eventName, method, capture); >+ } else { >+ if (eventName != 'load' && eventName != 'resize') >+ document.attachEvent('on'+eventName, method); >+ else >+ this.attachEvent('on'+eventName, method); >+ } >+ }; >+} >+ >+/* >+ * Browser independent event handling method. >+ * removes the eventListener eventName with the attached function method from element el. >+ */ >+if (!window.removeEvent) { >+ window.removeEvent = function(eventName, method, capture) { >+ if (this.removeEventListener) { >+ this.removeEventListener(eventName, method, capture); >+ } else { >+ if (eventName != 'load' && eventName != 'resize') >+ document.detachEvent('on'+eventName, method); >+ else >+ this.detachEvent('on'+eventName, method); >+ } >+ }; >+} >+ >+/* ==================== start it all up ==================== */ >+ContentFlowGlobal.init(); >diff --git a/koha-tmpl/opac-tmpl/bootstrap/lib/contentflow/docu.html b/koha-tmpl/opac-tmpl/bootstrap/lib/contentflow/docu.html >new file mode 100755 >index 0000000..bbed664 >--- /dev/null >+++ b/koha-tmpl/opac-tmpl/bootstrap/lib/contentflow/docu.html >@@ -0,0 +1,1018 @@ >+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" >+ "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> >+<html xmlns="http://www.w3.org/1999/xhtml" lang="en"> >+<head> >+ <link rel="stylesheet" title="Standard" href="styles.css" type="text/css" media="screen" /> >+</head> >+<body> >+ >+ <h1 id="title"><img src="title.png"/></h1> >+ <h3 style="text-align: center; margin: 10px 0 30px 0; text-decoration: none;">version 1.0.0</h3> >+ >+ <ul id="menu"> >+ <li><a href="index.html">start</a></li> >+ <li><a href="docu.html">documentation</a></li> >+ <li><a href="changelog.html">changelog</a></li> >+ <li><a href="license.html">license</a></li> >+ <li><a href="mailto:contentflow@jacksasylum.eu">contact</a></li> >+ </ul> >+ >+ <div class="maincontent"> >+ >+<style> >+ .tab { >+ padding: 10px; >+ border: 1px solid #222; >+ float: left; >+ font-size: 18px; >+ background-color: #222; >+ margin-right: 5px; >+ } >+ >+ .tabItem { >+ display: none; >+ border: 1px solid #222; >+ padding: 2em; >+ margin-bottom: 2em; >+ } >+</style> >+<script> >+ window.activeTab = null; >+ window.activeTabs = []; >+ function toggleTab(tabblock, tab) { >+ var at = window.activeTabs[tabblock] >+ >+ at.style.borderBottomColor = "#222"; >+ at.style.backgroundColor = "#222"; >+ at.content.style.display = "none"; >+ >+ window.activeTabs[tabblock] = tab; >+ at = window.activeTabs[tabblock] >+ >+ at.style.borderBottomColor = "#000"; >+ at.style.backgroundColor = "#000"; >+ at.content.style.display = "block"; >+ } >+ window.initTabs = []; >+</script> >+ >+ >+ >+ <div class="maincontent"> >+ >+ >+ <div class="totop"> >+ <a href="" id="usageSub" onclick="return switchBlock('usage')">Usage</a> >+ <a href="" id="optionsSub" onclick="return switchBlock('options')">Options</a> >+ <a href="" id="methodsSub" onclick="return switchBlock('methods')">Methods</a> >+ <a href="" id="objectsSub" onclick="return switchBlock('objects')">Objects</a> >+ <a href="" id="keywordsSub" onclick="return switchBlock('keywords')">position Keywords</a> >+</div> >+ >+ <div id="usageBlock" class="block"> >+ <div id="Usage" name="Usage"></div> >+ >+ <div style="margin-bottom: -1px; z-imdex: 100; width: 100%;"> >+<a href="#" onclick="toggleTab('usage', this.firstChild); return false;"><div id="basicTab" class="tab" >Basic usage</div></a><a href="#" onclick="toggleTab('usage', this.firstChild); return false;"><div id="advancedTab" class="tab" >Advanced usage</div></a><a href="#" onclick="toggleTab('usage', this.firstChild); return false;"><div id="linksTab" class="tab" >Items as links</div></a><a href="#" onclick="toggleTab('usage', this.firstChild); return false;"><div id="fullTab" class="tab" >Full usage</div></a><a href="#" onclick="toggleTab('usage', this.firstChild); return false;"><div id="confTab" class="tab" >Configuration</div></a> <div class="clear"></div> >+ </div> >+ <script> >+ window.initTabs.push( function initTabs () { >+ var t = ["basic","advanced","links","full","conf"]; >+ var tabs = []; >+ for (var i=0; i<t.length; i++) { >+ tabs[i] = document.getElementById(t[i]+"Tab"); >+ tabs[i].content = document.getElementById(t[i]); >+ } >+ >+ if (tabs[0].content) { >+ //window.activeTab = tabs[0]; >+ //toggleTab(tabs[0]); >+ window.activeTabs['usage'] = tabs[0]; >+ toggleTab('usage', tabs[0]); >+ } >+ } >+ ); >+ >+ </script> >+ >+ <!-- BASIC USAGE --> >+ <div id="basic" class="tabItem"> >+ <ol> >+ <li> >+ First extract all files in the same directory. >+ <ul> >+ <li>To run ContentFlow you only need : 'contentflow.js', 'contentflow.css' and the 'img' directory.</li> >+ </ul> >+ </li> >+ >+ <div name="init" id="init"></div> >+ <li> >+ Now load the ContentFlow script by adding the following code to the head of your html file: >+ <pre><code> >+ <script language="JavaScript" type="text/javascript" src="PATH/contentflow.js"></script> >+ </code></pre> >+ Where PATH is the path to the directory where you extracted ContentFlow to. >+ </li> >+ >+ <li> >+ Create the needed (X)HTML structure. The minimal (X)HTML structure needed is something like this: >+ <pre><code> >+ <div class="ContentFlow"> >+ <div class="loadIndicator"><div class="indicator"></div></div> >+ <div class="flow"> >+ <img class="item" src="someImageFile.jpg" title="Your_Image_Title"/> >+ <b><!-- <i>Add as many items as you like.</i> --></b> >+ </div> >+ <div class="globalCaption"></div> >+ <div class="scrollbar"><div class="slider"><div class="position"></div></div></div> >+ </div> >+ </code></pre> >+ </li> >+ >+ <li> >+ That's it. Nothing more to do. >+ </li> >+ </ol> >+ </div> >+ >+ <!-- ITEMS AS LINKS --> >+ <div id="links" class="tabItem"> >+ <p>To utilize an item as a link just add an href attribute to the item or the content tag like this:</p> >+ <pre><code> >+ <div class="ContentFlow"> >+ <div class="flow"> >+ <div class="item" <b>href="YOUR_URL"</b>><img class="content" src="someImageFile.jpg"/></div> >+ </div> >+ </div> >+ </code></pre> >+ >+ or even >+ >+ <pre><code> >+ <div class="ContentFlow"> >+ <div class="flow"> >+ <img class="item" <b>href="YOUR_URL"</b> src="someImageFile.jpg"/> >+ </div> >+ </div> >+ </code></pre> >+ >+ <p>To be standard compliant just use an anker-tag as the item tag:</p> >+ <pre><code> >+ <div class="ContentFlow"> >+ <div class="flow"> >+ <<b>a</b> class="item" href="YOUR_URL"><img class="content" src="someImageFile.jpg"/></<b>a</b>> >+ </div> >+ </div> >+ </code></pre> >+ <p><u>Beware:</u> <i><a href="http://www.w3.org/TR/html401/struct/links.html#h-12.2.2" target="_blank">In this case no element within the item may contain any ankors !!!</a></i></p> >+ >+ <p>You can even use the target attribute to open the link in a new window:</p> >+ <pre><code> >+ <div class="ContentFlow"> >+ <div class="flow"> >+ <a class="item" href="YOUR_URL" <b>target="_blank"</b> ><img class="content" src="someImageFile.jpg"/></a> >+ </div> >+ </div> >+ </code></pre> >+ </div> >+ >+ <!-- ADVANCED USAGE --> >+ <div id="advanced" class="tabItem"> >+ <h3>Basic principles</h3> >+ The direct usage of an image tag as an item is a simplified form of the default HTML structure and will be converted internally. >+ <pre><code> >+ <img class="item" src="someImageFile.jpg" title="Your_Image_Title"/> >+ </code></pre> >+ >+ corresponds to >+ >+ <pre><code> >+ <div class="item"> >+ <img class="content" src="someImageFile.jpg"/> >+ <div class="caption">Your_Image_Title</div> >+ </div> >+ </code></pre> >+ >+ Not only images can be used as a content, but basicly any HTML elements you like. >+ >+ <p> >+ ContentFlow is very flexible, so if you don't like having the <b>loadIndicator</b>, the <b>globalCaption</b> or the <b>scrollbar</b> just remove them. >+ ContentFlow will utilize them if it detects them.<br/> >+ So the very basic HTML structure is something like this: >+ >+ </p> >+ <pre><code> >+ <div class="ContentFlow"> >+ <div class="flow"> >+ <img class="item" src="someImageFile.jpg"/> >+ </div> >+ </div> >+ </code></pre> >+ >+ <h3>What about styling?</h3> >+ <p> >+ If you want to change some styling you can do this globaly. Just rename the file '<b>mycontentflow.css.example</b>' to '<b>mycontentflow.css</b>', make the changes you like and you are ready to go.<br/> >+ For example, if you have a white background, I already have done the work for you. Just use the <a href=" addons.php ">'<b>white</b>' AddOn</a>. To utilze it just download it, extract it into the same directory as '<b>contentflow.js</b>' and add the <b>load</b> attribute to the script tag: >+ </p> >+ <code><pre> >+ >+ <script language="JavaScript" type="text/javascript" src="ContentFlow/contentflow.js" <b>load="<i>white</i>"</b>></script> >+ </pre></code> >+ >+ <h3>Configuration</h3> >+ <p>It's quite easy to change the <a href=" javascript: switchBlock('config',''); >+ ">configuration</a> of ContentFlow. >+ If you just want to fiddle with the configuration the fastest way is to create a new ContentFlow object in javascript: >+ </p> >+ <pre><code> >+ <script> >+ var myNewFlow = new ContentFlow('myFantasicFlow', { OPTION_1: value_1, OPTION_2: value_2, ... , OPTION_N: value_N } ) ; >+ </script> >+ </code></pre> >+ >+ <p> >+ So let's say you want to disable the reflection (set reflectionHeight to 0) and don't want the flow to wrap around at the end (set circularFlow to false). >+ You have to give the ContentFlow tag an id (let's call it 'myFantasicFlow') and insert the following script tag somewhere in your page: >+ </p> >+ <pre><code> >+ <script> >+ var myNewFlow = new ContentFlow('myFantasicFlow', { reflectionHeight: 0, circularFlow: false } ) ; >+ </script> >+ </code></pre> >+ </div> >+ >+ <!-- FULL USAGE --> >+ <div id="full" class="tabItem"> >+ >+ <h3>Files</h3> >+ <dl> >+ <dt>mycontentflow.css.example</dt> >+ <dd>This is an example file which will help you to style your ContentFlow globaly. Rename it to 'mycontentflow.css' to utilize it. </dd> >+ <dt>ContentflowAddOn_DEFAULT.js & ContentflowAddOn_DEFAULT.css</dt> >+ <dd>This are example files from which you can build your own <a href=" addons.php ">AddOn</a>.</dt> >+ </dl> >+ >+ <h3>Script tag</h3> >+ <p> >+ By adding the 'load' attribute to the script tag you can load one or more <a href=" addons.php ">AddOn</a>. >+ The AddOns have to be given in the form of a space separated list and are loaded in the same order as given. >+ </p> >+ >+ <pre><code> >+ <script language="JavaScript" type="text/javascript" src="PATH/contentflow.js" <b>load="SomeAddOnName SomeOtherAddOnName"</b> ></script> >+ </code></pre> >+ >+ <p style="font-size:0.9em"> >+ Where PATH is the path to the directory where you extracted ContentFlow to.<br/> >+ <i>'contentflow.js'</i> is a compressed (using <a href="http://developer.yahoo.com/yui/compressor/">yuicompressor</a>) version of <i>'contentflow_src.js'</i>. >+ If you run in any problem with the compressed version, just change <i>'contentflow.js'</i> to <i>'contentflow_src.js'</i> (and drop me note). >+ </p> >+ >+ >+ <h3>(X)HTML</h3> >+ <div name="loader" id="loader"></div> >+ <p> >+ This code example shows all (X)HTML elements and element attributes ContentFlow knows about: >+ </p> >+ <pre><code> >+ <div id="myFantasticFlow" class="ContentFlow" useAddOns="AddOns1 AddOn2 ..."> >+ <div class="loadIndicator"><div class="indicator"></div></div> >+ >+ <div class="flow"> >+ <div class="item" href="URL" target="TARGET" > >+ <img class="content" src="someImageFile.jpg" href="URL" target="TARGET" /> >+ <div class="caption">foobar</div> >+ <div class="label">Slider Label</div> >+ </div> >+ <b>(<i>Add as many items as you like.</i>)</b> >+ </div> >+ >+ <div class="globalCaption"></div> >+ <div class="scrollbar"> >+ <div class="preButton"></div> >+ <div class="nextButton"></div> >+ <div class="slider"><div class="position"></div></div> >+ </div> >+ </div> >+ </code></pre> >+ <p> >+ The '<u>loadIndicator</u>', '<u>caption</u>', '<u>label</u>', '<u>globalCaption</u>', '<u>scrollbar</u>', '<u>preButton</u>', '<u>nextButton</u>', '<u>slider</u> and '<u>position</u>' elements are <u>optional</u>. >+ ContentFlow will auto detect and utilize them if they exist. >+ </p> >+ <dl> >+ <div name="useAddOns" id="useAddOns"></div> >+ <dt>ContentFlow</dt> >+ <dd>Main ContentFlow wrapper. All elements of class 'ContentFlow' will be initialized.<br/> >+ If style attribute 'height' is set, maxItemHeight will be set accordingly.<br/> >+ <i><b>If the attribute 'useAddOns' is given only the listed AddOns will be used for this ContentFlow.</b></i> >+ </dd> >+ >+ <dt>flow</dt> >+ <dd>Wrapper around all flow items.<br/> >+ If style attribute 'height' is set, maxItemHeight will be set accordingly. >+ </dd> >+ <dl> >+ <div name="item" id="item"></div> >+ <dt>item</dt> >+ <dd> >+ If you want to use an item as a <b>link</b>, just add an <b>'href'</b> attribute to the <u>item</u> or it's <u>content</u>. A <b>'target'</b> attribute will be taken into account. >+ </dd> >+ <dl> >+ <dt>content</dt> >+ <dd>The actual content of an item. Can be anything.<br/> >+ If the content element is not an image, beware that the item itself will be scaled and <u>not</u> the content! >+ </dd> >+ <div name="caption" id="caption"></div> >+ <dt>caption<dt> >+ <dd>If exists will be used as the caption text of the item.<br/> >+ By default it is hidden and will be used for the global caption.<br/> >+ Can contain any HTML content.<br/> >+ To utilize the caption as a link, just make the whole caption a link (use an a-tag instead of a div-tag) or put a link inside it. >+ </dd> >+ <dt>label<dt> >+ <dd> >+ If exists and <u>position</u> element exists, it will be used as the position text label.<br/> >+ It's great to use the scrollbar as a timeline. >+ </dd> >+ </dl> >+ </dl> >+ >+ <dt>loadIndicator<dt> >+ <dd>If exists will show a loading indicator, while images are loaded.</dd> >+ >+ <dt>globalCaption<dt> >+ <dd>If exists and caption element of active item exists will show the caption of the active item.</dd> >+ >+ <div name="scrollbar" id="scrollbar"></div> >+ <dt>scrollbar<dt> >+ <dd>If exists will show a clickable scrollbar.</dd> >+ <dl> >+ <dt>slider<dt> >+ <dd>If exists will show a dragable button on the slider.</dd> >+ <dl> >+ <dt>position<dt> >+ <dd>If exists will show position label. Defaults to the item number.</dd> >+ </dl> >+ </dl> >+ >+ <div name="buttons" id="buttons"></div> >+ <dt>preButton<dt> >+ <dd>This element can be anywhere within the ContentFlow. If exists it will fire the onclickPreButton method.<br/> >+ By default it will move the flow to the previous item. >+ </dd> >+ <dt>nextButton<dt> >+ <dd>This element can be anywhere within the ContentFlow. If exists it will fire the onclickNextButton method.<br/> >+ By default it will move the flow to the next item. >+ </dd> >+ </dl> >+ >+ >+ <h3>Configuration</h3> >+ <p> >+ You can configure each ContentFlow independently or globally. Take a look at the >+ <a href=" javascript: switchBlock('config',''); >+ ">configuration</a> and <a href=" javascript: switchBlock('options',''); >+ ">options</a> >+ descriptions for an explanation. >+ </p> >+ >+ </div> >+ >+ <div id="conf" class="tabItem"> >+ >+ <p> >+ If you want to adjust ContentFlow to your needs you have two possibilities. First you can use an <a href=" addons.php ">AddOn</a> or you can use a runtime configuration. >+ </p> >+ >+ <!-- addon conf --> >+ <h3>AddOn configuration</h3> >+ I think, that is the more convenient method. >+ <ol> >+ <li>Copy the file 'ContentFlowAddOn_DEAFULT.js' to 'ContentFlowAddOn_MyAddOn.js'</li> >+ <li>Change the name of the AddOn (first line of code in the AddOn file) to 'MyAddOn'</li> >+ <li>Make the changes you like.</li> >+ <li> >+ Add the 'load' attribute to the script-tag which loads ContentFlow. Now add any AddOns you would like to use as a space separated list.<br/> >+ It should now look like this: >+ <pre><code> >+ <script language="JavaScript" type="text/javascript" src="PATH/contentflow.js" <b>load="MyAddOn"</b> ></script> >+ </code></pre> >+ </li> >+ <li>Reload your page :-)</li> >+ </ol> >+ >+ <!-- runtime conf --> >+ <div name="runtime" id="runtime"></div> >+ <h3>Runtime configuration</h3> >+ <p> >+ Create a new Object from the Class ContentFlow and pass the element containing the flow as its parameter, like this: >+ </p> >+ <pre><code> >+ <script language="JavaScript" type="text/javascript"> >+ var myNewFlow = new ContentFlow('myFantasicFlow'[, OPTIONS ]); >+ </script> >+ </code></pre> >+ <dl> >+ <dt>OPTIONS</dt> >+ <dd>is an optional <a href=" javascript: switchBlock('objects','#confObj'); >+ ">configuration data object</a> where co can define the <a href=" javascript: switchBlock('options','#options'); >+ ">options.</a></dd> >+ <!--<dt>initOnLoad</dt>--> >+ <!--<dd>is optional. If set to 'false' no auto initialization on 'window.load' will happen. You have to use the public method init() instead. <u>Default:</u> true</dd>--> >+ </dl> >+ </div> >+ >+ >+ </div> >+ <div id="configBlock" class="block"> >+ <h2>Configuration</h2> >+ <p> >+ If you want to adjust ContentFlow to your needs you have two possibilities. First you can use a <a href=" addons.php ">AddOn</a> or you can use a runtime configuration. >+ </p> >+ >+ <!-- addon conf --> >+ <h3>AddOn configuration</h3> >+ I think, that is the more convenient method. >+ <ol> >+ <li>Copy the file 'ContentFlowAddOn_DEAFULT.js' to 'ContentFlowAddOn_MyAddOn.js'</li> >+ <li>Change the name of the AddOn (first line of code in the AddOn file) to 'MyAddOn'</li> >+ <li>Make the changes you like.</li> >+ <li> >+ Add the 'load' attribute to the script-tag which loads ContentFlow. Now add any AddOns you would like to use as a space separated list.<br/> >+ It should now look like this: >+ <pre><code> >+ <script language="JavaScript" type="text/javascript" src="PATH/contentflow.js" <b>load="MyAddOn"</b> ></script> >+ </code></pre> >+ </li> >+ <li>Reload your page :-)</li> >+ </ol> >+ >+ <!-- runtime conf --> >+ <div name="runtime" id="runtime"></div> >+ <h3>Runtime configuration</h3> >+ <p> >+ Create a new Object from the Class ContentFlow and pass the element containing the flow as its parameter, like this: >+ </p> >+ <pre><code> >+ var myNewFlow = new ContentFlow('myFantasicFlow'[, OPTIONS ]); >+ </code></pre> >+ <dl> >+ <dt>OPTIONS</dt> >+ <dd>is an optional <a href=" javascript: switchBlock('objects','#confObj'); >+ ">configuration data object</a> where you can define the <a href=" javascript: switchBlock('options','#options'); >+ ">options.</a></dd> >+ <!--<dt>initOnLoad</dt>--> >+ <!--<dd>is optional. If set to 'false' no auto initialization on 'window.load' will happen. You have to use the public method init() instead. <u>Default:</u> true</dd>--> >+ </dl> >+ </div> >+ <div id="optionsBlock" class="block"> >+ >+ <div style="margin-bottom: -1px; z-imdex: 100; width: 100%;"> >+<a href="#" onclick="toggleTab('options', this.firstChild); return false;"><div id="genericTab" class="tab" >Generic</div></a><a href="#" onclick="toggleTab('options', this.firstChild); return false;"><div id="itemsTab" class="tab" >Items</div></a><a href="#" onclick="toggleTab('options', this.firstChild); return false;"><div id="flowTab" class="tab" >Flow interaction</div></a><a href="#" onclick="toggleTab('options', this.firstChild); return false;"><div id="eventsTab" class="tab" >Events</div></a><a href="#" onclick="toggleTab('options', this.firstChild); return false;"><div id="calcTab" class="tab" >Calculations</div></a> <div class="clear"></div> >+ </div> >+ <script> >+ window.initTabs.push( function initTabs () { >+ var t = ["generic","items","flow","events","calc"]; >+ var tabs = []; >+ for (var i=0; i<t.length; i++) { >+ tabs[i] = document.getElementById(t[i]+"Tab"); >+ tabs[i].content = document.getElementById(t[i]); >+ } >+ >+ if (tabs[0].content) { >+ //window.activeTab = tabs[0]; >+ //toggleTab(tabs[0]); >+ window.activeTabs['options'] = tabs[0]; >+ toggleTab('options', tabs[0]); >+ } >+ } >+ ); >+ >+ </script> >+<!-- >+ <p>The options can be given on manual object creation in the form of a <a href=" javascript: switchBlock('objects','#conf'); >+ ">data object</a>, set with the <a href=" javascript: switchBlock('methods',''); >+ ">setConfig method</a> or set within an AddOn.</p> >+ >+ <p>The following options can be used:</p> >+--> >+ <div id="generic" class="tabItem"> >+ <dl id="options" style="font-family: sans-serif"> >+ <div name="useAddOns" id="useAddOns"></div> >+ <dt><span>useAddOns</span> := string | array (default: all)</dt> >+ <dd>Addons this ContentFlow should use (all, none, [AddOn1, ... , AddOnN])</dd> >+ <dt><span>loadingTimeout</span> := int (default: 30000)</dt> >+ <dd>Grace time in milliseconds for images to load.</dd> >+ >+ <div name="circularFlow" id="circularFlow"></div> >+ <dt><span>circularFlow</span> := bool (default: true)</dt> >+ <dd>Should the Flow wrap around?</dt> >+ <dt><span>verticalFlow</span> := bool (default: false)</dt> >+ <dd>Will turn the ContentFlow 90 degree counterclockwise.<br/> >+ This will automatically swap calculated positions and sizes where needed. You do not have to adjust any calculations or sizes. Should work with any AddOn outof the box. >+ </dd> >+ <div name="opacity" id="opacity"></div> >+ <dt><span>visibleItems</span> := int (default: 0)</dt> >+ <dd>Number of items to show on either side of the active Item. If set to '0' it will be set to the square root of the number of items in the flow.</dd> >+ <dt><span>endOpacity</span> := float (default: 1)</dt> >+ <dd>The opacity of the last visible item on either side. The opacity of each item will be calculated by the 'calcOpacity' function.</dd> >+ <dt><span>startItem</span> := string | int (default: center)</dt> >+ <dd>Active Content item to start with. Can be either a <a href=" javascript: switchBlock('keywords','#pkw'); >+ ">position keyword</a> or an integer.</dd> >+ <dt><span>scrollInFrom</span> := string | int (default: pre)</dt> >+ <dd>Flow will start scrolling on load from this item. Can be either a <a href=" javascript: switchBlock('keywords','#pkw'); >+ ">position keyword</a>, "none" or an integer. If set to "none" the flow will not scroll in.</dd> >+ >+ </dl> >+ </div> >+ <div id="flow" class="tabItem"> >+ <dl> >+ <dt><span>flowSpeedFactor</span> := float (default: 1.0)</dt> >+ <dd>A flowSpeedFactor > 1 will speedup the scrollspeed, while a factor between 0 and 1 will slow it down</dd> >+ <div name="drag" id="drag"></div> >+ <dt><span>flowDragFriction</span> := float (default: 1.0)</dt> >+ <dd>Determines how hard it is to drag the flow.<br/> >+ If set to '0' dragging of the flow is deactivated. >+ </dd> >+ <div name="wheel" id="wheel"></div> >+ <dt><span>scrollWheelSpeed</span> := float (default: 1.0)</dt> >+ <dd>Scales by how many items the flow will be moved with one usage of the mousewheel.<br/> >+ Negative values will reverse the scroll direction.<br/> >+ If set to '0' scrolling with the mouse wheel is deactivated. >+ </dd> >+ <div name="keys" id="keys"></div> >+ <dt><span>keys</span> := object (default: see below)</dt> >+ <dd>Defines the keyCodes and the functions, which are triggerd on a keydown event within the ContentFlow. All defined functions are bound to the ContentFlow object.</br/> >+ To disable this functionality set keys = {} (empty object).<br/> >+ Default setting: >+ <code><pre style="font-family: monospace"> >+ >+ { >+ 13: function () { this._onclickActiveItem(this._activeItem) }, // return/enter key >+ 37: function () { this.moveTo('pre') }, // left arrow >+ 38: function () { this.moveTo('visibleNext') }, // up arrow >+ 39: function () { this.moveTo('next') }, // right arrow >+ 40: function () { this.moveTo('visiblePre') } // down arrow >+ } >+ </pre></code> >+ </dd> >+ >+ </dl> >+ </div> >+ <div id="items" class="tabItem"> >+ <dl> >+ <div name="reflection" id="reflection"></div> >+ >+ <dt><span>reflectionHeight</span> := float (default: 0.5)</dt> >+ <dd>Set the size of the reflection image relative to the original image</dd> >+ >+ <dt><span>reflectionGap</span> := float (default: 0.0)</dt> >+ <dd>Set the size of the gap between the image and the reflection image relative to the original image size</dd> >+ >+ <dt><span>reflectionColor</span> := string (default: transparent)</dt> >+ <dd>Set the "surface"-color of the reflection. Can be "none", "transparent", or #RRGGBB (hex RGB values)<br/> >+ If set to 'overlay' the image given by the option 'reflectionOverlaySrc' will be lain over the reflection. >+ </dd> >+ >+ <dt><span>scaleFactor</span> := float (default: 1.0)</dt> >+ <dd>Factor by which the <u>item</u> will be scaled.</dd> >+ >+ <dt><span>scaleFactorLandscape</span> := float | string (default: 1.0)</dt> >+ <dd>float := Factor to scale <u>content images</u> in landscape format by.<br/> >+ string := if set to 'max' the height of an landscape image content will be set to the height of the item. >+ </dd> >+ <dt><span>scaleFactorPortrait</span> := float | string (default: 1.0)</dt> >+ <dd>float := Factor to scale <u>content images</u> in portrait format by.<br/> >+ string := if set to 'max' the width of an portait image content will be set to the width of the item. >+ </dd> >+ >+ <dt><span>fixItemSize</span> := bool (default: false)</dt> >+ <dd>Fixes the item size, to the calculated size. No adjustments will be done. Images will be croped if bigger.</dd> >+ >+ <dt><span>maxItemHeight</span> := int (default: 0)</dt> >+ <dd>Maximum item height in px. If set to a value greater than '0' the item size will be calculated from this value instead relative to the width of the ContentFlow. >+ >+ <dt><span>relativeItemPosition</span> := string (deafult: top center)</dt> >+ <dd>Position of item relative to it's coordinate.<br/> >+ It can contain the keywords top/above, bottom/below, left, right and center.<br/> >+ So by default the item will be placed above the coordinate point and centered horizontally.<br/> >+ If set this option overrides the calcRelativeItemPosition option! >+ </dd> >+ >+ >+ >+ >+ >+<!-- >+ <dt><span>activeElement</span> := string (default: content)</dt> >+ <dd>This determents which part of each item will be handle the click events<br/> >+ can be 'content' or 'item'|'element' >+ </dd> >+--> >+ >+ </dl> >+ </div> >+ <div id="events" class="tabItem"> >+ <dl> >+ <div style="background-color: #222; padding: 1em 0.5em; margin: 1em auto"> >+ These functions will be bound to the ContenFlow object, so 'this' refers to the ContentFlow! >+ </div> >+ <div name="caItem" id="caItem"></div> >+ <dt><span>onclickInactiveItem</span> := function(obj item)</dt> >+ <dd>called if an inactive item is clicked.</dd> >+ >+ <dt><span>onclickActiveItem</span> := function(obj item)</dt> >+ <dd>called if the active item is clicked.</dd> >+ >+ <dt><span>onMakeInactive</span> := function(obj item)</dt> >+ <dd>called if the active item becomes an inactive item.</dd> >+ >+ <dt><span>onMakeActive</span> := function(obj item)</dt> >+ <dd>called if an item becomes the active item.</dd> >+ >+ <dt><span>onMoveTo</span> := function(obj item)</dt> >+ <dd>called each time a new target is set i.e by calling the moveTo method.<br/> >+ </dd> >+ >+ <dt><span>onReachTarget</span> := function(obj item)</dt> >+ <dd>called if the target item becomes the active item.</dd> >+ >+ <dt><span>onclickPreButton</span> := function(event event)</dt> >+ <dd>called if the 'pre' button item is clicked.</dd> >+ >+ <dt><span>onclickNextButton</span> := function(event event)</dt> >+ <dd>called if the 'next' button item is clicked.</dd> >+ >+<!-- <dt><span>onDrawItem</span> := function(obj item, float relativePosition, float relativePositionNormed, int side, obj size)</dt>--> >+ <dt><span>onDrawItem</span> := function(obj item)</dt> >+ <dd>called when ever an item is redrawn. Use with caution, because this method is easily called many thousend times !</dd> >+ </dl> >+ </div> >+ >+ <div id="calc" class="tabItem"> >+ <dl> >+ <div style="background-color: #222; padding: 1em 0.5em; margin: 1em auto"> >+ These functions will be bound to the ContenFlow object, so 'this' refers to the ContentFlow! >+ </div> >+ >+ <dt><span>calcStepWidth</span> := function(float diff)</dt> >+ <dd>called to set the calculation function of the width of each step to get the next position of the flow.<br/> >+ The function will be bound to the ContenFlow object, so 'this' refers to the ContentFlow!<br/> >+ float <b>'diff'</b> := targetItemPosition - currentPosition >+ returns: float >+ </dd> >+ >+ <dt><span>calcSize</span> :=function(obj item)</dt> >+ <dd>called to set the calculation function of the size of a visible item<br/> >+ returns an object of type size := {width: w, height: h}<br/> >+ </dd> >+ >+ <dt><span>calcCoordinates</span> := function(obj item)</dt> >+ <dd>called to calculate the position of an item element within the flow<br/> >+ returns an object of type position := {x: x, y: y}<br/> >+ </dd> >+ >+ <dt><span>calcRelativeItemPosition</span> := function(obj item)</dt> >+ <dd>called to calculate the position of an item relative to it's coordinates<br/> >+ Beware: this function will be overridden by the 'relativeItemPosition' option!<br/> >+ returns an object of type position := {x: x, y: y}<br/> >+ </dd> >+ >+ <dt><span>calcZIndex</span> := function(obj item)</dt> >+ <dd>called to set the calculation function of the z-index of each item. The z-index is only valid within the flow itself.<br/> >+ returns: int z (-32768 ≤ z ≤ 32768) >+ </dt> >+ >+ <dt><span>calcFontSize</span> := function(obj item)</dt> >+ <dd>called to set the calculation function of the relative font-size of an item<br/> >+ returns: float fs (0.0 ≤ fs) >+ </dt> >+ <dt><span>calcOpacity</span> := function(obj item)</dt> >+ <dd>called to calculate the opacity of each item.<br/> >+ returns: float o (0.0 ≤ opacity ≤ 1.0) >+ </dd> >+ </dl> >+</div> >+ </div> >+ <div id="methodsBlock" class="block"> >+ <h2 id="Methods" name="Methods"></h2> >+ <div style="margin-bottom: -1px; z-imdex: 100; width: 100%;"> >+<a href="#" onclick="toggleTab('methods', this.firstChild); return false;"><div id="methodsTab" class="tab" >Methods</div></a> <div class="clear"></div> >+ </div> >+ <script> >+ window.initTabs.push( function initTabs () { >+ var t = ["methods"]; >+ var tabs = []; >+ for (var i=0; i<t.length; i++) { >+ tabs[i] = document.getElementById(t[i]+"Tab"); >+ tabs[i].content = document.getElementById(t[i]); >+ } >+ >+ if (tabs[0].content) { >+ //window.activeTab = tabs[0]; >+ //toggleTab(tabs[0]); >+ window.activeTabs['methods'] = tabs[0]; >+ toggleTab('methods', tabs[0]); >+ } >+ } >+ ); >+ >+ </script> >+ <div id="methods" class="tabItem"> >+ <p>The following object methods are public.</p> >+ <dl> >+ <dt>setConfig(obj OPTIONS)</dt> >+ <dd>called to set options after object creation</dd> >+ >+ <dt>getItem(int index)</dt> >+ <dd>returns the 'item' object at given index</dd> >+ >+ <dt>getActiveItem()</dt> >+ <dd>called to get the currently active item. >+ returns the 'item' object of the active item. >+ </dd> >+ >+ <dt>getNumberOfItems()</dt> >+ <dd>called to get the number of items currently in the flow</dd> >+ >+ <dt>moveTo(int index | float pos | string keyword | obj item)</dt> >+ <dd>called to scroll to item.<br/> >+ 'index' := scroll to item with index 'index'<br/> >+ 'pos' := scroll to position 'pos'<br/> >+ 'keyword' := scroll to position given by <a href="#pkw">position keyword</a> >+ 'item' := scroll to item >+ </dd> >+ >+ <dt>resize()</dt> >+ <dd>called to reinitialize the size of the flow items, after the size of the flow has changed.<br/>Is called if window is resized.</dd> >+ >+ <div name="addItem" id="addItem"></div> >+ <dt>addItem(DOMnode element, int|string index)</dt> >+ <dd>called to add a new item 'element' to the flow at the position index. The element has to be a valid item element. So it must have at least this structure:<br/> >+ <div class="item"><img class="content" src="url/to/image"/></div><br/> >+ The index has to be an integer or one of the strings 'first', 'start', 'last' or 'end'.<br/> >+ returns: int index (index position of added item) >+ </dd> >+ >+ <dt>rmItem([int index])</dt> >+ <dd>called to remove an item from the flow. If the parameter index is given the element at the index position 'index' will be removed, else the currently active item will be removed. >+ returns: DOMnode el (cleaned item node) >+ </dd> >+ >+ </dl> >+ </div> >+ </div> >+ <div id="keywordsBlock" class="block"> >+ <h2 id="pkw" name="pkw"></h2> >+ <div style="margin-bottom: -1px; z-imdex: 100; width: 100%;"> >+<a href="#" onclick="toggleTab('keywords', this.firstChild); return false;"><div id="keywordsTab" class="tab" >position keywords</div></a> <div class="clear"></div> >+ </div> >+ <script> >+ window.initTabs.push( function initTabs () { >+ var t = ["keywords"]; >+ var tabs = []; >+ for (var i=0; i<t.length; i++) { >+ tabs[i] = document.getElementById(t[i]+"Tab"); >+ tabs[i].content = document.getElementById(t[i]); >+ } >+ >+ if (tabs[0].content) { >+ //window.activeTab = tabs[0]; >+ //toggleTab(tabs[0]); >+ window.activeTabs['keywords'] = tabs[0]; >+ toggleTab('keywords', tabs[0]); >+ } >+ } >+ ); >+ >+ </script> >+ <div id="keywords" class="tabItem"> >+ <dl> >+ <dt>'start', 'first'</dt> >+ <dd>first item</dd> >+ <dt>'end', 'last'</dt> >+ <dd>last item</dd> >+ <dt>'middle', 'center'</dt> >+ <dd>item in the middle</dd> >+ <dt>'pre', 'previous', 'left'</dt> >+ <dd>previous item</dd> >+ <dt>'next', 'right'</dt> >+ <dd>next item</dd> >+ <dt>'visible', 'visiblePre' 'visibleLeft'</dt> >+ <dd>leftmost visible item</dd> >+ <dt>'visibleNext', 'visibleRight'</dt> >+ <dd>rightmost visible item</dd> >+ </dl> >+ <p>Where ever you can use a position keyword you can also use an integer for an exact position. A sanity check will be done automatically.</p> >+</div> >+ </div> >+ <div id="objectsBlock" class="block"> >+ >+ <div style="margin-bottom: -1px; z-imdex: 100; width: 100%;"> >+<a href="#" onclick="toggleTab('objects', this.firstChild); return false;"><div id="cfg_objTab" class="tab" >ContentFlowGlobal</div></a><a href="#" onclick="toggleTab('objects', this.firstChild); return false;"><div id="cf_objTab" class="tab" >ContentFlow</div></a><a href="#" onclick="toggleTab('objects', this.firstChild); return false;"><div id="item_objTab" class="tab" >Item</div></a><a href="#" onclick="toggleTab('objects', this.firstChild); return false;"><div id="conf_objTab" class="tab" >Configuration</div></a> <div class="clear"></div> >+ </div> >+ <script> >+ window.initTabs.push( function initTabs () { >+ var t = ["cfg_obj","cf_obj","item_obj","conf_obj"]; >+ var tabs = []; >+ for (var i=0; i<t.length; i++) { >+ tabs[i] = document.getElementById(t[i]+"Tab"); >+ tabs[i].content = document.getElementById(t[i]); >+ } >+ >+ if (tabs[0].content) { >+ //window.activeTab = tabs[0]; >+ //toggleTab(tabs[0]); >+ window.activeTabs['objects'] = tabs[0]; >+ toggleTab('objects', tabs[0]); >+ } >+ } >+ ); >+ >+ </script> >+ >+ <div id="cfg_obj" class="tabItem"> >+ <p>ContentFlowGlobal is a globaly accessible object. >+ <code><pre style="font-family: monospace"> >+ >+ { >+ Flows := [ >+ ContentFlowObj_0, >+ ContentFlowObj_1, >+ ... >+ ], >+ >+ AddOns := { >+ AddOnName: AddOnObj, >+ ... >+ }, >+ >+ Browser := { >+ Opera := bool, >+ IE := bool, >+ IE6 := bool, >+ IE7 := bool, >+ IE8 := bool, >+ WebKit := bool, >+ iPhone := bool, >+ Chrome := bool, >+ Safari := bool, >+ Konqueror := bool, >+ Konqueror4 := bool, >+ Gecko := bool, >+ Gecko19 := bool >+ }, >+ >+ getAddOnConf := function (AddOnName), >+ >+ setAddOnConf := function (AddOnName, confObj) >+ >+ } >+ </pre></code> >+ </div> >+ >+ <div id="cf_obj" class="tabItem"> >+ <p>This is the basic structure of a ContentFlow object.</p> >+ <code><pre style="font-family: monospace"> >+ >+ { >+ Container := DOM-Element // DOM element of the '.ContentFlow' element >+ Flow := DOM-Element // DOM element of the '.flow' element >+ Scrollbar := DOM-Element // DOM element of the '.scrollbar' element >+ Slider := DOM-Element // DOM element of the '.slider' element >+ items := Array // [ item0, item1, ... , itemN ] >+ conf := conf obj // object containing the configuration options >+ Browser := obj // ContentFlowGlobal.Browser >+ } >+ </pre></code> >+ >+ </div> >+<!-- >+ <div id="gui_obj" class="tabItem"> >+ <p>A GUI element is a extended DOM object, with the following attributes.</p> >+ <code><pre style="font-family: monospace"> >+ >+ { >+ Dimensions := { >+ height: int, //px >+ width: int //px >+ }, >+ center := { >+ x: int, //px >+ y: int //px >+ } >+ } >+ </pre></code> >+ </div> >+ >+--> >+ <div id="conf_obj" class="tabItem"> >+ <div name="conf" id="conf"></div> >+ <p>The <a href=" javascript: switchBlock('options',''); >+ ">options</a> can be passed to the ContentFlow on creation, >+ by the <a href=" javascript: switchBlock('methods',''); >+ ">setConfig method</a> or >+ by an <a href=" addons.php ">AddOn</a> in the form of a data object.</p> >+ <div name="confObj" id="confObj"></div> >+ <code><pre style="font-family: monospace"> >+ >+ { >+ option1: value, >+ option2: value, >+ . >+ . >+ . >+ lastOption: value // beware: last option must not end with a comma ! >+ } >+ </pre></code> >+ </div> >+ >+ >+ <div id="item_obj" class="tabItem"> >+ <p>An 'item' object represents an item within the ContentFlow and has the following structure.</p> >+ <code><pre style="font-family: monospace"> >+ >+ { >+ element := DOM-ELEMENT // DOM element of the item >+ pre := item obj // the previous item >+ next := item obj // the next item >+ content := DOM-ELEMENT // DOM element of the item content >+ caption := DOM-ELEMENT // DOM element of the item caption >+ label := DOM-ELEMENT // DOM element of the item label >+ index := int // index of item >+ position := float // position on the internel position axis >+ relativePosition := float // relative position of item >+ // (-visibleItems ≤ relativePosition ≤ visibleItems) >+ relativePositionNormed := float // normed relative position of item >+ // (-1 ≤ relativePosition ≤ 1) >+ side := int // left,center,right (-1,0,1) >+ size := size obj // size object as returned by calcSize >+ // {width: float, height: float} (0 ≤ width, height ≤ 1) >+ <!-- >+ // {x: float, y: float} (0 ≤ x,y ≤ 1) >+ coordinates := position obj // relative coordinates within the Flow-element >+ // {x: float, y: float} (-1 ≤ x,y ≤ 1) >+ relativeItemPosition := position obj// >+ zIndex := int // relative zIndex of the item >+ fontSize := float // relative font size (0≤ fontSize ≤ 1) >+ opacity := float // opacity of the item (0≤ fontSize ≤ 1) >+--> >+ } >+ </pre></code> >+ </div> >+ >+ </div> >+ >+ >+ >+ >+ </div> >+ >+ >+ <!-- last 23 lines --> >+ <script> >+ var activeBlock; >+ var activeTab = null; >+ function switchBlock(ID, hash) { >+ if (!ID) ID = "usage"; >+ switch (show) { >+ case 'usage': >+ case 'config': >+ case 'options': >+ case 'methods': >+ case 'keywords': >+ case 'objects': >+ IDSUB = ID+"Sub"; >+ ID = ID+"Block"; >+ break; >+ default: >+ IDSUB = "usageSub"; >+ ID = "usageBlock"; >+ } >+ if (activeBlock) activeBlock.style.display = "none"; >+ if (activeTab) { >+ activeTab.style.color = "silver"; >+ activeTab.style.fontSize = "100%"; >+ } >+ activeBlock = document.getElementById(ID); >+ activeTab = document.getElementById(IDSUB); >+ if (activeBlock) activeBlock.style.display = "block"; >+ if (activeTab) { >+ activeTab.style.color = "white"; >+ activeTab.style.fontSize = "125%"; >+ >+ } >+ if (hash) >+ window.location.hash = hash; >+ >+ return false; >+ } >+ if (!show) var show = "usage"; >+ switchBlock(show); >+ >+ for (var i=window.initTabs.length; i>0; i--) { >+ window.initTabs[i-1](); >+ } >+ </script> >+</body> >+</html> >diff --git a/koha-tmpl/opac-tmpl/bootstrap/lib/contentflow/img/1x1_0.5_black.png b/koha-tmpl/opac-tmpl/bootstrap/lib/contentflow/img/1x1_0.5_black.png >new file mode 100755 >index 0000000000000000000000000000000000000000..976edff9f1aee8d173c69326eca86fe32a137737 >GIT binary patch >literal 82 >zcmeAS@N?(olHy`uVBq!ia0vp^j3CUx0wlM}@Gt=>rX+877l!}s{b%+AdEA~Zjv*Yf >d$q6gi85o)v8m@oW`~?(d@O1TaS?83{1OQs55>5aB > >literal 0 >HcmV?d00001 > >diff --git a/koha-tmpl/opac-tmpl/bootstrap/lib/contentflow/img/blank.gif b/koha-tmpl/opac-tmpl/bootstrap/lib/contentflow/img/blank.gif >new file mode 100755 >index 0000000000000000000000000000000000000000..e565824aafafe632011b281cba976baf8b3ba89a >GIT binary patch >literal 43 >qcmZ?wbhEHbWMp7uXkcLY4+e@qSs1y10y+#p0Fq%~V)9{Rum%7ZWeN!Z > >literal 0 >HcmV?d00001 > >diff --git a/koha-tmpl/opac-tmpl/bootstrap/lib/contentflow/img/loader.gif b/koha-tmpl/opac-tmpl/bootstrap/lib/contentflow/img/loader.gif >new file mode 100755 >index 0000000000000000000000000000000000000000..5f117fd81853bdfae799bef5cfedbec34ba407fb >GIT binary patch >literal 8238 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 > >literal 0 >HcmV?d00001 > >diff --git a/koha-tmpl/opac-tmpl/bootstrap/lib/contentflow/img/scrollbar_white.png b/koha-tmpl/opac-tmpl/bootstrap/lib/contentflow/img/scrollbar_white.png >new file mode 100755 >index 0000000000000000000000000000000000000000..6cac1e944b5b7a6829fe1f98680feab8bf60b7ec >GIT binary patch >literal 82 >zcmeAS@N?(olHy`uVBq!ia0vp^j3CUx0wlM}@Gt=>reY`05Dt#eH*O$7Zci7-5DwYo >cAN%DQm<}-R7hus01PU{Fy85}Sb4q9e019OfM*si- > >literal 0 >HcmV?d00001 > >diff --git a/koha-tmpl/opac-tmpl/bootstrap/lib/contentflow/img/slider_white.png b/koha-tmpl/opac-tmpl/bootstrap/lib/contentflow/img/slider_white.png >new file mode 100755 >index 0000000000000000000000000000000000000000..6938de7b56d5da676767492dd18f5ae1e73e4f0a >GIT binary patch >literal 178 >zcmeAS@N?(olHy`uVBq!ia0vp^0wB!60wlNoGJgf6n2Mb|LpV4>-?)JUvproLLp09! >zPTb9VK!Jz#t*wn%?F=?U9_9;`Tf8SKv}zoDAv*1k-#@OR(<elvdYz8B{p0dl^q9X? >z$cka9-?IQ$eTCXveUk+a#vOg`ruHQMb|K$FokpcCsu#=}Hn>`(>`1Fv(Hq=;K5E}@ >Z7TxfPNrF1>Ie^wOc)I$ztaD0e0syAUJ)Hmm > >literal 0 >HcmV?d00001 > >diff --git a/koha-tmpl/opac-tmpl/bootstrap/lib/contentflow/index.html b/koha-tmpl/opac-tmpl/bootstrap/lib/contentflow/index.html >new file mode 100755 >index 0000000..df22640 >--- /dev/null >+++ b/koha-tmpl/opac-tmpl/bootstrap/lib/contentflow/index.html >@@ -0,0 +1,113 @@ >+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" >+ "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> >+<html xmlns="http://www.w3.org/1999/xhtml" lang="en"> >+<head> >+ <link rel="stylesheet" title="Standard" href="styles.css" type="text/css" media="screen" /> >+ >+ <script language="JavaScript" type="text/javascript" src="contentflow.js"></script> >+ <script tyle="text/javascript"> >+ var cf = new ContentFlow('contentFlow', {reflectionColor: "#000000"}); >+ </script> >+</head> >+<body> >+ >+ <h1 id="title"><img src="title.png"/></h1> >+ <h3 style="text-align: center; margin: 10px 0 30px 0; text-decoration: none;">version 1.0.0</h3> >+ >+ <ul id="menu"> >+ <li><a href="index.html">start</a></li> >+ <li><a href="docu.html">documentation</a></li> >+ <li><a href="changelog.html">changelog</a></li> >+ <li><a href="license.html">license</a></li> >+ <li><a href="mailto:contentflow@jacksasylum.eu">contact</a></li> >+ </ul> >+ >+ <div class="maincontent"> >+ >+ <p> >+ ContentFlow is a flexible flow written in javascript, which can handle any kind of content. >+ It's distributed under the <a href="licens.html">MIT License</a>. >+ </p> >+ >+ <p> >+ With ContentFlow it is now possible to have any number of flows within one web page. >+ Each separately configurable, satisfying different visual needs. >+ </p> >+ <p> >+ It's easy to implement and to extend. >+ You are free to define your own methods for displaying content and interacting with it. >+ You can control all aspects of the flow without loosing the ease of use. >+ </p> >+ <p> >+ ContentFlow can handle different kinds of control, like keyboard and mouse, and can be used with and without a reflection. >+ For a complete list of features and compatibilities take a look at the <a href="http://www.jacksasylum.eu/ContentFlow/features.html">feature list</a>. >+ </p> >+ >+ <!-- ===== FLOW ===== --> >+ <div id="contentFlow" class="ContentFlow"> >+ <!-- should be place before flow so that contained images will be loaded first --> >+ <div class="loadIndicator"><div class="indicator"></div></div> >+ >+ <div class="flow"> >+ >+ <div class="item"> >+ <img class="content" src="pics/pic0.png"/> >+ <div class="caption">pic0: some stripes</div> >+ </div> >+ <div class="item"> >+ <img class="content" src="pics/pic1.png"/> >+ <div class="caption">pic1: some stripes</div> >+ </div> >+ <div class="item"> >+ <img class="content" src="pics/pic2.png"/> >+ <div class="caption">pic2: some stripes</div> >+ </div> >+ <div class="item"> >+ <img class="content" src="pics/pic1.png"/> >+ <div class="caption">pic1: some stripes</div> >+ </div> >+ >+ <div class="item"> >+ <img class="content" src="pics/pic0.png"/> >+ <div class="caption">pic0: some stripes</div> >+ </div> >+ <div class="item"> >+ <img class="content" src="pics/pic1.png"/> >+ <div class="caption">pic1: some stripes</div> >+ </div> >+ <div class="item"> >+ <img class="content" src="pics/pic2.png"/> >+ <div class="caption">pic2: some stripes</div> >+ </div> >+ <div class="item"> >+ <img class="content" src="pics/pic1.png"/> >+ <div class="caption">pic1: some stripes</div> >+ </div> >+ >+ <div class="item"> >+ <img class="content" src="pics/pic0.png"/> >+ <div class="caption">pic0: some stripes</div> >+ </div> >+ <div class="item"> >+ <img class="content" src="pics/pic1.png"/> >+ <div class="caption">pic1: some stripes</div> >+ </div> >+ <div class="item"> >+ <img class="content" src="pics/pic2.png"/> >+ <div class="caption">pic2: some stripes</div> >+ </div> >+ <div class="item"> >+ <img class="content" src="pics/pic1.png"/> >+ <div class="caption">pic1: some stripes</div> >+ </div> >+ >+ </div> >+ <div class="globalCaption"></div> >+ <div class="scrollbar"> >+ <div class="slider"><div class="position"></div></div> >+ </div> >+ >+ </div> >+ >+</body> >+</html> >diff --git a/koha-tmpl/opac-tmpl/bootstrap/lib/contentflow/license.html b/koha-tmpl/opac-tmpl/bootstrap/lib/contentflow/license.html >new file mode 100755 >index 0000000..534de8d >--- /dev/null >+++ b/koha-tmpl/opac-tmpl/bootstrap/lib/contentflow/license.html >@@ -0,0 +1,50 @@ >+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" >+ "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> >+<html xmlns="http://www.w3.org/1999/xhtml" lang="en"> >+<head> >+ <link rel="stylesheet" title="Standard" href="styles.css" type="text/css" media="screen" /> >+</head> >+<body> >+ >+ <h1 id="title"><img src="title.png"/></h1> >+ <h3 style="text-align: center; margin: 10px 0 30px 0; text-decoration: none;">version 1.0.0</h3> >+ >+ <ul id="menu"> >+ <li><a href="index.html">start</a></li> >+ <li><a href="docu.html">documentation</a></li> >+ <li><a href="changelog.html">changelog</a></li> >+ <li><a href="license.html">license</a></li> >+ <li><a href="mailto:contentflow@jacksasylum.eu">contact</a></li> >+ </ul> >+ >+ <div class="maincontent"> >+ <div style="width: 80ex; margin: 0 auto;"> >+ <p>The MIT License</p> >+ >+ <p>Copyright (c) 2007 - 2010 Sebastian Kutsch</p> >+ >+ <p> >+ Permission is hereby granted, free of charge, to any person obtaining a copy >+ of this software and associated documentation files (the "Software"), to deal >+ in the Software without restriction, including without limitation the rights >+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell >+ copies of the Software, and to permit persons to whom the Software is >+ furnished to do so, subject to the following conditions: >+ </p> >+ <p> >+ The above copyright notice and this permission notice shall be included in >+ all copies or substantial portions of the Software. >+ </p> >+ <p style="font-family: monospace;"> >+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR >+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, >+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE >+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER >+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, >+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN >+ THE SOFTWARE. >+ </p> >+ </div> >+ </div> >+</body> >+</html> >diff --git a/koha-tmpl/opac-tmpl/bootstrap/lib/contentflow/mycontentflow.css b/koha-tmpl/opac-tmpl/bootstrap/lib/contentflow/mycontentflow.css >new file mode 100755 >index 0000000..bdac3f3 >--- /dev/null >+++ b/koha-tmpl/opac-tmpl/bootstrap/lib/contentflow/mycontentflow.css >@@ -0,0 +1,3 @@ >+.ContentFlow .globalCaption { >+ color: #333333; >+} >diff --git a/koha-tmpl/opac-tmpl/bootstrap/lib/contentflow/mycontentflow.css.example b/koha-tmpl/opac-tmpl/bootstrap/lib/contentflow/mycontentflow.css.example >new file mode 100755 >index 0000000..0c5b660 >--- /dev/null >+++ b/koha-tmpl/opac-tmpl/bootstrap/lib/contentflow/mycontentflow.css.example >@@ -0,0 +1,119 @@ >+/* ========== ContentFlow ========== */ >+/* >+ * Within this file you can adjust the styling of ContentFlow >+ * to your personal needs. The default styling is the same as found on the >+ * project page. >+ * >+ * To utilze this file for global styleing, rename it to 'mycontentflow.css'. >+ */ >+ >+.ContentFlow { >+} >+ >+ /* ----- styling of items ----- */ >+ .ContentFlow .flow .item.active { >+ cursor: pointer; >+ } >+ .ContentFlow .flow .item .caption { >+ font-size: 100%; >+ font-weight: bold; >+ text-align: center; >+ color: white; >+ max-height: 30%; >+ bottom: 10%; >+ background: url(img/1x1_0.5_black.png); >+ width: 100%; >+ } >+ * html .ContentFlow .flow .item .caption { >+ background-image: none; >+ filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src='img/1x1_0.5_black.png'); >+ } >+ .ContentFlow .flow .item .caption a, >+ .ContentFlow .flow .item .caption a:link, >+ .ContentFlow .flow .item .caption a:visited, >+ .ContentFlow .flow .item .caption a:active, >+ .ContentFlow .flow .item .caption a:hover { >+ text-decoration: none; >+ color: white; >+ font-style: italic; >+ font-size: 0.8em; >+ } >+ .ContentFlow .flow .item .caption a:hover { >+ text-decoration: underline; >+ } >+ .ContentFlow .flow .item.active .caption { >+ /*display: block;*/ /* uncomment to show caption inside item */ >+ } >+ >+ /* ----- scrollbar ----- */ >+ .ContentFlow .scrollbar { >+ width: 50%; >+ margin: 0px auto; >+ margin-top: 10px; >+ height: 16px; >+ background: url(img/scrollbar_white.png) left center repeat-x; >+ position: relative; >+ } >+ >+ .ContentFlow .scrollbar .slider { >+ width: 16px; >+ height: 16px; >+ background: url(img/slider_white.png) center center no-repeat; >+ } >+ >+ /* only for IE <= 6 and a alphatransparent slider image */ >+ * html .ContentFlow .scrollbar .slider { >+ background-image: none; >+ filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=crop, src='img/slider_white.png'); >+ } >+ .ContentFlow .scrollbar .slider .position { >+ top: 120%; >+ font-size: 16px; >+ font-weight: bold; >+ color: silver >+ } >+ >+ /* ----- global caption ----- */ >+ .ContentFlow .globalCaption { >+ text-align: center; >+ font-weight: bold; >+ color: white; >+ font-size: 14px; >+ height: 20px; >+ margin: 2em auto; >+ } >+ .ContentFlow .globalCaption .caption { >+ } >+ .ContentFlow .globalCaption .caption a, >+ .ContentFlow .globalCaption .caption a:link, >+ .ContentFlow .globalCaption .caption a:visited, >+ .ContentFlow .globalCaption .caption a:active, >+ .ContentFlow .globalCaption .caption a:hover { >+ text-decoration: none; >+ color: white; >+ font-style: italic; >+ font-size: 0.8em; >+ } >+ >+ .ContentFlow .globalCaption .caption a:hover { >+ text-decoration: underline; >+ } >+ >+ /* ----- load indicator ----- */ >+ .ContentFlow .loadIndicator { >+ width: 100%; >+ height: 100%; >+ top: 0px; >+ left: 0px; >+ background: black; >+ } >+ .ContentFlow .loadIndicator .indicator { >+ background: url(img/loader.gif) center center no-repeat; >+ width: 100%; >+ height: 100%; >+ } >+ * html .ContentFlow .loadIndicator .indicator { >+ height: 100px; >+ } >+ >+/* ================================= */ >diff --git a/koha-tmpl/opac-tmpl/bootstrap/lib/contentflow/pics/pic0.png b/koha-tmpl/opac-tmpl/bootstrap/lib/contentflow/pics/pic0.png >new file mode 100755 >index 0000000000000000000000000000000000000000..01ad65e6d456bd3163240b35f0e861910ecf2d1d >GIT binary patch >literal 1208 >zcmb`HZA?>V6vxl)z4o@HrIb$Fpp5zkWYZ0tlhF}cv<+>L(l7`enXx0ABb&M=t<#OA >zy|sKOve+3NzHC^gvbZg&^<{wB7#GJ937b@qrHGwP8FWq*u~?;V?A}h2ZSLce=eg&c >z|L^4FoSY}ONvkR4aWXgnz*DOfl>o>reG!yWX2j+FltGM@r5nL@W!Wt%U}`s4DJeTY >zKi@v;^wGGktW*K^MVTrpU>j7g8Ua#-^hMy<XJSgkP3m$b?qz3)M1`9II;u4GtXff0 >zwdeXBUx{X1{uJhM=-iD<4U2Y?pL8L`wfh4rW9^~??<`?X?B34zRS(s#di$`-$L@Kc >z(~Yz%6h#P`ArQ;}9O)>ShL6W?2hS@74j|4H05K4bEQXdl4~9oieCvo}#KjMT-<bP* >zso-l%$n3T$cW2eiPsa6l^ZqNhKG@*xJ#o@lJIH*w)@0JWWy@T<4$wUMFv(SnE<0=! >z$oIh#0a=Z?_kjetOkff;o#3iq-Tx4H!y)L17ZE#Te7Y)S^kajlH|#(kJ-vNQmg;YC >zpNanf-{S*4&S8gbf*+h6){nkV_4#J7u$9-+8Z>S2meOwc7h3H$9e*Wwa3GKP)fky- >zFl915amUcZ-=(P%1uSQ<{u*rIOIX<YbmTP!oM%at(9H5b!_X-q4Usbp16eOYXUvK| >z>1glc9C?3MF08h+!J(Ly@uU#Knev~r#PFg;57%N=MEh^S^BW%{vMmx=KZhc1{aGw1 >zPspMEKF*LIl%>J3m=!#e{BgJ*dwrQa{ir%~P18@OQd<<;D)F)vFMMfRec<RdrTUHR >zU03m$3ss_SK}FfFt7Y|Y+VfGjw4k{rSoxi_(_RyF1x7AbcS}Wqk-~+UAMbYYf9_Tv >z5gI?0so+SWZ)lRA4qwR5cFfr@;*W~WI}&Zsmc+SmI*B>(RT49Z+ccJdKZ#k;mBb8i >zB{2|FG$v6=lrDY`E+=sjoTD+yC*$mgIX9g5Mhb7Xu7BKJvRUFLvalU0het$(9H27| >zmc6(?(HIrpt>}{VG7OeWarV~MkWc-O5g)CEYyqjn@|xj>QwuR!ys74_Y-UY3=XhVD >z@1)ncM;jHUMTO2fOJK`Xg%<9HQa+cJAl?a)4c?pkQ9^7n=d<*Ox3c1FCiz@XT13dD >zq~)_YVu;4-xMXpU7<CUm-<ZG<y_3#jP!g4e5w=(zi!3qcV}1!OjKjHUd{P?yyHgx7 >z>s_6)e6GKJTEuL4SHnZ?9#GW7isUmD$n9_mxFmgY!2;HtO*=27bS$O*B%oGm6t0c> >Gy?+9C%gsgr > >literal 0 >HcmV?d00001 > >diff --git a/koha-tmpl/opac-tmpl/bootstrap/lib/contentflow/pics/pic1.png b/koha-tmpl/opac-tmpl/bootstrap/lib/contentflow/pics/pic1.png >new file mode 100755 >index 0000000000000000000000000000000000000000..01e24cdd3c6db59a72a7afe61cd6baac202b836d >GIT binary patch >literal 1063 >zcmeAS@N?(olHy`uVBq!ia0y~yU`z($FO1AUkxTjaB7qcRage(c!@6@aFM%Ak0G|+7 >zApQUU|D`wQ-vvo0dAqwXbg;^L06Clm9+AZi4BWyX%*Zfnjs#GUy~NYkmHh^%l(+=% >z({mdt85o#ndAc};RNQ)d{b24L0|B>(^Di{IPd!j_DC`br>@4q@LN#9wo_Mk#_C}QF >zgFOl!G8HvyY=`+Hy8S1ql$TFdF)gp3uA=+y-T6sN9==<@>%VCEcX7|4^6%!JL8ax_ >z4{tbaxO(^h8ksW7XC=!|8!oqIUH8pUr)X<`;>6XpJl^l}PyJ;sv{%eizH^l0ds548 >zsfTgB1?I|k?s9xLIP}(S$6b!?(htj&@8q@I?k(6Ym}ibGxc#!@yW1}nzP~N`B0q<- >zAb<JdJGWnId@r*)wRdh`5rX^2){rsJoH4In@WHoq#=QG=xgXD)Kd76|@O?JRj(F80 >zx;Ww5=l{PJ&eEN5=j7Zwk-H*y{a;oht#!B0t9-$w(x6?eQ{OdtZC`XLHt?lc$S&Eb >z?;MuCUQ)uXb(eK&p6k-xi!SA^D6!VM+vs)O^QBnGE}%r0SGnub+W{}jLUu7vT{roX >z?uruekX@$Vx~&VQJG|U>L;u}@SmveHN&9ykzItm<iT4NjI}fvx<90dbDdK>t<wfe> >z<)6k0mhaZO8~m;=bl37bk5`rW@BF)}<ovoYJ@4;tvQCG-oENt?Zff3~-I5RAx$S5d >zd{@1j&HldIj`we+{?tf6+_ydZ!{^+V-`Cb%ygo_rUG#3ZcyG5I`9~#cb>~he$t$8$ >z-*tIyUwG;5ijw2`)AF2`-VS`p7qZLGYx{yru>mi`LUw6u-EH&QzW9>tijuig@*J1$ >zUT{3~@9qBJg~wN3cs!+myHI=QewptMcl>s6KZ+A5cfF(iD6eC8z2iIij^CVx(hv3A >zc8DwAxytc9s|Ds8V5*SSxO@I^PXW8v_s<5(cRpXb%WHhdR{!o@6wZdsm+#undX?|L >zyr$&4H6Dhq*Z0Kbo-gg*m}uT@pR2aC`UYpgd9UvqgdfbC`YuuZfUV};$9@gfLA#F6 >z71)jo&fCnoFOyrPyeR!;8aBwCQU#1WT#_|6#eT4|o78C9O?bo#%(x7mu6{1-oD!M< >Dvo8fk > >literal 0 >HcmV?d00001 > >diff --git a/koha-tmpl/opac-tmpl/bootstrap/lib/contentflow/pics/pic2.png b/koha-tmpl/opac-tmpl/bootstrap/lib/contentflow/pics/pic2.png >new file mode 100755 >index 0000000000000000000000000000000000000000..53242029a805f99cee1328cc06434211daa7d3c2 >GIT binary patch >literal 773 >zcmeAS@N?(olHy`uVBq!ia0y~yVEh8a$&AcEk&o5cMnH<OILO_JVcj{Imp~3%fKP}k >zkpBPw|I(ZD?}DV0yxm<GI#^{rfE>;OkH}&M25w;xW@MN(M*=9wUgGKN%6@}WN?bzr >zN96)p1_q`IPZ!6Kid%1QAIv=LAi#P-zvM#TO9$O0&ABIKJ(jK%nQm}grm3Ef>()^| >z$650yNc^iTPn3{Ld#226>$#4hVdfKQh6I&LW`>flJKh{;_GJ2csC55_y84B3{=W<T >zCvm@Oy`g{So&K5MAE&$C4L|D~dVP`Hs<^(8*zT$oRklH;x~~?#dOdMfb|8P~aS&y| >zzzjkS^~?#Pj4`eZicA&Oj0$JJZC+t>do2h*v$_4&;{3J=JWp==sW4Y=Q$FeNuRQz4 >zz2%HwZvQrE$g9?8<OpCASiqv-!0FH+)WD$1!05%mG=+gh14E+m^JMSaFAw}Yx%6$x >zgFjC$m01<k6=hn>TG;R0GM7(9ZThmyjYpnbDzTa%5j)#2|NUo%ZQm<F#wi)^GMl?E >z#qIjC%j;KO+<NWLB&pc+!g9?=?~FQkpVoM%*Sur*mq+g|t=!Fh^zKmx9*3y7?j3vl >z9(}UvI{n(5;hrmlxhR7RLpP&D0|?15Z0KMJ6KweG{e1d4{kid0`)j8CDH8d7+VPBj >zwc-9ZNB#(9)me7`Ocnfm`sM#;)6?Cr3%FnJw%E0=Yw_!D_we_6YzYhq^x)5@?VnEj >zoz>TTHhuGqcrnBMbB-VzcjeEdB$#oYXY}0-_sbmlvq}6jl9u}Vm+$re{$2Xn`@P=1 >zSe^q6Ks1lpL6Ff$sUeWXpo5`G&|x{#0*(YT2Ie1u4BZ@%*b1t7`sdP5pe~p{O6p$z >s@BjV&a8gyFP{V)wJg6({86Pk&Dp6Tir?>S2Fj+Eqy85}Sb4q9e07#QXEdT%j > >literal 0 >HcmV?d00001 > >diff --git a/koha-tmpl/opac-tmpl/bootstrap/lib/contentflow/styles.css b/koha-tmpl/opac-tmpl/bootstrap/lib/contentflow/styles.css >new file mode 100755 >index 0000000..3887c78 >--- /dev/null >+++ b/koha-tmpl/opac-tmpl/bootstrap/lib/contentflow/styles.css >@@ -0,0 +1,219 @@ >+body { >+ background: black; >+ color: white; >+ font-size: 10pt; >+ font-family: sans-serif; >+ margin: 0; >+ padding: 0 7%; >+} >+ >+a, >+a:link, >+a:visited, >+a:active, >+a:hover { >+ text-decoration: none; >+ color: white; >+ font-weight: bold; >+} >+a:hover { >+ text-decoration: underline; >+} >+ >+.clear { clear: both; } >+ >+img { border: none; } >+ >+h1 { >+ text-align: center; >+ text-decoration: underline; >+ font-family: serif; >+ color: white; >+ font-size: 1.8em; >+} >+h2 { >+ margin-top: 2.5em; >+ font-size: 1.7em; >+ text-decoration: underline; >+} >+h3 { >+ margin-top: 2em; >+ font-size: 1.3em; >+ text-decoration: underline; >+} >+p { >+ line-height: 150%; >+ text-align: justify; >+} >+pre { >+ font-family: sans-serif; >+ background: #222; >+} >+.simpleBlack { >+ background: black; >+ width: 80ex; >+ margin: 0 auto; >+ font-family: sans-serif; >+} >+ >+code { >+ font-family: monospace; >+ font-size: 0.9em; >+ line-height: 150%; >+} >+ >+dl { >+ margin-left: 4ex; >+} >+ >+ dl dt { >+ font-size: 0.9em; >+ font-weight: bold; >+ color: #eee; >+ font-family: monospace; >+ } >+ dl dd { >+ margin-bottom: 1.5em; >+ color: #ccc; >+ font-size: 0.85em; >+ line-height: 1.5em; >+ } >+ >+ >+ol { >+} >+ ol li { >+ margin-bottom: 1em; >+ line-height: 150%; >+ } >+ >+ul { >+} >+ ul li { >+ margin-bottom: 0; >+ } >+/* ------------------------------------------------------------------------- */ >+ >+#title { >+ margin: 0px auto; >+} >+ >+#sponsor { >+ position: absolute; >+ right: 7%; >+ font-size: 10px; >+ height: 66px; >+ line-height: 66px; >+ padding: 0 20px; >+} >+ >+div.maincontent { >+ margin: 0px auto 20pt auto; >+} >+ >+#menu { >+ display: block; >+ text-align: center; >+ background: #222; >+ padding: 1em; >+ margin: 2em auto 4em auto; >+} >+ >+ #menu li { >+ display: inline; >+ padding: 0px 20px; >+ } >+ >+.totop { >+ text-align: center; >+ margin: 4em 10%; >+ padding: 0.25em; >+ background: #161616; >+} >+ .totop a { >+ margin-right: 7%; >+ color: silver; >+ } >+ >+ >+.block { >+ display: none; >+} >+ >+ >+#browserComp { >+ border-collapse: collapse; >+ margin: 40px auto; >+} >+ #browserComp caption { >+ text-align: center; >+ margin: 20px auto; >+ font-size: 1.1em; >+ font-weight: bold; >+ } >+ #browserComp th { >+ font-size: 10px; >+ padding: 5px 10px; >+ border-bottom: 1px solid silver; >+ } >+ #browserComp th img { >+ width: 22px; >+ } >+ #browserComp td { >+ text-align: center; >+ } >+ #browserComp th.feature, >+ #browserComp td.feature { >+ text-align: right; >+ padding: 5px; >+ padding-right: 10px; >+ border-right: 1px solid silver; >+ } >+ >+.addon { >+ border: 1px solid #222; >+ padding: 20px; >+ margin-bottom: 20px; >+ background: #222; >+} >+ .addon .flowBox { >+ width: 500px; >+ margin-right: 40px; >+ float: left; >+ } >+ .addon .discription { >+ margin-left: 540px; >+ } >+ .addon .title { >+ line-height: 1.3em; >+ } >+ .addon .title h3 { >+ margin: 0; >+ display: inline; >+ } >+ .addon .title .by { >+ margin-left: 2em; >+ font-size: 0.8em; >+ text-decoration: none; >+ } >+ .addon p { >+ font-size: 0.9em; >+ } >+ .addon .comment { >+ margin-top: 2em; >+ font-style: italic; >+ } >+ .addon .download { >+ font-size: 0.8em; >+ float: right; >+ margin: 0 0 2em 4em; >+ line-height: 1.5em; >+ } >+ .addon .download a { >+ font-weight: normal; >+ } >+ >+#info { /* for example.php */ >+ color: white; >+ /*display: none;*/ >+} >diff --git a/koha-tmpl/opac-tmpl/bootstrap/lib/contentflow/title.png b/koha-tmpl/opac-tmpl/bootstrap/lib/contentflow/title.png >new file mode 100755 >index 0000000000000000000000000000000000000000..a3ed0364868f215d786e95466990a08296c71cef >GIT binary patch >literal 3947 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 > >literal 0 >HcmV?d00001 > >-- >1.9.1
You cannot view the attachment while viewing its details because your browser does not support IFRAMEs.
View the attachment on a separate page
.
View Attachment As Diff
View Attachment As Raw
Actions:
View
|
Diff
|
Splinter Review
Attachments on
bug 10756
:
51173
|
51174
|
51175
|
51176
|
51177
|
51187