add metro

xshiyun · Oct 22, 2013 · d3f5675 · d3f5675
1 parent acb033a
commit d3f5675
Show file tree

Hide file tree

Showing 5 changed files with 128 additions and 45 deletions.
diff --git a/avalon.draggable.js b/avalon.draggable.js
@@ -140,7 +140,6 @@ define(["avalon"], function(avalon) {
             var startOffset = $element.offset()
             if (options.ghosting) {
                 var clone = element.cloneNode(true)
-                clone.style.backgroundColor = "yellow"
 
                 avalon(clone).css("opacity", .5).width(element.offsetWidth).height(element.offsetHeight)
 

diff --git a/metro.css b/metro.css
@@ -0,0 +1,51 @@
+.columns {
+  width: 2200px;
+  background: #a9ea00;
+  -moz-column-width: 340px;
+  -webkit-column-width: 340px;
+  column-width: 340px;
+  -moz-column-gap: 0px;
+  -webkit-column-gap: 0px;
+  column-gap: 0px;
+  margin: 0px;
+  font-size: 0;
+  -webkit-text-size-adjust: none;
+  height: 600px;
+}
+.noPaddingLeft {
+  padding-left: 0;
+}
+app {
+  display: inline-block;
+  width: 150px;
+  height: 150px;
+  list-style: none;
+  padding: 20px 20px 0px 20px;
+  font-size: 12px;
+  -moz-column-gap: 0;
+  -webkit-column-gap: 0;
+  column-gap: 0;
+}
+.appme {
+  background: red;
+  width: 100%;
+  height: 100%;
+}
+.appme:hover {
+  outline: 10px solid #d7a6e3;
+}
+.app_head {
+  width: 100%;
+  height: 30px;
+  line-height: 30px;
+  text-align: center;
+  background: #fff;
+}
+.app_middle {
+  width: 320px;
+  height: 150px;
+}
+.app_big {
+  width: 320px;
+  height: 320px;
+}
diff --git a/metro.html b/metro.html
@@ -19,26 +19,29 @@
                         }
                     }
                 }
+
                 function getSize(target) {
                     return target.className.match(/app_(\w+)/)[1]
                 }
                 function isApp(target) {
-                    // console.log(target.tagName)
+                    // avalon.log(target.tagName)
                     return target.tagName.toLowerCase() === "app"
                 }
                 function resetLayout(parent) {
                     var array = parent.children
                     var height = 0, column = 0, changeRow = true
                     for (var i = 0, el; el = array[i++]; ) {
                         var size = getSize(el)
-                        console.log(size)
+                        avalon.log(size)
                         if (size === "small") {
                             height += 170
                             el.left = true
+                            el.classList.remove("noPaddingLeft")
                             var next = array[i]
                             if (next && getSize(next) === "small") {
                                 next.left = false
-                                console.log("small siblings")
+                                next.classList.add("noPaddingLeft")
+                                avalon.log("small siblings")
                                 i++
                             }
                         } else if (size === "middle") {
@@ -49,33 +52,41 @@
                             el.left = false
                             if (height >= 510) {
                                 column++
-                                console.log(height + "==============big")
+                                avalon.log(height + "==============big")
                                 if (height > 510) {
-                                    console.log("另起一行")
+                                    avalon.log("另起一行")
                                     height = 340
                                 } else {
-                                    console.log(" 归零")
+                                    avalon.log(" 归零")
                                     height = 0
                                 }
                             }
 
                         }
                         if (height >= 510) {
-                            console.log(height + "============累加")
+                            avalon.log(height + "============累加")
                             height = 0
                             column++
                         }
                     }
                     if (height > 0) {
                         column++
                     }
-                    console.log("当前列数为 " + column)
-                    parent.style.width = (column) * 340 + 20 + "px"
+                    avalon.log("当前列数为 " + column)
+                    parent.style.width = (column) * 360 + "px"
                 }
                 var parent = document.querySelector(".columns");
 
                 avalon.define("xxx", function(vm) {
-                    vm.array = ["middle", "small", "small", "small", "small", "small", "small", "big", "small", "small", "big", "big", "small", "small"]
+                    vm.array = ["middle", "small", "small", "small", "small", "small", "small", "big", "small", "small", "big", "big", "middle", "small", "small"]
+                    vm.getColor = function() {
+                        var letters = 'A523456789ABCDEF'.split('');
+                        var color = '#';
+                        for (var i = 0; i < 6; i++) {
+                            color += letters[Math.round(Math.random() * 15)];
+                        }
+                        return color;
+                    }
                     vm.handle = function(e) {
                         var el = e.target
                         if (/app_head/.test(el.className)) {
@@ -115,7 +126,7 @@
                                 if (target && target.left) {
                                     target.parentNode.insertBefore(data.element, target.nextElementSibling)
                                     swap = true
-                                    console.log("在左边找到，插入到" + target.className + "后面")
+                                    avalon.log("在左边找到，插入到" + target.className + "后面")
                                 } else {
                                     target = null
                                 }
@@ -126,7 +137,7 @@
                                 if (target) {
                                     target.parentNode.insertBefore(data.element, target.nextElementSibling)
                                     swap = true
-                                    console.log("在右上边找到，插入到" + target.className + "后面")
+                                    avalon.log("在右上边找到，插入到" + target.className + "后面")
                                 }
                             }
 
@@ -140,7 +151,7 @@
                                         p = "前面"
                                         target.parentNode.insertBefore(data.element, target)
                                     }
-                                    console.log(msg + "插入到" + target.className + p)
+                                    avalon.log(msg + "插入到" + target.className + p)
                                 }
                             }
                             avalon(data.element).css("display", "inline-block").css("position", "static")
@@ -160,7 +171,11 @@
     </head>
     <body ms-controller="xxx">
         <div class="columns"  ms-each-el="array">
-            <app  ms-draggable="stop" data-before-stop="beforeStop" data-ghosting="true" data-handle="handle" ms-class="app_{{el}}" ms-class-="app{{$index}}"><div class="app_head">APP {{$index}}</div></app>
+            <app  ms-draggable="stop"  data-before-stop="beforeStop" data-ghosting="true" data-handle="handle" ms-class="app_{{el}}" ms-class-="app{{$index}}">
+                <div class="appme" ms-css-background="getColor()">
+                    <div class="app_head">APP {{$index}}</div>
+                </div>
+            </app>
         </div>
     </body>
 </html>
diff --git a/metro.less b/metro.less
@@ -1,40 +1,58 @@
 @import "./mulicolumn.less";
-ul{ 
+
+.columns {
     width: 2200px;
-    background:#a9ea00;
-    .column-width(320px);
-    @value:1px solid blue;
-   .column-rule(@value);
-   .column-gap(0px);
-  // padding:20px 0 0 20px;
-   margin:0px;
-   font-size:0;
-    -webkit-text-size-adjust:none;
-  height:600px;
+    background: #a9ea00;
+    .column-width(340px);
+    @value: 1px solid blue;
+  //  .column-rule(@value);
+    .column-gap(0px);
+    margin: 0px;
+    font-size: 0;
+    -webkit-text-size-adjust: none;
+    height: 600px;
 }
-li{
-    display:inline-block;
-    width:150px;
-    height:150px;
-    background: red;
+
+.noPaddingLeft {
+    padding-left: 0;
+}
+
+app {
+    display: inline-block;
+    width: 150px;
+    height: 150px;
+
     list-style: none;
-    padding:0px;
-    margin: 0px 20px 20px 0;
+    //   padding:0px;
+    padding: 20px 20px 0px 20px;
     font-size: 12px;
     .column-gap(0);
 }
-li:nth-child(even){
-     background: yellowgreen;
+
+.appme {
+    background: red;
+    width: 100%;
+    height: 100%;
+}
+
+.appme:hover {
+    outline: 10px solid rgb(215, 166, 227);
+}
+
+.app_head {
+    width: 100%;
+    height: 30px;
+    line-height: 30px;
+    text-align: center;
+    background: #fff;
 }
-li:nth-child(3n){
-     background: pink;
-     width:320px;
-     height:150px;
-     margin:0 0 20px 0;
+
+.app_middle {
+    width: 320px;
+    height: 150px;
 }
-li:nth-child(4n){
-    background:green;
-    width:320px;
-    height:320px;
-    margin:0 0 20px 0;
+
+.app_big {
+    width: 320px;
+    height: 320px;
 }
diff --git a/mulicolumn.css b/mulicolumn.css