Skip to content

Instantly share code, notes, and snippets.

@mrtuvn mrtuvn/pana-accordion.js
Last active Dec 29, 2018

Embed
What would you like to do?
/*
* author: pace zhong
* date: 2015-06-15
* desc: accordion componet
* dependencies: jQuery 1.6+
*/
define([
'jquery'
], function ($) {
'use strict';
var Accordion = {
init: function (options) {
var that = this;
options = $.extend(true, {
expandWidth: 500,
itemWidth: 100,
extpand: 0,
autoPlay: true,
delay: 3000,
animateTime: 400,
borderWidth: 1,
deviator: 30,
bounce: "-50px"
}, options);
that.initDom(options);
if (options.autoPlay) {
that.autoPlay(options);
}
that.event(options);
},
event: function (options) {
var that = this,
$items = $("#" + options.id).find(".pana-accordion-item");
$items.on("mouseover", function () {
if (options.autoPlay) {
that.clearAnimate();
}
that.active(options, $(this));
});
$items.on("mouseout", function () {
if (options.autoPlay) {
that.autoPlay(options);
}
});
},
clearAnimate: function () {
if (this.delay) {
clearTimeout(this.delay);
}
},
autoPlay: function (options) {
var that = this;
that.clearAnimate();
that.delay = setTimeout(function () {
var $next = $("#" + options.id).find(".active").next();
if ($next.length == 0) {
$next = $("#" + options.id).find(".pana-accordion-item:eq(0)");
}
that.active(options, $next);
that.autoPlay(options);
}, options.delay);
},
active: function (options, $current) {
if ($current && $current.hasClass('active')) return;
var $items = $("#" + options.id).find(".pana-accordion-item"),
beforeIndex = $items.filter(".active").index(),
currentIndex = $current.index(),
itemWidth = options.itemWidth,
expandWidth = options.expandWidth;
$items.removeClass("active").removeClass("hide-mask");
$items.each(function (i, elem) {
var $item = $(elem),
$next = $current.next().length == 0 ? $($items[1]) : $current.next(),
pos_left = (i == 0 ? 0 : i * itemWidth);
if (i > currentIndex) {
pos_left += expandWidth - itemWidth + options.borderWidth;
}
if (i == currentIndex + 1) {
var deviator = options.deviator;
} else {
var deviator = 0;
}
if (i == currentIndex) {
$item.addClass('active').stop(true).animate({
"left": pos_left
}, options.animateTime, function () {
$item.addClass("hide-mask")
});
} else {
if (deviator == 0) {
$item.stop(true).animate({
"left": pos_left
}, options.animateTime);
} else {
if (beforeIndex > currentIndex) {
$item.stop(true).animate({
"left": pos_left
}, options.animateTime);
} else {
$item.stop(true).animate({
"left": parseInt($item.css("left"), 10) - deviator
}, 250, function () {
$item.stop(true).animate({
"left": pos_left
}, options.animateTime);
});
}
}
}
});
},
isRestart: function ($current, $active, $items) {
return $active.index() === $items.length - 1 && $current.index() === 0
},
initDom: function (options) {
var that = this,
$items = $("#" + options.id).find(".pana-accordion-item");
$items.each(function (i, elem) {
var $item = $(elem);
$item.css({"z-index": i + 1, "width": options.expandWidth + "px"});
$item.append('<div class="pana-accordion-mask"></div>');
});
that.active(options, $items.eq(options.extpand));
}
};
return Accordion;
});
@mrtuvn

This comment has been minimized.

Copy link
Owner Author

commented Dec 29, 2018

var config = {
shim: {
'js/accordion/pana-accordion': {
deps: ['jquery'],
exports: 'Accordion'
}
},
map: {
'*': {
'panaAccordion': 'js/accordion/pana-accordion'
}
}
};

@mrtuvn

This comment has been minimized.

Copy link
Owner Author

commented Dec 29, 2018

setup requirejs-config.js

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.