diff --git a/assets/script.js b/assets/script.js index 8acf579ae3a4459b3885c8f0d2e3df4b5d2e85cd..0fb6b4421322f631e38033ed1236eb38f03bde9f 100644 --- a/assets/script.js +++ b/assets/script.js @@ -1,64 +1,66 @@ (function (STUDIP) { 'use strict'; - let app = null; - - STUDIP.Vue.load().then(({createApp}) => { - app = createApp({ - data () { - return { - color: 'blue', - needle: '', - size: 32, - source: STUDIP.IconOverview - }; - }, - methods: { - iconPath (icon) { - return `${STUDIP.ASSETS_URL}images/icons/${this.color}/${icon.icon}.svg`; + STUDIP.ready(() => { + STUDIP.Vue.load().then(({createApp}) => { + app = createApp({ + data () { + return { + color: 'blue', + needle: '', + size: 32, + source: STUDIP.IconOverview + }; }, - search (needle) { - this.needle = needle; - } - }, - computed: { - icons () { - if (!this.needle.length) { - return this.source; + methods: { + iconPath (icon) { + return `${STUDIP.ASSETS_URL}images/icons/${this.color}/${icon.icon}.svg`; + }, + search (needle) { + this.needle = needle; } - return this.source.filter(icon => { - return icon.icon.toLocaleLowerCase().includes(this.needle.toLocaleLowerCase()) - || icon.title?.toLocaleLowerCase().includes(this.needle.toLocaleLowerCase()); - }); - } - } - }); - app.$mount('#icon-overview'); - }); - - STUDIP.ready(() => { - $('#icon-search :input').keyup(event => { - const needle = event.target.value.trim(); - if (app !== null) { - app.search(needle); - } - - event.stopPropagation(); - event.preventDefault(); - }); - - $('#icon-options select[name="color"]').removeClass('submit-upon-select').change(event => { - app.color = event.target.value; + }, + computed: { + icons () { + if (!this.needle.length) { + return this.source; + } + return this.source.filter(icon => { + return icon.icon.toLocaleLowerCase().includes(this.needle.toLocaleLowerCase()) + || icon.title?.toLocaleLowerCase().includes(this.needle.toLocaleLowerCase()); + }); + } + }, + created() { + document.querySelector('#icon-search input').addEventListener( + 'keyup', + (event) => { + this.needle = event.target.value.trim(); + event.preventDefault(); + event.stopPropagation(); + } + ) + document.querySelector('#icon-options select[name="color"]').addEventListener( + 'change', + (event) => { + this.color = event.target.value; - event.stopPropagation(); - event.preventDefault(); - }); + event.stopPropagation(); + event.preventDefault(); + } + ); - $('#icon-options select[name="size"]').removeClass('submit-upon-select').change(event => { - app.size = event.target.value; + document.querySelector('#icon-options select[name="size"]').addEventListener( + 'change', + (event) => { + this.size = Number.parseInt(event.target.value, 10); - event.stopPropagation(); - event.preventDefault(); + event.stopPropagation(); + event.preventDefault(); + } + ); + } + }).$mount('#icon-overview'); }); }) }(STUDIP)); diff --git a/plugin.manifest b/plugin.manifest index f86989854292cb62e9037a31844ade0f08c2c54b..34aeb9506975a34e62be5b22212eec519c95bb76 100644 --- a/plugin.manifest +++ b/plugin.manifest @@ -1,5 +1,5 @@ pluginname=Icon overview pluginclassname=IconOverview -version=1.1 +version=1.2 origin=UOL studipMinVersion=5.0