diff --git a/editions/prerelease/tiddlywiki.info b/editions/prerelease/tiddlywiki.info index 88261c531..018eb9788 100644 --- a/editions/prerelease/tiddlywiki.info +++ b/editions/prerelease/tiddlywiki.info @@ -15,7 +15,8 @@ "tiddlywiki/bibtex", "tiddlywiki/savetrail", "tiddlywiki/twitter", - "tiddlywiki/external-attachments" + "tiddlywiki/external-attachments", + "tiddlywiki/dynaview" ], "themes": [ "tiddlywiki/vanilla", diff --git a/plugins/tiddlywiki/dynaview/above-story.tid b/plugins/tiddlywiki/dynaview/above-story.tid new file mode 100644 index 000000000..89e32f4d5 --- /dev/null +++ b/plugins/tiddlywiki/dynaview/above-story.tid @@ -0,0 +1,7 @@ +title: $:/plugins/tiddlywiki/dynaview/above-story +tags: $:/tags/AboveStory-disabled + + +
+<$transclude tiddler={{$:/state/tab--1915807570}} mode="block"/> +
diff --git a/plugins/tiddlywiki/dynaview/docs.tid b/plugins/tiddlywiki/dynaview/docs.tid new file mode 100644 index 000000000..90146870d --- /dev/null +++ b/plugins/tiddlywiki/dynaview/docs.tid @@ -0,0 +1,53 @@ +title: $:/plugins/tiddlywiki/dynaview/docs + +! Documentation + +The components of this plugin include: + +* A background task that: +** performs specified actions when elements are scrolled into view +** updates certain base classes on the `document.body` according to the current zoom level +* Pre-configured CSS classes to simplify using those base classes +* Usage examples + +! Scroll Features + +The background task detects when elements with the class `tc-dynaview-set-tiddler-when-visible` scroll into view. The first time that they do, the background task assigns the value in the attribute `data-dynaview-set-value` to the tiddler whose title is in the attribute `data-dynaview-set-tiddler`. This assignment can be tied to a reveal widget to cause content to be displayed when it becomes visible. If the class `tc-dynaview-expand-viewport` is set then the viewport is expanded so that the processing occurs when elements move near the viewport. + +! Zoom Features + +!! Document Body Zoom Classes + +The background task sets the following classes on `document.body` according to the current zoom level. + +|!Class |!Description | +|`tc-dynaview-zoom-factor-1` |Set when the zoom level is less than 2.00 | +|`tc-dynaview-zoom-factor-2` |Set when the zoom level is greater than 2.00 and less than 3.00 | +|`tc-dynaview-zoom-factor-3` |Set when the zoom level is greater than 3.00 and less than 4.00 | +|`tc-dynaview-zoom-factor-4` |Set when the zoom level is greater than 4.00 | +|`tc-dynaview-zoom-factor-1-and-above` |Set when the zoom level is greater than or equal to 1.00 | +|`tc-dynaview-zoom-factor-1a-and-above` |Set when the zoom level is greater than or equal to 1.14 | +|`tc-dynaview-zoom-factor-1b-and-above` |Set when the zoom level is greater than or equal to 1.33 | +|`tc-dynaview-zoom-factor-1c-and-above` |Set when the zoom level is greater than or equal to 1.60 | +|`tc-dynaview-zoom-factor-2-and-above` |Set when the zoom level is greater than or equal to 2.00 | +|`tc-dynaview-zoom-factor-2a-and-above` |Set when the zoom level is greater than or equal to 2.66 | +|`tc-dynaview-zoom-factor-3-and-above` |Set when the zoom level is greater than or equal to 3.00 | +|`tc-dynaview-zoom-factor-4-and-above` |Set when the zoom level is greater than or equal to 4.00 | + +!! Pre-configured Classes + +These classes can be used on any element to control its visibility at different zoom levels. + +|!Class |!Description | +|`tc-dynaview-zoom-visible-1-and-above` |Visible when the zoom level is 1.00 or more | +|`tc-dynaview-zoom-visible-1a-and-above` |Visible when the zoom level is 1.14 or more | +|`tc-dynaview-zoom-visible-1b-and-above` |Visible when the zoom level is 1.33 or more | +|`tc-dynaview-zoom-visible-1c-and-above` |Visible when the zoom level is 1.60 or more | +|`tc-dynaview-zoom-visible-2-and-above` |Visible when the zoom level is 2.00 or more | +|`tc-dynaview-zoom-visible-2a-and-above` |Visible when the zoom level is 2.66 or more | +|`tc-dynaview-zoom-visible-3-and-above` |Visible when the zoom level is 3.00 or more | +|`tc-dynaview-zoom-visible-4-and-above` |Visible when the zoom level is 4.00 or more | +|`tc-dynaview-zoom-visible-1` |Visible when the zoom level is less than 2.00 | +|`tc-dynaview-zoom-visible-2` |Visible when the zoom level is greater than or equal to 2.00 and less than 3.00 | +|`tc-dynaview-zoom-visible-3` |Visible when the zoom level is greater than or equal to 3.00 and less than 4.00 | +|`tc-dynaview-zoom-visible-4` |Visible when the zoom level is greater than or equal to 4.00 | diff --git a/plugins/tiddlywiki/dynaview/dynaview.js b/plugins/tiddlywiki/dynaview/dynaview.js new file mode 100644 index 000000000..45a6453d8 --- /dev/null +++ b/plugins/tiddlywiki/dynaview/dynaview.js @@ -0,0 +1,94 @@ +/*\ +title: $:/plugins/tiddlywiki/dynaview/dynaview.js +type: application/javascript +module-type: startup + +Zoom everything + +\*/ +(function(){ + +/*jslint node: true, browser: true */ +/*global $tw: false */ +"use strict"; + +// Export name and synchronous status +exports.name = "dynaview"; +exports.platforms = ["browser"]; +exports.after = ["render"]; +exports.synchronous = true; + +var isWaitingForAnimationFrame = false; + +exports.startup = function() { + window.addEventListener("load",onScrollOrResize,false); + window.addEventListener("scroll",onScrollOrResize,false); + window.addEventListener("resize",onScrollOrResize,false); + $tw.hooks.addHook("th-page-refreshed",function() { + checkVisibility(); + }); +}; + +function onScrollOrResize(event) { + if(!isWaitingForAnimationFrame) { + window.requestAnimationFrame(function() { + setZoomClasses(); + checkVisibility(); + isWaitingForAnimationFrame = false; + }); + } + isWaitingForAnimationFrame = true; +} + +function setZoomClasses() { + var zoomFactor = document.body.scrollWidth / window.innerWidth, + classList = document.body.classList; + classList.add("tc-dynaview") + classList.toggle("tc-dynaview-zoom-factor-1",zoomFactor <= 2); + classList.toggle("tc-dynaview-zoom-factor-1-and-above",zoomFactor >= 1); + classList.toggle("tc-dynaview-zoom-factor-1a-and-above",zoomFactor >= 1.14); + classList.toggle("tc-dynaview-zoom-factor-1b-and-above",zoomFactor >= 1.33); + classList.toggle("tc-dynaview-zoom-factor-1c-and-above",zoomFactor >= 1.6); + classList.toggle("tc-dynaview-zoom-factor-2",zoomFactor >= 2 && zoomFactor <= 3); + classList.toggle("tc-dynaview-zoom-factor-2-and-above",zoomFactor >= 2); + classList.toggle("tc-dynaview-zoom-factor-2a-and-above",zoomFactor >= 2.66); + classList.toggle("tc-dynaview-zoom-factor-3",zoomFactor >= 3 && zoomFactor <= 4); + classList.toggle("tc-dynaview-zoom-factor-3-and-above",zoomFactor >= 3); + classList.toggle("tc-dynaview-zoom-factor-4",zoomFactor >= 4); + classList.toggle("tc-dynaview-zoom-factor-4-and-above",zoomFactor >= 4); +} + +function checkVisibility() { + var elements = document.querySelectorAll(".tc-dynaview-set-tiddler-when-visible"); + $tw.utils.each(elements,function(element) { + // Check if the element is visible + var elementRect = element.getBoundingClientRect(), + viewportWidth = window.innerWidth || document.documentElement.clientWidth, + viewportHeight = window.innerHeight || document.documentElement.clientHeight, + viewportRect = { + left: 0, + right: viewportWidth, + top: 0, + bottom: viewportHeight + }; + if(element.classList.contains("tc-dynaview-expand-viewport")) { + viewportRect.left -= viewportWidth; + viewportRect.right += viewportWidth; + viewportRect.top -= viewportHeight; + viewportRect.bottom += viewportHeight; + } + if(!(elementRect.left > viewportRect.right || + elementRect.right < viewportRect.left || + elementRect.top > viewportRect.bottom || + elementRect.bottom < viewportRect.top)) { + // Set the tiddler value + var tiddler = element.getAttribute("data-dynaview-set-tiddler"), + value = element.getAttribute("data-dynaview-set-value") || ""; + if(tiddler && $tw.wiki.getTiddlerText(tiddler) !== value) { + $tw.wiki.addTiddler(new $tw.Tiddler({title: tiddler, text: value})); + } + } + }); +} + +})(); \ No newline at end of file diff --git a/plugins/tiddlywiki/dynaview/examples.tid b/plugins/tiddlywiki/dynaview/examples.tid new file mode 100644 index 000000000..6fe5605b6 --- /dev/null +++ b/plugins/tiddlywiki/dynaview/examples.tid @@ -0,0 +1,3 @@ +title: $:/plugins/tiddlywiki/dynaview/examples + +<> diff --git a/plugins/tiddlywiki/dynaview/examples/progressive-text.tid b/plugins/tiddlywiki/dynaview/examples/progressive-text.tid new file mode 100644 index 000000000..7dd37ae6b --- /dev/null +++ b/plugins/tiddlywiki/dynaview/examples/progressive-text.tid @@ -0,0 +1,47 @@ +title: $:/plugins/tiddlywiki/dynaview/examples/progressive-text +tags: $:/tags/dynaviewExamples +caption: Progressive Text + +//Zoom into the space below to see a poem// + +''N.B. This example only works in Safari at the moment'' + +

+         'Fury said to a
+         mouse, That he
+        met in the
+       house,
     "Let us
+      both go to
+       law: I will
+        prosecute
+         YOU.--Come,
           I'll take no
+           denial; We
+          must have a
+        trial: For
      really this
+     morning I've
+    nothing
+    to do."
     Said the
+      mouse to the
+       cur, "Such
+        a trial,
+         dear Sir,
            With
+          no jury
+        or judge,
+       would be
+      wasting
+      our
+      breath."
       "I'll be
+        judge, I'll
+         be jury,"
+            Said
+         cunning
+          old Fury:
+          "I'll
+          try the
+            whole
+            cause,
              and
+           condemn
+           you
+          to
+           death."'
+
diff --git a/plugins/tiddlywiki/dynaview/examples/reveal-on-scroll.tid b/plugins/tiddlywiki/dynaview/examples/reveal-on-scroll.tid new file mode 100644 index 000000000..a9abbebb2 --- /dev/null +++ b/plugins/tiddlywiki/dynaview/examples/reveal-on-scroll.tid @@ -0,0 +1,26 @@ +title: $:/plugins/tiddlywiki/dynaview/examples/reveal-on-scroll +tags: $:/tags/dynaviewExamples +caption: Reveal on Scroll + +\define indicator(index) +<$reveal state="$:/state/reveal-on-scroll/example$index$" type="match" text="yes"> +$index$ + +\end + +\define lorem-ipsum(index) +
+

Heading $index$

+<$reveal state="$:/state/reveal-on-scroll/example$index$" type="match" text="yes"> +(Rendered at <>) Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. + +
+\end + +Visible: <$list filter="1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16"> +<$macrocall $name="indicator" index=<>/> + + +<$list filter="1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16"> +<$macrocall $name="lorem-ipsum" index=<>/> + diff --git a/plugins/tiddlywiki/dynaview/examples/zoomable-diagram-content.json b/plugins/tiddlywiki/dynaview/examples/zoomable-diagram-content.json new file mode 100644 index 000000000..89d0b86ad --- /dev/null +++ b/plugins/tiddlywiki/dynaview/examples/zoomable-diagram-content.json @@ -0,0 +1,134 @@ +[ + { + "title": "$:/plugins/tiddlywiki/dynaview/zoomable-diagram/TiddlyWiki Architecture", + "caption": "TiddlyWiki Architecture", + "tags": "[[$:/tags:/ZoomableDiagram]]", + "text": "<>" + }, + { + "title": "$:/plugins/tiddlywiki/dynaview/zoomable-diagram/Browser Architecture", + "caption": "Browser Architecture", + "tags": "[[$:/plugins/tiddlywiki/dynaview/zoomable-diagram/TiddlyWiki Architecture]]", + "text": "<>" + }, + { + "title": "$:/plugins/tiddlywiki/dynaview/zoomable-diagram/Service Workers", + "caption": "Service Workers", + "tags": "[[$:/plugins/tiddlywiki/dynaview/zoomable-diagram/Browser Architecture]]", + "text": "<>" + }, + { + "title": "$:/plugins/tiddlywiki/dynaview/zoomable-diagram/Service Bosses", + "caption": "Service Bosses", + "tags": "[[$:/plugins/tiddlywiki/dynaview/zoomable-diagram/Service Workers]]", + "text": "<>" + }, + { + "title": "$:/plugins/tiddlywiki/dynaview/zoomable-diagram/Out of Service Workers", + "caption": "Out of Service Workers", + "tags": "[[$:/plugins/tiddlywiki/dynaview/zoomable-diagram/Service Workers]]", + "text": "<>" + }, + { + "title": "$:/plugins/tiddlywiki/dynaview/zoomable-diagram/Events", + "caption": "Events", + "tags": "[[$:/plugins/tiddlywiki/dynaview/zoomable-diagram/Browser Architecture]]", + "text": "<>" + }, + { + "title": "$:/plugins/tiddlywiki/dynaview/zoomable-diagram/Non Events", + "caption": "Non Events", + "tags": "[[$:/plugins/tiddlywiki/dynaview/zoomable-diagram/Events]]", + "text": "<>" + }, + { + "title": "$:/plugins/tiddlywiki/dynaview/zoomable-diagram/Past Events", + "caption": "Past Events", + "tags": "[[$:/plugins/tiddlywiki/dynaview/zoomable-diagram/Events]]", + "text": "<>" + }, + { + "title": "$:/plugins/tiddlywiki/dynaview/zoomable-diagram/DOM", + "caption": "DOM", + "tags": "[[$:/plugins/tiddlywiki/dynaview/zoomable-diagram/Browser Architecture]]", + "text": "<>" + }, + { + "title": "$:/plugins/tiddlywiki/dynaview/zoomable-diagram/Nodes", + "caption": "Nodes", + "tags": "[[$:/plugins/tiddlywiki/dynaview/zoomable-diagram/DOM]]", + "text": "<>" + }, + { + "title": "$:/plugins/tiddlywiki/dynaview/zoomable-diagram/Attributes", + "caption": "Attributes", + "tags": "[[$:/plugins/tiddlywiki/dynaview/zoomable-diagram/DOM]]", + "text": "<>" + }, + { + "title": "$:/plugins/tiddlywiki/dynaview/zoomable-diagram/Pathogens", + "caption": "Pathogens", + "tags": "[[$:/plugins/tiddlywiki/dynaview/zoomable-diagram/DOM]]", + "text": "<>" + }, + { + "title": "$:/plugins/tiddlywiki/dynaview/zoomable-diagram/Connection", + "caption": "Connection", + "tags": "[[$:/plugins/tiddlywiki/dynaview/zoomable-diagram/TiddlyWiki Architecture]]", + "text": "<>" + }, + { + "title": "$:/plugins/tiddlywiki/dynaview/zoomable-diagram/HTTP", + "caption": "HTTP", + "tags": "[[$:/plugins/tiddlywiki/dynaview/zoomable-diagram/Connection]]", + "text": "<>" + }, + { + "title": "$:/plugins/tiddlywiki/dynaview/zoomable-diagram/Server Architecture", + "caption": "Server Architecture", + "tags": "[[$:/plugins/tiddlywiki/dynaview/zoomable-diagram/TiddlyWiki Architecture]]", + "text": "<>" + }, + { + "title": "$:/plugins/tiddlywiki/dynaview/zoomable-diagram/Node.js", + "caption": "Node.js", + "tags": "[[$:/plugins/tiddlywiki/dynaview/zoomable-diagram/Server Architecture]]", + "text": "<>" + }, + { + "title": "$:/plugins/tiddlywiki/dynaview/zoomable-diagram/C/C++", + "caption": "C/C++", + "tags": "[[$:/plugins/tiddlywiki/dynaview/zoomable-diagram/Node.js]]", + "text": "<>" + }, + { + "title": "$:/plugins/tiddlywiki/dynaview/zoomable-diagram/Quotation Marks", + "caption": "Quotation Marks", + "tags": "[[$:/plugins/tiddlywiki/dynaview/zoomable-diagram/Node.js]]", + "text": "<>" + }, + { + "title": "$:/plugins/tiddlywiki/dynaview/zoomable-diagram/Asterisks", + "caption": "Asterisks", + "tags": "[[$:/plugins/tiddlywiki/dynaview/zoomable-diagram/Node.js]]", + "text": "<>" + }, + { + "title": "$:/plugins/tiddlywiki/dynaview/zoomable-diagram/Potatoes", + "caption": "Potatoes", + "tags": "[[$:/plugins/tiddlywiki/dynaview/zoomable-diagram/Server Architecture]]", + "text": "<>" + }, + { + "title": "$:/plugins/tiddlywiki/dynaview/zoomable-diagram/Carrots", + "caption": "Carrots", + "tags": "[[$:/plugins/tiddlywiki/dynaview/zoomable-diagram/Potatoes]]", + "text": "<>" + }, + { + "title": "$:/plugins/tiddlywiki/dynaview/zoomable-diagram/Apricots", + "caption": "Apricots", + "tags": "[[$:/plugins/tiddlywiki/dynaview/zoomable-diagram/Potatoes]]", + "text": "<>" + } +] diff --git a/plugins/tiddlywiki/dynaview/examples/zoomable-diagram.tid b/plugins/tiddlywiki/dynaview/examples/zoomable-diagram.tid new file mode 100644 index 000000000..c543b2132 --- /dev/null +++ b/plugins/tiddlywiki/dynaview/examples/zoomable-diagram.tid @@ -0,0 +1,111 @@ +title: $:/plugins/tiddlywiki/dynaview/examples/zoomable-diagram +tags: $:/tags/dynaviewExamples +caption: Zoomable Diagram + +\define lorem-ipsum() +Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +\end + +\define zoomable-diagram(tag,level:"1 2 3 4 5 6 7") +
+ <$list filter="[all[shadows+tiddlers]tag[$tag$]]"> +
+
+ <$transclude field="caption" mode="inline"/> +
+
+
+ <$transclude field="text" mode="block"/> +
+
+ <$set name="new-level" filter=""" $level$ +[butfirst[]] """> + <$macrocall $name="zoomable-diagram" tag=<> level=<>/> + +
+
+
+ +
+\end + +//Zoom into the diagram below to find out more// + +''N.B. This example only works in Safari at the moment'' + + + +
+<> +
diff --git a/plugins/tiddlywiki/dynaview/examples/zoomable-tooltips.tid b/plugins/tiddlywiki/dynaview/examples/zoomable-tooltips.tid new file mode 100644 index 000000000..8f5640607 --- /dev/null +++ b/plugins/tiddlywiki/dynaview/examples/zoomable-tooltips.tid @@ -0,0 +1,56 @@ +title: $:/plugins/tiddlywiki/dynaview/examples/zoomable-tooltips +tags: $:/tags/dynaviewExamples +caption: Zoomable Tooltips + +//Zoom into the images below to see their titles// + +''N.B. This example only works in Safari at the moment'' + + +
+<$list filter="[all[tiddlers+shadows]tag[$:/tags/Image]]"> +
+ +<$transclude/> + + +<$text text=<>/> + +
+ +
diff --git a/plugins/tiddlywiki/dynaview/macros.tid b/plugins/tiddlywiki/dynaview/macros.tid new file mode 100644 index 000000000..d48def8f9 --- /dev/null +++ b/plugins/tiddlywiki/dynaview/macros.tid @@ -0,0 +1,13 @@ +title: $:/plugins/tiddlywiki/dynaview/macros +tags: $:/tags/Macro + +\define transclude-when-visible(tiddler,mode:"block",state,minHeight:"1em",loadingText:"…") +
> data-dynaview-set-value="visible"> +<$reveal state=<<__state__>> type="match" text="visible"> +<$transclude tiddler=<<__tiddler__>> mode=<<__block__>>/> + +<$reveal state=<<__state__>> type="nomatch" text="visible"> +$loadingText$ + +
+\end diff --git a/plugins/tiddlywiki/dynaview/plugin.info b/plugins/tiddlywiki/dynaview/plugin.info new file mode 100644 index 000000000..28d4191d0 --- /dev/null +++ b/plugins/tiddlywiki/dynaview/plugin.info @@ -0,0 +1,7 @@ +{ + "title": "$:/plugins/tiddlywiki/dynaview", + "description": "Dynamic scrolling and zooming effects", + "author": "JeremyRuston", + "core-version": ">=5.0.0", + "list": "readme docs examples" +} diff --git a/plugins/tiddlywiki/dynaview/readme.tid b/plugins/tiddlywiki/dynaview/readme.tid new file mode 100644 index 000000000..846d65e27 --- /dev/null +++ b/plugins/tiddlywiki/dynaview/readme.tid @@ -0,0 +1,16 @@ +title: $:/plugins/tiddlywiki/dynaview/readme + +! Dynaview + +This plugin makes it possible to build user interfaces that dynamically respond to changes in the browser viewport via scrolling or zooming: + +* CSS classes that allow rendering to be deferred until the output is scrolled into view +* CSS classes that allow the opacity of DOM elements to vary according to the current zoom level + +Some points to note about the zoom features: + +* The zoom level currently only works on Safari, both on Mac OS and on the iPhone/iPad +* The zoom level tracked by the plugin is the pinch-zoom level, and not the text-zoom level +* Rather than being progressively rendered as needed, hidden item are rendered with zero opacity. Which means that they can still be interacted with + +This is really just a proof of concept to allow the user experience to be evaluated. A production version would need to work in all browsers, which would mean adopting a polyfill such as [[Hammer.js|http://hammerjs.github.io/]] to give us manual pan and zoom support. It would also allow deeper levels of zoom. diff --git a/plugins/tiddlywiki/dynaview/styles.tid b/plugins/tiddlywiki/dynaview/styles.tid new file mode 100644 index 000000000..aeda4e356 --- /dev/null +++ b/plugins/tiddlywiki/dynaview/styles.tid @@ -0,0 +1,34 @@ +title: $:/plugins/tiddlywiki/help/styles +tags: [[$:/tags/Stylesheet]] + +\rules only filteredtranscludeinline transcludeinline macrodef macrocallinline + +body.tc-dynaview .tc-dynaview-zoom-visible-1-and-above, +body.tc-dynaview .tc-dynaview-zoom-visible-1a-and-above, +body.tc-dynaview .tc-dynaview-zoom-visible-1b-and-above, +body.tc-dynaview .tc-dynaview-zoom-visible-1c-and-above, +body.tc-dynaview .tc-dynaview-zoom-visible-2-and-above, +body.tc-dynaview .tc-dynaview-zoom-visible-2a-and-above, +body.tc-dynaview .tc-dynaview-zoom-visible-3-and-above, +body.tc-dynaview .tc-dynaview-zoom-visible-4-and-above, +body.tc-dynaview .tc-dynaview-zoom-visible-1, +body.tc-dynaview .tc-dynaview-zoom-visible-2, +body.tc-dynaview .tc-dynaview-zoom-visible-3, +body.tc-dynaview .tc-dynaview-zoom-visible-4 { + transition: opacity 150ms ease-in-out; + opacity: 0; +} + +body.tc-dynaview .tc-dynaview-zoom-visible-1-and-above {opacity: 1;} +body.tc-dynaview.tc-dynaview-zoom-factor-1a-and-above .tc-dynaview-zoom-visible-1a-and-above {opacity: 1;} +body.tc-dynaview.tc-dynaview-zoom-factor-1b-and-above .tc-dynaview-zoom-visible-1b-and-above {opacity: 1;} +body.tc-dynaview.tc-dynaview-zoom-factor-1c-and-above .tc-dynaview-zoom-visible-1c-and-above {opacity: 1;} +body.tc-dynaview.tc-dynaview-zoom-factor-2-and-above .tc-dynaview-zoom-visible-2-and-above {opacity: 1;} +body.tc-dynaview.tc-dynaview-zoom-factor-2a-and-above .tc-dynaview-zoom-visible-2a-and-above {opacity: 1;} +body.tc-dynaview.tc-dynaview-zoom-factor-3-and-above .tc-dynaview-zoom-visible-3-and-above {opacity: 1;} +body.tc-dynaview.tc-dynaview-zoom-factor-4-and-above .tc-dynaview-zoom-visible-4-and-above {opacity: 1;} + +body.tc-dynaview.tc-dynaview-zoom-factor-1 .tc-dynaview-zoom-visible-1 {opacity: 1;} +body.tc-dynaview.tc-dynaview-zoom-factor-2 .tc-dynaview-zoom-visible-2 {opacity: 1;} +body.tc-dynaview.tc-dynaview-zoom-factor-3 .tc-dynaview-zoom-visible-3 {opacity: 1;} +body.tc-dynaview.tc-dynaview-zoom-factor-4 .tc-dynaview-zoom-visible-4 {opacity: 1;}