mirrors/TiddlyWiki5
1
0
Fork 0
mirror of https://github.com/Jermolene/TiddlyWiki5 synced 2024-12-25 09:30:28 +00:00
Code Issues Releases Wiki Activity

First version of the "classic" listview

Browse Source
This commit is contained in:
Jeremy Ruston 2012-10-23 18:19:20 +01:00
parent c087228b33
commit e3f6a33157
2 changed files with 71 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
core/modules/macros/list/list.js
View File

@ -62,6 +62,13 @@ exports.executeMacro = function() {
};
exports.postRenderInDom = function() {
this.listview = this.chooseListView();
};
/*
Select the appropriate list viewer
*/
exports.chooseListView = function() {
// Instantiate the list view
var listviewName;
if(this.hasParameter("listviewTiddler")) {
@ -71,10 +78,7 @@ exports.postRenderInDom = function() {
listviewName = this.params.listview;
}
var ListView = this.wiki.macros.list.listviews[listviewName];
this.listview = ListView ? new ListView(this) : null;
if(this.listview) {
this.listview.test();
}
return ListView ? new ListView(this) : null;
};
exports.getTiddlerList = function() {
@ -159,8 +163,16 @@ Remove a list element from the list, along with the attendant DOM nodes
exports.removeListElement = function(index) {
// Get the list element
var listElement = this.listFrame.children[index];
// Remove the dom node
// Invoke the listview to animate the removal
if(this.listview && this.listview.remove) {
if(!this.listview.remove(index)) {
// Only delete the DOM element if the listview.remove() returned false
listElement.domNode.parentNode.removeChild(listElement.domNode);
}
} else {
// Always remove the DOM node if we didn't invoke the listview
listElement.domNode.parentNode.removeChild(listElement.domNode);
}
// Then delete the actual renderer node
this.listFrame.children.splice(index,1);
};
@ -226,6 +238,9 @@ exports.refreshInDom = function(changes) {
// The list element isn't there, so we need to insert it
this.listFrame.children.splice(t,0,this.createListElement(this.list[t]));
this.listFrame.children[t].renderInDom(this.listFrame.domNode,this.listFrame.domNode.childNodes[t]);
if(this.listview && this.listview.insert) {
this.listview.insert(t);
}
} else {
// Delete any list elements preceding the one we want
if(index > t) {

52
core/modules/macros/list/listviews/classic.js
View File

@ -16,8 +16,56 @@ function ClassicListView(listMacro) {
this.listMacro = listMacro;
};
ClassicListView.prototype.test = function() {
alert("In ClassicListView");
ClassicListView.prototype.insert = function(index) {
var listElementNode = this.listMacro.listFrame.children[index],
targetElement = listElementNode.domNode;
// Get the current height of the tiddler
var currHeight = targetElement.offsetHeight;
// Animate the closure
var d = $tw.config.preferences.animationDuration + "ms";
targetElement.style[$tw.browser.transition] = "-" + $tw.browser.prefix.toLowerCase() + "-transform " + d + " ease-in-out, " +
"opacity " + d + " ease-out, " +
"height " + d + " ease-in-out";
targetElement.style[$tw.browser.transformorigin] = "0% 0%";
targetElement.style[$tw.browser.transform] = "translateX(" + window.innerWidth + "px)";
targetElement.style.opacity = "0.0";
targetElement.style.height = "0px";
$tw.utils.forceLayout(targetElement);
targetElement.style[$tw.browser.transform] = "translateX(0px)";
targetElement.style.opacity = "1.0";
targetElement.style.height = currHeight + "px";
};
ClassicListView.prototype.remove = function(index) {
var listElementNode = this.listMacro.listFrame.children[index],
targetElement = listElementNode.domNode;
// Get the current height of the tiddler
var currHeight = targetElement.offsetHeight;
// Put a wrapper around the dom node we're closing
var wrapperElement = document.createElement("div");
targetElement.parentNode.insertBefore(wrapperElement,targetElement);
wrapperElement.appendChild(targetElement);
// Attach an event handler for the end of the transition
wrapperElement.addEventListener($tw.browser.transitionEnd,function(event) {
if(wrapperElement.parentNode) {
wrapperElement.parentNode.removeChild(wrapperElement);
}
},false);
// Animate the closure
var d = $tw.config.preferences.animationDuration + "ms";
wrapperElement.style[$tw.browser.transition] = "-" + $tw.browser.prefix.toLowerCase() + "-transform " + d + " ease-in-out, " +
"opacity " + d + " ease-out, " +
"height " + d + " ease-in-out";
wrapperElement.style[$tw.browser.transformorigin] = "0% 0%";
wrapperElement.style[$tw.browser.transform] = "translateX(0px)";
wrapperElement.style.opacity = "1.0";
wrapperElement.style.height = currHeight + "px";
$tw.utils.forceLayout(wrapperElement);
wrapperElement.style[$tw.browser.transform] = "translateX(" + window.innerWidth + "px)";
wrapperElement.style.opacity = "0.0";
wrapperElement.style.height = "0px";
// Returning true causes the DOM node not to be deleted
return true;
};
exports["classic"] = ClassicListView;