mirror of
https://github.com/Jermolene/TiddlyWiki5
synced 2024-12-25 09:30:28 +00:00
First version of the "classic" listview
This commit is contained in:
parent
c087228b33
commit
e3f6a33157
@ -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
|
||||
listElement.domNode.parentNode.removeChild(listElement.domNode);
|
||||
// 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) {
|
||||
|
@ -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;
|
||||
|
Loading…
Reference in New Issue
Block a user