upd tile click transform for anchors

shyoon05 · Feb 5, 2014 · 5e705e5 · 5e705e5
1 parent 35d12f7
commit 5e705e5
Show file tree

Hide file tree

Showing 6 changed files with 47 additions and 29 deletions.
diff --git a/docs/js/metro.min.js b/docs/js/metro.min.js
diff --git a/docs/js/metro/metro-tile-transform.js b/docs/js/metro/metro-tile-transform.js
@@ -10,6 +10,13 @@
             var element = this.element;
             var dim = {w: element.width(), h: element.height()};
 
+            element.on('click', function(e){
+//                e.preventDefault();
+//                if (element[0].tagName == 'A' && element.attr('href')) {
+//                    document.location.href = element.attr('href');
+//                }
+            });
+
             element.on('mousedown', function(e){
                 var X = e.pageX - $(this).offset().left, Y = e.pageY - $(this).offset().top;
                 var transform = 'top';
@@ -23,6 +30,12 @@
                 }
 
                 $(this).addClass("tile-transform-"+transform);
+
+                if (element[0].tagName == 'A' && element.attr('href')) {
+                    setTimeout(function(){
+                        document.location.href = element.attr('href');
+                    }, 500);
+                }
             });
 
             element.on('mouseup', function(){

diff --git a/docs/start-screen.html b/docs/start-screen.html
@@ -80,12 +80,8 @@ <h1 class="tile-area-title fg-white">Start</h1>
                 </div>
             </a> <!-- end tile -->
 
-            <a class="tile double bg-violet" style="overflow: visible" data-click="transform">
-                <div class="tile-content" style="overflow: visible">
-                    <div class="input-control text span2 place-left margin10" style="margin-left: 10px" data-role="datepicker">
-                        <input type="text" name="sel_date">
-                        <button class="btn-date"></button>
-                    </div>
+            <a class="tile double bg-violet" data-click="transform">
+                <div class="tile-content">
                     <div class="text-right padding10 ntp">
                         <h1 class="fg-white no-margin">10</h1>
                         <p class="fg-white">Sunday</p>

diff --git a/docs/tiles.html b/docs/tiles.html
@@ -632,33 +632,29 @@ <h3>Live Tile</h3>
 
                 <h3>Tile click transform</h3>
                 <p class="description">
-                    You can set effect with <code>data-click="transform"</code> attribute and tiles can be placed inside in <code>tile-group</code> layer.
+                    You can set effect with <code>data-click="transform"</code> attribute.
                 </p>
 
                 <div class="example">
-                    <div class="tile-group no-margin">
-                        <div class="tile half bg-darkRed ol-transparent" data-click="transform">
-                            <div class="tile-content icon">
-                                <i class="icon-rocket"></i>
-                            </div>
-                        </div>
-                        <div class="tile bg-green ol-transparent" data-click="transform">
-                            <div class="tile-content icon">
-                                <img src="images/excel2013icon.png">
-                            </div>
+                    <div class="tile half bg-darkRed ol-transparent" data-click="transform">
+                        <div class="tile-content icon">
+                            <i class="icon-rocket"></i>
                         </div>
-                        <div class="tile double ol-transparent" data-click="transform">
-                            <div class="tile-content image">
-                                <img src="images/1.jpg">
-                            </div>
+                    </div>
+                    <div class="tile bg-green ol-transparent" data-click="transform">
+                        <div class="tile-content icon">
+                            <img src="images/excel2013icon.png">
                         </div>
                     </div>
+                    <a class="tile double ol-transparent" data-click="transform">
+                        <div class="tile-content image">
+                            <img src="images/1.jpg">
+                        </div>
+                    </a>
                 </div>
 <pre class="prettyprint linenums">
-&lt;div class="tile-group"&gt;
-    &lt;div class="tile" data-click="transform"&gt;
-        ...
-    &lt;/div&gt;
+&lt;div class="tile" data-click="transform"&gt;
+    ...
 &lt;/div&gt;
 </pre>
 

diff --git a/js/metro-tile-transform.js b/js/metro-tile-transform.js
@@ -10,6 +10,13 @@
             var element = this.element;
             var dim = {w: element.width(), h: element.height()};
 
+            element.on('click', function(e){
+//                e.preventDefault();
+//                if (element[0].tagName == 'A' && element.attr('href')) {
+//                    document.location.href = element.attr('href');
+//                }
+            });
+
             element.on('mousedown', function(e){
                 var X = e.pageX - $(this).offset().left, Y = e.pageY - $(this).offset().top;
                 var transform = 'top';
@@ -23,6 +30,12 @@
                 }
 
                 $(this).addClass("tile-transform-"+transform);
+
+                if (element[0].tagName == 'A' && element.attr('href')) {
+                    setTimeout(function(){
+                        document.location.href = element.attr('href');
+                    }, 500);
+                }
             });
 
             element.on('mouseup', function(){