show animated icons, closes #53

ionic-team · Jan 6, 2014 · daa89a8 · daa89a8
1 parent 85c857f
commit daa89a8
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 4 deletions.
diff --git a/app.js b/app.js
@@ -43,7 +43,8 @@ if (!String.prototype.trim) {
       pack: (pack ? pack : 'default'),
       el: iconElement,
       show: true,
-      code: getContentForIcon(iconElement.className)
+      code: getContentForIcon(iconElement.className),
+      animation: (iconElement.getAttribute("data-animation") === "true")
     };
 
     tags = iconElement.className.split('-');
@@ -174,6 +175,7 @@ if (!String.prototype.trim) {
   var iconPanel = document.getElementById("icon-panel");
   var iconName = document.getElementById("icon-name");
   var iconCode = document.getElementById("icon-code");
+  var animateLink = document.getElementById("animate-link");
 
   var mouseOverTimeout;
   function iconMouseOver(e) {
@@ -201,6 +203,8 @@ if (!String.prototype.trim) {
       target.className += " active";
       iconName.innerHTML = target.icon.name;
       iconCode.innerHTML = (target.icon.code || "");
+
+      animateLink.style.display = (target.icon.animation ? "" : "none");
     }
   }
 

diff --git a/index.html b/index.html
@@ -110,7 +110,9 @@ <h2>
       <li class="ion-alert" data-pack="default" data-tags="attention, warning, notice, !, exclamation"></li>
       <li class="ion-alert-circled" data-pack="default" data-tags="attention, warning, notice, !, exclamation"></li>
       <li class="ion-refresh" data-pack="default" data-tags="reload, renew"></li>
+      <li class="ion-refreshing" data-pack="default" data-tags="reload, renew, animation" data-animation="true"></li>
       <li class="ion-loop" data-pack="default" data-tags="refresh"></li>
+      <li class="ion-looping" data-pack="default" data-tags="refresh, animation" data-animation="true"></li>
       <li class="ion-shuffle" data-pack="default" data-tags="random"></li>
       <li class="ion-home" data-pack="default" data-tags="house"></li>
       <li class="ion-search" data-pack="default" data-tags="magnifying glass"></li>
@@ -265,10 +267,14 @@ <h2>
       <li class="ion-speedometer" data-pack="default" data-tags="travel, accelerate"></li>
       <li class="ion-plane" data-pack="default" data-tags="fly, jet"></li>
       <li class="ion-jet" data-pack="default" data-tags="fly, plane"></li>
-      <li class="ion-load-d" data-pack="default" data-tags="spinner, waiting, refresh"></li>
-      <li class="ion-load-c" data-pack="default" data-tags="spinner, waiting, refresh"></li>
+      <li class="ion-load-a" data-pack="default" data-tags="spinner, waiting, refresh"></li>
+      <li class="ion-loading-a" data-pack="default" data-tags="spinner, waiting, refresh, animation" data-animation="true"></li>
       <li class="ion-load-b" data-pack="default" data-tags="spinner, waiting, refresh"></li>
-      <li class="ion-load-a" data-pack="default" data-tags="spinner, waiting, refresh"></li> 
+      <li class="ion-loading-b" data-pack="default" data-tags="spinner, waiting, refresh, animation" data-animation="true"></li>
+      <li class="ion-load-c" data-pack="default" data-tags="spinner, waiting, refresh"></li>
+      <li class="ion-loading-c" data-pack="default" data-tags="spinner, waiting, refresh, animation" data-animation="true"></li> 
+      <li class="ion-load-d" data-pack="default" data-tags="spinner, waiting, refresh"></li>
+      <li class="ion-loading-d" data-pack="default" data-tags="spinner, waiting, refresh, animation" data-animation="true"></li>
 
       <p><!-- end default icons pack --></p>
 
@@ -325,6 +331,7 @@ <h2>
       <li class="ion-ios7-refresh" data-pack="ios7" data-tags="reload, renew, reset"></li>
       <li class="ion-ios7-refresh-empty" data-pack="ios7" data-tags="reload, renew"></li>
       <li class="ion-ios7-reload" data-pack="ios7" data-tags="renew, reset"></li>
+      <li class="ion-ios7-reloading" data-pack="ios7" data-tags="renew, reset, animation" data-animation="true"></li>
       <li class="ion-ios7-bookmarks" data-pack="ios7" data-tags="favorite"></li>
       <li class="ion-ios7-bookmarks-outline" data-pack="ios7" data-tags="favorite"></li>
       <li class="ion-ios7-flag" data-pack="ios7" data-tags="marker, favorite"></li>
@@ -612,6 +619,7 @@ <h2>
     <div id="icon-panel">
       <div id="icon-name"></div>
       <div id="icon-code"></div>
+      <div id="animate-link"><a href="animation.html">See all animated icons</a></div>
     </div>
 
     <script src="app.js"></script>