generic-skin 2.5.3 → 2.6.41

package/apps/vueRela.js

@@ -1,6 +1,6 @@
 Vue.component('modal-relaciones', {
     props: ['dataElement', 'dataType'],
-    data: function () {
+    data() {
         return {
             state: {
                 modal: false
@@ -17,11 +17,11 @@ Vue.component('modal-relaciones', {
         }
     },
     computed: {
-        modalTitle: function () {
+        modalTitle() {
             if (this.dataType === 'new') return 'Nueva entrada';
             else if (this.dataType === 'edit') return 'Editar entrada';
         },
-        oneCheck: function () {
+        oneCheck() {
             let final = '';
 
             if (!Object.keys(this.content.edit).length) return final;
@@ -48,10 +48,10 @@ Vue.component('modal-relaciones', {
 
             return final;
         },
-        finalCheck: function () {
+        finalCheck() {
             return JSON.stringify(this.content.current) !== JSON.stringify(this.content.edit);
         },
-        sortedCharacters: function () {
+        sortedCharacters() {
             if (!Object.keys(this.content.edit).length) return this.$parent.users.map((item) => {
                 return item.user;
             });
@@ -63,26 +63,26 @@ Vue.component('modal-relaciones', {
         }
     },
     methods: {
-        modalClose: function () {
+        modalClose() {
             this.$parent.modal.type = 'new';
             this.$parent.modal.status = false;
             this.$parent.setEntry();
         },
-        addCharacter: function (character) {
+        addCharacter(character) {
             this.content.edit.type = true;
             this.content.edit.name = character.user;
             this.content.edit.img = character.img;
             this.content.edit.color = character.color;
             this.content.edit.url = character.id;
         },
-        updateData: function () {
+        updateData() {
             const data = JSON.parse(JSON.stringify(this.info.users)).filter((item) => {
                 return item.user === this.content.current.name;
             })[0];
 
             this.content.edit.img = data.img;
         },
-        pushElement: function () {
+        pushElement() {
             if (this.$parent.modal.type === 'edit') {
                 this.$parent.content.edit.splice(this.$parent.content.edit.map((item) => {
                     return item.position;
@@ -101,7 +101,7 @@ Vue.component('modal-relaciones', {
         }
     },
     template: `
-    <modal-foro :data-title="modalTitle" v-on:modal-close="modalClose()">
+    <modal-foro :data-title="modalTitle" @modal-close="modalClose()">
         <template v-if="content.edit.type">
             <template slot="content">
                 <aviso-foro v-show="oneCheck.length">
@@ -112,7 +112,7 @@ Vue.component('modal-relaciones', {
                         <campo-foro data-name="Nombre">
                             <div class="character-selector">
                                 <input type="text" v-model="content.edit.name" placeholder="Escribe el nombre del personaje." disabled />
-                                <a class="character-custom" v-on:click="updateData()" :title="'Actualizar avatar de «' + content.current.name + '»'">
+                                <a class="character-custom" @click="updateData()" :title="'Actualizar avatar de «' + content.current.name + '»'">
                                     <i class="fas fa-redo-alt"></i>
                                 </a>
                             </div>
@@ -130,7 +130,7 @@ Vue.component('modal-relaciones', {
             </template>
             <template slot="controls" v-if="!oneCheck.length && finalCheck">
                 <controles-modal>
-                    <button class="button1 btn-main" v-on:click="pushElement()" title="Guardar entrada">Guardar</button>
+                    <button class="button1 btn-main" @click="pushElement()" title="Guardar entrada">Guardar</button>
                 </controles-modal>
             </template>
         </template>
@@ -145,7 +145,7 @@ Vue.component('modal-relaciones', {
                             <div class="character-selector">                                
                                 <input type="text" v-model="content.edit.name" placeholder="Escribe el nombre del personaje." />
                                 <ul class="no-style selector-list" v-if="sortedCharacters.length > 0">
-                                    <li v-for="(character, index) in sortedCharacters" v-on:click="addCharacter(character)" :title="'Seleccionar ' + character.user">{{ character.user }}<i class="fas fa-plus"></i></li>
+                                    <li v-for="(character, index) in sortedCharacters" @click="addCharacter(character)" :title="'Seleccionar ' + character.user">{{ character.user }}<i class="fas fa-plus"></i></li>
                                 </ul>
                             </div>
                         </campo-foro>
@@ -187,7 +187,7 @@ Vue.component('modal-relaciones', {
             </template>
             <template slot="controls" v-if="!oneCheck.length && finalCheck">
                 <controles-modal>
-                    <button class="button1 btn-main" v-on:click="pushElement()" title="Guardar entrada">Guardar</button>
+                    <button class="button1 btn-main" @click="pushElement()" title="Guardar entrada">Guardar</button>
                 </controles-modal>
             </template>
         </template>
@@ -196,7 +196,7 @@ Vue.component('modal-relaciones', {
 });
 
 Vue.component('gestor-relaciones', {
-    data: function () {
+    data() {
         return {
             render: 0,
             modal: {
@@ -216,14 +216,14 @@ Vue.component('gestor-relaciones', {
         }
     },
     computed: {
-        sortedContent: function () {
+        sortedContent() {
             return JSON.parse(JSON.stringify(this.content.edit)).sort((a, b) => {
                 if (a.name < b.name) return -1;
                 if (a.name > b.name) return 1;
                 return 0;
             });
         },
-        paginationContent: function () {
+        paginationContent() {
             const limit = parseInt(forumConfig.skinOptions.paginationDefault / 2) + 1;
             const pages = Math.floor((this.sortedContent.length - 1) / limit) + 1;
 
@@ -240,15 +240,15 @@ Vue.component('gestor-relaciones', {
                 content: this.sortedContent.slice(this.state.pagination * limit, (this.state.pagination + 1) * limit)
             };
         },
-        finalCheck: function () {
+        finalCheck() {
             return JSON.stringify(this.content.current) !== JSON.stringify(this.content.edit);
         }
     },
     methods: {
-        forceRerender: function () {
+        forceRerender() {
             this.render += 1;
         },
-        setEntry: function () {
+        setEntry() {
             this.entry = {
                 type: false,
                 color: -1,
@@ -258,12 +258,12 @@ Vue.component('gestor-relaciones', {
                 desc: ''
             };
         },
-        addEntry: function (e) {
+        addEntry(e) {
             e.preventDefault();
 
             this.modal.status = true;
         },
-        save: function (e) {
+        save(e) {
             e.preventDefault();
 
             this.state.page = 2;
@@ -321,7 +321,8 @@ Vue.component('gestor-relaciones', {
         <div class="is-content">
             <h2>Relaciones</h2>
             <hr />
-            <p>En esta página podrás editar las relaciones de tu personaje. Experimenta con su funcionamiento, es bastante intuitivo.</p>
+            <p>En esta página podrás editar las relaciones de tu personaje.</p>
+            <p>Ante cualquier duda o problema, contacta con la administración.</p>
         </div>
         <separador-foro />
         <template v-if="state.page === 0">
@@ -331,29 +332,29 @@ Vue.component('gestor-relaciones', {
             <modal-relaciones v-if="modal.status" :data-type="modal.type" :data-element="entry"></modal-relaciones>
             <mando-foro data-id="upper-controls" data-app="true">
                 <template slot="pagination" v-if="paginationContent.pages.length > 1">
-                    <a class="page-action" title="Ir a la página anterior" v-if="state.pagination > 0" v-on:click="state.pagination -= 1">
+                    <a class="page-action" title="Ir a la página anterior" v-if="state.pagination > 0" @click="state.pagination -= 1">
                         <i class="fas fa-chevron-left"></i>
                     </a>
                     <template v-for="page in paginationContent.pages">
                         <strong v-if="page === state.pagination">{{ page + 1 }}</strong>
-                        <a class="page-link" :title="'Ir a la página «' + (page + 1) + '»'" v-else v-on:click="state.pagination = page">{{ page + 1 }}</a>
+                        <a class="page-link" :title="'Ir a la página «' + (page + 1) + '»'" v-else @click="state.pagination = page">{{ page + 1 }}</a>
                     </template>
-                    <a class="page-action" title="Ir a la página siguiente" v-if="(state.pagination + 1) < paginationContent.pages.length" v-on:click="state.pagination += 1">
+                    <a class="page-action" title="Ir a la página siguiente" v-if="(state.pagination + 1) < paginationContent.pages.length" @click="state.pagination += 1">
                         <i class="fas fa-chevron-right"></i>
                     </a>
                 </template>
                 <template slot="controls">
-                    <li v-on:click="addEntry($event)">
+                    <li @click="addEntry($event)">
                         <boton-foro data-url="#" data-name="Añadir" data-icon="fas fa-plus"></boton-foro>
                     </li>
-                    <li v-if="finalCheck" v-on:click="save($event)">
+                    <li v-if="finalCheck" @click="save($event)">
                         <boton-foro data-url="#" data-name="Guardar" data-icon="fas fa-save" data-type="no-name"></boton-foro>
                     </li>
                 </template>
             </mando-foro>
-            <ul id="forum-rplist" class="no-style" :key="render">
+            <ul id="forum-rplist" :class="'no-style' + (!paginationContent.content.length ? ' no-results': '')" :key="render">
                 <template v-if="!paginationContent.content.length">
-                    <li class="is-not-lastpost not-status">
+                    <li class="is-not-topic is-not-lastpost">
                         <h6>No hay entradas en tus relaciones</h6>
                     </li>
                 </template>
@@ -363,22 +364,22 @@ Vue.component('gestor-relaciones', {
             </ul>
             <mando-foro data-id="lower-controls" data-app="true">
                 <template slot="pagination" v-if="paginationContent.pages.length > 1">
-                    <a class="page-action" title="Ir a la página anterior" v-if="state.pagination > 0" v-on:click="state.pagination -= 1">
+                    <a class="page-action" title="Ir a la página anterior" v-if="state.pagination > 0" @click="state.pagination -= 1">
                         <i class="fas fa-chevron-left"></i>
                     </a>
                     <template v-for="page in paginationContent.pages">
                         <strong v-if="page === state.pagination">{{ page + 1 }}</strong>
-                        <a class="page-link" :title="'Ir a la página «' + (page + 1) + '»'" v-else v-on:click="state.pagination = page">{{ page + 1 }}</a>
+                        <a class="page-link" :title="'Ir a la página «' + (page + 1) + '»'" v-else @click="state.pagination = page">{{ page + 1 }}</a>
                     </template>
-                    <a class="page-action" title="Ir a la página siguiente" v-if="(state.pagination + 1) < paginationContent.pages.length" v-on:click="state.pagination += 1">
+                    <a class="page-action" title="Ir a la página siguiente" v-if="(state.pagination + 1) < paginationContent.pages.length" @click="state.pagination += 1">
                         <i class="fas fa-chevron-right"></i>
                     </a>
                 </template>
                 <template slot="controls">
-                    <li v-on:click="addEntry($event)">
+                    <li @click="addEntry($event)">
                         <boton-foro data-url="#" data-name="Añadir" data-icon="fas fa-plus"></boton-foro>
                     </li>
-                    <li v-if="finalCheck" v-on:click="save($event)">
+                    <li v-if="finalCheck" @click="save($event)">
                         <boton-foro data-url="#" data-name="Guardar" data-icon="fas fa-save" data-type="no-name"></boton-foro>
                     </li>
                 </template>
@@ -393,19 +394,19 @@ Vue.component('gestor-relaciones', {
 
 Vue.component('elemento-relaciones', {
     props: ['dataElement', 'dataType', 'dataId'],
-    data: function () {
+    data() {
         return {
             profileName: forumConfig.profileOptions.profileName || 'perfil',
             content: this.dataElement
         }
     },
     computed: {
-        realClass: function () {
+        realClass() {
             return 'rela-list usergroup-' + this.content.color;
         }
     },
     methods: {
-        deleteElement: function () {
+        deleteElement() {
             this.$parent.content.edit.splice(this.$parent.content.edit.map((item) => {
                 return item.position;
             }).indexOf(this.dataId), 1);
@@ -416,7 +417,7 @@ Vue.component('elemento-relaciones', {
 
             this.$parent.forceRerender();
         },
-        editElement: function () {
+        editElement() {
             this.$parent.modal.type = 'edit';
             this.$parent.entry = this.content;
             this.$parent.modal.status = true;
@@ -430,7 +431,7 @@ Vue.component('elemento-relaciones', {
                 <div class="rela-content">
                     <div class="rela-title">
                         <h4>{{ content.name }}</h4>
-                        <div class="rp-controls"><span v-on:click="editElement()" title="Editar entrada">Editar</span> / <span v-on:click="deleteElement()" title="Eliminar entrada">Eliminar</span></div>
+                        <div class="rp-controls"><span @click="editElement()" title="Editar entrada">Editar</span> / <span @click="deleteElement()" title="Eliminar entrada">Eliminar</span></div>
                     </div>
                     <div class="small-text is-content" :inner-html.prop="content.desc | turn-br"></div>
                 </div>

package/apps/vueRela.min.js

@@ -1 +1 @@
-Vue.component("modal-relaciones", { props: ["dataElement", "dataType"], data: function () { return { state: { modal: !1 }, info: { users: this.$parent.users, user: "", people: [] }, content: { edit: JSON.parse(JSON.stringify(this.dataElement)), current: this.dataElement } } }, computed: { modalTitle: function () { return "new" === this.dataType ? "Nueva entrada" : "edit" === this.dataType ? "Editar entrada" : void 0 }, oneCheck: function () { let t = ""; return Object.keys(this.content.edit).length ? (this.content.edit.name.length < 3 && (t += "<li>Escribe el nombre del personaje.</li>"), -1 === this.content.edit.color && (t += "<li>Selecciona una facción para el personaje.</li>"), -1 === this.content.edit.url.indexOf("/u") && (t += "<li>Escribe el enlace al perfil del personaje.</li>"), this.content.edit.img.match(/(jpg|jpeg|png)$/i) || (t += "<li>Escribe el enlace a la imagen del personaje (debe ser de 190x190).</li>"), this.content.edit.desc.length < 151 && (t += "<li>Escribe una descripción lo suficientemente larga (150 carácteres al menos).</li>"), t) : t }, finalCheck: function () { return JSON.stringify(this.content.current) !== JSON.stringify(this.content.edit) }, sortedCharacters: function () { return Object.keys(this.content.edit).length ? this.info.users.filter(t => -1 === this.info.people.indexOf(t.user)).filter(t => t.user.toLowerCase().indexOf(this.content.edit.name.toLowerCase()) > -1) : this.$parent.users.map(t => t.user) } }, methods: { modalClose: function () { this.$parent.modal.type = "new", this.$parent.modal.status = !1, this.$parent.setEntry() }, addCharacter: function (t) { this.content.edit.type = !0, this.content.edit.name = t.user, this.content.edit.img = t.img, this.content.edit.color = t.color, this.content.edit.url = t.id }, updateData: function () { const t = JSON.parse(JSON.stringify(this.info.users)).filter(t => t.user === this.content.current.name)[0]; this.content.edit.img = t.img }, pushElement: function () { "edit" === this.$parent.modal.type && this.$parent.content.edit.splice(this.$parent.content.edit.map(t => t.position).indexOf(this.content.current.position), 1); let t = this.content.edit; "new" === this.$parent.modal.type && (t.position = this.$parent.content.edit.length), this.$parent.content.edit.push(t), this.modalClose() } }, template: '\n    <modal-foro :data-title="modalTitle" v-on:modal-close="modalClose()">\n        <template v-if="content.edit.type">\n            <template slot="content">\n                <aviso-foro v-show="oneCheck.length">\n                    <ul v-html="oneCheck"></ul>\n                </aviso-foro>\n                <ul class="forum-fieldlist no-style">\n                    <li>\n                        <campo-foro data-name="Nombre">\n                            <div class="character-selector">\n                                <input type="text" v-model="content.edit.name" placeholder="Escribe el nombre del personaje." disabled />\n                                <a class="character-custom" v-on:click="updateData()" :title="\'Actualizar avatar de «\' + content.current.name + \'»\'">\n                                    <i class="fas fa-redo-alt"></i>\n                                </a>\n                            </div>\n                        </campo-foro>\n                    </li>\n                </ul>\n                <h4 class="mt-5">Descripción</h4>\n                <ul class="forum-fieldlist no-style">\n                    <li class="has-no-label">\n                        <campo-foro data-name="Descripción">\n                            <textarea v-model="content.edit.desc" placeholder="Escribe la descripción del personaje."></textarea>\n                        </campo-foro>\n                    </li>\n                </ul>\n            </template>\n            <template slot="controls" v-if="!oneCheck.length && finalCheck">\n                <controles-modal>\n                    <button class="button1 btn-main" v-on:click="pushElement()" title="Guardar entrada">Guardar</button>\n                </controles-modal>\n            </template>\n        </template>\n        <template v-else>\n            <template slot="content">\n                <aviso-foro v-show="oneCheck.length">\n                    <ul v-html="oneCheck"></ul>\n                </aviso-foro>\n                <ul class="forum-fieldlist no-style">\n                    <li>\n                        <campo-foro data-name="Nombre">\n                            <div class="character-selector">                                \n                                <input type="text" v-model="content.edit.name" placeholder="Escribe el nombre del personaje." />\n                                <ul class="no-style selector-list" v-if="sortedCharacters.length > 0">\n                                    <li v-for="(character, index) in sortedCharacters" v-on:click="addCharacter(character)" :title="\'Seleccionar \' + character.user">{{ character.user }}<i class="fas fa-plus"></i></li>\n                                </ul>\n                            </div>\n                        </campo-foro>\n                    </li>\n                    <li>\n                        <campo-foro data-name="Imagen">\n                            <input type="text" v-model="content.edit.img" placeholder="Escribe el enlace a la imagen del personaje." />\n                        </campo-foro>\n                    </li>\n                    <li>\n                        <campo-foro data-name="Perfil">\n                            <input type="text" v-model="content.edit.url" placeholder="Escribe el enlace al perfil del personaje." />\n                        </campo-foro>\n                    </li>\n                    <li>\n                        <campo-foro data-name="Facción">\n                            <div class="select-container">\n                                <select v-model="content.edit.color">\n                                    <option value="-1" hidden>Selecciona la facción del personaje.</option>\n                                    <option value="azul">Imperio Galáctico</option>\n                                    <option value="rojo">Remanente Purista</option>\n                                    <option value="naranja">Autoridad del Sector Corporativo</option>\n                                    <option value="verde">Cártel</option>\n                                    <option value="turquesa">Nueva Rebelión</option>\n                                    <option value="amarillo">Neutral</option>\n                                </select>\n                            </div>\n                        </campo-foro>\n                    </li>\n                </ul>\n                <h4 class="mt-5">Descripción</h4>\n                <ul class="forum-fieldlist no-style">\n                    <li class="has-no-label">\n                        <campo-foro data-name="Descripción">\n                            <textarea v-model="content.edit.desc" placeholder="Escribe la descripción del personaje."></textarea>\n                        </campo-foro>\n                    </li>\n                </ul>\n            </template>\n            <template slot="controls" v-if="!oneCheck.length && finalCheck">\n                <controles-modal>\n                    <button class="button1 btn-main" v-on:click="pushElement()" title="Guardar entrada">Guardar</button>\n                </controles-modal>\n            </template>\n        </template>\n    </modal-foro>\n    ' }), Vue.component("gestor-relaciones", { data: function () { return { render: 0, modal: { type: "new", status: !1 }, users: [], state: { page: 0, pagination: 0 }, entry: {}, content: { edit: [], current: [] } } }, computed: { sortedContent: function () { return JSON.parse(JSON.stringify(this.content.edit)).sort((t, e) => t.name < e.name ? -1 : t.name > e.name ? 1 : 0) }, paginationContent: function () { const t = parseInt(forumConfig.skinOptions.paginationDefault / 2) + 1, e = Math.floor((this.sortedContent.length - 1) / t) + 1; let n = []; for (let t = 0; t < e; t++)n.push(t); return this.forceRerender(), { pages: n, content: this.sortedContent.slice(this.state.pagination * t, (this.state.pagination + 1) * t) } }, finalCheck: function () { return JSON.stringify(this.content.current) !== JSON.stringify(this.content.edit) } }, methods: { forceRerender: function () { this.render += 1 }, setEntry: function () { this.entry = { type: !1, color: -1, url: "", img: "", name: "", desc: "" } }, addEntry: function (t) { t.preventDefault(), this.modal.status = !0 }, save: function (t) { t.preventDefault(), this.state.page = 2; const e = this.sortedContent.map(t => (void 0 !== t.position && delete t.position, t)); FNR.user.profile.setData([{ name: forumConfig.profileUser.relaField, type: "textarea", value: JSON.stringify(e).replace(/"/g, "`") }]).then(t => { t ? (FNR.html.genNotification("Atención", "Información actualizada sin inconvenientes.", "fas fa-check"), setTimeout(() => { window.location.reload() }, 2e3)) : FNR.html.genNotification("Atención", "Hubo un problema al actualizar. Dale otro intento.", "fas fa-exclamation") }) } }, created() { FNR.user.profile.getData([{ name: forumConfig.profileUser.relaField, type: "textarea" }]).then(t => { const e = FNR.utility.genArray(t[0].value).map((t, e) => { let n = t; return n.position = e, n }); this.content.edit = e, this.content.current = JSON.parse(JSON.stringify(e)), FNR.forum.getMembers().then(t => { this.setEntry(), this.users = t, this.state.page = 1 }) }) }, template: '\n    <section id="forum-relationships" class="wiki-content is-dramatic">\n        <div class="is-content">\n            <h2>Relaciones</h2>\n            <hr />\n            <p>En esta página podrás editar las relaciones de tu personaje. Experimenta con su funcionamiento, es bastante intuitivo.</p>\n        </div>\n        <separador-foro />\n        <template v-if="state.page === 0">\n            <cargando-foro data-text="Cargando utilidad…"></cargando-foro>\n        </template>\n        <template v-else-if="state.page === 1">\n            <modal-relaciones v-if="modal.status" :data-type="modal.type" :data-element="entry"></modal-relaciones>\n            <mando-foro data-id="upper-controls" data-app="true">\n                <template slot="pagination" v-if="paginationContent.pages.length > 1">\n                    <a class="page-action" title="Ir a la página anterior" v-if="state.pagination > 0" v-on:click="state.pagination -= 1">\n                        <i class="fas fa-chevron-left"></i>\n                    </a>\n                    <template v-for="page in paginationContent.pages">\n                        <strong v-if="page === state.pagination">{{ page + 1 }}</strong>\n                        <a class="page-link" :title="\'Ir a la página «\' + (page + 1) + \'»\'" v-else v-on:click="state.pagination = page">{{ page + 1 }}</a>\n                    </template>\n                    <a class="page-action" title="Ir a la página siguiente" v-if="(state.pagination + 1) < paginationContent.pages.length" v-on:click="state.pagination += 1">\n                        <i class="fas fa-chevron-right"></i>\n                    </a>\n                </template>\n                <template slot="controls">\n                    <li v-on:click="addEntry($event)">\n                        <boton-foro data-url="#" data-name="Añadir" data-icon="fas fa-plus"></boton-foro>\n                    </li>\n                    <li v-if="finalCheck" v-on:click="save($event)">\n                        <boton-foro data-url="#" data-name="Guardar" data-icon="fas fa-save" data-type="no-name"></boton-foro>\n                    </li>\n                </template>\n            </mando-foro>\n            <ul id="forum-rplist" class="no-style" :key="render">\n                <template v-if="!paginationContent.content.length">\n                    <li class="is-not-lastpost not-status">\n                        <h6>No hay entradas en tus relaciones</h6>\n                    </li>\n                </template>\n                <template v-else v-for="character in paginationContent.content">\n                    <elemento-relaciones :data-element="character" data-type="manager" :data-id="character.position" />\n                </template>\n            </ul>\n            <mando-foro data-id="lower-controls" data-app="true">\n                <template slot="pagination" v-if="paginationContent.pages.length > 1">\n                    <a class="page-action" title="Ir a la página anterior" v-if="state.pagination > 0" v-on:click="state.pagination -= 1">\n                        <i class="fas fa-chevron-left"></i>\n                    </a>\n                    <template v-for="page in paginationContent.pages">\n                        <strong v-if="page === state.pagination">{{ page + 1 }}</strong>\n                        <a class="page-link" :title="\'Ir a la página «\' + (page + 1) + \'»\'" v-else v-on:click="state.pagination = page">{{ page + 1 }}</a>\n                    </template>\n                    <a class="page-action" title="Ir a la página siguiente" v-if="(state.pagination + 1) < paginationContent.pages.length" v-on:click="state.pagination += 1">\n                        <i class="fas fa-chevron-right"></i>\n                    </a>\n                </template>\n                <template slot="controls">\n                    <li v-on:click="addEntry($event)">\n                        <boton-foro data-url="#" data-name="Añadir" data-icon="fas fa-plus"></boton-foro>\n                    </li>\n                    <li v-if="finalCheck" v-on:click="save($event)">\n                        <boton-foro data-url="#" data-name="Guardar" data-icon="fas fa-save" data-type="no-name"></boton-foro>\n                    </li>\n                </template>\n            </mando-foro>\n        </template>\n        <template v-else-if="state.page === 2">\n            <cargando-foro data-text="Actualizando información…"></cargando-foro>\n        </template>\n    </section>\n    ' }), Vue.component("elemento-relaciones", { props: ["dataElement", "dataType", "dataId"], data: function () { return { profileName: forumConfig.profileOptions.profileName || "perfil", content: this.dataElement } }, computed: { realClass: function () { return "rela-list usergroup-" + this.content.color } }, methods: { deleteElement: function () { this.$parent.content.edit.splice(this.$parent.content.edit.map(t => t.position).indexOf(this.dataId), 1), 0 === this.$parent.paginationContent.content.length && 0 !== this.$parent.state.pagination && (this.$parent.state.pagination -= 1), this.$parent.forceRerender() }, editElement: function () { this.$parent.modal.type = "edit", this.$parent.entry = this.content, this.$parent.modal.status = !0 } }, template: '\n    <li :class="realClass">\n        <template v-if="dataType === \'manager\'">\n            <a class="rela-element rela-manager">\n                <div class="rela-image" :style="\'background-image: url(\' + content.img + \')\'"></div>\n                <div class="rela-content">\n                    <div class="rela-title">\n                        <h4>{{ content.name }}</h4>\n                        <div class="rp-controls"><span v-on:click="editElement()" title="Editar entrada">Editar</span> / <span v-on:click="deleteElement()" title="Eliminar entrada">Eliminar</span></div>\n                    </div>\n                    <div class="small-text is-content" :inner-html.prop="content.desc | turn-br"></div>\n                </div>\n            </a>\n        </template>\n        <template v-else-if="dataType === \'profile\'">\n            <template v-if="content.type">\n                <a class="rela-element" :href="content.url" target="_blank" :title="\'Ir al \' + profileName + \' de «\' + content.name + \'»\'">\n                    <div class="rela-image" :style="\'background-image: url(\' + content.img + \')\'"></div>\n                    <div class="rela-content">\n                        <div class="rela-title">\n                            <h4>{{ content.name }}</h4>\n                        </div>\n                        <div class="small-text is-content" :inner-html.prop="content.desc | turn-br"></div>\n                    </div>\n                </a>\n            </template>\n            <template v-else>\n                <a class="rela-element">\n                    <div class="rela-image" :style="\'background-image: url(\' + content.img + \')\'"></div>\n                    <div class="rela-content">\n                        <div class="rela-title">\n                            <h4>{{ content.name }}</h4>\n                        </div>\n                        <div class="small-text is-content" :inner-html.prop="content.desc | turn-br"></div>\n                    </div>\n                </a>\n            </template>\n        </template>\n    </li>\n    ' });
+Vue.component("modal-relaciones",{props:["dataElement","dataType"],data(){return{state:{modal:!1},info:{users:this.$parent.users,user:"",people:[]},content:{edit:JSON.parse(JSON.stringify(this.dataElement)),current:this.dataElement}}},computed:{modalTitle(){return"new"===this.dataType?"Nueva entrada":"edit"===this.dataType?"Editar entrada":void 0},oneCheck(){let e="";return Object.keys(this.content.edit).length?(this.content.edit.name.length<3&&(e+="<li>Escribe el nombre del personaje.</li>"),-1===this.content.edit.color&&(e+="<li>Selecciona una facción para el personaje.</li>"),-1===this.content.edit.url.indexOf("/u")&&(e+="<li>Escribe el enlace al perfil del personaje.</li>"),this.content.edit.img.match(/(jpg|jpeg|png)$/i)||(e+="<li>Escribe el enlace a la imagen del personaje (debe ser de 190x190).</li>"),this.content.edit.desc.length<151&&(e+="<li>Escribe una descripción lo suficientemente larga (150 carácteres al menos).</li>"),e):e},finalCheck(){return JSON.stringify(this.content.current)!==JSON.stringify(this.content.edit)},sortedCharacters(){return Object.keys(this.content.edit).length?this.info.users.filter(e=>-1===this.info.people.indexOf(e.user)).filter(e=>e.user.toLowerCase().indexOf(this.content.edit.name.toLowerCase())>-1):this.$parent.users.map(e=>e.user)}},methods:{modalClose(){this.$parent.modal.type="new",this.$parent.modal.status=!1,this.$parent.setEntry()},addCharacter:function(e){this.content.edit.type=!0,this.content.edit.name=e.user,this.content.edit.img=e.img,this.content.edit.color=e.color,this.content.edit.url=e.id},updateData(){const e=JSON.parse(JSON.stringify(this.info.users)).filter(e=>e.user===this.content.current.name)[0];this.content.edit.img=e.img},pushElement(){"edit"===this.$parent.modal.type&&this.$parent.content.edit.splice(this.$parent.content.edit.map(e=>e.position).indexOf(this.content.current.position),1);let e=this.content.edit;"new"===this.$parent.modal.type&&(e.position=this.$parent.content.edit.length),this.$parent.content.edit.push(e),this.modalClose()}},template:'\n    <modal-foro :data-title="modalTitle" @modal-close="modalClose()">\n        <template v-if="content.edit.type">\n            <template slot="content">\n                <aviso-foro v-show="oneCheck.length">\n                    <ul v-html="oneCheck"></ul>\n                </aviso-foro>\n                <ul class="forum-fieldlist no-style">\n                    <li>\n                        <campo-foro data-name="Nombre">\n                            <div class="character-selector">\n                                <input type="text" v-model="content.edit.name" placeholder="Escribe el nombre del personaje." disabled />\n                                <a class="character-custom" @click="updateData()" :title="\'Actualizar avatar de «\' + content.current.name + \'»\'">\n                                    <i class="fas fa-redo-alt"></i>\n                                </a>\n                            </div>\n                        </campo-foro>\n                    </li>\n                </ul>\n                <h4 class="mt-5">Descripción</h4>\n                <ul class="forum-fieldlist no-style">\n                    <li class="has-no-label">\n                        <campo-foro data-name="Descripción">\n                            <textarea v-model="content.edit.desc" placeholder="Escribe la descripción del personaje."></textarea>\n                        </campo-foro>\n                    </li>\n                </ul>\n            </template>\n            <template slot="controls" v-if="!oneCheck.length && finalCheck">\n                <controles-modal>\n                    <button class="button1 btn-main" @click="pushElement()" title="Guardar entrada">Guardar</button>\n                </controles-modal>\n            </template>\n        </template>\n        <template v-else>\n            <template slot="content">\n                <aviso-foro v-show="oneCheck.length">\n                    <ul v-html="oneCheck"></ul>\n                </aviso-foro>\n                <ul class="forum-fieldlist no-style">\n                    <li>\n                        <campo-foro data-name="Nombre">\n                            <div class="character-selector">                                \n                                <input type="text" v-model="content.edit.name" placeholder="Escribe el nombre del personaje." />\n                                <ul class="no-style selector-list" v-if="sortedCharacters.length > 0">\n                                    <li v-for="(character, index) in sortedCharacters" @click="addCharacter(character)" :title="\'Seleccionar \' + character.user">{{ character.user }}<i class="fas fa-plus"></i></li>\n                                </ul>\n                            </div>\n                        </campo-foro>\n                    </li>\n                    <li>\n                        <campo-foro data-name="Imagen">\n                            <input type="text" v-model="content.edit.img" placeholder="Escribe el enlace a la imagen del personaje." />\n                        </campo-foro>\n                    </li>\n                    <li>\n                        <campo-foro data-name="Perfil">\n                            <input type="text" v-model="content.edit.url" placeholder="Escribe el enlace al perfil del personaje." />\n                        </campo-foro>\n                    </li>\n                    <li>\n                        <campo-foro data-name="Facción">\n                            <div class="select-container">\n                                <select v-model="content.edit.color">\n                                    <option value="-1" hidden>Selecciona la facción del personaje.</option>\n                                    <option value="azul">Imperio Galáctico</option>\n                                    <option value="rojo">Remanente Purista</option>\n                                    <option value="naranja">Autoridad del Sector Corporativo</option>\n                                    <option value="verde">Cártel</option>\n                                    <option value="turquesa">Nueva Rebelión</option>\n                                    <option value="amarillo">Neutral</option>\n                                </select>\n                            </div>\n                        </campo-foro>\n                    </li>\n                </ul>\n                <h4 class="mt-5">Descripción</h4>\n                <ul class="forum-fieldlist no-style">\n                    <li class="has-no-label">\n                        <campo-foro data-name="Descripción">\n                            <textarea v-model="content.edit.desc" placeholder="Escribe la descripción del personaje."></textarea>\n                        </campo-foro>\n                    </li>\n                </ul>\n            </template>\n            <template slot="controls" v-if="!oneCheck.length && finalCheck">\n                <controles-modal>\n                    <button class="button1 btn-main" @click="pushElement()" title="Guardar entrada">Guardar</button>\n                </controles-modal>\n            </template>\n        </template>\n    </modal-foro>\n    '}),Vue.component("gestor-relaciones",{data:()=>({render:0,modal:{type:"new",status:!1},users:[],state:{page:0,pagination:0},entry:{},content:{edit:[],current:[]}}),computed:{sortedContent(){return JSON.parse(JSON.stringify(this.content.edit)).sort((e,t)=>e.name<t.name?-1:e.name>t.name?1:0)},paginationContent(){const e=parseInt(forumConfig.skinOptions.paginationDefault/2)+1,t=Math.floor((this.sortedContent.length-1)/e)+1;let n=[];for(let e=0;e<t;e++)n.push(e);return this.forceRerender(),{pages:n,content:this.sortedContent.slice(this.state.pagination*e,(this.state.pagination+1)*e)}},finalCheck(){return JSON.stringify(this.content.current)!==JSON.stringify(this.content.edit)}},methods:{forceRerender(){this.render+=1},setEntry(){this.entry={type:!1,color:-1,url:"",img:"",name:"",desc:""}},addEntry:function(e){e.preventDefault(),this.modal.status=!0},save:function(e){e.preventDefault(),this.state.page=2;const t=this.sortedContent.map(e=>(void 0!==e.position&&delete e.position,e));FNR.user.profile.setData([{name:forumConfig.profileUser.relaField,type:"textarea",value:JSON.stringify(t).replace(/"/g,"`")}]).then(e=>{e?(FNR.html.genNotification("Atención","Información actualizada sin inconvenientes.","fas fa-check"),setTimeout(()=>{window.location.reload()},2e3)):FNR.html.genNotification("Atención","Hubo un problema al actualizar. Dale otro intento.","fas fa-exclamation")})}},created(){FNR.user.profile.getData([{name:forumConfig.profileUser.relaField,type:"textarea"}]).then(e=>{const t=FNR.utility.genArray(e[0].value).map((e,t)=>{let n=e;return n.position=t,n});this.content.edit=t,this.content.current=JSON.parse(JSON.stringify(t)),FNR.forum.getMembers().then(e=>{this.setEntry(),this.users=e,this.state.page=1})})},template:'\n    <section id="forum-relationships" class="wiki-content is-dramatic">\n        <div class="is-content">\n            <h2>Relaciones</h2>\n            <hr />\n            <p>En esta página podrás editar las relaciones de tu personaje.</p>\n            <p>Ante cualquier duda o problema, contacta con la administración.</p>\n        </div>\n        <separador-foro />\n        <template v-if="state.page === 0">\n            <cargando-foro data-text="Cargando utilidad…"></cargando-foro>\n        </template>\n        <template v-else-if="state.page === 1">\n            <modal-relaciones v-if="modal.status" :data-type="modal.type" :data-element="entry"></modal-relaciones>\n            <mando-foro data-id="upper-controls" data-app="true">\n                <template slot="pagination" v-if="paginationContent.pages.length > 1">\n                    <a class="page-action" title="Ir a la página anterior" v-if="state.pagination > 0" @click="state.pagination -= 1">\n                        <i class="fas fa-chevron-left"></i>\n                    </a>\n                    <template v-for="page in paginationContent.pages">\n                        <strong v-if="page === state.pagination">{{ page + 1 }}</strong>\n                        <a class="page-link" :title="\'Ir a la página «\' + (page + 1) + \'»\'" v-else @click="state.pagination = page">{{ page + 1 }}</a>\n                    </template>\n                    <a class="page-action" title="Ir a la página siguiente" v-if="(state.pagination + 1) < paginationContent.pages.length" @click="state.pagination += 1">\n                        <i class="fas fa-chevron-right"></i>\n                    </a>\n                </template>\n                <template slot="controls">\n                    <li @click="addEntry($event)">\n                        <boton-foro data-url="#" data-name="Añadir" data-icon="fas fa-plus"></boton-foro>\n                    </li>\n                    <li v-if="finalCheck" @click="save($event)">\n                        <boton-foro data-url="#" data-name="Guardar" data-icon="fas fa-save" data-type="no-name"></boton-foro>\n                    </li>\n                </template>\n            </mando-foro>\n            <ul id="forum-rplist" :class="\'no-style\' + (!paginationContent.content.length ? \' no-results\': \'\')" :key="render">\n                <template v-if="!paginationContent.content.length">\n                    <li class="is-not-topic is-not-lastpost">\n                        <h6>No hay entradas en tus relaciones</h6>\n                    </li>\n                </template>\n                <template v-else v-for="character in paginationContent.content">\n                    <elemento-relaciones :data-element="character" data-type="manager" :data-id="character.position" />\n                </template>\n            </ul>\n            <mando-foro data-id="lower-controls" data-app="true">\n                <template slot="pagination" v-if="paginationContent.pages.length > 1">\n                    <a class="page-action" title="Ir a la página anterior" v-if="state.pagination > 0" @click="state.pagination -= 1">\n                        <i class="fas fa-chevron-left"></i>\n                    </a>\n                    <template v-for="page in paginationContent.pages">\n                        <strong v-if="page === state.pagination">{{ page + 1 }}</strong>\n                        <a class="page-link" :title="\'Ir a la página «\' + (page + 1) + \'»\'" v-else @click="state.pagination = page">{{ page + 1 }}</a>\n                    </template>\n                    <a class="page-action" title="Ir a la página siguiente" v-if="(state.pagination + 1) < paginationContent.pages.length" @click="state.pagination += 1">\n                        <i class="fas fa-chevron-right"></i>\n                    </a>\n                </template>\n                <template slot="controls">\n                    <li @click="addEntry($event)">\n                        <boton-foro data-url="#" data-name="Añadir" data-icon="fas fa-plus"></boton-foro>\n                    </li>\n                    <li v-if="finalCheck" @click="save($event)">\n                        <boton-foro data-url="#" data-name="Guardar" data-icon="fas fa-save" data-type="no-name"></boton-foro>\n                    </li>\n                </template>\n            </mando-foro>\n        </template>\n        <template v-else-if="state.page === 2">\n            <cargando-foro data-text="Actualizando información…"></cargando-foro>\n        </template>\n    </section>\n    '}),Vue.component("elemento-relaciones",{props:["dataElement","dataType","dataId"],data(){return{profileName:forumConfig.profileOptions.profileName||"perfil",content:this.dataElement}},computed:{realClass(){return"rela-list usergroup-"+this.content.color}},methods:{deleteElement(){this.$parent.content.edit.splice(this.$parent.content.edit.map(e=>e.position).indexOf(this.dataId),1),0===this.$parent.paginationContent.content.length&&0!==this.$parent.state.pagination&&(this.$parent.state.pagination-=1),this.$parent.forceRerender()},editElement(){this.$parent.modal.type="edit",this.$parent.entry=this.content,this.$parent.modal.status=!0}},template:'\n    <li :class="realClass">\n        <template v-if="dataType === \'manager\'">\n            <a class="rela-element rela-manager">\n                <div class="rela-image" :style="\'background-image: url(\' + content.img + \')\'"></div>\n                <div class="rela-content">\n                    <div class="rela-title">\n                        <h4>{{ content.name }}</h4>\n                        <div class="rp-controls"><span @click="editElement()" title="Editar entrada">Editar</span> / <span @click="deleteElement()" title="Eliminar entrada">Eliminar</span></div>\n                    </div>\n                    <div class="small-text is-content" :inner-html.prop="content.desc | turn-br"></div>\n                </div>\n            </a>\n        </template>\n        <template v-else-if="dataType === \'profile\'">\n            <template v-if="content.type">\n                <a class="rela-element" :href="content.url" target="_blank" :title="\'Ir al \' + profileName + \' de «\' + content.name + \'»\'">\n                    <div class="rela-image" :style="\'background-image: url(\' + content.img + \')\'"></div>\n                    <div class="rela-content">\n                        <div class="rela-title">\n                            <h4>{{ content.name }}</h4>\n                        </div>\n                        <div class="small-text is-content" :inner-html.prop="content.desc | turn-br"></div>\n                    </div>\n                </a>\n            </template>\n            <template v-else>\n                <a class="rela-element">\n                    <div class="rela-image" :style="\'background-image: url(\' + content.img + \')\'"></div>\n                    <div class="rela-content">\n                        <div class="rela-title">\n                            <h4>{{ content.name }}</h4>\n                        </div>\n                        <div class="small-text is-content" :inner-html.prop="content.desc | turn-br"></div>\n                    </div>\n                </a>\n            </template>\n        </template>\n    </li>\n    '});