added button to move stopmotion images around

l-atelier-des-chercheurs · Sep 15, 2020 · 4cf1cb4 · 4cf1cb4
1 parent 03b7161
commit 4cf1cb4
Show file tree

Hide file tree

Showing 4 changed files with 63 additions and 28 deletions.
diff --git a/public/src/vue/Publication.vue b/public/src/vue/Publication.vue
@@ -692,7 +692,7 @@ export default {
         data: val,
       });
     },
-    changeMediaOrder({ metaFileName, dir }) {
+    changeMediaOrder({ metaFileName, dir, new_index_in_slugs }) {
       // find index in medias_slugs_in_order
       const current_index_in_slugs = this.publication.medias_slugs.findIndex(
         (m) => m.slugMediaName === metaFileName
@@ -701,13 +701,16 @@ export default {
       const current_media_index = this.medias_in_order.findIndex(
         (m) => m.metaFileName === metaFileName
       );
-      const adjacent_media_meta = this.medias_in_order[
-        current_media_index + dir
-      ].metaFileName;
 
-      const new_index_in_slugs = this.publication.medias_slugs.findIndex(
-        (m) => m.slugMediaName === adjacent_media_meta
-      );
+      if (new_index_in_slugs === undefined) {
+        const adjacent_media_meta = this.medias_in_order[
+          current_media_index + dir
+        ].metaFileName;
+
+        new_index_in_slugs = this.publication.medias_slugs.findIndex(
+          (m) => m.slugMediaName === adjacent_media_meta
+        );
+      }
 
       const medias_slugs = JSON.parse(
         JSON.stringify(this.publication.medias_slugs)

diff --git a/public/src/vue/components/publication_templates/StopmotionAnimation.vue b/public/src/vue/components/publication_templates/StopmotionAnimation.vue
@@ -1,5 +1,9 @@
 <template>
-  <div class="m_publicationview" :class="{ 'is--preview': preview_mode }" ref="panel">
+  <div
+    class="m_publicationview"
+    :class="{ 'is--preview': preview_mode }"
+    ref="panel"
+  >
     <PublicationHeader
       :slugPubliName="slugPubliName"
       :publication="publication"
@@ -20,7 +24,11 @@
         <small class="c-blanc" v-html="$t('add_multiple_images')" />
       </p>
     </div>
-    <transition-group class="m_stopmotionAnimationPublication" name="slideFromTop" :duration="300">
+    <transition-group
+      class="m_stopmotionAnimationPublication"
+      name="slideFromTop"
+      :duration="300"
+    >
       <div
         class="m_stopmotionAnimationPublication--media"
         v-for="(media, index) in medias_in_order"
@@ -50,13 +58,32 @@
             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 168 168">
               <path
                 d="M87.46,49.46,73.39,64.77a65.3,65.3,0,0,1-6.15,6.15A47.8,47.8,0,0,1,61,75.29H131.6V91.14H61A39.1,39.1,0,0,1,67,95.51q2.81,2.46,6.36,6.15L87.46,117,74.48,128,34.17,83.21,74.48,38.39Z"
-                style="fill: currentColor;"
+                style="fill: currentColor"
               />
             </svg>
           </button>
+          <span class="">
+            <select
+              class="select-xs"
+              @change="
+                $emit('changeMediaOrder', {
+                  metaFileName: media.metaFileName,
+                  new_index_in_slugs: $event.target.value - 1,
+                })
+              "
+              :value="index + 1"
+            >
+              <option
+                v-for="pos in medias_in_order.length"
+                :key="pos"
+                v-html="pos"
+              />
+            </select>
+          </span>
+
           <button
             type="button"
-            :disabled="index === medias_in_order.length-1"
+            :disabled="index === medias_in_order.length - 1"
             class="m_stopmotionAnimationPublication--media--move--moveRight"
             @click.stop="
               $emit('changeMediaOrder', {
@@ -68,7 +95,7 @@
             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 168 168">
               <path
                 d="M87.46,49.46,73.39,64.77a65.3,65.3,0,0,1-6.15,6.15A47.8,47.8,0,0,1,61,75.29H131.6V91.14H61A39.1,39.1,0,0,1,67,95.51q2.81,2.46,6.36,6.15L87.46,117,74.48,128,34.17,83.21,74.48,38.39Z"
-                style="fill: currentColor;"
+                style="fill: currentColor"
               />
             </svg>
           </button>

diff --git a/public/src/vue/components/subcomponents/MediaMontagePublication.vue b/public/src/vue/components/subcomponents/MediaMontagePublication.vue
@@ -54,6 +54,7 @@
           >
             <input
               type="number"
+              class="input-xs"
               v-model.number="seconds_per_image"
               step="1"
               :disabled="read_only || preview_mode"

diff --git a/public/src/vue/style.less b/public/src/vue/style.less
@@ -72,6 +72,9 @@ body {
 .range-xs {
   --switch-size: 0.9rem;
 }
+.input-xs {
+  --switch-size: 0.9rem;
+}
 .switch_twoway {
   display: flex;
   align-items: center;
@@ -5584,6 +5587,7 @@ small {
     .m_stopmotionAnimationPublication--media--move {
       display: flex;
       justify-content: space-between;
+      align-items: center;
 
       button {
         .padding-verysmall;
@@ -5612,22 +5616,22 @@ small {
       position: relative;
       transition: all 0.4s;
 
-      &::before {
-        counter-increment: compteListe 1;
-        content: counter(compteListe) " ";
-
-        position: absolute;
-        top: 0;
-        left: 0;
-        background-color: white;
-        .font-verysmall;
-        z-index: 1;
-        padding: 0 2px 0 0;
-        margin: 0 2px;
-        // margin-top: -4.5px;
-        font-weight: bold;
-        border-radius: 5px 0 5px 0;
-      }
+      // &::before {
+      //   counter-increment: compteListe 1;
+      //   content: counter(compteListe) " ";
+
+      //   position: absolute;
+      //   top: 0;
+      //   left: 0;
+      //   background-color: white;
+      //   .font-verysmall;
+      //   z-index: 1;
+      //   padding: 0 2px 0 0;
+      //   margin: 0 2px;
+      //   // margin-top: -4.5px;
+      //   font-weight: bold;
+      //   border-radius: 5px 0 5px 0;
+      // }
 
       // &:first-child {
       //   border-top-left-radius: @t-buttonradius;