Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update jquery.metro.js #43

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Update jquery.metro.js #43

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
323 changes: 170 additions & 153 deletions scripts/jquery.metro.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,156 +8,173 @@
*
*/

;(function ($) {
var defaults = {
animationDuration: 150,
headerOpacity: 0.5,
fixedHeaders: false,
headerSelector: function (item) { return item.children("h3").first(); },
itemSelector: function (item) { return item.children(".pivot-item"); },
headerItemTemplate: function () { return $("<span class='header' />"); },
pivotItemTemplate: function () { return $("<div class='pivotItem' />"); },
itemsTemplate: function () { return $("<div class='items' />"); },
headersTemplate: function () { return $("<div class='headers' />"); },
controlInitialized: undefined,
selectedItemChanged: undefined
};

$.fn.metroPivot = function (settings) {
if(this.length > 1)
{
return this.each(function(index, el){ $(el).wp7Pivot(settings); });
}

$.extend(this, defaults, settings);
$.extend(this,{
animating : false,
headers : undefined,
items : undefined,
goToNext: function(){
if(this.animating) return;
this.headers.children(".current").next().trigger("click");
},
goToPrevious: function(){
if(this.animating) return;
this.headers.children(".header").last().trigger("click");
},
goToItemByName:function(header){
if(this.animating) return;
this.headers.children(":contains("+header+")").first().trigger("click");
},
goToItemByIndex:function(index){
if(this.animating) return;
this.headers.children().eq(index).trigger("click");
},
initialize : function () {
var pivot = this;
// define sections

var headers = pivot.headersTemplate();
var items = pivot.itemsTemplate();

pivot.itemSelector(pivot).each(function (index, el) {
el = $(el);

var h3Element = pivot.headerSelector(el);
if (h3Element.length == 0) return;

var headerItem = pivot.headerItemTemplate().html(h3Element.html()).fadeTo(0, pivot.headerOpacity);
var pivotItem = pivot.pivotItemTemplate().append(el).hide();

if (index == 0) {
headerItem.addClass("current").fadeTo(0, 1);
pivotItem.addClass("current").show();
}
headerItem.attr("index", index);
headerItem.click(function() { pivot.pivotHeader_Click($(this)); });

headers.append(headerItem);
items.append(pivotItem);

h3Element.remove();
});

pivot.append(headers).append(items);
pivot.headers = headers;
pivot.items = items;

this.data("controller", pivot);

if(this.controlInitialized != undefined)
{
this.controlInitialized();
}
},
setCurrentHeader: function(header){
var pivot = this;

// make current header a normal one
this.headers.children(".header.current").removeClass("current").fadeTo(0, this.headerOpacity);

// make selected header to current
header.addClass("current").fadeTo(0, 1);

if(pivot.fixedHeaders == false)
{
// create a copy for fadeout navigation
var copy = header.prevAll().clone();
// detach items to move to end of headers
var detached = $(header.prevAll().detach().toArray().reverse());

// copy animation items to beginning and animate them
$("<span />").append(copy).prependTo(pivot.headers).animate({ width: 0, opacity: 0 }, pivot.animationDuration, function () {
// when finished: delete animation objects
$(this).remove();

// and attach detached items to the end of headers
detached.fadeTo(0, 0).appendTo(pivot.headers).fadeTo(200, pivot.headerOpacity);
});
}
},
setCurrentItem: function(item, index){
var pivot = this;
var currentHeight = pivot.items.height();
pivot.items.height(currentHeight);
// hide current item immediately
pivot.items.children(".pivotItem.current").hide().removeClass("current");

// after a little delay
setTimeout(function () {
// move the item to far right and make it visible
item.css({ marginLeft: item.outerWidth() }).show().addClass("current");

// animate it to left
item.animate( { marginLeft: 0 }, pivot.animationDuration, function() {pivot.items.height('auto'); pivot.currentItemChanged(index);});

}, 200);
},
currentItemChanged: function(index) {
this.animating = false;
if(this.selectedItemChanged != undefined)
{
this.selectedItemChanged(index);
}
},
pivotHeader_Click : function (me) {
// ignore if already current
if (me.is(".current")) return;

// ignore if still animating
if (this.animating) return;
this.animating = true;

// set current header
this.setCurrentHeader(me);

var index = me.attr("index");
// find and set current item
var item = this.items.children(".pivotItem:nth(" + index + ")");
this.setCurrentItem(item, index);
},
});

return this.initialize();
};
})(jQuery);
(function($) {
let defaults = {
animationDuration: 150,
headerOpacity: 0.5,
fixedHeaders: false,
headerSelector: function(item) {
return item.children('h3').first();
},
itemSelector: function(item) {
return item.children('.pivot-item');
},
headerItemTemplate: function() {
return $("<span class='header' />");
},
pivotItemTemplate: function() {
return $("<div class='pivotItem' />");
},
itemsTemplate: function() {
return $("<div class='items' />");
},
headersTemplate: function() {
return $("<div class='headers' />");
},
controlInitialized: undefined,
selectedItemChanged: undefined
};

$.fn.metroPivot = function(settings) {
if (this.length > 1) {
return this.each(function(index, el) {
$(el).wp7Pivot(settings);
});
}

$.extend(this, defaults, settings);
$.extend(this, {
animating: false,
headers: undefined,
items: undefined,
goToNext: function() {
if (this.animating) return;
this.headers.children('.current').next().trigger('click');
},
goToPrevious: function() {
if (this.animating) return;
this.headers.children('.header').last().trigger('click');
},
goToItemByName: function(header) {
if (this.animating) return;
this.headers.children(':contains(' + header + ')').first().trigger('click');
},
goToItemByIndex: function(index) {
if (this.animating) return;
this.headers.children().eq(index).trigger('click');
},
initialize: function() {
let pivot = this;
// define sections

let headers = pivot.headersTemplate();
let items = pivot.itemsTemplate();

pivot.itemSelector(pivot).each(function(index, el) {
el = $(el);

let h3Element = pivot.headerSelector(el);
if (h3Element.length == 0) return;

let headerItem = pivot.headerItemTemplate().html(h3Element.html()).fadeTo(0, pivot.headerOpacity);
let pivotItem = pivot.pivotItemTemplate().append(el).hide();

if (index == 0) {
headerItem.addClass('current').fadeTo(0, 1);
pivotItem.addClass('current').show();
}
headerItem.attr('index', index);
headerItem.click(function() {
pivot.pivotHeader_Click($(this));
});

headers.append(headerItem);
items.append(pivotItem);

h3Element.remove();
});

pivot.append(headers).append(items);
pivot.headers = headers;
pivot.items = items;

this.data('controller', pivot);

if (this.controlInitialized != undefined) {
this.controlInitialized();
}
},
setCurrentHeader: function(header) {
let pivot = this;

// make current header a normal one
this.headers.children('.header.current').removeClass('current').fadeTo(0, this.headerOpacity);

// make selected header to current
header.addClass('current').fadeTo(0, 1);

if (pivot.fixedHeaders == false) {
// create a copy for fadeout navigation
let copy = header.prevAll().clone();
// detach items to move to end of headers
let detached = $(header.prevAll().detach().toArray().reverse());

// copy animation items to beginning and animate them
$('<span />')
.append(copy)
.prependTo(pivot.headers)
.animate({ width: 0, opacity: 0 }, pivot.animationDuration, function() {
// when finished: delete animation objects
$(this).remove();

// and attach detached items to the end of headers
detached.fadeTo(0, 0).appendTo(pivot.headers).fadeTo(200, pivot.headerOpacity);
});
}
},
setCurrentItem: function(item, index) {
let pivot = this;
let currentHeight = pivot.items.height();
pivot.items.height(currentHeight);
// hide current item immediately
pivot.items.children('.pivotItem.current').hide().removeClass('current');

// after a little delay
setTimeout(function() {
// move the item to far right and make it visible
item.css({ marginLeft: item.outerWidth() }).show().addClass('current');

// animate it to left
item.animate({ marginLeft: 0 }, pivot.animationDuration, function() {
pivot.items.height('auto');
pivot.currentItemChanged(index);
});
}, 200);
},
currentItemChanged: function(index) {
this.animating = false;
if (this.selectedItemChanged != undefined) {
this.selectedItemChanged(index);
}
},
pivotHeader_Click: function(me) {
// ignore if already current
if (me.is('.current')) return;

// ignore if still animating
if (this.animating) return;
this.animating = true;

// set current header
this.setCurrentHeader(me);

let index = me.attr('index');
// find and set current item
let item = this.items.children('.pivotItem:nth(' + index + ')');
this.setCurrentItem(item, index);
}
});

return this.initialize();
};
})(jQuery);