afm-client/bower_components/tether/docs/welcome/js/welcome.js

   1 (function() {
   2   var init, isMobile, setupBrowserDemo, setupHero, _Drop;
   3
   4   _Drop = Drop.createContext({
   5     classPrefix: 'tether'
   6   });
   7
   8   isMobile = $(window).width() < 567;
   9
  10   init = function() {
  11     setupHero();
  12     return setupBrowserDemo();
  13   };
  14
  15   setupHero = function() {
  16     var $target, finalDropState, frameLengthMS, frames, openAllDrops, openIndex, openNextDrop, position, positions, _i, _len;
  17     $target = $('.tether-target-demo');
  18     positions = ['top left', 'left top', 'left middle', 'left bottom', 'bottom left', 'bottom center', 'bottom right', 'right bottom', 'right middle', 'right top', 'top right', 'top center'];
  19     if (isMobile) {
  20       positions = ['top left', 'bottom left', 'bottom right', 'top right'];
  21     }
  22     window.drops = {};
  23     for (_i = 0, _len = positions.length; _i < _len; _i++) {
  24       position = positions[_i];
  25       drops[position] = new _Drop({
  26         target: $target[0],
  27         classes: 'tether-theme-arrows-dark',
  28         position: position,
  29         constrainToWindow: false,
  30         openOn: '',
  31         content: '<div style="height: 50px; width: 50px"></div>'
  32       });
  33     }
  34     openIndex = 0;
  35     frames = 0;
  36     frameLengthMS = 10;
  37     openAllDrops = function() {
  38       var drop, _results;
  39       _results = [];
  40       for (position in drops) {
  41         drop = drops[position];
  42         _results.push(drop.open());
  43       }
  44       return _results;
  45     };
  46     openNextDrop = function() {
  47       var drop;
  48       for (position in drops) {
  49         drop = drops[position];
  50         drop.close();
  51       }
  52       drops[positions[openIndex]].open();
  53       drops[positions[(openIndex + 6) % positions.length]].open();
  54       openIndex = (openIndex + 1) % positions.length;
  55       if (frames > 5) {
  56         finalDropState();
  57         return;
  58       }
  59       frames += 1;
  60       return setTimeout(openNextDrop, frameLengthMS * frames);
  61     };
  62     finalDropState = function() {
  63       $(drops['top left'].dropContent).html('Marrying DOM elements for life.');
  64       $(drops['bottom right'].dropContent).html('<a class="button" href="http://github.com/HubSpot/tether">★ On Github</a>');
  65       drops['top left'].open();
  66       return drops['bottom right'].open();
  67     };
  68     if (true || isMobile) {
  69       drops['top left'].open();
  70       drops['top left'].tether.position();
  71       drops['bottom right'].open();
  72       drops['bottom right'].tether.position();
  73       return finalDropState();
  74     } else {
  75       return openNextDrop();
  76     }
  77   };
  78
  79   setupBrowserDemo = function() {
  80     var $browserContents, $browserDemo, $iframe, $sections, $startPoint, $stopPoint, scrollInterval, scrollTop, scrollTopDirection, setSection;
  81     $browserDemo = $('.browser-demo.showcase');
  82     $startPoint = $('.browser-demo-start-point');
  83     $stopPoint = $('.browser-demo-stop-point');
  84     $iframe = $('.browser-window iframe');
  85     $browserContents = $('.browser-content .browser-demo-inner');
  86     $sections = $('.browser-demo-section');
  87     $('body').append("<style>\n    table.showcase.browser-demo.fixed-bottom {\n        top: " + $sections.length + "00%\n    }\n</style>");
  88     $(window).scroll(function() {
  89       var scrollTop;
  90       scrollTop = $(window).scrollTop();
  91       if ($startPoint.position().top < scrollTop && scrollTop + window.innerHeight < $stopPoint.position().top) {
  92         $browserDemo.removeClass('fixed-bottom');
  93         $browserDemo.addClass('fixed');
  94         return $sections.each(function() {
  95           var $section;
  96           $section = $(this);
  97           if (($section.position().top < scrollTop && scrollTop < $section.position().top + $section.outerHeight())) {
  98             setSection($section.data('section'));
  99           }
 100           return true;
 101         });
 102       } else {
 103         $browserDemo.removeAttr('data-section');
 104         $browserDemo.removeClass('fixed');
 105         if (scrollTop + window.innerHeight > $stopPoint.position().top) {
 106           return $browserDemo.addClass('fixed-bottom');
 107         } else {
 108           return $browserDemo.removeClass('fixed-bottom');
 109         }
 110       }
 111     });
 112     $iframe.load(function() {
 113       var $items, iframeWindow;
 114       iframeWindow = $iframe[0].contentWindow;
 115       $items = $iframe.contents().find('.item');
 116       return $items.each(function(i) {
 117         var $item, drop, _iframeWindowDrop;
 118         $item = $(this);
 119         _iframeWindowDrop = iframeWindow.Drop.createContext({
 120           classPrefix: 'tether'
 121         });
 122         drop = new _iframeWindowDrop({
 123           target: $item[0],
 124           classes: 'tether-theme-arrows-dark',
 125           position: 'right top',
 126           constrainToWindow: true,
 127           openOn: 'click',
 128           content: '<ul>\n    <li>Action&nbsp;1</li>\n    <li>Action&nbsp;2</li>\n    <li>Action&nbsp;3</li>\n</ul>'
 129         });
 130         return $item.data('drop', drop);
 131       });
 132     });
 133     scrollInterval = void 0;
 134     scrollTop = 0;
 135     scrollTopDirection = 1;
 136     return setSection = function(section) {
 137       var closeAllItems, openExampleItem, scrollLeftSection, stopScrollingLeftSection;
 138       $browserDemo.attr('data-section', section);
 139       $('.section-copy').removeClass('active');
 140       $(".section-copy[data-section=\"" + section + "\"]").addClass('active');
 141       openExampleItem = function() {
 142         if (isMobile) {
 143           return $iframe.contents().find('.item:first').data().drop.open();
 144         } else {
 145           return $iframe.contents().find('.item:eq(2)').data().drop.open();
 146         }
 147       };
 148       closeAllItems = function() {
 149         return $iframe.contents().find('.item').each(function() {
 150           return $(this).data().drop.close() || true;
 151         });
 152       };
 153       scrollLeftSection = function() {
 154         return scrollInterval = setInterval(function() {
 155           $iframe.contents().find('.left').scrollTop(scrollTop);
 156           scrollTop += scrollTopDirection;
 157           if (scrollTop > 50) {
 158             scrollTopDirection = -1;
 159           }
 160           if (scrollTop < 0) {
 161             return scrollTopDirection = 1;
 162           }
 163         }, 30);
 164       };
 165       stopScrollingLeftSection = function() {
 166         return clearInterval(scrollInterval);
 167       };
 168       switch (section) {
 169         case 'what':
 170           closeAllItems();
 171           openExampleItem();
 172           return stopScrollingLeftSection();
 173         case 'how':
 174           closeAllItems();
 175           openExampleItem();
 176           stopScrollingLeftSection();
 177           return scrollLeftSection();
 178         case 'why':
 179           closeAllItems();
 180           openExampleItem();
 181           stopScrollingLeftSection();
 182           return scrollLeftSection();
 183         case 'outro':
 184           closeAllItems();
 185           openExampleItem();
 186           return stopScrollingLeftSection();
 187       }
 188     };
 189   };
 190
 191   init();
 192
 193 }).call(this);