Feature: Generate abs-position for pins in row

pinry/static/js/vue/main.js

@@ -14,19 +14,58 @@ Vue.component('pin', {
       'active': false,
       'textId': null,
       'imageStyle': null,
+      'pinStyle': null,
     }
   },
-  props: ['pin'],
+  props: ['pin', 'args', 'index'],
   template: '#pin-template',
   mounted: function() {
     this.imageStyle = {
       width: this.pin.image.thumbnail.width + 'px',
       height: this.pin.image.thumbnail.height + 'px',
     };
+    this.pinStyle = this.getPinStyle();
   },
   methods: {
-    getInlineStyle: function() {
+    getPinStyle: function() {
-      return {};
+      var self = this;
+
+      var marginLeft = 0;
+      var marginTop = 0;
+
+      function isFirstOne(rowSize, index) {
+        index = index + 1;
+        if ((index % rowSize) === 1 ){
+          return true;
+        }
+      }
+
+      function getRowNumber(rowSize, index) {
+        index = index + 1;
+        var rowNumber = Math.floor(index % rowSize);
+        if (rowNumber === 0) {
+          return 7;
+        }
+        return rowNumber;
+      }
+
+      function getLineNumber(rowSize, index) {
+        return Math.floor((index) / rowSize);
+      }
+      var lineNumber = getLineNumber(self.args.rowSize, self.index);
+      marginTop = self.args.blockMargin + (self.args.blockMargin + 300) * lineNumber;
+
+      if (isFirstOne(self.args.rowSize, self.index)) {
+        marginLeft = self.args.rowStartMargin;
+      } else {
+        var marginPerBlock = self.args.blockWidth + self.args.blockMargin;
+        var rowNumber = getRowNumber(self.args.rowSize, self.index);
+        marginLeft = self.args.rowStartMargin + marginPerBlock * (rowNumber - 1);
+      }
+      return {
+        'margin-left': marginLeft + 'px',
+        'margin-top': marginTop + 'px',
+      };
     },
     onImageLoad: function () {
       this.loaded = true;
@@ -52,10 +91,15 @@ Vue.component('pin', {
 Vue.component('pin-container', {
   data: function () {
     return {
-        "windowWidth": null,
+      args: {
-        "blockWidth": "240px",
+        "containerWidth": 0,
-        "blockMargin": "15px",
+        "blockWidth": 240,
-        "pins": [],
+        "blockMargin": 15,
+        "rowSize": 0,
+        "rowStartMargin": 0,
+        "rowEndMargin": 0,
+      },
+      "pins": [],
     };
   },
   template: "#pin-container-template",
@@ -72,6 +116,27 @@ Vue.component('pin-container', {
         },
       );
   },
+  mounted: function() {
+    this.updateArguments()
+  },
+  methods: {
+    updateArguments: function() {
+      var blockContainer = this.$el;
+      var containerWidth = blockContainer.clientWidth;
+      var blockMargin = this.args.blockMargin,
+          blockWidth = this.args.blockWidth,
+          rowSize = Math.floor(containerWidth / (blockWidth + blockMargin));
+      var rowStartMargin = (containerWidth - rowSize * (blockWidth + blockMargin)) / 2 ;
+      var rowEndMargin = rowStartMargin - blockMargin;
+
+      this.args.containerWidth = containerWidth;
+      this.args.blockWidth = blockWidth;
+      this.args.blockMargin = blockMargin;
+      this.args.rowSize = rowSize;
+      this.args.rowStartMargin = rowStartMargin;
+      this.args.rowEndMargin = rowEndMargin;
+    },
+  },
 });
 
 

pinry/templates/includes/vue-pin.html

@@ -2,15 +2,15 @@
 
 <script type="text/x-template" id="pin-container-template">
   <div>
-    <template v-for="item in pins">
+    <template v-for="(item, index) in pins">
-      <pin :pin="item"></pin>
+      <pin :pin="item" :index="index" :args="args"></pin>
     </template>
   </div>
 
 </script>
 
 <script type="text/x-template" id="pin-template">
-    <div :style="getInlineStyle()" class="pin" :class="{ 'fake-hide': !loaded }" v-on:mouseover="active = true" v-on:mouseleave="active = false">
+    <div :style="pinStyle" class="pin" :class="{ 'fake-hide': !loaded }" v-on:mouseover="active = true" v-on:mouseleave="active = false">
       <transition name="fade">
         <div class="editor" v-show="active">
           <div class="borderable">