diff --git a/README.md b/README.md new file mode 100644 index 0000000..f3cfb40 --- /dev/null +++ b/README.md @@ -0,0 +1,32 @@ + +## Simple book gui for gmod made with html5 + +### Installation + +Just place `book.lua` file at `.../lua/autorun/client/` folder + +### Use + +To create a book gui just follow an example below + +```lua +local testbook = vgui.Create("Book") +testbook:Draw({ + title = "Test Title", + subtitle = "Test Subtitle", + pages = { + "hello world page", + [[ +
+ Hello World! +
+ +
+ ]] + } +}) +``` + +### Download + +[Download book.lua](https://mestima.github.io/gmod/books/book.lua) \ No newline at end of file diff --git a/book.lua b/book.lua new file mode 100644 index 0000000..e176c03 --- /dev/null +++ b/book.lua @@ -0,0 +1,171 @@ + +local w, h = ScrW()/2, ScrH()/2 + +local PANEL = {} + +function PANEL:Paint(w, h) + draw.RoundedBox(0, 0, 0, w, h, Color(255,255,255,255)) +end + +--[[ + local data = { + pages = {}, + title = "", + subtitle = "" + } +]]-- + +function PANEL:Draw(dta) + local data = dta + if !data then data = {} end + if !data.pages then data.pages = {""} end + if !data.title then data.title = "" end + if !data.subtitle then data.subtitle = "" end + local content = "" + for i = 2, #data.pages, 2 do + content = content .. string.format([[ +
+
+

%s

+
+
+

%s

+
+
+ ]], data.pages[i], data.pages[i+1] || "") + end + + self.page = vgui.Create("DHTML", self) + self.page:Dock(FILL) + self.page:SetHTML(string.format([[ + + + + + + + + + + + + +
+
+ +
+
+
+

%s%s

+
+
+

%s

+
+
+ ]], data.title, data.subtitle, data.pages[1]) .. content .. [[ +
+ + + +
+ +
+ + + + + + + + ]]) +end + +function PANEL:Init() + self:SetSize(w , h) + self:SetPos(w/2, h/2) + self:SetTitle("") + self:MakePopup() +end + +vgui.Register("Book", PANEL, "DFrame") diff --git a/css/bookblock.css b/css/bookblock.css new file mode 100644 index 0000000..43fe7a6 --- /dev/null +++ b/css/bookblock.css @@ -0,0 +1,183 @@ +.bb-bookblock { + width: 400px; + height: 300px; + margin: 0 auto; + position: relative; + z-index: 100; + -webkit-perspective: 1300px; + perspective: 1300px; + -webkit-backface-visibility: hidden; + backface-visibility: hidden; +} + +.bb-page { + position: absolute; + -webkit-transform-style: preserve-3d; + transform-style: preserve-3d; + -webkit-transition-property: -webkit-transform; + transition-property: transform; +} + +.bb-vertical .bb-page { + width: 50%; + height: 100%; + left: 50%; + -webkit-transform-origin: left center; + transform-origin: left center; +} + +.bb-horizontal .bb-page { + width: 100%; + height: 50%; + top: 50%; + -webkit-transform-origin: center top; + transform-origin: center top; +} + +.bb-page > div, +.bb-outer, +.bb-content, +.bb-inner { + position: absolute; + height: 100%; + width: 100%; + top: 0; + left: 0; + -webkit-backface-visibility: hidden; + backface-visibility: hidden; +} + +.bb-vertical .bb-content { + width: 200%; +} + +.bb-horizontal .bb-content { + height: 200%; +} + +.bb-page > div { + width: 100%; + -webkit-transform-style: preserve-3d; + transform-style: preserve-3d; +} + +.bb-vertical .bb-back { + -webkit-transform: rotateY(-180deg); + transform: rotateY(-180deg); +} + +.bb-horizontal .bb-back { + -webkit-transform: rotateX(-180deg); + transform: rotateX(-180deg); +} + +.bb-outer { + width: 100%; + overflow: hidden; + z-index: 999; +} + +.bb-overlay, +.bb-flipoverlay { + background-color: rgba(0, 0, 0, 0.7); + position: absolute; + top: 0px; + left: 0px; + width: 100%; + height: 100%; + opacity: 0; +} + +.bb-flipoverlay { + background-color: rgba(0, 0, 0, 0.2); +} + +.bb-bookblock.bb-vertical > div.bb-page:first-child, +.bb-bookblock.bb-vertical > div.bb-page:first-child .bb-back { + -webkit-transform: rotateY(180deg); + transform: rotateY(180deg); +} + +.bb-bookblock.bb-horizontal > div.bb-page:first-child, +.bb-bookblock.bb-horizontal > div.bb-page:first-child .bb-back { + -webkit-transform: rotateX(180deg); + transform: rotateX(180deg); +} + +/* Content display */ +.bb-content { + background: #fff; +} + +.bb-vertical .bb-front .bb-content { + left: -100%; +} + +.bb-horizontal .bb-front .bb-content { + top: -100%; +} + +/* Flipping classes */ +.bb-vertical .bb-flip-next, +.bb-vertical .bb-flip-initial { + -webkit-transform: rotateY(-180deg); + transform: rotateY(-180deg); +} + +.bb-vertical .bb-flip-prev { + -webkit-transform: rotateY(0deg); + transform: rotateY(0deg); +} + +.bb-horizontal .bb-flip-next, +.bb-horizontal .bb-flip-initial { + -webkit-transform: rotateX(180deg); + transform: rotateX(180deg); +} + +.bb-horizontal .bb-flip-prev { + -webkit-transform: rotateX(0deg); + transform: rotateX(0deg); +} + +.bb-vertical .bb-flip-next-end { + -webkit-transform: rotateY(-15deg); + transform: rotateY(-15deg); +} + +.bb-vertical .bb-flip-prev-end { + -webkit-transform: rotateY(-165deg); + transform: rotateY(-165deg); +} + +.bb-horizontal .bb-flip-next-end { + -webkit-transform: rotateX(15deg); + transform: rotateX(15deg); +} + +.bb-horizontal .bb-flip-prev-end { + -webkit-transform: rotateX(165deg); + transform: rotateX(165deg); +} + +.bb-item { + width: 100%; + height: 100%; + position: absolute; + top: 0; + left: 0; + display: none; + background: #fff; +} + +/* No JS */ +.no-js .bb-bookblock, +.no-js ul.bb-custom-grid li { + width: auto; + height: auto; +} + +.no-js .bb-item { + display: block; + position: relative; +} diff --git a/css/default.css b/css/default.css new file mode 100644 index 0000000..886fd92 --- /dev/null +++ b/css/default.css @@ -0,0 +1,73 @@ +@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700); + +*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } +body, html { font-size: 100%; padding: 0; margin: 0; height: 100%;} + +body { + font-family: 'Lato', Calibri, Arial, sans-serif; + color: #777; + background: #f6f6f6; +} + +a { + color: #555; + text-decoration: none; + outline: none; +} + +a:hover, +a:active { + color: #777; +} + +a img { + border: none; +} + +.container > header { + margin: 0 auto; + padding: 2em; +} + +.container { + height: 100%; +} + +.container > header { + text-align: center; + background: rgba(0,0,0,0.01); +} + +.container > header h1 { + font-size: 2.625em; + line-height: 1.3; + margin: 0; + font-weight: 300; +} + +.container > header span { + display: block; + font-size: 60%; + opacity: 0.3; + padding: 0 0 0.6em 0.1em; +} + +.main body { + color: #999; + background: #fff2e3; + overflow: hidden; +} + +.main a { + color: #1baede; +} + +.main a:hover, +.main a:active { + opacity: 0.6; +} + +.main a { + background: #1baede; + color: #fff; +} diff --git a/css/style.css b/css/style.css new file mode 100644 index 0000000..cb99bcd --- /dev/null +++ b/css/style.css @@ -0,0 +1,161 @@ +@font-face { + font-family: 'arrows'; + src:url('https://mestima.github.io/gmod/books/fonts/arrows.eot'); + src:url('https://mestima.github.io/gmod/books/fonts/arrows.eot?#iefix') format('embedded-opentype'), + url('https://mestima.github.io/gmod/books/fonts/arrows.woff') format('woff'), + url('https://mestima.github.io/gmod/books/fonts/arrows.ttf') format('truetype'), + url('https://mestima.github.io/gmod/books/fonts/arrows.svg#arrows') format('svg'); + font-weight: normal; + font-style: normal; +} + +.bb-custom-wrapper { + width: 100%; + height: 100%; + position: relative; +} + +.bb-custom-wrapper .bb-bookblock { + width: 100%; + height: 100%; + -webkit-perspective: 2000px; + perspective: 2000px; +} + +.bb-custom-side { + width: 50%; + float: left; + height: 100%; + overflow: hidden; + background: #fff; + /* Centering with flexbox */ + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: flex; + -webkit-flex-direction: row; + flex-direction: row; + -webkit-flex-wrap: wrap; + flex-wrap: wrap; + -webkit-box-pack: center; + -moz-box-pack: center; + -webkit-justify-content: center; + justify-content: center; + -webkit-box-align: center; + -moz-box-align: center; + -webkit-align-items: center; + align-items: center; +} + +.bb-custom-firstpage h1 { + font-size: 2.625em; + line-height: 1.3; + margin: 0; + font-weight: 300; + background: #fff; +} + +.bb-custom-firstpage h1 span { + display: block; + font-size: 60%; + opacity: 0.3; + padding: 0 0 0.6em 0.1em; +} + +.bb-custom-firstpage { + text-align: center; + padding-top: 15%; + width: 50%; + float: left; + height: 100%; +} + +.bb-custom-side p { + padding: 8%; + font-size: 1.8em; + font-weight: 300; +} + +.bb-custom-wrapper h3 { + font-size: 1.4em; + font-weight: 300; + margin: 0.4em 0 1em; +} + +.bb-custom-wrapper > nav { + width: 100%; + height: 40px; + margin: 1em auto 0; + position: fixed; + bottom: 20px; + z-index: 1000; + text-align: center; +} + +.bb-custom-wrapper > nav a { + display: inline-block; + width: 40px; + height: 40px; + text-align: center; + border-radius: 2px; + background: #1baede; + color: #fff; + font-size: 0; + margin: 2px; +} + +.bb-custom-wrapper > nav a:hover { + opacity: 0.6; +} + +.bb-custom-icon:before { + font-family: 'arrows'; + speak: none; + font-style: normal; + font-weight: normal; + font-variant: normal; + text-transform: none; + line-height: 1; + font-size: 30px; + line-height: 40px; + display: block; + -webkit-font-smoothing: antialiased; +} + +.bb-custom-icon-first:before, +.bb-custom-icon-last:before { + content: "\e002"; +} + +.bb-custom-icon-arrow-left:before, +.bb-custom-icon-arrow-right:before { + content: "\e003"; +} + +.bb-custom-icon-arrow-left:before, +.bb-custom-icon-first:before { + -webkit-transform: rotate(180deg); + transform: rotate(180deg); +} + +/* No JS */ +.no-js .bb-custom-wrapper { + height: auto; +} + +.no-js .bb-custom-content { + height: 470px; +} + +@media screen and (max-width: 61.75em){ + .bb-custom-side { + font-size: 70%; + } +} + +@media screen and (max-width: 33em){ + .bb-custom-side { + font-size: 60%; + } +} + diff --git a/fonts/arrows.dev.svg b/fonts/arrows.dev.svg new file mode 100644 index 0000000..37f924f --- /dev/null +++ b/fonts/arrows.dev.svg @@ -0,0 +1,18 @@ + + + + +This is a custom SVG font generated by IcoMoon. + + + + + + + + + + + \ No newline at end of file diff --git a/fonts/arrows.eot b/fonts/arrows.eot new file mode 100644 index 0000000..6d5393f Binary files /dev/null and b/fonts/arrows.eot differ diff --git a/fonts/arrows.svg b/fonts/arrows.svg new file mode 100644 index 0000000..deaf13f --- /dev/null +++ b/fonts/arrows.svg @@ -0,0 +1,18 @@ + + + + +This is a custom SVG font generated by IcoMoon. + + + + + + + + + + + \ No newline at end of file diff --git a/fonts/arrows.ttf b/fonts/arrows.ttf new file mode 100644 index 0000000..5035fc2 Binary files /dev/null and b/fonts/arrows.ttf differ diff --git a/fonts/arrows.woff b/fonts/arrows.woff new file mode 100644 index 0000000..b73a868 Binary files /dev/null and b/fonts/arrows.woff differ diff --git a/js/bookblock.js b/js/bookblock.js new file mode 100644 index 0000000..27c423f --- /dev/null +++ b/js/bookblock.js @@ -0,0 +1,453 @@ +/** + * bookblock.js v2.0.1 + * http://www.codrops.com + * + * Licensed under the MIT license. + * http://www.opensource.org/licenses/mit-license.php + * + * Copyright 2013, Codrops + * http://www.codrops.com + */ +;( function( window ) { + + 'use strict'; + + // global + var document = window.document, + Modernizr = window.Modernizr; + + // https://gist.github.com/edankwan/4389601 + Modernizr.addTest('csstransformspreserve3d', function () { + var prop = Modernizr.prefixed('transformStyle'); + var val = 'preserve-3d'; + var computedStyle; + if(!prop) return false; + + prop = prop.replace(/([A-Z])/g, function(str,m1){ return '-' + m1.toLowerCase(); }).replace(/^ms-/,'-ms-'); + + Modernizr.testStyles('#modernizr{' + prop + ':' + val + ';}', function (el, rule) { + computedStyle = window.getComputedStyle ? getComputedStyle(el, null).getPropertyValue(prop) : ''; + }); + + return (computedStyle === val); + }); + + function extend( a, b ) { + for( var key in b ) { + if( b.hasOwnProperty( key ) ) { + a[key] = b[key]; + } + } + return a; + } + + function BookBlock( el, options ) { + this.el = el; + this.options = extend( this.defaults, options ); + this._init(); + } + + BookBlock.prototype = { + defaults : { + // vertical or horizontal flip + orientation : 'vertical', + // ltr (left to right) or rtl (right to left) + direction : 'ltr', + // speed for the flip transition in ms + speed : 1000, + // easing for the flip transition + easing : 'ease-in-out', + // if set to true, both the flipping page and the sides will have an overlay to simulate shadows + shadows : true, + // opacity value for the "shadow" on both sides (when the flipping page is over it) + // value : 0.1 - 1 + shadowSides : 0.2, + // opacity value for the "shadow" on the flipping page (while it is flipping) + // value : 0.1 - 1 + shadowFlip : 0.1, + // if we should show the first item after reaching the end + circular : false, + // if we want to specify a selector that triggers the next() function. example: ´#bb-nav-next´ + nextEl : '', + // if we want to specify a selector that triggers the prev() function + prevEl : '', + // autoplay. If true it overwrites the circular option to true + autoplay : false, + // time (ms) between page switch, if autoplay is true + interval : 3000, + // callback after the flip transition + // old is the index of the previous item + // page is the current item´s index + // isLimit is true if the current page is the last one (or the first one) + onEndFlip : function(old, page, isLimit) { return false; }, + // callback before the flip transition + // page is the current item´s index + onBeforeFlip : function(page) { return false; } + }, + _init : function() { + // orientation class + this.el.className += ' bb-' + this.options.orientation; + // items + this.items = Array.prototype.slice.call( this.el.querySelectorAll( '.bb-item' ) ); + // total items + this.itemsCount = this.items.length; + // current item´s index + this.currentIdx = 0; + // previous item´s index + this.previous = -1; + // show first item + this.current = this.items[ this.currentIdx ]; + this.current.style.display = 'block'; + // get width of this.el + // this will be necessary to create the flipping layout + this.elWidth = this.el.offsetWidth; + var transEndEventNames = { + 'WebkitTransition': 'webkitTransitionEnd', + 'MozTransition': 'transitionend', + 'OTransition': 'oTransitionEnd', + 'msTransition': 'MSTransitionEnd', + 'transition': 'transitionend' + }; + this.transEndEventName = transEndEventNames[Modernizr.prefixed( 'transition' )]; + // support css 3d transforms && css transitions && Modernizr.csstransformspreserve3d + this.support = Modernizr.csstransitions && Modernizr.csstransforms3d && Modernizr.csstransformspreserve3d; + // initialize/bind some events + this._initEvents(); + // start slideshow + if ( this.options.autoplay ) { + this.options.circular = true; + this._startSlideshow(); + } + }, + _initEvents : function() { + + var self = this; + + if ( this.options.nextEl !== '' ) { + document.querySelector( this.options.nextEl ).addEventListener( 'click', function() { self._action( 'next' ); return false; } ); + document.querySelector( this.options.nextEl ).addEventListener( 'touchstart', function() { self._action( 'next' ); return false; } ); + } + + if ( this.options.prevEl !== '' ) { + document.querySelector( this.options.prevEl ).addEventListener( 'click', function() { self._action( 'prev' ); return false; } ); + document.querySelector( this.options.prevEl ).addEventListener( 'touchstart', function() { self._action( 'prev' ); return false; } ); + } + + window.addEventListener( 'resize', function() { self._resizeHandler(); } ); + + }, + _action : function( dir, page ) { + this._stopSlideshow(); + this._navigate( dir, page ); + }, + _navigate : function( dir, page ) { + + if ( this.isAnimating ) { + return false; + } + + // callback trigger + this.options.onBeforeFlip( this.currentIdx ); + + this.isAnimating = true; + // update current value + this.current = this.items[ this.currentIdx ]; + + if ( page !== undefined ) { + this.currentIdx = page; + } + else if ( dir === 'next' && this.options.direction === 'ltr' || dir === 'prev' && this.options.direction === 'rtl' ) { + if ( !this.options.circular && this.currentIdx === this.itemsCount - 1 ) { + this.end = true; + } + else { + this.previous = this.currentIdx; + this.currentIdx = this.currentIdx < this.itemsCount - 1 ? this.currentIdx + 1 : 0; + } + } + else if ( dir === 'prev' && this.options.direction === 'ltr' || dir === 'next' && this.options.direction === 'rtl' ) { + if ( !this.options.circular && this.currentIdx === 0 ) { + this.end = true; + } + else { + this.previous = this.currentIdx; + this.currentIdx = this.currentIdx > 0 ? this.currentIdx - 1 : this.itemsCount - 1; + } + } + + this.nextItem = !this.options.circular && this.end ? this.current : this.items[ this.currentIdx ]; + + this.items.forEach( function( el, i ) { el.style.display = 'none'; } ); + if ( !this.support ) { + this._layoutNoSupport( dir ); + } else { + this._layout( dir ); + } + + }, + _layoutNoSupport : function(dir) { + this.nextItem.style.display = 'block'; + this.end = false; + this.isAnimating = false; + var isLimit = dir === 'next' && this.currentIdx === this.itemsCount - 1 || dir === 'prev' && this.currentIdx === 0; + // callback trigger + this.options.onEndFlip( this.previous, this.currentIdx, isLimit ); + }, + // creates the necessary layout for the 3d structure and triggers the transitions + _layout : function(dir) { + + var self = this, + // basic structure: 1 element for the left side. + s_left = this._addSide( 'left', dir ), + // 1 element for the flipping/middle page + s_middle = this._addSide( 'middle', dir ), + // 1 element for the right side + s_right = this._addSide( 'right', dir ), + // overlays + o_left = s_left.querySelector( 'div.bb-overlay' ), + o_middle_f = s_middle.querySelector( 'div.bb-front' ).querySelector( 'div.bb-flipoverlay' ), + o_middle_b = s_middle.querySelector( 'div.bb-back' ).querySelector( 'div.bb-flipoverlay' ), + o_right = s_right.querySelector( 'div.bb-overlay' ), + speed = this.end ? 400 : this.options.speed; + + var fChild = this.items[0]; + this.el.insertBefore( s_left, fChild ); + this.el.insertBefore( s_middle, fChild ); + this.el.insertBefore( s_right, fChild ); + s_left.style.zIndex = 102; + s_middle.style.zIndex = 103; + s_right.style.zIndex = 101; + + s_middle.style.transitionDuration = speed + 'ms'; + s_middle.style.transitionTimingFunction = this.options.easing; + + s_middle.addEventListener( this.transEndEventName, function( event ) { + if ( (" " + event.target.className + " ").replace(/[\n\t]/g, " ").indexOf(" bb-page ") > -1 ) { + Array.prototype.slice.call( self.el.querySelectorAll( '.bb-page' ) ).forEach( function( el, i ) { + self.el.removeChild( el ); + } ); + self.nextItem.style.display = 'block'; + self.end = false; + self.isAnimating = false; + var isLimit = dir === 'next' && self.currentIdx === self.itemsCount - 1 || dir === 'prev' && self.currentIdx === 0; + // callback trigger + self.options.onEndFlip( self.previous, self.currentIdx, isLimit ); + } + } ); + + if ( dir === 'prev' ) { + s_middle.className += ' bb-flip-initial'; + } + + // overlays + if ( this.options.shadows && !this.end ) { + if( dir === 'next' ) { + o_middle_f.style.transition = 'opacity ' + this.options.speed / 2 + 'ms ' + 'linear'; + o_middle_b.style.transition = 'opacity ' + this.options.speed / 2 + 'ms ' + 'linear' + ' ' + this.options.speed / 2 + 'ms'; + o_middle_b.style.opacity = this.options.shadowFlip; + o_left.style.transition = 'opacity ' + this.options.speed / 2 + 'ms ' + 'linear' + ' ' + this.options.speed / 2 + 'ms'; + o_right.style.transition = 'opacity ' + this.options.speed / 2 + 'ms ' + 'linear'; + o_right.style.opacity = this.options.shadowSides; + } + else if( dir === 'prev' ) { + o_middle_f.style.transition = 'opacity ' + this.options.speed / 2 + 'ms ' + 'linear' + ' ' + this.options.speed / 2 + 'ms'; + o_middle_f.style.opacity = this.options.shadowFlip; + o_middle_b.style.transition = 'opacity ' + this.options.speed / 2 + 'ms ' + 'linear'; + o_left.style.transition = 'opacity ' + this.options.speed / 2 + 'ms ' + 'linear'; + o_left.style.opacity = this.options.shadowSides; + o_right.style.transition = 'opacity ' + this.options.speed / 2 + 'ms ' + 'linear' + ' ' + this.options.speed / 2 + 'ms'; + } + } + + setTimeout( function() { + // first && last pages lift slightly up when we can't go further + s_middle.className += self.end ? ' bb-flip-' + dir + '-end' : ' bb-flip-' + dir; + + // overlays + if ( self.options.shadows && !self.end ) { + o_middle_f.style.opacity = dir === 'next' ? self.options.shadowFlip : 0; + o_middle_b.style.opacity = dir === 'next' ? 0 : self.options.shadowFlip; + o_left.style.opacity = dir === 'next' ? self.options.shadowSides : 0; + o_right.style.opacity = dir === 'next' ? 0 : self.options.shadowSides; + } + }, 25 ); + }, + // adds the necessary sides (bb-page) to the layout + _addSide : function( side, dir ) { + var sideEl = document.createElement( 'div' ); + sideEl.className = 'bb-page'; + + switch (side) { + case 'left': + /* +
+
+
+
+
+ dir==='next' ? [content of current page] : [content of next page] +
+
+
+
+
+
+ */ + var inner = dir === 'next' ? this.current.innerHTML : this.nextItem.innerHTML; + sideEl.innerHTML = '
' + inner + '
'; + break; + case 'middle': + /* +
+
+
+
+
+ dir==='next' ? [content of current page] : [content of next page] +
+
+
+
+
+
+
+
+
+ dir==='next' ? [content of next page] : [content of current page] +
+
+
+
+
+
+ */ + var frontinner = dir === 'next' ? this.current.innerHTML : this.nextItem.innerHTML; + var backinner = dir === 'next' ? this.nextItem.innerHTML : this.current.innerHTML; + sideEl.innerHTML = '
' + frontinner + '
' + backinner + '
'; + break; + case 'right': + /* +
+
+
+
+
+ dir==='next' ? [content of next page] : [content of current page] +
+
+
+
+
+
+ */ + var inner = dir === 'next' ? this.nextItem.innerHTML : this.current.innerHTML; + sideEl.innerHTML = '
' + inner + '
'; + break; + } + + return sideEl; + }, + _startSlideshow : function() { + var self = this; + this.slideshow = setTimeout( function() { + self._navigate( 'next' ); + if ( self.options.autoplay ) { + self._startSlideshow(); + } + }, this.options.interval ); + }, + _stopSlideshow : function() { + if ( this.options.autoplay ) { + clearTimeout( this.slideshow ); + this.options.autoplay = false; + } + }, + // public method: flips next + next : function() { + this._action( this.options.direction === 'ltr' ? 'next' : 'prev' ); + }, + // public method: flips back + prev : function() { + this._action( this.options.direction === 'ltr' ? 'prev' : 'next' ); + }, + // public method: goes to a specific page + jump : function( page ) { + + page -= 1; + + if ( page === this.currentIdx || page >= this.itemsCount || page < 0 ) { + return false; + } + var dir; + if( this.options.direction === 'ltr' ) { + dir = page > this.currentIdx ? 'next' : 'prev'; + } + else { + dir = page > this.currentIdx ? 'prev' : 'next'; + } + this._action( dir, page ); + + }, + // public method: goes to the last page + last : function() { + this.jump( this.itemsCount ); + }, + // public method: goes to the first page + first : function() { + this.jump( 1 ); + }, + // taken from https://github.com/desandro/vanilla-masonry/blob/master/masonry.js by David DeSandro + // original debounce by John Hann + // http://unscriptable.com/index.php/2009/03/20/debouncing-javascript-methods/ + _resizeHandler : function() { + var self = this; + function delayed() { + self._resize(); + self._resizeTimeout = null; + } + if ( this._resizeTimeout ) { + clearTimeout( this._resizeTimeout ); + } + this._resizeTimeout = setTimeout( delayed, 50 ); + }, + _resize : function() { + // update width value + this.elWidth = this.el.offsetWidth; + }, + // public method: check if isAnimating is true + isActive: function() { + return this.isAnimating; + }, + // public method: dynamically adds new elements + // call this method after inserting new "bb-item" elements inside the BookBlock + update : function () { + var currentItem = this.items[ this.current ]; + this.items = Array.prototype.slice.call( this.el.querySelectorAll( '.bb-item' ) ); + this.itemsCount = this.items.length; + this.currentIdx = this.items.indexOf( currentItem ); + }, + destroy : function() { + if ( this.options.autoplay ) { + this._stopSlideshow(); + } + this.el.className = this.el.className.replace(new RegExp("(^|\\s+)" + 'bb-' + this.options.orientation + "(\\s+|$)"), ' '); + this.items.forEach( function( el, i ) { el.style.display = 'block'; } ); + + if ( this.options.nextEl !== '' ) { + this.options.nextEl.removeEventListener( 'click' ); + this.options.nextEl.removeEventListener( 'touchstart' ); + } + + if ( this.options.prevEl !== '' ) { + this.options.prevEl.removeEventListener( 'click' ); + this.options.prevEl.removeEventListener( 'touchstart' ); + } + + window.removeEventListener( 'debouncedresize' ); + } + } + + // add to global namespace + window.BookBlock = BookBlock; + +} )( window ); \ No newline at end of file diff --git a/js/bookblock.min.js b/js/bookblock.min.js new file mode 100644 index 0000000..b591abd --- /dev/null +++ b/js/bookblock.min.js @@ -0,0 +1,11 @@ +/** + * bookblock.min.js v2.0.1 + * http://www.codrops.com + * + * Licensed under the MIT license. + * http://www.opensource.org/licenses/mit-license.php + * + * Copyright 2013, Codrops + * http://www.codrops.com + */ + (function(c){var a=c.document,d=c.Modernizr;d.addTest("csstransformspreserve3d",function(){var h=d.prefixed("transformStyle");var g="preserve-3d";var f;if(!h){return false}h=h.replace(/([A-Z])/g,function(j,i){return"-"+i.toLowerCase()}).replace(/^ms-/,"-ms-");d.testStyles("#modernizr{"+h+":"+g+";}",function(i,j){f=c.getComputedStyle?getComputedStyle(i,null).getPropertyValue(h):""});return(f===g)});function e(g,f){for(var h in f){if(f.hasOwnProperty(h)){g[h]=f[h]}}return g}function b(g,f){this.el=g;this.options=e(this.defaults,f);this._init()}b.prototype={defaults:{orientation:"vertical",direction:"ltr",speed:1000,easing:"ease-in-out",shadows:true,shadowSides:0.2,shadowFlip:0.1,circular:false,nextEl:"",prevEl:"",autoplay:false,interval:3000,onEndFlip:function(f,h,g){return false},onBeforeFlip:function(f){return false}},_init:function(){this.el.className+=" bb-"+this.options.orientation;this.items=Array.prototype.slice.call(this.el.querySelectorAll(".bb-item"));this.itemsCount=this.items.length;this.currentIdx=0;this.previous=-1;this.current=this.items[this.currentIdx];this.current.style.display="block";this.elWidth=this.el.offsetWidth;var f={WebkitTransition:"webkitTransitionEnd",MozTransition:"transitionend",OTransition:"oTransitionEnd",msTransition:"MSTransitionEnd",transition:"transitionend"};this.transEndEventName=f[d.prefixed("transition")];this.support=d.csstransitions&&d.csstransforms3d&&d.csstransformspreserve3d;this._initEvents();if(this.options.autoplay){this.options.circular=true;this._startSlideshow()}},_initEvents:function(){var f=this;if(this.options.nextEl!==""){a.querySelector(this.options.nextEl).addEventListener("click",function(){f._action("next");return false});a.querySelector(this.options.nextEl).addEventListener("touchstart",function(){f._action("next");return false})}if(this.options.prevEl!==""){a.querySelector(this.options.prevEl).addEventListener("click",function(){f._action("prev");return false});a.querySelector(this.options.prevEl).addEventListener("touchstart",function(){f._action("prev");return false})}c.addEventListener("resize",function(){f._resizeHandler()})},_action:function(f,g){this._stopSlideshow();this._navigate(f,g)},_navigate:function(f,g){if(this.isAnimating){return false}this.options.onBeforeFlip(this.currentIdx);this.isAnimating=true;this.current=this.items[this.currentIdx];if(g!==undefined){this.currentIdx=g}else{if(f==="next"&&this.options.direction==="ltr"||f==="prev"&&this.options.direction==="rtl"){if(!this.options.circular&&this.currentIdx===this.itemsCount-1){this.end=true}else{this.previous=this.currentIdx;this.currentIdx=this.currentIdx0?this.currentIdx-1:this.itemsCount-1}}}}this.nextItem=!this.options.circular&&this.end?this.current:this.items[this.currentIdx];this.items.forEach(function(j,h){j.style.display="none"});if(!this.support){this._layoutNoSupport(f)}else{this._layout(f)}},_layoutNoSupport:function(g){this.nextItem.style.display="block";this.end=false;this.isAnimating=false;var f=g==="next"&&this.currentIdx===this.itemsCount-1||g==="prev"&&this.currentIdx===0;this.options.onEndFlip(this.previous,this.currentIdx,f)},_layout:function(i){var o=this,j=this._addSide("left",i),p=this._addSide("middle",i),l=this._addSide("right",i),f=j.querySelector("div.bb-overlay"),m=p.querySelector("div.bb-front").querySelector("div.bb-flipoverlay"),n=p.querySelector("div.bb-back").querySelector("div.bb-flipoverlay"),k=l.querySelector("div.bb-overlay"),h=this.end?400:this.options.speed;var g=this.items[0];this.el.insertBefore(j,g);this.el.insertBefore(p,g);this.el.insertBefore(l,g);j.style.zIndex=102;p.style.zIndex=103;l.style.zIndex=101;p.style.transitionDuration=h+"ms";p.style.transitionTimingFunction=this.options.easing;p.addEventListener(this.transEndEventName,function(r){if((" "+r.target.className+" ").replace(/[\n\t]/g," ").indexOf(" bb-page ")>-1){Array.prototype.slice.call(o.el.querySelectorAll(".bb-page")).forEach(function(t,s){o.el.removeChild(t)});o.nextItem.style.display="block";o.end=false;o.isAnimating=false;var q=i==="next"&&o.currentIdx===o.itemsCount-1||i==="prev"&&o.currentIdx===0;o.options.onEndFlip(o.previous,o.currentIdx,q)}});if(i==="prev"){p.className+=" bb-flip-initial"}if(this.options.shadows&&!this.end){if(i==="next"){m.style.transition="opacity "+this.options.speed/2+"ms linear";n.style.transition="opacity "+this.options.speed/2+"ms linear "+this.options.speed/2+"ms";n.style.opacity=this.options.shadowFlip;f.style.transition="opacity "+this.options.speed/2+"ms linear "+this.options.speed/2+"ms";k.style.transition="opacity "+this.options.speed/2+"ms linear";k.style.opacity=this.options.shadowSides}else{if(i==="prev"){m.style.transition="opacity "+this.options.speed/2+"ms linear "+this.options.speed/2+"ms";m.style.opacity=this.options.shadowFlip;n.style.transition="opacity "+this.options.speed/2+"ms linear";f.style.transition="opacity "+this.options.speed/2+"ms linear";f.style.opacity=this.options.shadowSides;k.style.transition="opacity "+this.options.speed/2+"ms linear "+this.options.speed/2+"ms"}}}setTimeout(function(){p.className+=o.end?" bb-flip-"+i+"-end":" bb-flip-"+i;if(o.options.shadows&&!o.end){m.style.opacity=i==="next"?o.options.shadowFlip:0;n.style.opacity=i==="next"?0:o.options.shadowFlip;f.style.opacity=i==="next"?o.options.shadowSides:0;k.style.opacity=i==="next"?0:o.options.shadowSides}},25)},_addSide:function(h,g){var j=a.createElement("div");j.className="bb-page";switch(h){case"left":var f=g==="next"?this.current.innerHTML:this.nextItem.innerHTML;j.innerHTML='
'+f+'
';break;case"middle":var k=g==="next"?this.current.innerHTML:this.nextItem.innerHTML;var i=g==="next"?this.nextItem.innerHTML:this.current.innerHTML;j.innerHTML='
'+k+'
'+i+'
';break;case"right":var f=g==="next"?this.nextItem.innerHTML:this.current.innerHTML;j.innerHTML='
'+f+'
';break}return j},_startSlideshow:function(){var f=this;this.slideshow=setTimeout(function(){f._navigate("next");if(f.options.autoplay){f._startSlideshow()}},this.options.interval)},_stopSlideshow:function(){if(this.options.autoplay){clearTimeout(this.slideshow);this.options.autoplay=false}},next:function(){this._action(this.options.direction==="ltr"?"next":"prev")},prev:function(){this._action(this.options.direction==="ltr"?"prev":"next")},jump:function(g){g-=1;if(g===this.currentIdx||g>=this.itemsCount||g<0){return false}var f;if(this.options.direction==="ltr"){f=g>this.currentIdx?"next":"prev"}else{f=g>this.currentIdx?"prev":"next"}this._action(f,g)},last:function(){this.jump(this.itemsCount)},first:function(){this.jump(1)},_resizeHandler:function(){var f=this;function g(){f._resize();f._resizeTimeout=null}if(this._resizeTimeout){clearTimeout(this._resizeTimeout)}this._resizeTimeout=setTimeout(g,50)},_resize:function(){this.elWidth=this.el.offsetWidth},isActive:function(){return this.isAnimating},update:function(){var f=this.items[this.current];this.items=Array.prototype.slice.call(this.el.querySelectorAll(".bb-item"));this.itemsCount=this.items.length;this.currentIdx=this.items.indexOf(f)},destroy:function(){if(this.options.autoplay){this._stopSlideshow()}this.el.className=this.el.className.replace(new RegExp("(^|\\s+)bb-"+this.options.orientation+"(\\s+|$)")," ");this.items.forEach(function(g,f){g.style.display="block"});if(this.options.nextEl!==""){this.options.nextEl.removeEventListener("click");this.options.nextEl.removeEventListener("touchstart")}if(this.options.prevEl!==""){this.options.prevEl.removeEventListener("click");this.options.prevEl.removeEventListener("touchstart")}c.removeEventListener("debouncedresize")}};c.BookBlock=b})(window); \ No newline at end of file diff --git a/js/jquery.bookblock.js b/js/jquery.bookblock.js new file mode 100644 index 0000000..487b630 --- /dev/null +++ b/js/jquery.bookblock.js @@ -0,0 +1,522 @@ +/** + * jquery.bookblock.js v2.0.1 + * http://www.codrops.com + * + * Licensed under the MIT license. + * http://www.opensource.org/licenses/mit-license.php + * + * Copyright 2013, Codrops + * http://www.codrops.com + */ +;( function( $, window, undefined ) { + + 'use strict'; + + // global + var $window = $(window), + Modernizr = window.Modernizr; + + // https://gist.github.com/edankwan/4389601 + Modernizr.addTest('csstransformspreserve3d', function () { + var prop = Modernizr.prefixed('transformStyle'); + var val = 'preserve-3d'; + var computedStyle; + if(!prop) return false; + + prop = prop.replace(/([A-Z])/g, function(str,m1){ return '-' + m1.toLowerCase(); }).replace(/^ms-/,'-ms-'); + + Modernizr.testStyles('#modernizr{' + prop + ':' + val + ';}', function (el, rule) { + computedStyle = window.getComputedStyle ? getComputedStyle(el, null).getPropertyValue(prop) : ''; + }); + + return (computedStyle === val); + }); + + /* + * debouncedresize: special jQuery event that happens once after a window resize + * + * latest version and complete README available on Github: + * https://github.com/louisremi/jquery-smartresize + * + * Copyright 2012 @louis_remi + * Licensed under the MIT license. + * + * This saved you an hour of work? + * Send me music http://www.amazon.co.uk/wishlist/HNTU0468LQON + */ + var $event = $.event, + $special, + resizeTimeout; + + $special = $event.special.debouncedresize = { + setup: function() { + $( this ).on( "resize", $special.handler ); + }, + teardown: function() { + $( this ).off( "resize", $special.handler ); + }, + handler: function( event, execAsap ) { + // Save the context + var context = this, + args = arguments, + dispatch = function() { + // set correct event type + event.type = "debouncedresize"; + $event.dispatch.apply( context, args ); + }; + + if ( resizeTimeout ) { + clearTimeout( resizeTimeout ); + } + + execAsap ? + dispatch() : + resizeTimeout = setTimeout( dispatch, $special.threshold ); + }, + threshold: 150 + }; + + $.BookBlock = function( options, element ) { + this.$el = $( element ); + this._init( options ); + }; + + // the options + $.BookBlock.defaults = { + // vertical or horizontal flip + orientation : 'vertical', + // ltr (left to right) or rtl (right to left) + direction : 'ltr', + // speed for the flip transition in ms + speed : 1000, + // easing for the flip transition + easing : 'ease-in-out', + // if set to true, both the flipping page and the sides will have an overlay to simulate shadows + shadows : true, + // opacity value for the "shadow" on both sides (when the flipping page is over it) + // value : 0.1 - 1 + shadowSides : 0.2, + // opacity value for the "shadow" on the flipping page (while it is flipping) + // value : 0.1 - 1 + shadowFlip : 0.1, + // if we should show the first item after reaching the end + circular : false, + // if we want to specify a selector that triggers the next() function. example: ´#bb-nav-next´ + nextEl : '', + // if we want to specify a selector that triggers the prev() function + prevEl : '', + // autoplay. If true it overwrites the circular option to true + autoplay : false, + // time (ms) between page switch, if autoplay is true + interval : 3000, + // callback after the flip transition + // old is the index of the previous item + // page is the current item´s index + // isLimit is true if the current page is the last one (or the first one) + onEndFlip : function(old, page, isLimit) { return false; }, + // callback before the flip transition + // page is the current item´s index + onBeforeFlip : function(page) { return false; } + }; + + $.BookBlock.prototype = { + _init : function(options) { + // options + this.options = $.extend( true, {}, $.BookBlock.defaults, options ); + // orientation class + this.$el.addClass( 'bb-' + this.options.orientation ); + // items + this.$items = this.$el.children( '.bb-item' ).hide(); + // total items + this.itemsCount = this.$items.length; + // current item´s index + this.current = 0; + // previous item´s index + this.previous = -1; + // show first item + this.$current = this.$items.eq( this.current ).show(); + // get width of this.$el + // this will be necessary to create the flipping layout + this.elWidth = this.$el.width(); + var transEndEventNames = { + 'WebkitTransition': 'webkitTransitionEnd', + 'MozTransition': 'transitionend', + 'OTransition': 'oTransitionEnd', + 'msTransition': 'MSTransitionEnd', + 'transition': 'transitionend' + }; + this.transEndEventName = transEndEventNames[Modernizr.prefixed( 'transition' )] + '.bookblock'; + // support css 3d transforms && css transitions && Modernizr.csstransformspreserve3d + this.support = Modernizr.csstransitions && Modernizr.csstransforms3d && Modernizr.csstransformspreserve3d; + // initialize/bind some events + this._initEvents(); + // start slideshow + if ( this.options.autoplay ) { + this.options.circular = true; + this._startSlideshow(); + } + }, + _initEvents : function() { + + var self = this; + + if ( this.options.nextEl !== '' ) { + $( this.options.nextEl ).on( 'click.bookblock touchstart.bookblock', function() { self._action( 'next' ); return false; } ); + } + + if ( this.options.prevEl !== '' ) { + $( this.options.prevEl ).on( 'click.bookblock touchstart.bookblock', function() { self._action( 'prev' ); return false; } ); + } + + $window.on( 'debouncedresize', function() { + // update width value + self.elWidth = self.$el.width(); + } ); + + }, + _action : function( dir, page ) { + this._stopSlideshow(); + this._navigate( dir, page ); + }, + _navigate : function( dir, page ) { + + if ( this.isAnimating ) { + return false; + } + + // callback trigger + this.options.onBeforeFlip( this.current ); + + this.isAnimating = true; + // update current value + this.$current = this.$items.eq( this.current ); + + if ( page !== undefined ) { + this.current = page; + } + else if ( dir === 'next' && this.options.direction === 'ltr' || dir === 'prev' && this.options.direction === 'rtl' ) { + if ( !this.options.circular && this.current === this.itemsCount - 1 ) { + this.end = true; + } + else { + this.previous = this.current; + this.current = this.current < this.itemsCount - 1 ? this.current + 1 : 0; + } + } + else if ( dir === 'prev' && this.options.direction === 'ltr' || dir === 'next' && this.options.direction === 'rtl' ) { + if ( !this.options.circular && this.current === 0 ) { + this.end = true; + } + else { + this.previous = this.current; + this.current = this.current > 0 ? this.current - 1 : this.itemsCount - 1; + } + } + + this.$nextItem = !this.options.circular && this.end ? this.$current : this.$items.eq( this.current ); + + if ( !this.support ) { + this._layoutNoSupport( dir ); + } else { + this._layout( dir ); + } + + }, + _layoutNoSupport : function(dir) { + this.$items.hide(); + this.$nextItem.show(); + this.end = false; + this.isAnimating = false; + var isLimit = dir === 'next' && this.current === this.itemsCount - 1 || dir === 'prev' && this.current === 0; + // callback trigger + this.options.onEndFlip( this.previous, this.current, isLimit ); + }, + // creates the necessary layout for the 3d structure + _layout : function(dir) { + + var self = this, + // basic structure: 1 element for the left side. + $s_left = this._addSide( 'left', dir ), + // 1 element for the flipping/middle page + $s_middle = this._addSide( 'middle', dir ), + // 1 element for the right side + $s_right = this._addSide( 'right', dir ), + // overlays + $o_left = $s_left.find( 'div.bb-overlay' ), + $o_middle_f = $s_middle.find( 'div.bb-flipoverlay:first' ), + $o_middle_b = $s_middle.find( 'div.bb-flipoverlay:last' ), + $o_right = $s_right.find( 'div.bb-overlay' ), + speed = this.end ? 400 : this.options.speed; + + this.$items.hide(); + this.$el.prepend( $s_left, $s_middle, $s_right ); + + $s_middle.css({ + transitionDuration: speed + 'ms', + transitionTimingFunction : this.options.easing + }).on( this.transEndEventName, function( event ) { + if ( $( event.target ).hasClass( 'bb-page' ) ) { + self.$el.children( '.bb-page' ).remove(); + self.$nextItem.show(); + self.end = false; + self.isAnimating = false; + var isLimit = dir === 'next' && self.current === self.itemsCount - 1 || dir === 'prev' && self.current === 0; + // callback trigger + self.options.onEndFlip( self.previous, self.current, isLimit ); + } + }); + + if ( dir === 'prev' ) { + $s_middle.addClass( 'bb-flip-initial' ); + } + + // overlays + if (this.options.shadows && !this.end) { + + var o_left_style = (dir === 'next') ? { + transition: 'opacity ' + this.options.speed / 2 + 'ms ' + 'linear' + ' ' + this.options.speed / 2 + 'ms' + } : { + transition: 'opacity ' + this.options.speed / 2 + 'ms ' + 'linear', + opacity: this.options.shadowSides + }, + o_middle_f_style = (dir === 'next') ? { + transition: 'opacity ' + this.options.speed / 2 + 'ms ' + 'linear' + } : { + transition: 'opacity ' + this.options.speed / 2 + 'ms ' + 'linear' + ' ' + this.options.speed / 2 + 'ms', + opacity: this.options.shadowFlip + }, + o_middle_b_style = (dir === 'next') ? { + transition: 'opacity ' + this.options.speed / 2 + 'ms ' + 'linear' + ' ' + this.options.speed / 2 + 'ms', + opacity: this.options.shadowFlip + } : { + transition: 'opacity ' + this.options.speed / 2 + 'ms ' + 'linear' + }, + o_right_style = (dir === 'next') ? { + transition: 'opacity ' + this.options.speed / 2 + 'ms ' + 'linear', + opacity: this.options.shadowSides + } : { + transition: 'opacity ' + this.options.speed / 2 + 'ms ' + 'linear' + ' ' + this.options.speed / 2 + 'ms' + }; + + $o_middle_f.css(o_middle_f_style); + $o_middle_b.css(o_middle_b_style); + $o_left.css(o_left_style); + $o_right.css(o_right_style); + + } + + setTimeout( function() { + // first && last pages lift slightly up when we can't go further + $s_middle.addClass( self.end ? 'bb-flip-' + dir + '-end' : 'bb-flip-' + dir ); + + // overlays + if ( self.options.shadows && !self.end ) { + + $o_middle_f.css({ + opacity: dir === 'next' ? self.options.shadowFlip : 0 + }); + + $o_middle_b.css({ + opacity: dir === 'next' ? 0 : self.options.shadowFlip + }); + + $o_left.css({ + opacity: dir === 'next' ? self.options.shadowSides : 0 + }); + + $o_right.css({ + opacity: dir === 'next' ? 0 : self.options.shadowSides + }); + + } + }, 25 ); + }, + // adds the necessary sides (bb-page) to the layout + _addSide : function( side, dir ) { + var $side; + + switch (side) { + case 'left': + /* +
+
+
+
+
+ dir==='next' ? [content of current page] : [content of next page] +
+
+
+
+
+
+ */ + $side = $('
' + ( dir === 'next' ? this.$current.html() : this.$nextItem.html() ) + '
').css( 'z-index', 102 ); + break; + case 'middle': + /* +
+
+
+
+
+ dir==='next' ? [content of current page] : [content of next page] +
+
+
+
+
+
+
+
+
+ dir==='next' ? [content of next page] : [content of current page] +
+
+
+
+
+
+ */ + $side = $('
' + (dir === 'next' ? this.$current.html() : this.$nextItem.html()) + '
' + ( dir === 'next' ? this.$nextItem.html() : this.$current.html() ) + '
').css( 'z-index', 103 ); + break; + case 'right': + /* +
+
+
+
+
+ dir==='next' ? [content of next page] : [content of current page] +
+
+
+
+
+
+ */ + $side = $('
' + ( dir === 'next' ? this.$nextItem.html() : this.$current.html() ) + '
').css( 'z-index', 101 ); + break; + } + + return $side; + }, + _startSlideshow : function() { + var self = this; + this.slideshow = setTimeout( function() { + self._navigate( 'next' ); + if ( self.options.autoplay ) { + self._startSlideshow(); + } + }, this.options.interval ); + }, + _stopSlideshow : function() { + if ( this.options.autoplay ) { + clearTimeout( this.slideshow ); + this.options.autoplay = false; + } + }, + // public method: flips next + next : function() { + this._action( this.options.direction === 'ltr' ? 'next' : 'prev' ); + }, + // public method: flips back + prev : function() { + this._action( this.options.direction === 'ltr' ? 'prev' : 'next' ); + }, + // public method: goes to a specific page + jump : function( page ) { + + page -= 1; + + if ( page === this.current || page >= this.itemsCount || page < 0 ) { + return false; + } + + var dir; + if( this.options.direction === 'ltr' ) { + dir = page > this.current ? 'next' : 'prev'; + } + else { + dir = page > this.current ? 'prev' : 'next'; + } + this._action( dir, page ); + + }, + // public method: goes to the last page + last : function() { + this.jump( this.itemsCount ); + }, + // public method: goes to the first page + first : function() { + this.jump( 1 ); + }, + // public method: check if isAnimating is true + isActive: function() { + return this.isAnimating; + }, + // public method: dynamically adds new elements + // call this method after inserting new "bb-item" elements inside the BookBlock + update : function () { + var $currentItem = this.$items.eq( this.current ); + this.$items = this.$el.children( '.bb-item' ); + this.itemsCount = this.$items.length; + this.current = $currentItem.index(); + }, + destroy : function() { + if ( this.options.autoplay ) { + this._stopSlideshow(); + } + this.$el.removeClass( 'bb-' + this.options.orientation ); + this.$items.show(); + + if ( this.options.nextEl !== '' ) { + $( this.options.nextEl ).off( '.bookblock' ); + } + + if ( this.options.prevEl !== '' ) { + $( this.options.prevEl ).off( '.bookblock' ); + } + + $window.off( 'debouncedresize' ); + } + } + + var logError = function( message ) { + if ( window.console ) { + window.console.error( message ); + } + }; + + $.fn.bookblock = function( options ) { + if ( typeof options === 'string' ) { + var args = Array.prototype.slice.call( arguments, 1 ); + this.each(function() { + var instance = $.data( this, 'bookblock' ); + if ( !instance ) { + logError( "cannot call methods on bookblock prior to initialization; " + + "attempted to call method '" + options + "'" ); + return; + } + if ( !$.isFunction( instance[options] ) || options.charAt(0) === "_" ) { + logError( "no such method '" + options + "' for bookblock instance" ); + return; + } + instance[ options ].apply( instance, args ); + }); + } + else { + this.each(function() { + var instance = $.data( this, 'bookblock' ); + if ( instance ) { + instance._init(); + } + else { + instance = $.data( this, 'bookblock', new $.BookBlock( options, this ) ); + } + }); + } + return this; + }; + +} )( jQuery, window ); \ No newline at end of file diff --git a/js/jquery.bookblock.min.js b/js/jquery.bookblock.min.js new file mode 100644 index 0000000..6cb8383 --- /dev/null +++ b/js/jquery.bookblock.min.js @@ -0,0 +1,11 @@ +/** + * jquery.bookblock.min.js v2.0.1 + * http://www.codrops.com + * + * Licensed under the MIT license. + * http://www.opensource.org/licenses/mit-license.php + * + * Copyright 2013, Codrops + * http://www.codrops.com + */ +(function(f,g,d){var c=f(g),e=g.Modernizr;e.addTest("csstransformspreserve3d",function(){var l=e.prefixed("transformStyle");var k="preserve-3d";var j;if(!l){return false}l=l.replace(/([A-Z])/g,function(n,m){return"-"+m.toLowerCase()}).replace(/^ms-/,"-ms-");e.testStyles("#modernizr{"+l+":"+k+";}",function(m,n){j=g.getComputedStyle?getComputedStyle(m,null).getPropertyValue(l):""});return(j===k)});var a=f.event,b,i;b=a.special.debouncedresize={setup:function(){f(this).on("resize",b.handler)},teardown:function(){f(this).off("resize",b.handler)},handler:function(n,j){var m=this,l=arguments,k=function(){n.type="debouncedresize";a.dispatch.apply(m,l)};if(i){clearTimeout(i)}j?k():i=setTimeout(k,b.threshold)},threshold:150};f.BookBlock=function(j,k){this.$el=f(k);this._init(j)};f.BookBlock.defaults={orientation:"vertical",direction:"ltr",speed:1000,easing:"ease-in-out",shadows:true,shadowSides:0.2,shadowFlip:0.1,circular:false,nextEl:"",prevEl:"",autoplay:false,interval:3000,onEndFlip:function(j,l,k){return false},onBeforeFlip:function(j){return false}};f.BookBlock.prototype={_init:function(j){this.options=f.extend(true,{},f.BookBlock.defaults,j);this.$el.addClass("bb-"+this.options.orientation);this.$items=this.$el.children(".bb-item").hide();this.itemsCount=this.$items.length;this.current=0;this.previous=-1;this.$current=this.$items.eq(this.current).show();this.elWidth=this.$el.width();var k={WebkitTransition:"webkitTransitionEnd",MozTransition:"transitionend",OTransition:"oTransitionEnd",msTransition:"MSTransitionEnd",transition:"transitionend"};this.transEndEventName=k[e.prefixed("transition")]+".bookblock";this.support=e.csstransitions&&e.csstransforms3d&&e.csstransformspreserve3d;this._initEvents();if(this.options.autoplay){this.options.circular=true;this._startSlideshow()}},_initEvents:function(){var j=this;if(this.options.nextEl!==""){f(this.options.nextEl).on("click.bookblock touchstart.bookblock",function(){j._action("next");return false})}if(this.options.prevEl!==""){f(this.options.prevEl).on("click.bookblock touchstart.bookblock",function(){j._action("prev");return false})}c.on("debouncedresize",function(){j.elWidth=j.$el.width()})},_action:function(j,k){this._stopSlideshow();this._navigate(j,k)},_navigate:function(j,k){if(this.isAnimating){return false}this.options.onBeforeFlip(this.current);this.isAnimating=true;this.$current=this.$items.eq(this.current);if(k!==d){this.current=k}else{if(j==="next"&&this.options.direction==="ltr"||j==="prev"&&this.options.direction==="rtl"){if(!this.options.circular&&this.current===this.itemsCount-1){this.end=true}else{this.previous=this.current;this.current=this.current0?this.current-1:this.itemsCount-1}}}}this.$nextItem=!this.options.circular&&this.end?this.$current:this.$items.eq(this.current);if(!this.support){this._layoutNoSupport(j)}else{this._layout(j)}},_layoutNoSupport:function(k){this.$items.hide();this.$nextItem.show();this.end=false;this.isAnimating=false;var j=k==="next"&&this.current===this.itemsCount-1||k==="prev"&&this.current===0;this.options.onEndFlip(this.previous,this.current,j)},_layout:function(l){var v=this,u=this._addSide("left",l),o=this._addSide("middle",l),j=this._addSide("right",l),r=u.find("div.bb-overlay"),t=o.find("div.bb-flipoverlay:first"),w=o.find("div.bb-flipoverlay:last"),s=j.find("div.bb-overlay"),k=this.end?400:this.options.speed;this.$items.hide();this.$el.prepend(u,o,j);o.css({transitionDuration:k+"ms",transitionTimingFunction:this.options.easing}).on(this.transEndEventName,function(y){if(f(y.target).hasClass("bb-page")){v.$el.children(".bb-page").remove();v.$nextItem.show();v.end=false;v.isAnimating=false;var x=l==="next"&&v.current===v.itemsCount-1||l==="prev"&&v.current===0;v.options.onEndFlip(v.previous,v.current,x)}});if(l==="prev"){o.addClass("bb-flip-initial")}if(this.options.shadows&&!this.end){var n=(l==="next")?{transition:"opacity "+this.options.speed/2+"ms linear "+this.options.speed/2+"ms"}:{transition:"opacity "+this.options.speed/2+"ms linear",opacity:this.options.shadowSides},q=(l==="next")?{transition:"opacity "+this.options.speed/2+"ms linear"}:{transition:"opacity "+this.options.speed/2+"ms linear "+this.options.speed/2+"ms",opacity:this.options.shadowFlip},m=(l==="next")?{transition:"opacity "+this.options.speed/2+"ms linear "+this.options.speed/2+"ms",opacity:this.options.shadowFlip}:{transition:"opacity "+this.options.speed/2+"ms linear"},p=(l==="next")?{transition:"opacity "+this.options.speed/2+"ms linear",opacity:this.options.shadowSides}:{transition:"opacity "+this.options.speed/2+"ms linear "+this.options.speed/2+"ms"};t.css(q);w.css(m);r.css(n);s.css(p)}setTimeout(function(){o.addClass(v.end?"bb-flip-"+l+"-end":"bb-flip-"+l);if(v.options.shadows&&!v.end){t.css({opacity:l==="next"?v.options.shadowFlip:0});w.css({opacity:l==="next"?0:v.options.shadowFlip});r.css({opacity:l==="next"?v.options.shadowSides:0});s.css({opacity:l==="next"?0:v.options.shadowSides})}},25)},_addSide:function(l,k){var j;switch(l){case"left":j=f('
'+(k==="next"?this.$current.html():this.$nextItem.html())+'
').css("z-index",102);break;case"middle":j=f('
'+(k==="next"?this.$current.html():this.$nextItem.html())+'
'+(k==="next"?this.$nextItem.html():this.$current.html())+'
').css("z-index",103);break;case"right":j=f('
'+(k==="next"?this.$nextItem.html():this.$current.html())+'
').css("z-index",101);break}return j},_startSlideshow:function(){var j=this;this.slideshow=setTimeout(function(){j._navigate("next");if(j.options.autoplay){j._startSlideshow()}},this.options.interval)},_stopSlideshow:function(){if(this.options.autoplay){clearTimeout(this.slideshow);this.options.autoplay=false}},next:function(){this._action(this.options.direction==="ltr"?"next":"prev")},prev:function(){this._action(this.options.direction==="ltr"?"prev":"next")},jump:function(k){k-=1;if(k===this.current||k>=this.itemsCount||k<0){return false}var j;if(this.options.direction==="ltr"){j=k>this.current?"next":"prev"}else{j=k>this.current?"prev":"next"}this._action(j,k)},last:function(){this.jump(this.itemsCount)},first:function(){this.jump(1)},isActive:function(){return this.isAnimating},update:function(){var j=this.$items.eq(this.current);this.$items=this.$el.children(".bb-item");this.itemsCount=this.$items.length;this.current=j.index()},destroy:function(){if(this.options.autoplay){this._stopSlideshow()}this.$el.removeClass("bb-"+this.options.orientation);this.$items.show();if(this.options.nextEl!==""){f(this.options.nextEl).off(".bookblock")}if(this.options.prevEl!==""){f(this.options.prevEl).off(".bookblock")}c.off("debouncedresize")}};var h=function(j){if(g.console){g.console.error(j)}};f.fn.bookblock=function(k){if(typeof k==="string"){var j=Array.prototype.slice.call(arguments,1);this.each(function(){var l=f.data(this,"bookblock");if(!l){h("cannot call methods on bookblock prior to initialization; attempted to call method '"+k+"'");return}if(!f.isFunction(l[k])||k.charAt(0)==="_"){h("no such method '"+k+"' for bookblock instance");return}l[k].apply(l,j)})}else{this.each(function(){var l=f.data(this,"bookblock");if(l){l._init()}else{l=f.data(this,"bookblock",new f.BookBlock(k,this))}})}return this}})(jQuery,window); \ No newline at end of file diff --git a/js/jquerypp.custom.js b/js/jquerypp.custom.js new file mode 100644 index 0000000..826254c --- /dev/null +++ b/js/jquerypp.custom.js @@ -0,0 +1,301 @@ +(function() { + + var event = jQuery.event, + + //helper that finds handlers by type and calls back a function, this is basically handle + // events - the events object + // types - an array of event types to look for + // callback(type, handlerFunc, selector) - a callback + // selector - an optional selector to filter with, if there, matches by selector + // if null, matches anything, otherwise, matches with no selector + findHelper = function( events, types, callback, selector ) { + var t, type, typeHandlers, all, h, handle, + namespaces, namespace, + match; + for ( t = 0; t < types.length; t++ ) { + type = types[t]; + all = type.indexOf(".") < 0; + if (!all ) { + namespaces = type.split("."); + type = namespaces.shift(); + namespace = new RegExp("(^|\\.)" + namespaces.slice(0).sort().join("\\.(?:.*\\.)?") + "(\\.|$)"); + } + typeHandlers = (events[type] || []).slice(0); + + for ( h = 0; h < typeHandlers.length; h++ ) { + handle = typeHandlers[h]; + + match = (all || namespace.test(handle.namespace)); + + if(match){ + if(selector){ + if (handle.selector === selector ) { + callback(type, handle.origHandler || handle.handler); + } + } else if (selector === null){ + callback(type, handle.origHandler || handle.handler, handle.selector); + } + else if (!handle.selector ) { + callback(type, handle.origHandler || handle.handler); + + } + } + + + } + } + }; + + /** + * Finds event handlers of a given type on an element. + * @param {HTMLElement} el + * @param {Array} types an array of event names + * @param {String} [selector] optional selector + * @return {Array} an array of event handlers + */ + event.find = function( el, types, selector ) { + var events = ( $._data(el) || {} ).events, + handlers = [], + t, liver, live; + + if (!events ) { + return handlers; + } + findHelper(events, types, function( type, handler ) { + handlers.push(handler); + }, selector); + return handlers; + }; + /** + * Finds all events. Group by selector. + * @param {HTMLElement} el the element + * @param {Array} types event types + */ + event.findBySelector = function( el, types ) { + var events = $._data(el).events, + selectors = {}, + //adds a handler for a given selector and event + add = function( selector, event, handler ) { + var select = selectors[selector] || (selectors[selector] = {}), + events = select[event] || (select[event] = []); + events.push(handler); + }; + + if (!events ) { + return selectors; + } + //first check live: + /*$.each(events.live || [], function( i, live ) { + if ( $.inArray(live.origType, types) !== -1 ) { + add(live.selector, live.origType, live.origHandler || live.handler); + } + });*/ + //then check straight binds + findHelper(events, types, function( type, handler, selector ) { + add(selector || "", type, handler); + }, null); + + return selectors; + }; + event.supportTouch = "ontouchend" in document; + + $.fn.respondsTo = function( events ) { + if (!this.length ) { + return false; + } else { + //add default ? + return event.find(this[0], $.isArray(events) ? events : [events]).length > 0; + } + }; + $.fn.triggerHandled = function( event, data ) { + event = (typeof event == "string" ? $.Event(event) : event); + this.trigger(event, data); + return event.handled; + }; + /** + * Only attaches one event handler for all types ... + * @param {Array} types llist of types that will delegate here + * @param {Object} startingEvent the first event to start listening to + * @param {Object} onFirst a function to call + */ + event.setupHelper = function( types, startingEvent, onFirst ) { + if (!onFirst ) { + onFirst = startingEvent; + startingEvent = null; + } + var add = function( handleObj ) { + + var bySelector, selector = handleObj.selector || ""; + if ( selector ) { + bySelector = event.find(this, types, selector); + if (!bySelector.length ) { + $(this).delegate(selector, startingEvent, onFirst); + } + } + else { + //var bySelector = event.find(this, types, selector); + if (!event.find(this, types, selector).length ) { + event.add(this, startingEvent, onFirst, { + selector: selector, + delegate: this + }); + } + + } + + }, + remove = function( handleObj ) { + var bySelector, selector = handleObj.selector || ""; + if ( selector ) { + bySelector = event.find(this, types, selector); + if (!bySelector.length ) { + $(this).undelegate(selector, startingEvent, onFirst); + } + } + else { + if (!event.find(this, types, selector).length ) { + event.remove(this, startingEvent, onFirst, { + selector: selector, + delegate: this + }); + } + } + }; + $.each(types, function() { + event.special[this] = { + add: add, + remove: remove, + setup: function() {}, + teardown: function() {} + }; + }); + }; +})(jQuery); +(function($){ +var isPhantom = /Phantom/.test(navigator.userAgent), + supportTouch = !isPhantom && "ontouchend" in document, + scrollEvent = "touchmove scroll", + // Use touch events or map it to mouse events + touchStartEvent = supportTouch ? "touchstart" : "mousedown", + touchStopEvent = supportTouch ? "touchend" : "mouseup", + touchMoveEvent = supportTouch ? "touchmove" : "mousemove", + data = function(event){ + var d = event.originalEvent.touches ? + event.originalEvent.touches[ 0 ] : + event; + return { + time: (new Date).getTime(), + coords: [ d.pageX, d.pageY ], + origin: $( event.target ) + }; + }; + +/** + * @add jQuery.event.swipe + */ +var swipe = $.event.swipe = { + /** + * @attribute delay + * Delay is the upper limit of time the swipe motion can take in milliseconds. This defaults to 500. + * + * A user must perform the swipe motion in this much time. + */ + delay : 500, + /** + * @attribute max + * The maximum distance the pointer must travel in pixels. The default is 75 pixels. + */ + max : 75, + /** + * @attribute min + * The minimum distance the pointer must travel in pixels. The default is 30 pixels. + */ + min : 30 +}; + +$.event.setupHelper( [ + +/** + * @hide + * @attribute swipe + */ +"swipe", +/** + * @hide + * @attribute swipeleft + */ +'swipeleft', +/** + * @hide + * @attribute swiperight + */ +'swiperight', +/** + * @hide + * @attribute swipeup + */ +'swipeup', +/** + * @hide + * @attribute swipedown + */ +'swipedown'], touchStartEvent, function(ev){ + var + // update with data when the event was started + start = data(ev), + stop, + delegate = ev.delegateTarget || ev.currentTarget, + selector = ev.handleObj.selector, + entered = this; + + function moveHandler(event){ + if ( !start ) { + return; + } + // update stop with the data from the current event + stop = data(event); + + // prevent scrolling + if ( Math.abs( start.coords[0] - stop.coords[0] ) > 10 ) { + event.preventDefault(); + } + }; + + // Attach to the touch move events + $(document.documentElement).bind(touchMoveEvent, moveHandler) + .one(touchStopEvent, function(event){ + $(this).unbind( touchMoveEvent, moveHandler); + // if start and stop contain data figure out if we have a swipe event + if ( start && stop ) { + // calculate the distance between start and stop data + var deltaX = Math.abs(start.coords[0] - stop.coords[0]), + deltaY = Math.abs(start.coords[1] - stop.coords[1]), + distance = Math.sqrt(deltaX*deltaX+deltaY*deltaY); + + // check if the delay and distance are matched + if ( stop.time - start.time < swipe.delay && distance >= swipe.min ) { + var events = ['swipe']; + // check if we moved horizontally + if( deltaX >= swipe.min && deltaY < swipe.min) { + // based on the x coordinate check if we moved left or right + events.push( start.coords[0] > stop.coords[0] ? "swipeleft" : "swiperight" ); + } else + // check if we moved vertically + if(deltaY >= swipe.min && deltaX < swipe.min){ + // based on the y coordinate check if we moved up or down + events.push( start.coords[1] < stop.coords[1] ? "swipedown" : "swipeup" ); + } + + // trigger swipe events on this guy + $.each($.event.find(delegate, events, selector), function(){ + this.call(entered, ev, {start : start, end: stop}) + }) + + } + } + // reset start and stop + start = stop = undefined; + }) +}); + +})(jQuery) \ No newline at end of file diff --git a/js/modernizr.custom.js b/js/modernizr.custom.js new file mode 100644 index 0000000..3bf0d58 --- /dev/null +++ b/js/modernizr.custom.js @@ -0,0 +1,4 @@ +/* Modernizr 2.6.2 (Custom Build) | MIT & BSD + * Build: http://modernizr.com/download/#-csstransforms3d-csstransitions-shiv-cssclasses-prefixed-teststyles-testprop-testallprops-prefixes-domprefixes-load + */ +;window.Modernizr=function(a,b,c){function z(a){j.cssText=a}function A(a,b){return z(m.join(a+";")+(b||""))}function B(a,b){return typeof a===b}function C(a,b){return!!~(""+a).indexOf(b)}function D(a,b){for(var d in a){var e=a[d];if(!C(e,"-")&&j[e]!==c)return b=="pfx"?e:!0}return!1}function E(a,b,d){for(var e in a){var f=b[a[e]];if(f!==c)return d===!1?a[e]:B(f,"function")?f.bind(d||b):f}return!1}function F(a,b,c){var d=a.charAt(0).toUpperCase()+a.slice(1),e=(a+" "+o.join(d+" ")+d).split(" ");return B(b,"string")||B(b,"undefined")?D(e,b):(e=(a+" "+p.join(d+" ")+d).split(" "),E(e,b,c))}var d="2.6.2",e={},f=!0,g=b.documentElement,h="modernizr",i=b.createElement(h),j=i.style,k,l={}.toString,m=" -webkit- -moz- -o- -ms- ".split(" "),n="Webkit Moz O ms",o=n.split(" "),p=n.toLowerCase().split(" "),q={},r={},s={},t=[],u=t.slice,v,w=function(a,c,d,e){var f,i,j,k,l=b.createElement("div"),m=b.body,n=m||b.createElement("body");if(parseInt(d,10))while(d--)j=b.createElement("div"),j.id=e?e[d]:h+(d+1),l.appendChild(j);return f=["­",'"].join(""),l.id=h,(m?l:n).innerHTML+=f,n.appendChild(l),m||(n.style.background="",n.style.overflow="hidden",k=g.style.overflow,g.style.overflow="hidden",g.appendChild(n)),i=c(l,a),m?l.parentNode.removeChild(l):(n.parentNode.removeChild(n),g.style.overflow=k),!!i},x={}.hasOwnProperty,y;!B(x,"undefined")&&!B(x.call,"undefined")?y=function(a,b){return x.call(a,b)}:y=function(a,b){return b in a&&B(a.constructor.prototype[b],"undefined")},Function.prototype.bind||(Function.prototype.bind=function(b){var c=this;if(typeof c!="function")throw new TypeError;var d=u.call(arguments,1),e=function(){if(this instanceof e){var a=function(){};a.prototype=c.prototype;var f=new a,g=c.apply(f,d.concat(u.call(arguments)));return Object(g)===g?g:f}return c.apply(b,d.concat(u.call(arguments)))};return e}),q.csstransforms3d=function(){var a=!!F("perspective");return a&&"webkitPerspective"in g.style&&w("@media (transform-3d),(-webkit-transform-3d){#modernizr{left:9px;position:absolute;height:3px;}}",function(b,c){a=b.offsetLeft===9&&b.offsetHeight===3}),a},q.csstransitions=function(){return F("transition")};for(var G in q)y(q,G)&&(v=G.toLowerCase(),e[v]=q[G](),t.push((e[v]?"":"no-")+v));return e.addTest=function(a,b){if(typeof a=="object")for(var d in a)y(a,d)&&e.addTest(d,a[d]);else{a=a.toLowerCase();if(e[a]!==c)return e;b=typeof b=="function"?b():b,typeof f!="undefined"&&f&&(g.className+=" "+(b?"":"no-")+a),e[a]=b}return e},z(""),i=k=null,function(a,b){function k(a,b){var c=a.createElement("p"),d=a.getElementsByTagName("head")[0]||a.documentElement;return c.innerHTML="x",d.insertBefore(c.lastChild,d.firstChild)}function l(){var a=r.elements;return typeof a=="string"?a.split(" "):a}function m(a){var b=i[a[g]];return b||(b={},h++,a[g]=h,i[h]=b),b}function n(a,c,f){c||(c=b);if(j)return c.createElement(a);f||(f=m(c));var g;return f.cache[a]?g=f.cache[a].cloneNode():e.test(a)?g=(f.cache[a]=f.createElem(a)).cloneNode():g=f.createElem(a),g.canHaveChildren&&!d.test(a)?f.frag.appendChild(g):g}function o(a,c){a||(a=b);if(j)return a.createDocumentFragment();c=c||m(a);var d=c.frag.cloneNode(),e=0,f=l(),g=f.length;for(;e",f="hidden"in a,j=a.childNodes.length==1||function(){b.createElement("a");var a=b.createDocumentFragment();return typeof a.cloneNode=="undefined"||typeof a.createDocumentFragment=="undefined"||typeof a.createElement=="undefined"}()}catch(c){f=!0,j=!0}})();var r={elements:c.elements||"abbr article aside audio bdi canvas data datalist details figcaption figure footer header hgroup mark meter nav output progress section summary time video",shivCSS:c.shivCSS!==!1,supportsUnknownElements:j,shivMethods:c.shivMethods!==!1,type:"default",shivDocument:q,createElement:n,createDocumentFragment:o};a.html5=r,q(b)}(this,b),e._version=d,e._prefixes=m,e._domPrefixes=p,e._cssomPrefixes=o,e.testProp=function(a){return D([a])},e.testAllProps=F,e.testStyles=w,e.prefixed=function(a,b,c){return b?F(a,b,c):F(a,"pfx")},g.className=g.className.replace(/(^|\s)no-js(\s|$)/,"$1$2")+(f?" js "+t.join(" "):""),e}(this,this.document),function(a,b,c){function d(a){return"[object Function]"==o.call(a)}function e(a){return"string"==typeof a}function f(){}function g(a){return!a||"loaded"==a||"complete"==a||"uninitialized"==a}function h(){var a=p.shift();q=1,a?a.t?m(function(){("c"==a.t?B.injectCss:B.injectJs)(a.s,0,a.a,a.x,a.e,1)},0):(a(),h()):q=0}function i(a,c,d,e,f,i,j){function k(b){if(!o&&g(l.readyState)&&(u.r=o=1,!q&&h(),l.onload=l.onreadystatechange=null,b)){"img"!=a&&m(function(){t.removeChild(l)},50);for(var d in y[c])y[c].hasOwnProperty(d)&&y[c][d].onload()}}var j=j||B.errorTimeout,l=b.createElement(a),o=0,r=0,u={t:d,s:c,e:f,a:i,x:j};1===y[c]&&(r=1,y[c]=[]),"object"==a?l.data=c:(l.src=c,l.type=a),l.width=l.height="0",l.onerror=l.onload=l.onreadystatechange=function(){k.call(this,r)},p.splice(e,0,u),"img"!=a&&(r||2===y[c]?(t.insertBefore(l,s?null:n),m(k,j)):y[c].push(l))}function j(a,b,c,d,f){return q=0,b=b||"j",e(a)?i("c"==b?v:u,a,b,this.i++,c,d,f):(p.splice(this.i++,0,a),1==p.length&&h()),this}function k(){var a=B;return a.loader={load:j,i:0},a}var l=b.documentElement,m=a.setTimeout,n=b.getElementsByTagName("script")[0],o={}.toString,p=[],q=0,r="MozAppearance"in l.style,s=r&&!!b.createRange().compareNode,t=s?l:n.parentNode,l=a.opera&&"[object Opera]"==o.call(a.opera),l=!!b.attachEvent&&!l,u=r?"object":l?"script":"img",v=l?"script":u,w=Array.isArray||function(a){return"[object Array]"==o.call(a)},x=[],y={},z={timeout:function(a,b){return b.length&&(a.timeout=b[0]),a}},A,B;B=function(a){function b(a){var a=a.split("!"),b=x.length,c=a.pop(),d=a.length,c={url:c,origUrl:c,prefixes:a},e,f,g;for(f=0;f