Add demo of 'data-fittext-preserve-line-height'

patrickmarabeas · Jun 21, 2015 · 44d0cd4 · 44d0cd4
1 parent fa4808c
commit 44d0cd4
Show file tree

Hide file tree

Showing 4 changed files with 106 additions and 1 deletion.
diff --git a/demo/js/demo.js b/demo/js/demo.js
@@ -13,6 +13,14 @@
     }])
     .controller('MainController', ['$scope', function($scope) {
       $scope.dyn = 'FitText';
+      $scope.isActivePreserveLineHeight = true;
+
+      $scope.togglePreserveLineHeight = function () {
+        if ( $scope.isActivePreserveLineHeight === true )
+          $scope.isActivePreserveLineHeight = false;
+        else
+          $scope.isActivePreserveLineHeight = true;
+      };
     }]);
 
 })(window, document, angular);

diff --git a/demo/styles/main.css b/demo/styles/main.css
@@ -108,3 +108,40 @@ body {
       display: block; }
       .page code span span {
         margin-left: 20px; }
+
+#plh-container {
+  width: 100%;
+  float: left;
+  margin-bottom: 1em;
+  padding-top: 1em;
+  padding-bottom: 1em;
+  border-top: 2px solid #999;
+  border-bottom: 2px solid #999; }
+  #plh-container h3 {
+    font-size: 50px;
+    text-align: center;
+    margin-top: 10px;
+    margin-bottom: 10px; }
+  #plh-container p {
+    text-transform: uppercase; }
+
+#plh-left {
+  width: 44%;
+  float: left; }
+
+#plh-right {
+  margin-left: 56%;
+  width: 44%; }
+
+#plh-toggle {
+  padding: 1em; }
+
+.cf:before,
+.cf:after {
+  content: " ";
+  /* 1 */
+  display: table;
+  /* 2 */ }
+
+.cf:after {
+  clear: both; }
diff --git a/demo/styles/main.scss b/demo/styles/main.scss
@@ -158,4 +158,50 @@ body {
       }
     }
   }
+}
+
+#plh-container {
+  width: 100%;
+  float: left;
+  margin-bottom: 1em;
+  padding-top: 1em;
+  padding-bottom: 1em;
+  border-top: 2px solid #999;
+  border-bottom: 2px solid #999;
+
+  h3 {
+    font-size: 50px;
+    text-align: center;
+    margin-top: 10px;
+    margin-bottom: 10px;
+  }
+
+  p {
+    text-transform: uppercase;
+  }
+}
+
+#plh-left {
+  width: 44%;
+  float: left;
+}
+
+#plh-right {
+  margin-left: 56%;
+  width: 44%;
+}
+
+#plh-toggle {
+  padding: 1em;
+}
+
+// Micro clearfix - http://nicolasgallagher.com/micro-clearfix-hack/
+.cf:before,
+.cf:after {
+    content: " "; /* 1 */
+    display: table; /* 2 */
+}
+
+.cf:after {
+    clear: both;
 }
diff --git a/index.html b/index.html
@@ -23,7 +23,7 @@
 
 <div class="page">
 
-  <header data-ng-controller="MainController">
+  <header data-ng-controller="MainController" class="cf">
     <input type="text" data-ng-model="dyn" autofocus />
     <h1>
       <span class="line1" data-fittext data-fittext-min="100" data-fittext-max="310" data-ng-model="dyn">{{dyn}}</span>
@@ -37,6 +37,20 @@ <h1>
     <h2>ng-FitText.js makes font-sizes flexible. Use this directive in your fluid or responsive layout to achieve
       scalable headlines that fill the width of a parent element.</h2>
 
+    <div id="plh-container">
+      <div id="plh-left">
+        <h3 ng-if="isActivePreserveLineHeight" data-fittext data-fittext-preserve-line-height>And if you just happen</h3>
+        <h3 ng-if="!isActivePreserveLineHeight" data-fittext>And if you just happen</h3>
+        <p>to need the line-height preserved</p>
+      </div>
+      <div id="plh-right">
+        <h3 ng-if="isActivePreserveLineHeight" data-fittext data-fittext-preserve-line-height>ng-FitText.js can do that too, at the same price</h3>
+        <h3 ng-if="!isActivePreserveLineHeight" data-fittext>ng-FitText.js can do that too, at the same price</h3>
+        <p>spoiler: it's free</p>
+      </div>
+    </div>
+    <p><button id="plh-toggle" ng-click="togglePreserveLineHeight()">Toggle line-height preservation</button></p>
+
   </header>
 
   <div id="content">