--- a/js/flotr2/examples/js/Examples.js +++ b/js/flotr2/examples/js/Examples.js @@ -1,1 +1,292 @@ - +(function () { + +var + E = Flotr.EventAdapter, + _ = Flotr._, + + CLICK = 'click', + EXAMPLE = 'example', + MOUSEENTER = 'mouseenter', + MOUSELEAVE = 'mouseleave', + + DOT = '.', + + CN_EXAMPLES = 'flotr-examples', + CN_CONTAINER = 'flotr-examples-container', + CN_RESET = 'flotr-examples-reset', + CN_THUMBS = 'flotr-examples-thumbs', + CN_THUMB = 'flotr-examples-thumb', + CN_COLLAPSED = 'flotr-examples-collapsed', + CN_HIGHLIGHT = 'flotr-examples-highlight', + CN_LARGE = 'flotr-examples-large', + CN_MEDIUM = 'flotr-examples-medium', + CN_SMALL = 'flotr-examples-small', + CN_MOBILE = 'flotr-examples-mobile', + + T_THUMB = '<div class="' + CN_THUMB + '"></div>', + + TEMPLATE = '' + + '<div class="' + CN_EXAMPLES + '">' + + '<div class="' + CN_RESET + '">View All</div>' + + '<div class="' + CN_THUMBS + '"></div>' + + '<div class="' + CN_CONTAINER + '"></div>' + + '</div>' + +Examples = function (o) { + + if (_.isUndefined(Flotr.ExampleList)) throw "Flotr.ExampleList not defined."; + + this.options = o; + this.list = Flotr.ExampleList; + this.current = null; + this.single = false; + + this._initNodes(); + this._example = new Flotr.Examples.Example({ + node : this._exampleNode + }); + + //console.time(EXAMPLE); + //console.profile(); + this._initExamples(); + //console.profileEnd(); + //console.timeEnd(EXAMPLE); +}; + +Examples.prototype = { + + examples : function () { + + var + styles = {cursor : 'pointer'}, + thumbsNode = this._thumbsNode, + list = this.list.get(), + that = this; + + var + order = [ + "basic", + "basic-axis", + "basic-bars", + "basic-bars-horizontal", + "basic-bar-stacked", + "basic-stacked-horizontal", + "basic-pie", + "basic-radar", + "basic-bubble", + "basic-candle", + "basic-legend", + "mouse-tracking", + "mouse-zoom", + "mouse-drag", + "basic-time", + "negative-values", + "click-example", + "download-image", + "download-data", + "advanced-titles", + "color-gradients", + "basic-timeline", + "advanced-markers" + ]; + + (function runner () { + var + key = order.shift(), + example = list[key]; + + if (example.type === 'profile' || example.type === 'test') return; + var node = $(T_THUMB); + node.data('example', example); + thumbsNode.append(node); + that._example.executeCallback(example, node); + node.click(function () {that._loadExample(example)}); + + if (order.length) setTimeout(runner, 20); + })(); + + function zoomHandler (e) { + var + node = $(e.currentTarget), + example = node.data('example'), + orientation = e.data.orientation; + if (orientation ^ node.hasClass(CN_HIGHLIGHT)) { + node.toggleClass(CN_HIGHLIGHT).css(styles); + that._example.executeCallback(example, node); + } + } + + thumbsNode.delegate(DOT + CN_THUMB, 'mouseenter', {orientation : true}, zoomHandler); + thumbsNode.delegate(DOT + CN_THUMB, 'mouseleave', {orientation : false}, zoomHandler); + + if ($(window).hashchange) { + $(window).hashchange(function () { + that._loadHash(); + }); + } + }, + + _loadExample : function (example) { + if (example) { + if (this._currentExample !== example) { + this._currentExample = example; + } else { + return; + } + + window.location.hash = '!'+(this.single ? 'single/' : '')+example.key; + + if (!scroller) { + this._thumbsNode.css({ + position: 'absolute', + height: '0px', + overflow: 'hidden', + width: '0px' + }); + this._resetNode.css({ + top: '16px' + }); + } + + this._examplesNode.addClass(CN_COLLAPSED); + this._exampleNode.show(); + this._example.setExample(example); + this._resize(); + $(document).scrollTop(0); + } + }, + + _reset : function () { + window.location.hash = ''; + + if (!scroller) { + this._thumbsNode.css({ + position: '', + height: '', + overflow: '', + width: '' + }); + } + + this._examplesNode.removeClass(CN_COLLAPSED); + this._thumbsNode.height(''); + this._exampleNode.hide(); + }, + + _initNodes : function () { + + var + node = $(this.options.node), + that = this, + examplesNode = $(TEMPLATE); + + that._resetNode = examplesNode.find(DOT+CN_RESET); + that._exampleNode = examplesNode.find(DOT+CN_CONTAINER); + that._thumbsNode = examplesNode.find(DOT+CN_THUMBS); + that._examplesNode = examplesNode; + + that._resetNode.click(function () { + that._reset(); + }); + + node.append(examplesNode); + + this._initResizer(); + }, + + _initResizer : function () { + + var + that = this, + node = that._examplesNode, + page = $(window), + currentClass; + + $(window).resize(applySize); + applySize(); + + function applySize () { + + var + height = page.height() - (that.options.thumbPadding || 0), + width = page.width(), + newClass; + + if (width > 1760) { + newClass = CN_LARGE; + that._thumbsNode.height(height); + } else if (width > 1140) { + newClass = CN_MEDIUM; + that._thumbsNode.height(height); + } else { + newClass = CN_SMALL; + that._thumbsNode.height(''); + } + + if (currentClass !== newClass) { + if (currentClass) + that._examplesNode.removeClass(currentClass); + that._examplesNode.addClass(newClass); + currentClass = newClass; + } + } + + this._resize = applySize; + }, + _initExamples : function () { + var + hash = window.location.hash, + example, params; + + hash = hash.substring(2); + params = hash.split('/'); + + if (params.length == 1) { + this.examples(); + if (hash) { + this._loadHash(); + } + } + else { + if (params[0] == 'single') { + this.single = true; + this._loadExample( + this.list.get(params[1]) + ); + } + } + }, + _loadHash : function () { + + var + hash = window.location.hash, + example; + + hash = hash.substring(2); + if (hash) { + example = this.list.get(hash); + this._loadExample(example); + } else { + this._reset(); + } + } +} + +var scroller = (function () { + + var + mobile = !!( + navigator.userAgent.match(/Android/i) || + navigator.userAgent.match(/webOS/i) || + navigator.userAgent.match(/iPhone/i) || + navigator.userAgent.match(/iPod/i) + ), + mozilla = !!$.browser.mozilla; + + return (!mobile || mozilla); +})(); + +Flotr.Examples = Examples; + +})(); +