mirrors/TiddlyWiki5
1
0
Fork 0
mirror of https://github.com/Jermolene/TiddlyWiki5 synced 2024-06-25 23:03:15 +00:00
Code Issues Releases Wiki Activity

Add a popping animation to the tags editor

Browse Source
This commit is contained in:
Jeremy Ruston 2013-07-04 12:50:31 +01:00
parent c2bfe7f311
commit e6450e60e2
3 changed files with 81 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

75
core/modules/widgets/list/listviews/pop.js Normal file
View File

@ -0,0 +1,75 @@
/*\
title: $:/core/modules/widgets/list/listviews/pop.js
type: application/javascript
module-type: listview
Animates list insertions and removals
\*/
(function(){
/*jslint node: true, browser: true */
/*global $tw: false */
"use strict";
var PopListView = function(listWidget) {
this.listWidget = listWidget;
}
PopListView.prototype.insert = function(index) {
var listElementNode = this.listWidget.children[index],
targetElement = listElementNode.domNode;
// Reset once the transition is over
var transitionEventName = $tw.utils.convertEventName("transitionEnd");
targetElement.addEventListener(transitionEventName,function handler(event) {
$tw.utils.setStyle(targetElement,[
{transition: "none"},
{transform: "none"}
]);
targetElement.removeEventListener(transitionEventName,handler,false);
},false);
// Set up the initial position of the element
$tw.utils.setStyle(targetElement,[
{transition: "none"},
{transform: "scale(2)"},
{opacity: "0.0"}
]);
$tw.utils.forceLayout(targetElement);
// Transition to the final position
$tw.utils.setStyle(targetElement,[
{transition: $tw.utils.roundTripPropertyName("transform") + " " + $tw.config.preferences.animationDurationMs + " ease-in-out, " +
"opacity " + $tw.config.preferences.animationDurationMs + " ease-in-out"},
{transform: "scale(1)"},
{opacity: "1.0"}
]);
};
PopListView.prototype.remove = function(index) {
var listElementNode = this.listWidget.children[index],
targetElement = listElementNode.domNode;
// Attach an event handler for the end of the transition
targetElement.addEventListener($tw.utils.convertEventName("transitionEnd"),function(event) {
if(targetElement.parentNode) {
targetElement.parentNode.removeChild(targetElement);
}
},false);
// Animate the closure
$tw.utils.setStyle(targetElement,[
{transition: "none"},
{transform: "scale(1)"},
{opacity: "1.0"}
]);
$tw.utils.forceLayout(targetElement);
$tw.utils.setStyle(targetElement,[
{transition: $tw.utils.roundTripPropertyName("transform") + " " + $tw.config.preferences.animationDurationMs + " ease-in-out, " +
"opacity " + $tw.config.preferences.animationDurationMs + " ease-in-out"},
{transform: "scale(0.1)"},
{opacity: "0.0"}
]);
// Returning true causes the DOM node not to be deleted
return true;
};
exports.pop = PopListView;
})();

2
core/ui/TagsEditor.tid
View File

@ -1,6 +1,6 @@
title: $:/core/ui/TagsEditor
<$fieldmangler><div class="tw-edit-tags-list"><$list filter="[is[current]tags[]sort[title]]"><$setstyle name="background-color" value={{!!color}} class="tw-tag-label"><$view field="title" format="text" /><$button message="tw-remove-tag" class="btn-invisible tw-remove-tag-button">&times;</$button></$setstyle>
<$fieldmangler><div class="tw-edit-tags-list"><$list filter="[is[current]tags[]sort[title]]" listview="pop" itemClass="tw-tag-editor-label"><$setstyle name="background-color" value={{!!color}} class="tw-tag-label"><$view field="title" format="text" /><$button message="tw-remove-tag" class="btn-invisible tw-remove-tag-button">&times;</$button></$setstyle>
</$list></div>
<div class="tw-add-tag">Add a new tag: <span class="tw-add-tag-name"><$edit tiddler="$:/NewTagName" type="input" default="" placeholder="tag name" focusSet="$:/state/tagsAutoComplete" qualifyTiddlerTitles="yes"/></span> <$button popup="$:/state/tagsAutoComplete" qualifyTiddlerTitles="yes" class="btn-invisible">{{$:/core/images/down-arrow}}</$button> <span class="tw-add-tag-button"><$button message="tw-add-tag" param={{$:/NewTagName}} set="$:/NewTagName" setTo="" class="">add</$button></span></div>

5
themes/tiddlywiki/snowwhite/base.tid
View File

@ -472,6 +472,11 @@ canvas.tw-edit-bitmapeditor {
margin: 1em 0 1em 0;
}
.tw-tag-editor-label {
display: inline-block;
margin-right: 0.5em;
}
.tw-remove-tag-button {
padding-left: 4px;
}