diff --git a/components.js b/components.js index 40dfd2e..95d0eca 100644 --- a/components.js +++ b/components.js @@ -2505,7 +2505,18 @@ customElements.define('sm-select', class extends HTMLElement { return this.getAttribute('value') } set value(val) { - this.setAttribute('value', val) + const selectedOption = this.availableOptions.find(option => option.getAttribute('value') === val) + if (selectedOption) { + this.setAttribute('value', val) + this.selectedOptionText.textContent = `${this.label}${selectedOption.textContent}`; + if (this.previousOption) { + this.previousOption.classList.remove('check-selected') + } + selectedOption.classList.add('check-selected') + this.previousOption = selectedOption + } else { + console.warn(`There is no option with ${val} as value`) + } } reset(fire = true) { @@ -2581,13 +2592,7 @@ customElements.define('sm-select', class extends HTMLElement { handleOptionSelection(e) { if (this.previousOption !== document.activeElement) { this.value = document.activeElement.getAttribute('value') - this.selectedOptionText.textContent = `${this.label}${document.activeElement.textContent}`; this.fireEvent() - if (this.previousOption) { - this.previousOption.classList.remove('check-selected') - } - document.activeElement.classList.add('check-selected') - this.previousOption = document.activeElement } } handleClick(e) { @@ -4290,222 +4295,3 @@ customElements.define('sm-textarea', } } }) - -const tagsInput = document.createElement('template') -tagsInput.innerHTML = ` - -
- -

-
-` - -customElements.define('tags-input', class extends HTMLElement { - constructor() { - super() - this.attachShadow({ - mode: 'open' - }).append(tagsInput.content.cloneNode(true)) - - this.input = this.shadowRoot.querySelector('input') - this.tagsWrapper = this.shadowRoot.querySelector('.tags-wrapper') - this.placeholder = this.shadowRoot.querySelector('.placeholder') - this.reflectedAttributes = ['placeholder', 'limit'] - this.limit = undefined - this.tags = new Set() - - this.reset = this.reset.bind(this) - this.handleInput = this.handleInput.bind(this) - this.handleKeydown = this.handleKeydown.bind(this) - this.handleClick = this.handleClick.bind(this) - this.removeTag = this.removeTag.bind(this) - } - static get observedAttributes() { - return ['placeholder', 'limit'] - } - get value() { - return [...this.tags] - } - get isValid() { - return this.tags.size - } - focusIn() { - this.input.focus() - } - reset() { - this.input.value = '' - this.tags.clear() - while (this.input.previousElementSibling) { - this.input.previousElementSibling.remove() - } - } - handleInput(e) { - const inputValueLength = e.target.value.trim().length - e.target.setAttribute('size', inputValueLength ? inputValueLength : '3') - if (inputValueLength) { - this.placeholder.classList.add('hide') - } - else if (!inputValueLength && !this.tags.size) { - this.placeholder.classList.remove('hide') - } - } - handleKeydown(e) { - if (e.key === ',' || e.key === '/') { - e.preventDefault() - } - if (e.target.value.trim() !== '') { - if (e.key === 'Enter' || e.key === ',' || e.key === '/') { - const tagValue = e.target.value.trim() - if (this.tags.has(tagValue)) { - this.tagsWrapper.querySelector(`[data-value="${tagValue}"]`).animate([ - { - backgroundColor: 'initial' - }, - { - backgroundColor: 'var(--accent-color)' - }, - { - backgroundColor: 'initial' - }, - ], { - duration: 300, - easing: 'ease' - }) - } - else { - const tag = document.createElement('span') - tag.dataset.value = tagValue - tag.className = 'tag' - tag.innerHTML = ` - ${tagValue} - - ` - this.input.before(tag) - this.tags.add(tagValue) - } - e.target.value = '' - e.target.setAttribute('size', '3') - if (this.limit && this.limit < this.tags.size + 1) { - this.input.readOnly = true - return - } - } - } - else { - if (e.key === 'Backspace' && this.input.previousElementSibling) { - this.removeTag(this.input.previousElementSibling) - } - if (this.limit && this.limit > this.tags.size) { - this.input.readOnly = false - } - } - } - handleClick(e) { - if (e.target.closest('.tag')) { - this.removeTag(e.target.closest('.tag')) - } - else { - this.input.focus() - } - } - removeTag(tag) { - this.tags.delete(tag.dataset.value) - tag.remove() - if (!this.tags.size) { - this.placeholder.classList.remove('hide') - } - } - connectedCallback() { - this.input.addEventListener('input', this.handleInput) - this.input.addEventListener('keydown', this.handleKeydown) - this.tagsWrapper.addEventListener('click', this.handleClick) - } - attributeChangedCallback(name, oldValue, newValue) { - if (name === 'placeholder') { - this.placeholder.textContent = newValue - } - if (name === 'limit') { - this.limit = parseInt(newValue) - } - } - disconnectedCallback() { - this.input.removeEventListener('input', this.handleInput) - this.input.removeEventListener('keydown', this.handleKeydown) - this.tagsWrapper.removeEventListener('click', this.handleClick) - } -}) \ No newline at end of file diff --git a/index.html b/index.html index 1fab4c3..19a48b9 100644 --- a/index.html +++ b/index.html @@ -537,38 +537,6 @@ Copy link - -
-
- -

Publish article

-
-
- -
-
Select category
- - Entertainment - Politics - Science - Sports - Tech - -
-
-
Add tags
- -
- Request publishing - -
@@ -1692,8 +1660,6 @@ function publishArticle() { if (floGlobals.isSubAdmin) { - const category = getRef('published_article_category').value - const tags = getRef('article_tags').value getConfirmation('Request publishing?', { message: 'Send this article as publishing candidate on RanchiMall TImes', confirmText: 'Request' @@ -1711,10 +1677,7 @@ title: floGlobals.appObjects.cc.articleList[floGlobals.currentArticle.id].title, content, readTime, - category, - tags, - contributors: [...allContributors] - + contributors: [...allContributors], }, 'publishing_requests', { application: 'Test_RM_Times', receiverID: 'FKAEdnPfjXLHSYwrXQu377ugN4tXU7VGdf' @@ -2600,7 +2563,7 @@ `: ''} - + ${floGlobals.isSubAdmin ? ` Publish