generic-skin 3.0.8 → 3.0.11

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (14) hide show
  1. package/apps/vueChrono.js +19 -19
  2. package/apps/vueChrono.min.js +1 -1
  3. package/apps/vueDefault.js +19 -19
  4. package/apps/vueMulti.js +20 -20
  5. package/apps/vueMulti.min.js +1 -1
  6. package/apps/vueRela.js +18 -18
  7. package/apps/vueRela.min.js +1 -1
  8. package/config/vueComponents.js +56 -65
  9. package/config/vueElements.js +1 -1
  10. package/config/vueFilters.js +5 -0
  11. package/config/vueFilters.min.js +1 -1
  12. package/options/noManagers.js +3 -3
  13. package/options/noManagers.min.js +1 -1
  14. package/package.json +1 -1
package/apps/vueRela.js CHANGED
@@ -1,6 +1,6 @@
1
1
  Vue.component('modal-relaciones', {
2
2
  props: ['dataElement', 'dataType'],
3
- data: function () {
3
+ data() {
4
4
  return {
5
5
  state: {
6
6
  modal: false
@@ -17,11 +17,11 @@ Vue.component('modal-relaciones', {
17
17
  }
18
18
  },
19
19
  computed: {
20
- modalTitle: function () {
20
+ modalTitle() {
21
21
  if (this.dataType === 'new') return 'Nueva entrada';
22
22
  else if (this.dataType === 'edit') return 'Editar entrada';
23
23
  },
24
- oneCheck: function () {
24
+ oneCheck() {
25
25
  let final = '';
26
26
 
27
27
  if (!Object.keys(this.content.edit).length) return final;
@@ -48,10 +48,10 @@ Vue.component('modal-relaciones', {
48
48
 
49
49
  return final;
50
50
  },
51
- finalCheck: function () {
51
+ finalCheck() {
52
52
  return JSON.stringify(this.content.current) !== JSON.stringify(this.content.edit);
53
53
  },
54
- sortedCharacters: function () {
54
+ sortedCharacters() {
55
55
  if (!Object.keys(this.content.edit).length) return this.$parent.users.map((item) => {
56
56
  return item.user;
57
57
  });
@@ -63,7 +63,7 @@ Vue.component('modal-relaciones', {
63
63
  }
64
64
  },
65
65
  methods: {
66
- modalClose: function () {
66
+ modalClose() {
67
67
  this.$parent.modal.type = 'new';
68
68
  this.$parent.modal.status = false;
69
69
  this.$parent.setEntry();
@@ -75,14 +75,14 @@ Vue.component('modal-relaciones', {
75
75
  this.content.edit.color = character.color;
76
76
  this.content.edit.url = character.id;
77
77
  },
78
- updateData: function () {
78
+ updateData() {
79
79
  const data = JSON.parse(JSON.stringify(this.info.users)).filter((item) => {
80
80
  return item.user === this.content.current.name;
81
81
  })[0];
82
82
 
83
83
  this.content.edit.img = data.img;
84
84
  },
85
- pushElement: function () {
85
+ pushElement() {
86
86
  if (this.$parent.modal.type === 'edit') {
87
87
  this.$parent.content.edit.splice(this.$parent.content.edit.map((item) => {
88
88
  return item.position;
@@ -196,7 +196,7 @@ Vue.component('modal-relaciones', {
196
196
  });
197
197
 
198
198
  Vue.component('gestor-relaciones', {
199
- data: function () {
199
+ data() {
200
200
  return {
201
201
  render: 0,
202
202
  modal: {
@@ -216,14 +216,14 @@ Vue.component('gestor-relaciones', {
216
216
  }
217
217
  },
218
218
  computed: {
219
- sortedContent: function () {
219
+ sortedContent() {
220
220
  return JSON.parse(JSON.stringify(this.content.edit)).sort((a, b) => {
221
221
  if (a.name < b.name) return -1;
222
222
  if (a.name > b.name) return 1;
223
223
  return 0;
224
224
  });
225
225
  },
226
- paginationContent: function () {
226
+ paginationContent() {
227
227
  const limit = parseInt(forumConfig.skinOptions.paginationDefault / 2) + 1;
228
228
  const pages = Math.floor((this.sortedContent.length - 1) / limit) + 1;
229
229
 
@@ -240,15 +240,15 @@ Vue.component('gestor-relaciones', {
240
240
  content: this.sortedContent.slice(this.state.pagination * limit, (this.state.pagination + 1) * limit)
241
241
  };
242
242
  },
243
- finalCheck: function () {
243
+ finalCheck() {
244
244
  return JSON.stringify(this.content.current) !== JSON.stringify(this.content.edit);
245
245
  }
246
246
  },
247
247
  methods: {
248
- forceRerender: function () {
248
+ forceRerender() {
249
249
  this.render += 1;
250
250
  },
251
- setEntry: function () {
251
+ setEntry() {
252
252
  this.entry = {
253
253
  type: false,
254
254
  color: -1,
@@ -393,19 +393,19 @@ Vue.component('gestor-relaciones', {
393
393
 
394
394
  Vue.component('elemento-relaciones', {
395
395
  props: ['dataElement', 'dataType', 'dataId'],
396
- data: function () {
396
+ data() {
397
397
  return {
398
398
  profileName: forumConfig.profileOptions.profileName || 'perfil',
399
399
  content: this.dataElement
400
400
  }
401
401
  },
402
402
  computed: {
403
- realClass: function () {
403
+ realClass() {
404
404
  return 'rela-list usergroup-' + this.content.color;
405
405
  }
406
406
  },
407
407
  methods: {
408
- deleteElement: function () {
408
+ deleteElement() {
409
409
  this.$parent.content.edit.splice(this.$parent.content.edit.map((item) => {
410
410
  return item.position;
411
411
  }).indexOf(this.dataId), 1);
@@ -416,7 +416,7 @@ Vue.component('elemento-relaciones', {
416
416
 
417
417
  this.$parent.forceRerender();
418
418
  },
419
- editElement: function () {
419
+ editElement() {
420
420
  this.$parent.modal.type = 'edit';
421
421
  this.$parent.entry = this.content;
422
422
  this.$parent.modal.status = true;
package/apps/vueRela.min.js CHANGED
@@ -1 +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 ' });
1
+ 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 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() { return JSON.stringify(this.content.current) !== JSON.stringify(this.content.edit) }, sortedCharacters() { 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() { 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() { 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() { "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() { return { 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((t, e) => t.name < e.name ? -1 : t.name > e.name ? 1 : 0) }, paginationContent() { 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() { 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 (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() { 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(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() { 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 ' });