sudoslider
Version:
An extremely versitile content-slider
341 lines (308 loc) • 14.5 kB
HTML
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Sudo Slider | Explorer the effects</title>
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<link rel="STYLESHEET" type="text/css" href="../css/style.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="../js/jquery.sudoSlider.min.js"></script>
<script type="text/javascript">
/****************************************
* Warning: The below code is to dynamically make the effect map based on the list of effects in $.fn.sudoSlider.effects.
* Its is long, confusing, and doesn't have a lot to do with SudoSlider. Its just a nice way of showing all the effects.
* Must of it is just algorithms, to create the effect map.
****************************************/
(function () {
$(document).ready(function(){
var effects = $.fn.sudoSlider.effects;
var slides = $("#slider").children();
var sudoSlider = $("#slider").sudoSlider({
effect: function (obj) {
alert("No effect specified");
obj.callback();
},
prevNext: false,
controlsFade: false,
continuous: true,
numeric: true,
vertical: false,
interruptible: true
});
var effectsArray = getKeyArray(effects);
effectsArray.sort();
var container = $("#effectLinksHolder");
var effectMap = makeEffectMap(0, effectsArray.length - 1, 0);
function makeEffectMap(from, to, alreadySharedPrefixLength) {
if (from >= to) {
var effectName = effectsArray[from];
var effect = effects[effectName];
return effect;
}
var nextIndex;
for (nextIndex = from; nextIndex <= to; nextIndex++) {
if (!sharedUntilNextBigLetter(effectsArray[from], effectsArray[nextIndex], alreadySharedPrefixLength)) {
break;
}
}
nextIndex--;
nextIndex = Math.max(nextIndex, from);
var nextPrefixLength = sharedPrefixLength(effectsArray[from], effectsArray[nextIndex], alreadySharedPrefixLength);
var nextPrefix = effectsArray[from].slice(0, nextPrefixLength);
var prefixlastChar = nextPrefix.charAt(nextPrefix.length - 1);
if (prefixlastChar == prefixlastChar.toUpperCase()) {
nextPrefix = nextPrefix.slice(0, nextPrefix.length - 1);
}
var result = {};
if (nextIndex == to) {
result[nextPrefix] = makeEffectMap(from, to, Math.max(nextPrefixLength, alreadySharedPrefixLength + 1));
} else {
var subMap = makeEffectMap(from, nextIndex, nextPrefixLength);
if ($.isFunction(subMap)) {
result[effectsArray[from]] = subMap;
} else {
result[nextPrefix] = subMap;
}
var after = makeEffectMap(nextIndex + 1, to, alreadySharedPrefixLength);
if ($.isFunction(after)) {
result[effectsArray[to]] = after;
} else {
result = mergeObjects(result, after);
}
}
return result;
}
effectMap = collapseEffectMap(effectMap);
effectMap = collapseEffectMap(effectMap);
effectMap = collapseEffectMap(effectMap);
function collapseEffectMap(effectMap) {
if ($.isFunction(effectMap)) {
return effectMap;
}
var result = {};
$.each(effectMap, function (name, subTree) {
if ($.isFunction(subTree)) {
result[name] = subTree;
return;
}
collapseEffectMap(subTree);
if (objectLength(subTree) < 2) {
var subTreeName;
var subTreeValue;
for (var a in subTree) {
subTreeName = a;
subTreeValue = subTree[a];
}
result[subTreeName] = collapseEffectMap(subTreeValue);
} else {
result[name] = collapseEffectMap(subTree);
}
});
return result;
}
effectMap = makeWildcards(effectMap);
function makeWildcards(effectMap) {
var result = {};
$.each(effectMap, function (name, effectTree) {
if ($.isFunction(effectTree)) {
result[name] = effectTree;
} else {
if ($.fn.sudoSlider.effects[name]) {
result[name] = makeWildcards(effectTree);
} else {
result[name + "*"] = makeWildcards(effectTree);
}
}
});
return result;
}
effectMap = makeArrows(effectMap);
function makeArrows(effectMap) {
var result = {};
$.each(effectMap, function (name, effectTree) {
if ($.isFunction(effectTree)) {
result[name] = effectTree;
} else {
result[name + " →"] = makeArrows(effectTree);
}
});
return result;
}
var count = 0;
$.each(effects, function (effectName, effect) {
count++;
});
$("#effectCounter").text(count);
makeEffectTreeGui(container, effectMap);
container.children().show();
function makeEffectTreeGui(container, map) {
$.each(map, function (name, effectTree) {
var linkContainer = $("<div style=''></div>");
var link = $("<a href=\"javascript:void(0);\">" + name + "</a>");
linkContainer.append(link);
container.append(linkContainer);
var effectName;
if (name.indexOf(" ") != -1) {
effectName = name.slice(0, name.indexOf(" "));
} else {
effectName = name;
}
if ($.isFunction(effectTree)) {
link.click(function () {
setEffectAndSlide(effectName);
});
} else {
var subLinksContainer = $("<div style='margin-left: 25px;display: none;'></div>");
linkContainer.append(subLinksContainer);
makeEffectTreeGui(subLinksContainer, effectTree);
link.click(function () {
if (subLinksContainer.is(":visible")) {
subLinksContainer.slideUp(400);
} else {
subLinksContainer.slideDown(400);
}
setEffectAndSlide(effectName);
return false;
});
}
});
function setEffectAndSlide(name) {
slides.attr("data-effect", name);
$("#selectedEffectContainer").text(name);
sudoSlider.stopAnimation();
sudoSlider.goToSlide("next");
if (!$.fn.sudoSlider.effects[name]) {
var allNames = getKeyArray($.fn.sudoSlider.effects);
var text = "This is a prefix, it selects randomly between: ";
var first = true;
for (var i = 0; i < allNames.length; i++) {
if (matches(allNames[i], name)) {
if (first) {
first = false;
} else {
text += ", ";
}
text += allNames[i];
}
}
text += ".";
$("#prefixWarning").text(text);
} else {
$("#prefixWarning").text("");
}
}
}
});
function matches(string, patternWithWildCards) {
return !!string.match(new RegExp("^" + patternWithWildCards.split("*").join(".*") + "$", "g"));
}
function getKeyArray(object) {
var keys = [];
$.each(object, function (key) {
keys.push(key);
});
return keys;
}
function objectLength(object) {
var length = 0;
$.each(object, function (name, value) {
length++;
});
return length;
}
function findFirstEffectFromEffectMap(map) {
var result = null;
$.each(map, function (name, effect) {
if ($.isFunction(effect)) {
result = name;
} else {
result = findFirstEffectFromEffectMap(effect);
}
return false;
});
return result;
}
function sharedUntilNextBigLetter(a, b, alreadySharedPrefixLength) {
if (alreadySharedPrefixLength > a.length || alreadySharedPrefixLength > b.length) {
return false;
}
for (var i = alreadySharedPrefixLength; i < a.length && i < b.length; i++) {
var charAtA = a.charAt(i);
if ((charAtA == charAtA.toUpperCase()) || !isNaN(parseInt(charAtA))) {
if (i == alreadySharedPrefixLength && charAtA != b.charAt(i)) {
return false;
}
return true;
}
if (a.charCodeAt(i) != b.charCodeAt(i)) {
return false;
}
}
return true;
}
function sharedPrefixLength(a, b, from) {
var prefixCounter = from;
for (var i = from; i < a.length && i < b.length; i++) {
var aChar = a.charAt(i);
if (a.charCodeAt(i) != b.charCodeAt(i) || aChar.toUpperCase() == aChar) {
if (aChar.toUpperCase() == aChar) {
prefixCounter++;
}
break;
}
prefixCounter++;
}
return prefixCounter;
}
function mergeObjects(){
var result = {};
var args = arguments;
for (var i in args) {
var obj = args[i];
for (var attrname in obj) {
result[attrname] = obj[attrname];
}
}
return result;
}
})();
</script>
<style>
#slider img {width: 450px;}
.nextBtn {left: 450px;}
.prevBtn, .nextBtn {top: 30px;}
</style>
</head>
<body>
<div style="width: 940px;margin:0 auto;">
<h1>Sudo Slider jQuery Plugin - Explorer the <span id="effectCounter"></span> effects</h1>
<h2>Click on the links to the left to see them in action</h2>
<div style="width:450px;display:inline-block;float:left;">
<div id="effectLinksHolder">
</div>
</div>
<div style="width:450px;display:inline-block;float:left;">
<h2>Selected effect: "<span id="selectedEffectContainer"></span>"</h2>
<div id="slider">
<img src="../images/01.jpg" alt="image description"/>
<img src="../images/02.jpg" alt="image description"/>
<img src="../images/03.jpg" alt="image description"/>
<img src="../images/04.jpg" alt="image description"/>
<img src="../images/05.jpg" alt="image description"/>
</div>
<h3 id="prefixWarning"></h3>
</div>
</div>
<script type="text/javascript">
/* Google Analytics, please remove
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-20484420-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
/* */
</script>
</body>
</html>