fix moving tiddlers left/right

BurningTreeC · Sep 18, 2024 · 55769e4 · 55769e4
1 parent 8c410f4
commit 55769e4
Show file tree

Hide file tree

Showing 7 changed files with 31 additions and 14 deletions.
diff --git a/TiddlyFlex/config/story-river/tiddler/ClassFilters-adding.tid b/TiddlyFlex/config/story-river/tiddler/ClassFilters-adding.tid
@@ -1,4 +1,4 @@
 title: $:/config/TiddlyFlex/story-river/tiddler/ClassFilters/adding
 tags: $:/tags/ClassFilters/TiddlerTemplate
 
-[<..currentTiddler>addprefix[$:/state/tiddlyflex/adding/]!is[missing]then[tc-tiddlyflex-adding]]
+[<..currentTiddler>addprefix[$:/state/tiddlyflex/adding/]!is[missing]get[direction]addprefix[tc-tiddlyflex-adding-from-]]
diff --git a/TiddlyFlex/config/story-river/tiddler/ClassFilters-removing.tid b/TiddlyFlex/config/story-river/tiddler/ClassFilters-removing.tid
@@ -1,4 +1,4 @@
 title: $:/config/TiddlyFlex/story-river/tiddler/ClassFilters/removing
 tags: $:/tags/ClassFilters/TiddlerTemplate
 
-[<..currentTiddler>addprefix[$:/state/tiddlyflex/removing/]!is[missing]then[tc-tiddlyflex-removing]]
+[<..currentTiddler>addprefix[$:/state/tiddlyflex/removing/]!is[missing]get[direction]addprefix[tc-tiddlyflex-removing-to-]]
diff --git a/TiddlyFlex/css/tiddler-animations.tid b/TiddlyFlex/css/tiddler-animations.tid
@@ -160,7 +160,7 @@ tags: $:/tags/Stylesheet
 
 	<% endif %>
 
-	.tc-tiddlyflex-adding {
+	.tc-tiddlyflex-adding-from-left, .tc-tiddlyflex-adding-from-right, .tc-tiddlyflex-removing-to-left, .tc-tiddlyflex-removing-to-right {
 		visibility: hidden;
 	}
 

diff --git a/TiddlyFlex/files/modules/storyviews/tiddlyflex.js b/TiddlyFlex/files/modules/storyviews/tiddlyflex.js
@@ -13,6 +13,8 @@ Views the story as a linear sequence
 "use strict";
 
 var easing = "cubic-bezier(0.645, 0.045, 0.355, 1)"; // From http://easings.net/#easeInOutCubic
+var addTimeout,
+	removeTimeout;
 
 var ClassicStoryView = function(listWidget) {
 	this.listWidget = listWidget;
@@ -53,6 +55,10 @@ ClassicStoryView.prototype.insert = function(widget) {
 			currMarginTop = parseInt(computedStyle.marginTop,10),
 			currHeight = targetElement.offsetHeight + currMarginTop;
 		// Reset the margin once the transition is over
+		clearTimeout(addTimeout);
+		addTimeout = setTimeout(function() {
+			widget.wiki.deleteTiddler("$:/state/tiddlyflex/adding/" + tiddlerTitle);
+		},duration);
 		setTimeout(function() {
 			$tw.utils.setStyle(targetElement,[
 				{transition: "none"},
@@ -76,11 +82,13 @@ ClassicStoryView.prototype.insert = function(widget) {
 	} else if(duration && !widget.wiki.tiddlerExists("$:/state/dragging") && widget.wiki.tiddlerExists("$:/state/tiddlyflex/adding/" + tiddlerTitle)) {
 		var targetElement = widget.findFirstDomNode();
 		widget.wiki.setText("$:/state/tiddlyflex/adding/" + tiddlerTitle,"height",undefined,targetElement.offsetHeight);
-		setTimeout(function() {
+		clearTimeout(addTimeout);
+		addTimeout = setTimeout(function() {
 			widget.wiki.deleteTiddler("$:/state/tiddlyflex/adding/" + tiddlerTitle);
 		},duration);
 	} else {
-		setTimeout(function() {
+		clearTimeout(addTimeout);
+		addTimeout = setTimeout(function() {
 			widget.wiki.deleteTiddler("$:/state/tiddlyflex/adding/" + tiddlerTitle);
 		},duration);
 	}
@@ -96,6 +104,7 @@ ClassicStoryView.prototype.remove = function(widget) {
 		var targetElement = widget.findFirstDomNode(),
 			removeElement = function() {
 				widget.removeChildDomNodes();
+				widget.wiki.deleteTiddler("$:/state/tiddlyflex/removing/" + tiddlerTitle);
 			};
 		// Abandon if the list entry isn't a DOM element (it might be a text node)
 		if(!targetElement || targetElement.nodeType === Node.TEXT_NODE) {
@@ -109,6 +118,10 @@ ClassicStoryView.prototype.remove = function(widget) {
 			currMarginTop = parseInt(computedStyle.marginTop,10),
 			currHeight = targetElement.offsetHeight + currMarginTop;
 		// Remove the dom nodes of the widget at the end of the transition
+		clearTimeout(removeTimeout);
+		removeTimeout = setTimeout(function() {
+			widget.wiki.deleteTiddler("$:/state/tiddlyflex/removing/" + tiddlerTitle);
+		},duration);
 		setTimeout(removeElement,duration);
 		// Animate the closure
 		$tw.utils.setStyle(targetElement,[
@@ -130,13 +143,17 @@ ClassicStoryView.prototype.remove = function(widget) {
 		var targetElement = widget.findFirstDomNode(),
 			removeElement = function() {
 				widget.removeChildDomNodes();
-				widget.wiki.deleteTiddler("$:/state/tiddlyflex/removing/" + tiddlerTitle);
 			};
 		widget.wiki.setText("$:/state/tiddlyflex/removing/" + tiddlerTitle,"height",undefined,targetElement.offsetHeight);
+		clearTimeout(removeTimeout);
+		removeTimeout = setTimeout(function() {
+			widget.wiki.deleteTiddler("$:/state/tiddlyflex/removing/" + tiddlerTitle);
+		},duration);
 		setTimeout(removeElement,duration);
 	} else {
 		widget.removeChildDomNodes();
-		setTimeout(function() {
+		clearTimeout(removeTimeout);
+		removeTimeout = setTimeout(function() {
 			widget.wiki.deleteTiddler("$:/state/tiddlyflex/removing/" + tiddlerTitle);
 		},duration);
 	}

diff --git a/TiddlyFlex/plugin.info b/TiddlyFlex/plugin.info
@@ -4,7 +4,7 @@
 	"name": "TiddlyFlex",
 	"plugin-type": "plugin",
 	"author": "Simon Huber",
-	"version": "0.3.3",
+	"version": "0.3.4",
 	"core-version": ">=5.3.3",
 	"source": "https://github.com/BurningTreeC/TiddlyFlex",
 	"list": "readme license"

diff --git a/TiddlyFlex/ui/Layout.tid b/TiddlyFlex/ui/Layout.tid
@@ -58,23 +58,23 @@ code-body: yes
 \end
 \procedure tiddlyflex-layout-header()
 \whitespace trim
-<$dynanode class="tc-tiddlyflex-header" enable={{{ [{$:/config/tiddlyflex/story-river/dynanode}match[yes]] }}} animationlist="$:/state/sidebar/resizing $:/state/sidebar/posx" selectors="[[:not(*)]]" removeselectors="[[:not(*)]]">
+<$dynanode class="tc-tiddlyflex-header" enable={{{ [{$:/config/tiddlyflex/story-river/dynanode}match[yes]then[$:/state/sidebar/resizing]get[text]match[yes]] }}} animationlist="$:/state/sidebar/resizing $:/state/sidebar/posx" selectors="[[:not(*)]]" removeselectors="[[:not(*)]]">
 	<$list filter="[{$:/status/RequireReloadDueToPluginChange}match[yes]then{$:/temp/HidePluginWarning}!match[yes]then[$:/plugins/BTC/TiddlyFlex/ui/Toolbars/PluginReloadWarning]] [all[shadows+tiddlers]tag[$:/tags/TopToolbar]!is[draft]] :filter[lookup[$:/config/TiddlyFlex/Toolbars/Visibility/]!match[hide]]" variable="listItem" storyview="pop">
 		<$transclude tiddler=<<listItem>>/>
 	</$list>
 </$dynanode>
 \end
 \procedure tiddlyflex-layout-leftbar()
 \whitespace trim
-<$dynanode class="tc-tiddlyflex-leftbar" enable={{{ [{$:/config/tiddlyflex/story-river/dynanode}match[yes]] }}} animationlist="$:/state/sidebar/resizing $:/state/sidebar/posx" selectors="[[:not(*)]]" removeselectors="[[:not(*)]]">
+<$dynanode class="tc-tiddlyflex-leftbar" enable={{{ [{$:/config/tiddlyflex/story-river/dynanode}match[yes]then[$:/state/sidebar/resizing]get[text]match[yes]] }}} animationlist="$:/state/sidebar/resizing $:/state/sidebar/posx" selectors="[[:not(*)]]" removeselectors="[[:not(*)]]">
 	<$list filter="[all[shadows+tiddlers]tag[$:/tags/LeftToolbar]!is[draft]] :filter[lookup[$:/config/TiddlyFlex/Toolbars/Visibility/]!match[hide]]" variable="listItem" storyview="pop">
 		<$transclude tiddler=<<listItem>>/>
 	</$list>
 </$dynanode>
 \end
 \procedure tiddlyflex-layout-footer()
 \whitespace trim
-<$dynanode class="tc-tiddlyflex-footer" enable={{{ [{$:/config/tiddlyflex/story-river/dynanode}match[yes]] }}} animationlist="$:/state/sidebar/resizing $:/state/sidebar/posx" selectors="[[:not(*)]]" removeselectors="[[:not(*)]]">
+<$dynanode class="tc-tiddlyflex-footer" enable={{{ [{$:/config/tiddlyflex/story-river/dynanode}match[yes]then[$:/state/sidebar/resizing]get[text]match[yes]] }}} animationlist="$:/state/sidebar/resizing $:/state/sidebar/posx" selectors="[[:not(*)]]" removeselectors="[[:not(*)]]">
 	<$list filter="[all[shadows+tiddlers]tag[$:/tags/BottomToolbar]!is[draft]] :filter[lookup[$:/config/TiddlyFlex/Toolbars/Visibility/]!match[hide]]" variable="listItem" storyview="pop">
 		<$transclude tiddler=<<listItem>>/>
 	</$list>
@@ -107,13 +107,13 @@ code-body: yes
 					</$eventcatcher>
 				<% endif %>
 				<div class="tc-tiddlyflex-story-river-container">
-					<$dynanode class="tc-tiddlyflex-story-river-container-inner" enable={{{ [{$:/config/tiddlyflex/story-river/dynanode}match[yes]] }}} animationlist="$:/state/sidebar/resizing $:/state/sidebar/posx">
+					<$dynanode class="tc-tiddlyflex-story-river-container-inner" enable={{{ [{$:/config/tiddlyflex/story-river/dynanode}match[yes]then[$:/state/sidebar/resizing]get[text]match[yes]] }}} animationlist="$:/state/sidebar/resizing $:/state/sidebar/posx">
 						<<tiddlyflex-layout-story-rivers>>
 					</$dynanode>
 					<<tiddlyflex-layout-drafts>>
 				</div>
 				<div class="tc-tiddlyflex-sidebar">
-					<$dynanode class="tc-tiddlyflex-sidebar-container" enable={{{ [{$:/config/tiddlyflex/story-river/dynanode}match[yes]] }}} animationlist="$:/state/sidebar/resizing $:/state/sidebar/posx" selectors="[[:not(*)]]" removeselectors="[[:not(*)]]">
+					<$dynanode class="tc-tiddlyflex-sidebar-container" enable={{{ [{$:/config/tiddlyflex/story-river/dynanode}match[yes]then[$:/state/sidebar/resizing]get[text]match[yes]] }}} animationlist="$:/state/sidebar/resizing $:/state/sidebar/posx" selectors="[[:not(*)]]" removeselectors="[[:not(*)]]">
 						<div class="tc-tiddlyflex-sidebar-container-inner">
 							<$macrocall $name="tiddlyflex-message-catcher-outside" tiddlyflex-layout-inner=<<tiddlyflex-layout-sidebar>>/>
 						</div>

diff --git a/TiddlyFlex/ui/Templates/story.tid b/TiddlyFlex/ui/Templates/story.tid
@@ -7,7 +7,7 @@ code-body: yes
 <$list filter=<<tdff.tiddlyflex-story-river-filter>> history=<<tv-history-list>> template="$:/core/ui/StoryTiddlerTemplate" storyview="tiddlyflex" emptyMessage={{{ [list<tv-story-list>limit[1]then[]else{$(emptyMessageTiddler)$}] }}}/>
 
 \end
-<$dynanode enable={{{ [{$:/config/tiddlyflex/story-river/dynanode}match[yes]] }}} animationlist="$:/state/sidebar/resizing $:/state/sidebar/posx" class={{{ [subfilter<tdff.tiddlyflex-enlist-columns>] :intersection[{$:/columns!!current-column}] ~[subfilter<tdff.tiddlyflex-current-column-filtered>] +[match<tiddlyFlexColumn>then[tc-tiddlyflex-story-river-active]] [[tc-tiddlyflex-story-river-wrapper-inner]] [[tc-tiddlyflex-story-river-]addsuffix<tiddlyFlexColumn>] :and[unique[]join[ ]] }}}>
+<$dynanode enable={{{ [{$:/config/tiddlyflex/story-river/dynanode}match[yes]then[$:/state/sidebar/resizing]get[text]match[yes]] }}} animationlist="$:/state/sidebar/resizing $:/state/sidebar/posx" class={{{ [subfilter<tdff.tiddlyflex-enlist-columns>] :intersection[{$:/columns!!current-column}] ~[subfilter<tdff.tiddlyflex-current-column-filtered>] +[match<tiddlyFlexColumn>then[tc-tiddlyflex-story-river-active]] [[tc-tiddlyflex-story-river-wrapper-inner]] [[tc-tiddlyflex-story-river-]addsuffix<tiddlyFlexColumn>] :and[unique[]join[ ]] }}}>
 
 	<$dropzone enable={{{ [tdff.tiddlyflex-fullscreen[]is[blank]then<tv-enable-drag-and-drop>] }}} class={{{ [<tiddlyFlexColumn>!is[blank]addprefix[tc-tiddlyflex-dropzone-]] ~tc-tiddlyflex-dropzone-1 }}} importTitle={{{ [[$:/Import-]addsuffix<tiddlyFlexColumn>] }}}>