added sortable to project v2 and action bar #12

4xmen · May 20, 2023 · a4b3ade · a4b3ade
1 parent d2c8728
commit a4b3ade
Show file tree

Hide file tree

Showing 3 changed files with 58 additions and 14 deletions.
diff --git a/anubias2/package.json b/anubias2/package.json
@@ -54,6 +54,8 @@
     "html-to-image": "^1.11.11",
     "material-icons": "^1.13.5",
     "remixicon": "^2.5.0",
+    "sortablejs": "^1.15.0",
+    "sortablejs-vue3": "^1.2.9",
     "vazirmatn": "^33.0.3",
     "vue-color-kit": "^1.0.5",
     "vue-router": "^4.1.6",

diff --git a/anubias2/src/ide/components/modern-properties.vue b/anubias2/src/ide/components/modern-properties.vue
@@ -73,19 +73,31 @@
     </collapsible>
     <collapsible v-if="properties.actions !== undefined" title="Actions" icon="ri-stack-line">
 
-      <ul>
-        <li v-for="(act,i) in properties.actions" :key="i">
-          <icon-picker :label="act.tooltip" v-model="properties.actions[i].icon">
-            <div class="grid-equal">
-              <div class="rem" @click="remAction(i)">
-                <i class="ri-close-line"></i>
-              </div>
-              <div class="code-editor">
-                <i class="ri-code-s-slash-line"></i>
-              </div>
+      <div title="You can drag and drop to change sort of action's button">
+        <Sortable
+            :list="properties.actions"
+            item-key="icon"
+            tag="div"
+            @update="updateActionsSort"
+        >
+          <template #item="{element, index}">
+            <div class="draggable" :key="element.icon">
+              <icon-picker :label="element.tooltip" v-model="properties.actions[index].icon">
+                <div class="grid-equal">
+                  <div class="rem" @click="remAction(index)">
+                    <i class="ri-close-line"></i>
+                  </div>
+                  <div class="code-editor">
+                    <i class="ri-code-s-slash-line"></i>
+                  </div>
+                </div>
+              </icon-picker>
             </div>
-          </icon-picker>
-        </li>
+          </template>
+        </Sortable>
+      </div>
+      <ul>
+
       </ul>
       <hr>
       New action:
@@ -114,7 +126,12 @@ import around from './around-controller.vue'
 import colorPicker from './color-picker.vue'
 import dinput from './input-draggable.vue';
 import iconPicker from './icon-picker.vue';
+
+import {arrayMove} from "../js/general-functions";
+
 import {useToast} from "vue-toastification";
+import {Sortable} from "sortablejs-vue3";
+
 
 let toast;
 export default {
@@ -126,6 +143,7 @@ export default {
     colorPicker,
     dinput,
     iconPicker,
+    Sortable,
   },
   data() {
     return {
@@ -186,22 +204,33 @@ export default {
     },
     addAction() {
       if (this.tooltip === '') {
+        toast.warning('Tooltip is necessary!');
         this.$refs.tooltip.focus();
         return false;
       }
       if (this.actIcon === '') {
         toast.warning('Icon is necessary!');
         return false;
       }
+      for (const act of this.properties.actions) {
+        if (act.icon === this.actIcon) {
+          toast.warning('Icons is duplicate!');
+          return false;
+        }
+      }
+
       this.properties.actions.push({
         icon: this.actIcon,
         onPressed: "// run when press on action ",
         tooltip: this.tooltip,
       });
       this.tooltip = '';
     },
-    remAction(i){
-      this.properties.actions.splice(i,1);
+    remAction(i) {
+      this.properties.actions.splice(i, 1);
+    },
+    updateActionsSort(e) {
+      arrayMove(this.properties.actions, e.oldIndex, e.newIndex);
     }
   }
 }

diff --git a/anubias2/src/ide/js/general-functions.js b/anubias2/src/ide/js/general-functions.js
@@ -81,10 +81,23 @@ let createScreenShot= async (selector) =>{
     return  await htmlToImage.toPng(document.querySelector(selector));
 }
 
+
+/**
+ * move index in array
+ * @param arr
+ * @param fromIndex
+ * @param toIndex
+ */
+let arrayMove = function (arr, fromIndex, toIndex) {
+    let element = arr[fromIndex];
+    arr.splice(fromIndex, 1);
+    arr.splice(toIndex, 0, element);
+}
 export {
     color2web,
     getColor,
     getSize,
     calcPaddingOrMargin,
     createScreenShot,
+    arrayMove,
 };