From 65a6c9f90cd30c6adb444fbfa1b87d4caa3c8088 Mon Sep 17 00:00:00 2001 From: bkfox Date: Sun, 20 Mar 2022 11:59:51 +0100 Subject: [PATCH] autocomplete & form reset --- aircox/static/aircox/js/chunk-common.js | 2 +- .../aircox_streamer/source_item.html | 34 +++++++++---------- assets/src/components/AAutocomplete.vue | 5 +++ 3 files changed, 23 insertions(+), 18 deletions(-) diff --git a/aircox/static/aircox/js/chunk-common.js b/aircox/static/aircox/js/chunk-common.js index cc804b0..9ab85ff 100644 --- a/aircox/static/aircox/js/chunk-common.js +++ b/aircox/static/aircox/js/chunk-common.js @@ -15,7 +15,7 @@ \***********************************************************************************************************************************************************************************************/ /***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) { -eval("__webpack_require__.r(__webpack_exports__);\n// import debounce from 'lodash/debounce'\n/* harmony default export */ __webpack_exports__[\"default\"] = ({\n props: {\n url: String,\n model: Function,\n placeholder: String,\n name: String,\n labelField: String,\n valueField: {\n type: String,\n default: null\n },\n count: {\n type: Number,\n count: 10\n }\n },\n\n data() {\n return {\n value: '',\n items: [],\n selectedIndex: -1,\n cursor: -1,\n isFetching: false\n };\n },\n\n computed: {\n selected() {\n let index = this.selectedIndex;\n if (index < 0) return null;\n index = Math.min(index, this.items.length - 1);\n return this.items[index];\n },\n\n selectedValue() {\n const sel = this.selected;\n return sel && (this.valueField ? sel.data[this.valueField] : sel.id);\n },\n\n selectedLabel() {\n const sel = this.selected;\n return sel && sel.data[this.labelField];\n },\n\n dropdownClass() {\n const active = this.cursor > -1 && this.items.length;\n return ['dropdown', active ? 'is-active' : ''];\n }\n\n },\n methods: {\n move(index = -1, relative = false) {\n if (relative) index += this.cursor;\n this.cursor = Math.max(-1, Math.min(index, this.items.length - 1));\n },\n\n select(index = -1, relative = false, active = null) {\n if (relative) index += this.selectedIndex;else if (index == this.selectedIndex) return;\n this.selectedIndex = Math.max(-1, Math.min(index, this.items.length - 1));\n\n if (index >= 0) {\n this.$refs.input.value = this.selectedLabel;\n this.$refs.input.focus();\n }\n\n if (this.selectedIndex < 0) this.$emit('unselect');else this.$emit('select', index, this.selected, this.selectedValue);\n if (active !== null) active && this.move(0) || this.move(-1);\n },\n\n onKeyPress: function (event) {\n switch (event.keyCode) {\n case 13:\n this.select(this.cursor, false, false);\n break;\n\n case 27:\n this.select();\n break;\n\n case 38:\n this.move(-1, true);\n break;\n\n case 40:\n this.move(1, true);\n break;\n\n default:\n return;\n }\n\n event.preventDefault();\n event.stopPropagation();\n },\n onKeyUp: function (event) {\n const value = event.target.value;\n if (value === this.value) return;\n this.value = value;\n if (!value) return this.selected && this.select(-1);\n this.fetch(value);\n },\n fetch: function (query) {\n if (!query || this.isFetching) return;\n this.isFetching = true;\n return this.model.fetch(this.url.replace('${query}', query), {\n many: true\n }).then(items => {\n this.items = items || [];\n this.isFetching = false;\n this.move(0);\n return items;\n }, data => {\n this.isFetching = false;\n Promise.reject(data);\n });\n }\n }\n});\n\n//# sourceURL=webpack://aircox-assets/./src/components/AAutocomplete.vue?./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use%5B0%5D!./node_modules/vue-loader/dist/index.js??ruleSet%5B0%5D.use%5B0%5D"); +eval("__webpack_require__.r(__webpack_exports__);\n// import debounce from 'lodash/debounce'\n/* harmony default export */ __webpack_exports__[\"default\"] = ({\n props: {\n url: String,\n model: Function,\n placeholder: String,\n name: String,\n labelField: String,\n valueField: {\n type: String,\n default: null\n },\n count: {\n type: Number,\n count: 10\n }\n },\n\n data() {\n return {\n value: '',\n items: [],\n selectedIndex: -1,\n cursor: -1,\n isFetching: false\n };\n },\n\n computed: {\n selected() {\n let index = this.selectedIndex;\n if (index < 0) return null;\n index = Math.min(index, this.items.length - 1);\n return this.items[index];\n },\n\n selectedValue() {\n const sel = this.selected;\n return sel && (this.valueField ? sel.data[this.valueField] : sel.id);\n },\n\n selectedLabel() {\n const sel = this.selected;\n return sel && sel.data[this.labelField];\n },\n\n dropdownClass() {\n const active = this.cursor > -1 && this.items.length;\n return ['dropdown', active ? 'is-active' : ''];\n }\n\n },\n methods: {\n move(index = -1, relative = false) {\n if (relative) index += this.cursor;\n this.cursor = Math.max(-1, Math.min(index, this.items.length - 1));\n },\n\n select(index = -1, relative = false, active = null) {\n if (relative) index += this.selectedIndex;else if (index == this.selectedIndex) return;\n this.selectedIndex = Math.max(-1, Math.min(index, this.items.length - 1));\n\n if (index >= 0) {\n this.$refs.input.value = this.selectedLabel;\n this.$refs.input.focus();\n }\n\n if (this.selectedIndex < 0) this.$emit('unselect');else this.$emit('select', index, this.selected, this.selectedValue);\n if (active !== null) active && this.move(0) || this.move(-1);\n },\n\n onKeyPress: function (event) {\n switch (event.keyCode) {\n case 13:\n this.select(this.cursor, false, false);\n break;\n\n case 27:\n this.select();\n break;\n\n case 38:\n this.move(-1, true);\n break;\n\n case 40:\n this.move(1, true);\n break;\n\n default:\n return;\n }\n\n event.preventDefault();\n event.stopPropagation();\n },\n onKeyUp: function (event) {\n const value = event.target.value;\n if (value === this.value) return;\n this.value = value;\n if (!value) return this.selected && this.select(-1);\n this.fetch(value);\n },\n fetch: function (query) {\n if (!query || this.isFetching) return;\n this.isFetching = true;\n return this.model.fetch(this.url.replace('${query}', query), {\n many: true\n }).then(items => {\n this.items = items || [];\n this.isFetching = false;\n this.move(0);\n return items;\n }, data => {\n this.isFetching = false;\n Promise.reject(data);\n });\n }\n },\n\n mounted() {\n const form = this.$el.closest('form');\n form.addEventListener('reset', () => {\n this.value = '';\n this.select(-1);\n });\n }\n\n});\n\n//# sourceURL=webpack://aircox-assets/./src/components/AAutocomplete.vue?./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use%5B0%5D!./node_modules/vue-loader/dist/index.js??ruleSet%5B0%5D.use%5B0%5D"); /***/ }), diff --git a/aircox_streamer/templates/aircox_streamer/source_item.html b/aircox_streamer/templates/aircox_streamer/source_item.html index 4899931..4a27cb0 100644 --- a/aircox_streamer/templates/aircox_streamer/source_item.html +++ b/aircox_streamer/templates/aircox_streamer/source_item.html @@ -47,11 +47,11 @@
-
{% trans "Add sound" %}
-
-
+
{% trans "Add sound" %}
+ +
{# TODO: select station => change the shit #} - @@ -59,20 +59,20 @@ [[ item.data.name ]] [[ item.data.file ]] - -

- {% trans "Add a sound to the queue (queue may start playing)" %} -

- {# TODO: help text about how it works #} -
-
- + +
+ +
+

+ {% trans "Add a sound to the queue (queue may start playing)" %} +

+ {# TODO: help text about how it works #}
diff --git a/assets/src/components/AAutocomplete.vue b/assets/src/components/AAutocomplete.vue index d61693a..92c73db 100644 --- a/assets/src/components/AAutocomplete.vue +++ b/assets/src/components/AAutocomplete.vue @@ -155,6 +155,11 @@ export default { data => {this.isFetching = false; Promise.reject(data)}) }, }, + + mounted() { + const form = this.$el.closest('form') + form.addEventListener('reset', () => { this.value=''; this.select(-1) }) + } }