diff options
Diffstat (limited to 'js/core/switcher.js')
| -rwxr-xr-x | js/core/switcher.js | 307 |
1 files changed, 307 insertions, 0 deletions
diff --git a/js/core/switcher.js b/js/core/switcher.js new file mode 100755 index 0000000..793eb3c --- /dev/null +++ b/js/core/switcher.js | |||
| @@ -0,0 +1,307 @@ | |||
| 1 | /*! UIkit 2.26.4 | http://www.getuikit.com | (c) 2014 YOOtheme | MIT License */ | ||
| 2 | (function(UI) { | ||
| 3 | |||
| 4 | "use strict"; | ||
| 5 | |||
| 6 | var Animations; | ||
| 7 | |||
| 8 | UI.component('switcher', { | ||
| 9 | |||
| 10 | defaults: { | ||
| 11 | connect : false, | ||
| 12 | toggle : ">*", | ||
| 13 | active : 0, | ||
| 14 | animation : false, | ||
| 15 | duration : 200, | ||
| 16 | swiping : true | ||
| 17 | }, | ||
| 18 | |||
| 19 | animating: false, | ||
| 20 | |||
| 21 | boot: function() { | ||
| 22 | |||
| 23 | // init code | ||
| 24 | UI.ready(function(context) { | ||
| 25 | |||
| 26 | UI.$("[data-uk-switcher]", context).each(function() { | ||
| 27 | var switcher = UI.$(this); | ||
| 28 | |||
| 29 | if (!switcher.data("switcher")) { | ||
| 30 | var obj = UI.switcher(switcher, UI.Utils.options(switcher.attr("data-uk-switcher"))); | ||
| 31 | } | ||
| 32 | }); | ||
| 33 | }); | ||
| 34 | }, | ||
| 35 | |||
| 36 | init: function() { | ||
| 37 | |||
| 38 | var $this = this; | ||
| 39 | |||
| 40 | this.on("click.uk.switcher", this.options.toggle, function(e) { | ||
| 41 | e.preventDefault(); | ||
| 42 | $this.show(this); | ||
| 43 | }); | ||
| 44 | |||
| 45 | if (this.options.connect) { | ||
| 46 | |||
| 47 | this.connect = UI.$(this.options.connect); | ||
| 48 | |||
| 49 | this.connect.children().removeClass("uk-active"); | ||
| 50 | |||
| 51 | // delegate switch commands within container content | ||
| 52 | if (this.connect.length) { | ||
| 53 | |||
| 54 | // Init ARIA for connect | ||
| 55 | this.connect.children().attr('aria-hidden', 'true'); | ||
| 56 | |||
| 57 | this.connect.on("click", '[data-uk-switcher-item]', function(e) { | ||
| 58 | |||
| 59 | e.preventDefault(); | ||
| 60 | |||
| 61 | var item = UI.$(this).attr('data-uk-switcher-item'); | ||
| 62 | |||
| 63 | if ($this.index == item) return; | ||
| 64 | |||
| 65 | switch(item) { | ||
| 66 | case 'next': | ||
| 67 | case 'previous': | ||
| 68 | $this.show($this.index + (item=='next' ? 1:-1)); | ||
| 69 | break; | ||
| 70 | default: | ||
| 71 | $this.show(parseInt(item, 10)); | ||
| 72 | } | ||
| 73 | }); | ||
| 74 | |||
| 75 | if (this.options.swiping) { | ||
| 76 | |||
| 77 | this.connect.on('swipeRight swipeLeft', function(e) { | ||
| 78 | e.preventDefault(); | ||
| 79 | if(!window.getSelection().toString()) { | ||
| 80 | $this.show($this.index + (e.type == 'swipeLeft' ? 1 : -1)); | ||
| 81 | } | ||
| 82 | }); | ||
| 83 | } | ||
| 84 | } | ||
| 85 | |||
| 86 | var toggles = this.find(this.options.toggle), | ||
| 87 | active = toggles.filter(".uk-active"); | ||
| 88 | |||
| 89 | if (active.length) { | ||
| 90 | this.show(active, false); | ||
| 91 | } else { | ||
| 92 | |||
| 93 | if (this.options.active===false) return; | ||
| 94 | |||
| 95 | active = toggles.eq(this.options.active); | ||
| 96 | this.show(active.length ? active : toggles.eq(0), false); | ||
| 97 | } | ||
| 98 | |||
| 99 | // Init ARIA for toggles | ||
| 100 | toggles.not(active).attr('aria-expanded', 'false'); | ||
| 101 | active.attr('aria-expanded', 'true'); | ||
| 102 | } | ||
| 103 | |||
| 104 | }, | ||
| 105 | |||
| 106 | show: function(tab, animate) { | ||
| 107 | |||
| 108 | if (this.animating) { | ||
| 109 | return; | ||
| 110 | } | ||
| 111 | |||
| 112 | if (isNaN(tab)) { | ||
| 113 | tab = UI.$(tab); | ||
| 114 | } else { | ||
| 115 | |||
| 116 | var toggles = this.find(this.options.toggle); | ||
| 117 | |||
| 118 | tab = tab < 0 ? toggles.length-1 : tab; | ||
| 119 | tab = toggles.eq(toggles[tab] ? tab : 0); | ||
| 120 | } | ||
| 121 | |||
| 122 | var $this = this, | ||
| 123 | toggles = this.find(this.options.toggle), | ||
| 124 | active = UI.$(tab), | ||
| 125 | animation = Animations[this.options.animation] || function(current, next) { | ||
| 126 | |||
| 127 | if (!$this.options.animation) { | ||
| 128 | return Animations.none.apply($this); | ||
| 129 | } | ||
| 130 | |||
| 131 | var anim = $this.options.animation.split(','); | ||
| 132 | |||
| 133 | if (anim.length == 1) { | ||
| 134 | anim[1] = anim[0]; | ||
| 135 | } | ||
| 136 | |||
| 137 | anim[0] = anim[0].trim(); | ||
| 138 | anim[1] = anim[1].trim(); | ||
| 139 | |||
| 140 | return coreAnimation.apply($this, [anim, current, next]); | ||
| 141 | }; | ||
| 142 | |||
| 143 | if (animate===false || !UI.support.animation) { | ||
| 144 | animation = Animations.none; | ||
| 145 | } | ||
| 146 | |||
| 147 | if (active.hasClass("uk-disabled")) return; | ||
| 148 | |||
| 149 | // Update ARIA for Toggles | ||
| 150 | toggles.attr('aria-expanded', 'false'); | ||
| 151 | active.attr('aria-expanded', 'true'); | ||
| 152 | |||
| 153 | toggles.filter(".uk-active").removeClass("uk-active"); | ||
| 154 | active.addClass("uk-active"); | ||
| 155 | |||
| 156 | if (this.options.connect && this.connect.length) { | ||
| 157 | |||
| 158 | this.index = this.find(this.options.toggle).index(active); | ||
| 159 | |||
| 160 | if (this.index == -1 ) { | ||
| 161 | this.index = 0; | ||
| 162 | } | ||
| 163 | |||
| 164 | this.connect.each(function() { | ||
| 165 | |||
| 166 | var container = UI.$(this), | ||
| 167 | children = UI.$(container.children()), | ||
| 168 | current = UI.$(children.filter('.uk-active')), | ||
| 169 | next = UI.$(children.eq($this.index)); | ||
| 170 | |||
| 171 | $this.animating = true; | ||
| 172 | |||
| 173 | animation.apply($this, [current, next]).then(function(){ | ||
| 174 | |||
| 175 | current.removeClass("uk-active"); | ||
| 176 | next.addClass("uk-active"); | ||
| 177 | |||
| 178 | // Update ARIA for connect | ||
| 179 | current.attr('aria-hidden', 'true'); | ||
| 180 | next.attr('aria-hidden', 'false'); | ||
| 181 | |||
| 182 | UI.Utils.checkDisplay(next, true); | ||
| 183 | |||
| 184 | $this.animating = false; | ||
| 185 | |||
| 186 | }); | ||
| 187 | }); | ||
| 188 | } | ||
| 189 | |||
| 190 | this.trigger("show.uk.switcher", [active]); | ||
| 191 | } | ||
| 192 | }); | ||
| 193 | |||
| 194 | Animations = { | ||
| 195 | |||
| 196 | 'none': function() { | ||
| 197 | var d = UI.$.Deferred(); | ||
| 198 | d.resolve(); | ||
| 199 | return d.promise(); | ||
| 200 | }, | ||
| 201 | |||
| 202 | 'fade': function(current, next) { | ||
| 203 | return coreAnimation.apply(this, ['uk-animation-fade', current, next]); | ||
| 204 | }, | ||
| 205 | |||
| 206 | 'slide-bottom': function(current, next) { | ||
| 207 | return coreAnimation.apply(this, ['uk-animation-slide-bottom', current, next]); | ||
| 208 | }, | ||
| 209 | |||
| 210 | 'slide-top': function(current, next) { | ||
| 211 | return coreAnimation.apply(this, ['uk-animation-slide-top', current, next]); | ||
| 212 | }, | ||
| 213 | |||
| 214 | 'slide-vertical': function(current, next, dir) { | ||
| 215 | |||
| 216 | var anim = ['uk-animation-slide-top', 'uk-animation-slide-bottom']; | ||
| 217 | |||
| 218 | if (current && current.index() > next.index()) { | ||
| 219 | anim.reverse(); | ||
| 220 | } | ||
| 221 | |||
| 222 | return coreAnimation.apply(this, [anim, current, next]); | ||
| 223 | }, | ||
| 224 | |||
| 225 | 'slide-left': function(current, next) { | ||
| 226 | return coreAnimation.apply(this, ['uk-animation-slide-left', current, next]); | ||
| 227 | }, | ||
| 228 | |||
| 229 | 'slide-right': function(current, next) { | ||
| 230 | return coreAnimation.apply(this, ['uk-animation-slide-right', current, next]); | ||
| 231 | }, | ||
| 232 | |||
| 233 | 'slide-horizontal': function(current, next, dir) { | ||
| 234 | |||
| 235 | var anim = ['uk-animation-slide-right', 'uk-animation-slide-left']; | ||
| 236 | |||
| 237 | if (current && current.index() > next.index()) { | ||
| 238 | anim.reverse(); | ||
| 239 | } | ||
| 240 | |||
| 241 | return coreAnimation.apply(this, [anim, current, next]); | ||
| 242 | }, | ||
| 243 | |||
| 244 | 'scale': function(current, next) { | ||
| 245 | return coreAnimation.apply(this, ['uk-animation-scale-up', current, next]); | ||
| 246 | } | ||
| 247 | }; | ||
| 248 | |||
| 249 | UI.switcher.animations = Animations; | ||
| 250 | |||
| 251 | |||
| 252 | // helpers | ||
| 253 | |||
| 254 | function coreAnimation(cls, current, next) { | ||
| 255 | |||
| 256 | var d = UI.$.Deferred(), clsIn = cls, clsOut = cls, release; | ||
| 257 | |||
| 258 | if (next[0]===current[0]) { | ||
| 259 | d.resolve(); | ||
| 260 | return d.promise(); | ||
| 261 | } | ||
| 262 | |||
| 263 | if (typeof(cls) == 'object') { | ||
| 264 | clsIn = cls[0]; | ||
| 265 | clsOut = cls[1] || cls[0]; | ||
| 266 | } | ||
| 267 | |||
| 268 | UI.$body.css('overflow-x', 'hidden'); // fix scroll jumping in iOS | ||
| 269 | |||
| 270 | release = function() { | ||
| 271 | |||
| 272 | if (current) current.hide().removeClass('uk-active '+clsOut+' uk-animation-reverse'); | ||
| 273 | |||
| 274 | next.addClass(clsIn).one(UI.support.animation.end, function() { | ||
| 275 | |||
| 276 | setTimeout(function () { | ||
| 277 | next.removeClass(''+clsIn+'').css({opacity:'', display:''}); | ||
| 278 | }, 0); | ||
| 279 | |||
| 280 | d.resolve(); | ||
| 281 | |||
| 282 | UI.$body.css('overflow-x', ''); | ||
| 283 | |||
| 284 | if (current) current.css({opacity:'', display:''}); | ||
| 285 | |||
| 286 | }.bind(this)).show(); | ||
| 287 | }; | ||
| 288 | |||
| 289 | next.css('animation-duration', this.options.duration+'ms'); | ||
| 290 | |||
| 291 | if (current && current.length) { | ||
| 292 | |||
| 293 | current.css('animation-duration', this.options.duration+'ms'); | ||
| 294 | |||
| 295 | current.css('display', 'none').addClass(clsOut+' uk-animation-reverse').one(UI.support.animation.end, function() { | ||
| 296 | release(); | ||
| 297 | }.bind(this)).css('display', ''); | ||
| 298 | |||
| 299 | } else { | ||
| 300 | next.addClass('uk-active'); | ||
| 301 | release(); | ||
| 302 | } | ||
| 303 | |||
| 304 | return d.promise(); | ||
| 305 | } | ||
| 306 | |||
| 307 | })(UIkit); | ||
