Merge branch 'master' into master

Author: sdras

package-lock.json

@@ -20,7 +20,7 @@ export default {
     AppForm
   },
   created() {
-    this.$store.commit("initialArrIndex");
+    this.$store.commit("initialArrIndex", window.location.search);
   }
 };
 </script>

src/App.vue

@@ -0,0 +1,48 @@
+{
+  "header": {
+    "builtby": "তৈরি 🌮 দিয়ে, করেছেন"
+  },
+  "form": {
+    "columns": "কলামগুলো",
+    "rows": "সারিগুলো",
+    "columngap": "কলামের ফাঁকা জায়গা",
+    "rowgap": "সারির ফাঁকা জায়গা",
+    "codebutton": "দয়া করে আমি কি কোডগুলো পেতে পারি",
+    "project": "এই প্রজেক্টটি কী করে?",
+    "reset": "গ্রিড পুনরায় সেট করুন",
+    "units": "(পিক্সেলে)"
+  },
+  "modal": {
+    "header": {
+      "yourcode": "আপনার গ্রিড কোড",
+      "what": "এটা কি?"
+    },
+    "copy": {
+      "title": "নীচের কোডটি কপি করুন:",
+      "clipboard": "ক্লিপবোর্ডে কপি করুন!",
+      "clipboardSuccess": "কোড কপি করা হয়েছে",
+      "html": "HTML এ দেখান",
+      "css": "CSS এ দেখান"
+    },
+    "button": "সম্পন্ন"
+  },
+  "grid": {
+    "realcssunit": "অবশ্যই সত্যিকারের CSS ইউনিট ব্যবহার করা উচিত ।"
+  },
+  "explain": {
+    "paragraph1": "আপনি আপনার কলাম এবং সারিগুলির সংখ্যা এবং ইউনিট সেট করতে পারেন এবং আমি আপনার জন্য একটি CSS গ্রিড তৈরি করব! গ্রিডের মধ্যেকার Div গুলো তৈরির জন্য <strong>বাক্সগুলির মধ্যে টানুন।</strong> ",
+    "paragraph2": "যদিও এই প্রজেক্টটি আপনার জন্য একটি প্রাথমিক লেআউট শুরু করতে পারে তবে এই প্রজেক্টটি CSS গ্রিডের জন্য খুব বড় কিছু নয়। এটির মাধ্যমে CSS গ্রিড ফিচারগুলো খুব দ্রুত ব্যবহার করতে পারবেন।",
+    "paragraph3": "আমি লক্ষ্য করেছি যে অনেকেই গ্রিড ব্যবহার করছে না কারণ তারা মনে করে যে এটি খুব জটিল এবং তারা এটি বুঝতে পারে না। গ্রিডটি এটুকুই করে এবং এই ছোট জেনারেটরটি ফিচারগুলোর কেবল কিছু অংশ করতে পারে। এর উদ্দেশ্যই হচ্ছে ব্যবহারকারীদের দ্রুততার সাথে আরও সুন্দর লেআউট তৈরি করতে দেওয়া।",
+    "paragraph4": "আপনি একবার এটি দিয়ে কিছুটা কাজ করার পরে, আমি পরামর্শ দিই এই রিসোর্সে গুলো দেখার, যা তৈরি করেছেন",
+    "cssguide": "CSS-ট্রিকস নিয়ে লেখা CSS গ্রিড গাইড",
+    "paragraph5": "যদি আরও বেশি জানতে চান। আরও আছে",
+    "paragraph6": "এবং একটি মজার ছোট খেলা নামে পরিচিত",
+    "paragraph7": "যা আপনাকে আরও শিখতে সহায়তা করবে",
+    "contributions": "এই প্রজেক্টটি কান্ট্রিবিউশনের জন্য উন্মুক্ত!",
+    "fork": "এখান থেকে ফর্ক করুন।",
+    "note": "দয়া করে নোট করুন: মনে রাখবেন আপনি গ্রিড তৈরি করার সময় স্ক্রিন রিডার ডিভগুলি ক্রম অনুসারে পড়বে।"
+  },
+  "utils": {
+    "and": "এবং"
+  }
+}

src/i18n/bn.json

@@ -9,7 +9,8 @@
     "rowgap": "Margen entre Filas",
     "codebutton": "Mostrar Código",
     "project": "¿Qué hace este proyecto?",
-    "reset": "Reiniciar cuadrícula"
+    "reset": "Reiniciar cuadrícula",
+    "units": "(en px)"
   },
   "modal": {
     "header": {
@@ -19,7 +20,9 @@
     "copy": {
       "title": "Copia el siguiente código:",
       "clipboard": "Copiar en el portapapeles",
-      "clipboardSuccess": "Código copiado!"
+      "clipboardSuccess": "Código copiado!",
+      "html": "Ver HTML",
+      "css": "Ver CSS"
     },
     "button": "Cerrar"
   },
@@ -42,4 +45,4 @@
   "utils": {
     "and": "y"
   }
-}
+}

src/i18n/es.json

@@ -9,7 +9,8 @@
     "rowgap": "行间距",
     "codebutton": "请给我示例中的代码",
     "project": "这个项目可以做什么？",
-    "reset": "重置布局"
+    "reset": "重置布局",
+    "units": "(单位 px)"
   },
   "modal": {
     "header": {
@@ -19,7 +20,9 @@
     "copy": {
       "title": "复制以下代码：",
       "clipboard": "复制",
-      "clipboardSuccess": "复制成功！"
+      "clipboardSuccess": "复制成功！",
+      "html": "展示 HTML",
+      "css": "展示 CSS"
     },
     "button": "完成"
   },
@@ -35,7 +38,7 @@
     "paragraph5": "进行更深入的了解。 还有一个",
     "paragraph6": "和一个有趣的小游戏叫",
     "paragraph7": "可以帮助您了解更多！",
-    "contributions": "这个项目是开放的!",
+    "contributions": "这个项目是开源的!",
     "fork": "请在这里 Fork",
     "note": "请注意：读屏器将按照添加 div 的顺序读取 div，请在构建 Grid 网格布局时牢记这一点"
   },

src/i18n/zh.json

@@ -24,17 +24,33 @@ export default new Vuex.Store({
       return createRepetition(unitGroups);
     },
     divNum(state) {
-      return state.columns * state.rows;
+      return Math.max(state.columns, 0) * Math.max(state.rows, 0);
     }
   },
   mutations: {
-    initialArrIndex(state) {
-      createArr(state.columns, state.colArr);
-      createArr(state.rows, state.rowArr);
+    initialArrIndex(state, payload) {
+      if(payload !== '') {
+        const queryParams = new URLSearchParams(payload)
+
+        for (const stateKey in state) {
+          const paramIsValid = queryParams.has(stateKey)
+          const paramType = typeof(state[stateKey])
+
+          if(paramIsValid && paramType === 'number') {
+            state[stateKey] = queryParams.get(stateKey);
+          }
+          else if (paramIsValid && paramType === 'object') {
+            state[stateKey] = JSON.parse(queryParams.get(stateKey))
+          }
+        }
+      } else {
+          createArr(state.columns, state.colArr);
+          createArr(state.rows, state.rowArr);
+      }
     },
     adjustArr(state, payload) {
-      let newVal = Number(payload.newVal),
-        oldVal = Number(payload.oldVal);
+      let newVal = Math.max(Number(payload.newVal), 0),
+        oldVal = Math.max(Number(payload.oldVal), 0);
 
       if (newVal < oldVal) {
         // you'd think that .length would be quicker here, but it doesn't trigger the getter/computed in colTemplate etc.