cyberpresidentvanellope/Paradise
1
0
Fork 0
mirror of https://github.com/ParadiseSS13/Paradise.git synced 2026-08-24 04:27:35 +01:00
Code Issues Packages Projects Releases Wiki Activity

Cleans up some nano transition code, adds button color animation

Browse Source
This commit is contained in:
Tastyfish
2016-05-28 12:53:56 -04:00
parent 4fd9d3e131
commit 45c76aadc1
7 changed files with 132 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files
nano/assets/nano.js
+1 -1
View File
File diff suppressed because one or more lines are too long
nano/assets/nanoui.css
+1 -1
View File
File diff suppressed because one or more lines are too long
nano/scripts/nano/nano_base_helpers.js
+10 -8
View File
@@ -44,12 +44,14 @@ NanoBaseHelpers = function ()
elementIdHtml = 'id="' + elementId + '"';
}
var tid = NanoTransition.allocID(elementIdHtml + "_" + text.toString().replace(/[^a-z0-9_]/gi, "_") + "_" + icon);
if (typeof status != 'undefined' && status)
{
return '<div unselectable="on" class="link ' + iconClass + ' ' + elementClass + ' ' + status + '" ' + elementIdHtml + '>' + iconHtml + text + '</div>';
return '<div unselectable="on" class="link ' + iconClass + ' ' + tid + '" ' + elementIdHtml + '>' + iconHtml + text + '</div><script>$(function() { var newState = {"..class": "' + elementClass + ' ' + status + '"}; var old = NanoTransition.transitionElement("' + tid + '", null, newState, 200); NanoTransition.animateHover("' + tid + '", null, old, newState); });</script>';
}
return '<div unselectable="on" class="linkActive ' + iconClass + ' ' + elementClass + '" data-href="' + NanoUtility.generateHref(parameters) + '" ' + elementIdHtml + '>' + iconHtml + text + '</div>';
return '<div unselectable="on" class="linkActive ' + iconClass + ' ' + tid + '" data-href="' + NanoUtility.generateHref(parameters) + '" ' + elementIdHtml + '>' + iconHtml + text + '</div><script>$(function() { var newState = {"..class": "' + elementClass + '"}; var old = NanoTransition.transitionElement("' + tid + '", null, newState, 200); NanoTransition.animateHover("' + tid + '", null, old, newState); });</script>';
},
xor: function (number,bit) {
@@ -148,7 +150,7 @@ NanoBaseHelpers = function ()
}
var percentage = Math.round((value - rangeMin) / (rangeMax - rangeMin) * 100);
var tid = NanoTransition.allocID();
var tid = NanoTransition.allocID(rangeMin + "_" + rangeMax);
return '<div class="displayBar ' + tid + ' ' + styleClass + '"><div class="displayBarFill"></div><div class="displayBarText ' + styleClass + '">' + showText + '</div></div><script>$(function() { NanoTransition.transitionElement("' + tid + '", ".displayBarFill", {width: "' + percentage + '%", "..class": "' + styleClass + '"}); });</script>';
},
@@ -248,17 +250,17 @@ NanoBaseHelpers = function ()
});
},
smoothNumber: function(number) {
var tid = NanoTransition.allocID();
var tid = NanoTransition.allocID("n");
return '<span class="' + tid + '"></span><script>$(function() { var newState = {value: ' + number + '}; var old = NanoTransition.updateElement("' + tid + '", newState); $(".' + tid + '").text(old["value"].toString()).animate({i:1}, { duration: 1900, easing: "swing", queue: false, step: function(now, fx) { fx.elem.textContent = (old["value"] * (1 - now) + newState["value"] * now).toString(); }}); });</script>';
return '<span class="' + tid + '"></span><script>$(function() { var newState = {value: ' + number + '}; var old = NanoTransition.updateElement("' + tid + '", newState); NanoTransition.animateTextValue("' + tid + '", null, -1, old["value"], newState["value"]); });</script>';
},
smoothRound: function(number, places) {
var tid = NanoTransition.allocID();
var tid = NanoTransition.allocID(places);
if(places === undefined)
placed = 0;
return '<span class="' + tid + '"></span><script>$(function() { var newState = {value: ' + number.toFixed(places) + '}; var old = NanoTransition.updateElement("' + tid + '", newState); $(".' + tid + '").text(old["value"].toString()).animate({i:1}, { duration: 1900, easing: "swing", queue: false, step: function(now, fx) { fx.elem.textContent = (old["value"] * (1 - now) + newState["value"] * now).toFixed(' + places + ').toString(); }}); });</script>';
},
return '<span class="' + tid + '"></span><script>$(function() { var newState = {value: ' + number.toFixed(places) + '}; var old = NanoTransition.updateElement("' + tid + '", newState); NanoTransition.animateTextValue("' + tid + '", null, ' + places + ', old["value"], newState["value"]); });</script>';
}
};
return {
nano/scripts/nano/nano_transition.js
+102 -16
View File
@@ -9,15 +9,23 @@ NanoTransition = function() {
});
// get a transition handle, add this to your element's class
var _allocID = function() {
return "transition__" + (currentID++);
var _allocID = function(uniqueID) {
if(uniqueID == "_Hide_Map_close") // hack because nano does weird thing on first tick
return "transition__map";
if(uniqueID === undefined)
uniqueID = "";
return "transition__" + (currentID++) + "_" + uniqueID.toString();
}
// setup transitions, call this exactly once a refresh, returns old state
var _updateElement = function(id, newState) {
var _updateElement = function(id, newState, merge) {
var cache = idCache[id];
var oldState;
if(merge === undefined)
merge = false;
var element = document.getElementsByClassName(id);
if(element.length == 0)
return newState;
@@ -33,6 +41,15 @@ NanoTransition = function() {
// yep, this is continuation of old object
oldState = stateCache[id];
if(merge) {
var newStateCopy = {};
for(k in oldState)
newStateCopy[k] = oldState[k];
for(k in newState)
newStateCopy[k] = newState[k];
newState = newStateCopy;
}
} else {
// nop!
oldState = newState;
@@ -50,21 +67,25 @@ NanoTransition = function() {
return oldState;
}
// animate a state change
var _animateElement = function(id, filter, oldState, newState) {
var _resolveTarget = function(id, filter) {
var element = $("." + id);
if(element.length == 0)
return;
var target = filter ? $(element).children(filter) : $(element);
return filter ? $(element).children(filter) : $(element);
}
// animate a state change
var _animateElement = function(id, filter, oldState, newState, time) {
var target = _resolveTarget(id, filter);
if(time === undefined)
time = 1900;
// do the animation
target
.css(oldState)
.animate(newState, {
duration: 2000,
easing: "swing",
queue: false,
duration: time,
queue: false
});
// maybe class too?
@@ -72,25 +93,90 @@ NanoTransition = function() {
var newClass = newState["..class"];
if(oldClass && newClass) {
target.addClass(oldClass);
if(oldClass != newClass)
if(oldClass != newClass) {
// strip classes that are in both
var oldClass = oldClass.split(" ");
var newClass = newClass.split(" ");
var filteredOldClass = oldClass.filter(function(x) { return newClass.indexOf(x) == -1; });
var filteredNewClass = newClass.filter(function(x) { return oldClass.indexOf(x) == -1; });
oldClass = filteredOldClass.join(" ");
newClass = filteredNewClass.join(" ");
target.switchClass(oldClass, newClass, {
duration: 1900,
easing: "swing",
duration: time,
queue: false
});
}
}
}
var _animateTextValue = function(id, filter, places, oldValue, newValue, time) {
var target = _resolveTarget(id, filter);
if(time === undefined)
time = 1900;
if(places == -1)
target.text(oldValue.toString());//oldValue.toString());
else
target.text(oldValue.toFixed(places));//oldValue.toFixed(places));
if(oldValue != newValue)
target.animate({i: 1}, {
duration: time,
queue: false,
step: function(now, fx) {
if(places == -1) {
fx.elem.textContent = (oldValue * (1 - now) + newValue * now).toString();
} else {
fx.elem.textContent = (oldValue * (1 - now) + newValue * now).toFixed(places);
}
}
});
}
var _animateHover = function(id, filter, oldState, newState, time) {
var target = _resolveTarget(id, filter);
if(time === undefined)
time = 200;
if(oldState["..hover"])
target.addClass("hover");
target.hover(
function() {
target.stop(1, 1).addClass("hover", {
duration: time,
queue: false
});
_updateElement(id, {"..hover": true}, true);
},
function() {
target.stop(1, 1).removeClass("hover", {
duration: time,
queue: false
});
_updateElement(id, {"..hover": false}, true);
}
);
}
// helper for most common use
var _transitionElement = function(id, filter, state) {
var _transitionElement = function(id, filter, state, time) {
var old = _updateElement(id, state);
_animateElement(id, filter, old, state);
_animateElement(id, filter, old, state, time);
return old;
}
return {
allocID: _allocID,
updateElement: _updateElement,
animateElement: _animateElement,
animateTextValue: _animateTextValue,
animateHover: _animateHover,
transitionElement: _transitionElement
};
}();
nano/styles/_formatting.less
+1 -1
View File
@@ -165,7 +165,7 @@
.titlebutton() {
color: #E9C183;
&:hover {
&.hover {
color: lighten(#98b0c3, 10%);
}
}
nano/styles/_link.less
+16 -9
View File
@@ -17,13 +17,20 @@
padding: 0px 4px 4px 0px;
}
a:hover, .zoomLink:hover, .linkActive:hover {
a.hover, .zoomLink.hover, .linkActive.hover {
background: #507aac;
}
.linkPending, .linkPending:hover {
color: #ffffff;
background: #507aac;
@keyframes pendingAnimation {
to {
color: #ffffff;
background: #507aac;
}
}
.linkPending, .linkPending.hover {
animation-name: pendingAnimation;
animation-duration: 0.25s;
}
a.white, a.white:link, a.white:visited, a.white:active {
@@ -36,17 +43,17 @@ a.white, a.white:link, a.white:visited, a.white:active {
cursor: default;
}
a.white:hover {
a.white.hover {
color: #ffffff;
background: #40628a;
}
.linkOn, a.linkOn:link, a.linkOn:visited, a.linkOn:active, a.linkOn:hover, .selected, a.selected:link, a.selected:visited, a.selected:active, a.selected:hover {
.linkOn, a.linkOn:link, a.linkOn:visited, a.linkOn:active, a.linkOn.hover, .selected, a.selected:link, a.selected:visited, a.selected:active, a.selected.hover {
color: #ffffff;
background: #2f943c;
}
.linkOff, a.linkOff:link, a.linkOff:visited, a.linkOff:active, a.linkOff:hover, .disabled, a.disabled:link, a.disabled:visited, a.disabled:active, a.disabled:hover {
.linkOff, a.linkOff:link, a.linkOff:visited, a.linkOff:active, a.linkOff.hover, .disabled, a.disabled:link, a.disabled:visited, a.disabled:active, a.disabled.hover {
color: #ffffff;
background: #999999;
border-color: #666666;
@@ -71,11 +78,11 @@ a.icon img, .linkOn.icon img, .linkOff.icon img, .selected.icon img, .disabled.i
border-color: #aa0000;
}
.linkDanger:hover {
.linkDanger.hover {
background-color: #ff6666;
}
.inactive, a.inactive:link, a.inactive:visited, a.inactive:active, a.inactive:hover {
.inactive, a.inactive:link, a.inactive:visited, a.inactive:active, a.inactive.hover {
color: #ffffff;
background: #999999;
border-color: #666666;
nano/styles/_misc.less
+1 -1
View File
@@ -116,7 +116,7 @@ div.clock {
background: none;
color: #fff;
&:hover {
&.hover {
background: #507aac;
}