(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 = '
',
TEMPLATE = '' +
'' +
'
View All
' +
'
' +
'
' +
'
'
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;
})();