freely-positioned elements (new feature)

impress · May 10, 2012 · 9ec51ef · 9ec51ef
1 parent 7fa033d
commit 9ec51ef
Show file tree

Hide file tree

Showing 3 changed files with 85 additions and 17 deletions.
diff --git a/css/impress-demo.css b/css/impress-demo.css
@@ -180,6 +180,17 @@ a:focus {
     line-height: 1.5;
 }
 
+/*
+    Styling for the freely-positioned elements.
+    We'll style them the same as the slide elements for consistency
+*/
+.positioned {
+
+    font-family: 'PT Serif', georgia, serif;
+    font-size: 48px;
+    line-height: 1.5;
+}
+
 /*
     ... and we enhance the styles for impress.js.
     
@@ -527,6 +538,16 @@ a:focus {
     cursor: pointer;
 }
 
+/*
+    For the freely-positioned element we will allocate some more space and make the text a bit tighter.
+    Since this text isn't visible on any slide, we can leave it fully opaque all the time.
+*/
+#roamfree {
+    line-height: 1.2em;
+    width: 8em;
+    font-size: 64px;
+}
+
 
 /*
     Now, when we have all the steps styled let's give users a hint how to navigate

diff --git a/index.html b/index.html
@@ -312,6 +312,21 @@ <h1>impress.js<sup>*</sup></h1>
     <div id="overview" class="step" data-x="3000" data-y="1500" data-scale="10">
     </div>
 
+    <!--
+    
+        Did you notice this element in the presentation?
+        It is not positioned in any of the slides, but only visible in the overview slide.
+
+        By setting the class to include `positioned`, you can let impress.js know that the element should be
+        put onto the canvas in the place determined by the parameters. All of the positioning parameters work exactly
+        as the ones for the steps, i.e. you can do `data-x`, `data-y`, `data-z`, `data-rotate`, `data-rotate-z`,
+       `data-rotate-x`, `data-rotate-y` and `scale`.
+    
+    -->
+    <div id="roamfree" class="positioned" data-x="-1400" data-y="4000" data-rotate="" data-scale="5">
+      By the way: did you notice that you can also position elements freely without creating a slide?
+    </div>
+
 </div>
 
 <!--

diff --git a/js/impress.js b/js/impress.js
@@ -294,24 +294,32 @@
             }
         };
 
+        // `getPositionDataFromElement` transforms the data-attributes of an element into
+        // a dictionary that is usable for positioning the element
+        var getPositionDataFromElement = function(el) {
+            var data = el.dataset;
+            var posData = {
+                translate: {
+                    x: toNumber(data.x),
+                    y: toNumber(data.y),
+                    z: toNumber(data.z)
+                },
+                rotate: {
+                    x: toNumber(data.rotateX),
+                    y: toNumber(data.rotateY),
+                    z: toNumber(data.rotateZ || data.rotate)
+                },
+                scale: toNumber(data.scale, 1),
+                el: el
+            };
+            return posData;
+        }
+
         // `initStep` initializes given step element by reading data from its
         // data attributes and setting correct styles.
         var initStep = function ( el, idx ) {
-            var data = el.dataset,
-                step = {
-                    translate: {
-                        x: toNumber(data.x),
-                        y: toNumber(data.y),
-                        z: toNumber(data.z)
-                    },
-                    rotate: {
-                        x: toNumber(data.rotateX),
-                        y: toNumber(data.rotateY),
-                        z: toNumber(data.rotateZ || data.rotate)
-                    },
-                    scale: toNumber(data.scale, 1),
-                    el: el
-                };
+
+            var step = getPositionDataFromElement(el);
 
             if ( !el.id ) {
                 el.id = "step-" + (idx + 1);
@@ -329,6 +337,20 @@
             });
         };
 
+        var initPositionedElement = function(el, idx) {
+
+            var positionData = getPositionDataFromElement(el);
+
+            css(el, {
+                position: "absolute",
+                transform: "translate(-50%,-50%)" +
+                           translate(positionData.translate) +
+                           rotate(positionData.rotate) +
+                           scale(positionData.scale),
+                transformStyle: "preserve-3d"
+            });
+        };
+
         // `init` API function that initializes (and runs) the presentation.
         var init = function () {
             if (initialized) { return; }
@@ -354,12 +376,19 @@
             };
 
             windowScale = computeWindowScale( config );
-            
-            // wrap steps with "canvas" element
+
+            // wrap steps with "canvas" elements
             // we only wrap '.step' elements here so we can have other elements that don't get transformed inside the impress-root as well, like the fallback message
             $$(".step", root).forEach(function ( el ) {
                 canvasRotate.appendChild( el );
             });
+
+            // wrap positioned items with canvas elements.
+            // we wrap .positioned items, because we will use those to put them into absolute positions later
+            $$(".positioned", root).forEach(function(el) {
+                canvasRotate.appendChild(el);
+            });
+
             canvasScale.appendChild(canvasRotate);
             root.appendChild(canvasScale);
 
@@ -393,6 +422,9 @@
             // get and init steps
             steps = $$(".step", root);
             steps.forEach( initStep );
+
+            // get and init positioned elements
+            $$(".positioned", root).forEach(initPositionedElement);
 
             // set a default initial state of the canvas
             currentState = {