From f589587d80d594e91783e2d793958e597b8224cf Mon Sep 17 00:00:00 2001
From: Andrea Vos <andrea@avris.it>
Date: Sun, 26 Jul 2020 14:52:01 +0200
Subject: [PATCH] #19 formy wymienne - interfejs

---
 assets/style.scss | 15 +++++++++++
 pages/index.vue   | 65 ++++++++++++++++++++++++++++++++++++++++++++---
 src/classes.js    |  2 +-
 3 files changed, 77 insertions(+), 5 deletions(-)

diff --git a/assets/style.scss b/assets/style.scss
index 8a97eb3c0..77dac70bf 100644
--- a/assets/style.scss
+++ b/assets/style.scss
@@ -71,3 +71,18 @@ body {
 section {
     margin: 2*$spacer 0;
 }
+
+code {
+    @include font-size($code-font-size);
+    color: $code-color;
+    word-wrap: break-word;
+
+    // Streamline the style when inside anchors to avoid broken underline and more
+    a > & {
+        color: inherit;
+    }
+
+    border: 1px solid $code-color;
+    padding: .2em;
+    border-radius: $border-radius-sm;
+}
diff --git a/pages/index.vue b/pages/index.vue
index dccbb85d8..65d4dcb4b 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -21,6 +21,39 @@
             </nuxt-link>
         </section>
 
+        <section>
+            <p>
+                Wybierz formy wymienne:
+            </p>
+
+            <a v-if="!customiseMultiple" href="#" @click.prevent="customiseMultiple = true" class="btn btn-outline-primary btn-lg btn-block">
+                <Icon v="sliders-h-square"/>
+                Wybierz formy wymienne
+            </a>
+            <div v-else class="card mb-5">
+                <div class="card-header">
+                    <Icon v="sliders-h-square"/>
+                    Formy wymienne:
+                </div>
+                <div class="card-body">
+                    <div class="card-title">
+                        <ul class="list-inline d-inline mb-0">
+                            <li class="list-inline-item" v-for="(template, pronoun) in templates">
+                                <button :class="['btn', multiple.includes(pronoun) ? 'btn-primary' : 'btn-outline-primary', 'btn-sm', 'my-1']"
+                                        @click="toggleMultiple(pronoun)"
+                                >
+                                    {{template.name()}}
+                                </button>
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+                <div class="card-footer" v-if="linkMultiple">
+                    <LinkInput :link="linkMultiple"/>
+                </div>
+            </div>
+        </section>
+
         <section>
             <p>
                 Lub dopasuj bardziej szczegółowo:
@@ -35,14 +68,14 @@
                     <Icon v="sliders-h-square"/>
                     Kreator
                 </div>
-                <div class="card-body" v-if="customise">
+                <div class="card-body">
                     <div class="card-title border-bottom pb-3">
                         <ul class="list-inline d-inline mb-0">
                             <li class="list-inline-item pt-1 h5">
                                 Sugestie:
                             </li>
                             <li class="list-inline-item" v-for="(template, pronoun) in templates">
-                                <button :class="['btn', template.name() === selectedTemplate.name() ? 'btn-primary' : 'btn-outline-primary', 'btn-sm']"
+                                <button :class="['btn', template.name() === selectedTemplate.name() ? 'btn-primary' : 'btn-outline-primary', 'btn-sm', 'my-1']"
                                         @click="selectedTemplate = templates[pronoun].clone()"
                                 >
                                     {{template.name()}}
@@ -73,7 +106,7 @@
                                     <input v-if="part.variable" v-model="selectedTemplate.morphemes[part.str]"
                                            :class="['form-control form-input p-0', {'active': selectedMorpheme === part.str}]"
                                            :size="selectedTemplate.morphemes[part.str] ? selectedTemplate.morphemes[part.str].length : 0"
-                                           maxlength="7"
+                                           maxlength="12"
                                            @focus="selectedMorpheme = part.str"
                                            @blur="selectedMorpheme = ''"
                                     />
@@ -92,8 +125,12 @@
                             </div>
                         </div>
                     </template>
+                    <p class="small">
+                        <Icon v="info-circle"/>
+                        Możesz tu również wpisać formy wymienne w każdym polu z osobna, np. <code>jego&jej</code> = „jego” lub „jej”.
+                    </p>
                 </div>
-                <div class="card-footer" v-if="customise && link">
+                <div class="card-footer" v-if="link">
                     <LinkInput :link="link"/>
                 </div>
                 <div class="card-body border-top" v-if="getTemplate(templates, selectedTemplate.name()) && getTemplate(templates, selectedTemplate.name()).sources.length">
@@ -167,6 +204,9 @@
                 selectedTemplate: templates['on'].clone(),
                 selectedMorpheme: '',
 
+                customiseMultiple: false,
+                multiple: [],
+
                 customise: false,
             }
         },
@@ -204,6 +244,23 @@
                 }
                 return process.env.baseUrl + '/' + (this.usedBaseEquals ? this.usedBase : this.longLink);
             },
+            linkMultiple() {
+                if (!this.multiple.length) {
+                    return null;
+                }
+
+                return process.env.baseUrl + '/' + this.multiple.join('&');
+            },
+        },
+        methods: {
+            toggleMultiple(name) {
+                const index = this.multiple.indexOf(name);
+                if (index > -1) {
+                    this.multiple.splice(index, 1);
+                } else {
+                    this.multiple.push(name);
+                }
+            }
         },
     }
 </script>
diff --git a/src/classes.js b/src/classes.js
index fa5d0ee44..ba0c58a5f 100644
--- a/src/classes.js
+++ b/src/classes.js
@@ -209,7 +209,7 @@ export class Template {
             || data[data.length - 1].length > 48
             || ![0, 1].includes(parseInt(data[MORPHEMES.length]))
             || ![0, 1].includes(parseInt(data[MORPHEMES.length + 1]))
-            || data.slice(1, data.length - 3).filter(s => s.length > 7).length
+            || data.slice(1, data.length - 3).filter(s => s.length > 12).length
         ) {
             return null;
         }