js/foundation/foundation.clearing.js

   1 ;
   2 (function ($, window, document, undefined) {
   3     'use strict';
   4
   5     Foundation.libs.clearing = {
   6         name: 'clearing',
   7
   8         version: '5.5.0',
   9
  10         settings: {
  11             templates: {
  12                 viewing: '<a href="#" class="clearing-close">&times;</a>' +
  13                 '<div class="visible-img" style="display: none"><div class="clearing-touch-label"></div><img src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs%3D" alt="" />' +
  14                 '<p class="clearing-caption"></p><a href="#" class="clearing-main-prev"><span></span></a>' +
  15                 '<a href="#" class="clearing-main-next"><span></span></a></div>'
  16             },
  17
  18             // comma delimited list of selectors that, on click, will close clearing,
  19             // add 'div.clearing-blackout, div.visible-img' to close on background click
  20             close_selectors: '.clearing-close, div.clearing-blackout',
  21
  22             // Default to the entire li element.
  23             open_selectors: '',
  24
  25             // Image will be skipped in carousel.
  26             skip_selector: '',
  27
  28             touch_label: '',
  29
  30             // event initializers and locks
  31             init: false,
  32             locked: false
  33         },
  34
  35         init: function (scope, method, options) {
  36             var self = this;
  37             Foundation.inherit(this, 'throttle image_loaded');
  38
  39             this.bindings(method, options);
  40
  41             if (self.S(this.scope).is('[' + this.attr_name() + ']')) {
  42                 this.assemble(self.S('li', this.scope));
  43             } else {
  44                 self.S('[' + this.attr_name() + ']', this.scope).each(function () {
  45                     self.assemble(self.S('li', this));
  46                 });
  47             }
  48         },
  49
  50         events: function (scope) {
  51             var self = this,
  52                 S = self.S,
  53                 $scroll_container = $('.scroll-container');
  54
  55             if ($scroll_container.length > 0) {
  56                 this.scope = $scroll_container;
  57             }
  58
  59             S(this.scope)
  60                 .off('.clearing')
  61                 .on('click.fndtn.clearing', 'ul[' + this.attr_name() + '] li ' + this.settings.open_selectors,
  62                 function (e, current, target) {
  63                     var current = current || S(this),
  64                         target = target || current,
  65                         next = current.next('li'),
  66                         settings = current.closest('[' + self.attr_name() + ']').data(self.attr_name(true) + '-init'),
  67                         image = S(e.target);
  68
  69                     e.preventDefault();
  70
  71                     if (!settings) {
  72                         self.init();
  73                         settings = current.closest('[' + self.attr_name() + ']').data(self.attr_name(true) + '-init');
  74                     }
  75
  76                     // if clearing is open and the current image is
  77                     // clicked, go to the next image in sequence
  78                     if (target.hasClass('visible') &&
  79                         current[0] === target[0] &&
  80                         next.length > 0 && self.is_open(current)) {
  81                         target = next;
  82                         image = S('img', target);
  83                     }
  84
  85                     // set current and target to the clicked li if not otherwise defined.
  86                     self.open(image, current, target);
  87                     self.update_paddles(target);
  88                 })
  89
  90                 .on('click.fndtn.clearing', '.clearing-main-next',
  91                 function (e) {
  92                     self.nav(e, 'next')
  93                 })
  94                 .on('click.fndtn.clearing', '.clearing-main-prev',
  95                 function (e) {
  96                     self.nav(e, 'prev')
  97                 })
  98                 .on('click.fndtn.clearing', this.settings.close_selectors,
  99                 function (e) {
 100                     Foundation.libs.clearing.close(e, this)
 101                 });
 102
 103             $(document).on('keydown.fndtn.clearing',
 104                 function (e) {
 105                     self.keydown(e)
 106                 });
 107
 108             S(window).off('.clearing').on('resize.fndtn.clearing',
 109                 function () {
 110                     self.resize()
 111                 });
 112
 113             this.swipe_events(scope);
 114         },
 115
 116         swipe_events: function (scope) {
 117             var self = this,
 118                 S = self.S;
 119
 120             S(this.scope)
 121                 .on('touchstart.fndtn.clearing', '.visible-img', function (e) {
 122                     if (!e.touches) {
 123                         e = e.originalEvent;
 124                     }
 125                     var data = {
 126                         start_page_x: e.touches[0].pageX,
 127                         start_page_y: e.touches[0].pageY,
 128                         start_time: (new Date()).getTime(),
 129                         delta_x: 0,
 130                         is_scrolling: undefined
 131                     };
 132
 133                     S(this).data('swipe-transition', data);
 134                     e.stopPropagation();
 135                 })
 136                 .on('touchmove.fndtn.clearing', '.visible-img', function (e) {
 137                     if (!e.touches) {
 138                         e = e.originalEvent;
 139                     }
 140                     // Ignore pinch/zoom events
 141                     if (e.touches.length > 1 || e.scale && e.scale !== 1) return;
 142
 143                     var data = S(this).data('swipe-transition');
 144
 145                     if (typeof data === 'undefined') {
 146                         data = {};
 147                     }
 148
 149                     data.delta_x = e.touches[0].pageX - data.start_page_x;
 150
 151                     if (Foundation.rtl) {
 152                         data.delta_x = -data.delta_x;
 153                     }
 154
 155                     if (typeof data.is_scrolling === 'undefined') {
 156                         data.is_scrolling = !!( data.is_scrolling || Math.abs(data.delta_x) < Math.abs(e.touches[0].pageY - data.start_page_y) );
 157                     }
 158
 159                     if (!data.is_scrolling && !data.active) {
 160                         e.preventDefault();
 161                         var direction = (data.delta_x < 0) ? 'next' : 'prev';
 162                         data.active = true;
 163                         self.nav(e, direction);
 164                     }
 165                 })
 166                 .on('touchend.fndtn.clearing', '.visible-img', function (e) {
 167                     S(this).data('swipe-transition', {});
 168                     e.stopPropagation();
 169                 });
 170         },
 171
 172         assemble: function ($li) {
 173             var $el = $li.parent();
 174
 175             if ($el.parent().hasClass('carousel')) {
 176                 return;
 177             }
 178
 179             $el.after('<div id="foundationClearingHolder"></div>');
 180
 181             var grid = $el.detach(),
 182                 grid_outerHTML = '';
 183
 184             if (grid[0] == null) {
 185                 return;
 186             } else {
 187                 grid_outerHTML = grid[0].outerHTML;
 188             }
 189
 190             var holder = this.S('#foundationClearingHolder'),
 191                 settings = $el.data(this.attr_name(true) + '-init'),
 192                 data = {
 193                     grid: '<div class="carousel">' + grid_outerHTML + '</div>',
 194                     viewing: settings.templates.viewing
 195                 },
 196                 wrapper = '<div class="clearing-assembled"><div>' + data.viewing +
 197                     data.grid + '</div></div>',
 198                 touch_label = this.settings.touch_label;
 199
 200             if (Modernizr.touch) {
 201                 wrapper = $(wrapper).find('.clearing-touch-label').html(touch_label).end();
 202             }
 203
 204             holder.after(wrapper).remove();
 205         },
 206
 207         open: function ($image, current, target) {
 208             var self = this,
 209                 body = $(document.body),
 210                 root = target.closest('.clearing-assembled'),
 211                 container = self.S('div', root).first(),
 212                 visible_image = self.S('.visible-img', container),
 213                 image = self.S('img', visible_image).not($image),
 214                 label = self.S('.clearing-touch-label', container),
 215                 error = false;
 216
 217             // Event to disable scrolling on touch devices when Clearing is activated
 218             $('body').on('touchmove', function (e) {
 219                 e.preventDefault();
 220             });
 221
 222             image.error(function () {
 223                 error = true;
 224             });
 225
 226             function startLoad() {
 227                 setTimeout(function () {
 228                     this.image_loaded(image, function () {
 229                         if (image.outerWidth() === 1 && !error) {
 230                             startLoad.call(this);
 231                         } else {
 232                             cb.call(this, image);
 233                         }
 234                     }.bind(this));
 235                 }.bind(this), 100);
 236             }
 237
 238             function cb(image) {
 239                 var $image = $(image);
 240                 $image.css('visibility', 'visible');
 241                 // toggle the gallery
 242                 body.css('overflow', 'hidden');
 243                 root.addClass('clearing-blackout');
 244                 container.addClass('clearing-container');
 245                 visible_image.show();
 246                 this.fix_height(target)
 247                     .caption(self.S('.clearing-caption', visible_image), self.S('img', target))
 248                     .center_and_label(image, label)
 249                     .shift(current, target, function () {
 250                         target.closest('li').siblings().removeClass('visible');
 251                         target.closest('li').addClass('visible');
 252                     });
 253                 visible_image.trigger('opened.fndtn.clearing')
 254             }
 255
 256             if (!this.locked()) {
 257                 visible_image.trigger('open.fndtn.clearing');
 258                 // set the image to the selected thumbnail
 259                 image
 260                     .attr('src', this.load($image))
 261                     .css('visibility', 'hidden');
 262
 263                 startLoad.call(this);
 264             }
 265         },
 266
 267         close: function (e, el) {
 268             e.preventDefault();
 269
 270             var root = (function (target) {
 271                     if (/blackout/.test(target.selector)) {
 272                         return target;
 273                     } else {
 274                         return target.closest('.clearing-blackout');
 275                     }
 276                 }($(el))),
 277                 body = $(document.body), container, visible_image;
 278
 279             if (el === e.target && root) {
 280                 body.css('overflow', '');
 281                 container = $('div', root).first();
 282                 visible_image = $('.visible-img', container);
 283                 visible_image.trigger('close.fndtn.clearing');
 284                 this.settings.prev_index = 0;
 285                 $('ul[' + this.attr_name() + ']', root)
 286                     .attr('style', '').closest('.clearing-blackout')
 287                     .removeClass('clearing-blackout');
 288                 container.removeClass('clearing-container');
 289                 visible_image.hide();
 290                 visible_image.trigger('closed.fndtn.clearing');
 291             }
 292
 293             // Event to re-enable scrolling on touch devices
 294             $('body').off('touchmove');
 295
 296             return false;
 297         },
 298
 299         is_open: function (current) {
 300             return current.parent().prop('style').length > 0;
 301         },
 302
 303         keydown: function (e) {
 304             var clearing = $('.clearing-blackout ul[' + this.attr_name() + ']'),
 305                 NEXT_KEY = this.rtl ? 37 : 39,
 306                 PREV_KEY = this.rtl ? 39 : 37,
 307                 ESC_KEY = 27;
 308
 309             if (e.which === NEXT_KEY) this.go(clearing, 'next');
 310             if (e.which === PREV_KEY) this.go(clearing, 'prev');
 311             if (e.which === ESC_KEY) this.S('a.clearing-close').trigger('click').trigger('click.fndtn.clearing');
 312         },
 313
 314         nav: function (e, direction) {
 315             var clearing = $('ul[' + this.attr_name() + ']', '.clearing-blackout');
 316
 317             e.preventDefault();
 318             this.go(clearing, direction);
 319         },
 320
 321         resize: function () {
 322             var image = $('img', '.clearing-blackout .visible-img'),
 323                 label = $('.clearing-touch-label', '.clearing-blackout');
 324
 325             if (image.length) {
 326                 this.center_and_label(image, label);
 327                 image.trigger('resized.fndtn.clearing')
 328             }
 329         },
 330
 331         // visual adjustments
 332         fix_height: function (target) {
 333             var lis = target.parent().children(),
 334                 self = this;
 335
 336             lis.each(function () {
 337                 var li = self.S(this),
 338                     image = li.find('img');
 339
 340                 if (li.height() > image.outerHeight()) {
 341                     li.addClass('fix-height');
 342                 }
 343             })
 344                 .closest('ul')
 345                 .width(lis.length * 100 + '%');
 346
 347             return this;
 348         },
 349
 350         update_paddles: function (target) {
 351             target = target.closest('li');
 352             var visible_image = target
 353                 .closest('.carousel')
 354                 .siblings('.visible-img');
 355
 356             if (target.next().length > 0) {
 357                 this.S('.clearing-main-next', visible_image).removeClass('disabled');
 358             } else {
 359                 this.S('.clearing-main-next', visible_image).addClass('disabled');
 360             }
 361
 362             if (target.prev().length > 0) {
 363                 this.S('.clearing-main-prev', visible_image).removeClass('disabled');
 364             } else {
 365                 this.S('.clearing-main-prev', visible_image).addClass('disabled');
 366             }
 367         },
 368
 369         center_and_label: function (target, label) {
 370             if (!this.rtl) {
 371                 target.css({
 372                     marginLeft: -(target.outerWidth() / 2),
 373                     marginTop: -(target.outerHeight() / 2)
 374                 });
 375
 376                 if (label.length > 0) {
 377                     label.css({
 378                         marginLeft: -(label.outerWidth() / 2),
 379                         marginTop: -(target.outerHeight() / 2) - label.outerHeight() - 10
 380                     });
 381                 }
 382             } else {
 383                 target.css({
 384                     marginRight: -(target.outerWidth() / 2),
 385                     marginTop: -(target.outerHeight() / 2),
 386                     left: 'auto',
 387                     right: '50%'
 388                 });
 389
 390                 if (label.length > 0) {
 391                     label.css({
 392                         marginRight: -(label.outerWidth() / 2),
 393                         marginTop: -(target.outerHeight() / 2) - label.outerHeight() - 10,
 394                         left: 'auto',
 395                         right: '50%'
 396                     });
 397                 }
 398             }
 399             return this;
 400         },
 401
 402         // image loading and preloading
 403
 404         load: function ($image) {
 405             var href;
 406
 407             if ($image[0].nodeName === 'A') {
 408                 href = $image.attr('href');
 409             } else {
 410                 href = $image.closest('a').attr('href');
 411             }
 412
 413             this.preload($image);
 414
 415             if (href) return href;
 416             return $image.attr('src');
 417         },
 418
 419         preload: function ($image) {
 420             this
 421                 .img($image.closest('li').next())
 422                 .img($image.closest('li').prev());
 423         },
 424
 425         img: function (img) {
 426             if (img.length) {
 427                 var new_img = new Image(),
 428                     new_a = this.S('a', img);
 429
 430                 if (new_a.length) {
 431                     new_img.src = new_a.attr('href');
 432                 } else {
 433                     new_img.src = this.S('img', img).attr('src');
 434                 }
 435             }
 436             return this;
 437         },
 438
 439         // image caption
 440
 441         caption: function (container, $image) {
 442             var caption = $image.attr('data-caption');
 443
 444             if (caption) {
 445                 container
 446                     .html(caption)
 447                     .show();
 448             } else {
 449                 container
 450                     .text('')
 451                     .hide();
 452             }
 453             return this;
 454         },
 455
 456         // directional methods
 457
 458         go: function ($ul, direction) {
 459             var current = this.S('.visible', $ul),
 460                 target = current[direction]();
 461
 462             // Check for skip selector.
 463             if (this.settings.skip_selector && target.find(this.settings.skip_selector).length != 0) {
 464                 target = target[direction]();
 465             }
 466
 467             if (target.length) {
 468                 this.S('img', target)
 469                     .trigger('click', [current, target]).trigger('click.fndtn.clearing', [current, target])
 470                     .trigger('change.fndtn.clearing');
 471             }
 472         },
 473
 474         shift: function (current, target, callback) {
 475             var clearing = target.parent(),
 476                 old_index = this.settings.prev_index || target.index(),
 477                 direction = this.direction(clearing, current, target),
 478                 dir = this.rtl ? 'right' : 'left',
 479                 left = parseInt(clearing.css('left'), 10),
 480                 width = target.outerWidth(),
 481                 skip_shift;
 482
 483             var dir_obj = {};
 484
 485             // we use jQuery animate instead of CSS transitions because we
 486             // need a callback to unlock the next animation
 487             // needs support for RTL **
 488             if (target.index() !== old_index && !/skip/.test(direction)) {
 489                 if (/left/.test(direction)) {
 490                     this.lock();
 491                     dir_obj[dir] = left + width;
 492                     clearing.animate(dir_obj, 300, this.unlock());
 493                 } else if (/right/.test(direction)) {
 494                     this.lock();
 495                     dir_obj[dir] = left - width;
 496                     clearing.animate(dir_obj, 300, this.unlock());
 497                 }
 498             } else if (/skip/.test(direction)) {
 499                 // the target image is not adjacent to the current image, so
 500                 // do we scroll right or not
 501                 skip_shift = target.index() - this.settings.up_count;
 502                 this.lock();
 503
 504                 if (skip_shift > 0) {
 505                     dir_obj[dir] = -(skip_shift * width);
 506                     clearing.animate(dir_obj, 300, this.unlock());
 507                 } else {
 508                     dir_obj[dir] = 0;
 509                     clearing.animate(dir_obj, 300, this.unlock());
 510                 }
 511             }
 512
 513             callback();
 514         },
 515
 516         direction: function ($el, current, target) {
 517             var lis = this.S('li', $el),
 518                 li_width = lis.outerWidth() + (lis.outerWidth() / 4),
 519                 up_count = Math.floor(this.S('.clearing-container').outerWidth() / li_width) - 1,
 520                 target_index = lis.index(target),
 521                 response;
 522
 523             this.settings.up_count = up_count;
 524
 525             if (this.adjacent(this.settings.prev_index, target_index)) {
 526                 if ((target_index > up_count) && target_index > this.settings.prev_index) {
 527                     response = 'right';
 528                 } else if ((target_index > up_count - 1) && target_index <= this.settings.prev_index) {
 529                     response = 'left';
 530                 } else {
 531                     response = false;
 532                 }
 533             } else {
 534                 response = 'skip';
 535             }
 536
 537             this.settings.prev_index = target_index;
 538
 539             return response;
 540         },
 541
 542         adjacent: function (current_index, target_index) {
 543             for (var i = target_index + 1; i >= target_index - 1; i--) {
 544                 if (i === current_index) return true;
 545             }
 546             return false;
 547         },
 548
 549         // lock management
 550
 551         lock: function () {
 552             this.settings.locked = true;
 553         },
 554
 555         unlock: function () {
 556             this.settings.locked = false;
 557         },
 558
 559         locked: function () {
 560             return this.settings.locked;
 561         },
 562
 563         off: function () {
 564             this.S(this.scope).off('.fndtn.clearing');
 565             this.S(window).off('.fndtn.clearing');
 566         },
 567
 568         reflow: function () {
 569             this.init();
 570         }
 571     };
 572
 573 }(jQuery, window, window.document));