mirrors/TiddlyWiki5
1
0
Fork 0
mirror of https://github.com/Jermolene/TiddlyWiki5 synced 2024-10-03 01:10:45 +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

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

@ -62,6 +62,13 @@ exports.executeMacro = function() {
}; };
exports.postRenderInDom = function() { exports.postRenderInDom = function() {
this.listview = this.chooseListView();
};
/*
Select the appropriate list viewer
*/
exports.chooseListView = function() {
// Instantiate the list view // Instantiate the list view
var listviewName; var listviewName;
if(this.hasParameter("listviewTiddler")) { if(this.hasParameter("listviewTiddler")) {
@ -71,10 +78,7 @@ exports.postRenderInDom = function() {
listviewName = this.params.listview; listviewName = this.params.listview;
} }
var ListView = this.wiki.macros.list.listviews[listviewName]; var ListView = this.wiki.macros.list.listviews[listviewName];
this.listview = ListView ? new ListView(this) : null; return ListView ? new ListView(this) : null;
if(this.listview) {
this.listview.test();
}
}; };
exports.getTiddlerList = function() { exports.getTiddlerList = function() {
@ -159,8 +163,16 @@ Remove a list element from the list, along with the attendant DOM nodes
exports.removeListElement = function(index) { exports.removeListElement = function(index) {
// Get the list element // Get the list element
var listElement = this.listFrame.children[index]; var listElement = this.listFrame.children[index];
// Remove the dom node // Invoke the listview to animate the removal
listElement.domNode.parentNode.removeChild(listElement.domNode); 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 // Then delete the actual renderer node
this.listFrame.children.splice(index,1); 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 // 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.splice(t,0,this.createListElement(this.list[t]));
this.listFrame.children[t].renderInDom(this.listFrame.domNode,this.listFrame.domNode.childNodes[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 { } else {
// Delete any list elements preceding the one we want // Delete any list elements preceding the one we want
if(index > t) { if(index > t) {

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

@ -16,8 +16,56 @@ function ClassicListView(listMacro) {
this.listMacro = listMacro; this.listMacro = listMacro;
}; };
ClassicListView.prototype.test = function() { ClassicListView.prototype.insert = function(index) {
alert("In ClassicListView"); 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; exports["classic"] = ClassicListView;