diff --git a/examples/autonum/js/config.js b/examples/autonum/js/config.js index 9180015..9168ac4 100644 --- a/examples/autonum/js/config.js +++ b/examples/autonum/js/config.js @@ -5,7 +5,7 @@ * Licensed under the MIT License */ -((PLUGIN_ID, $) => { +((PLUGIN_ID) => { 'use strict'; const kintonePluginConfigAutonum = { lang: { @@ -225,32 +225,34 @@ const prop = respone.properties[key]; if (prop.type === 'SINGLE_LINE_TEXT') { - const option = $(''); - option.attr('value', self.escapeHtml(prop.code)) - .text(self.escapeHtml(prop.label)); + const option = document.createElement('option'); + option.value = self.escapeHtml(prop.code); + option.textContent = self.escapeHtml(prop.label); - $(self.settings.element.input.fieldCode).append(option); + document.querySelector(self.settings.element.input.fieldCode).appendChild(option); } } - $(self.settings.element.form).removeClass('loading'); + document.querySelector(self.settings.element.form).classList.remove('loading'); self.templateRender(); }); }, templateRender: function() { const self = this; - const configHtml = $(this.settings.element.form).html(); + const formEl = document.querySelector(this.settings.element.form); + const configHtml = formEl.innerHTML; const tmpl = $.templates(configHtml); - $(this.settings.element.form).html(tmpl.render({ + formEl.innerHTML = tmpl.render({ lang: this.settings.i18n - })).show(); + }); + formEl.style.display = ''; self.setDefault(); self.listenAction(); self.uiSetFormSubmitIsFixed(); let timeoutResize; - $(window).resize(() => { + window.addEventListener('resize', () => { clearTimeout(timeoutResize); timeoutResize = setTimeout(() => { self.uiSetFormSubmitIsFixed(); @@ -263,51 +265,56 @@ if (Object.keys(conf).length === 0) { return false; } - $(this.settings.element.input.fieldCode).val(conf.autoNumberingFieldcode); - $(this.settings.element.input.textFormatSelect).val(conf.format); - $(this.settings.element.input.dateFormatSelect).val(conf.dateFormat); - $(this.settings.element.input.connectiveSelect).val(conf.connective); - $(this.settings.element.input.prefix).val(conf.text); - $(this.settings.element.input.preview).text(conf.preview); - $(this.settings.element.input.timing).val([conf.timing]); - $(this.settings.element.input.apiToken).val(apiToken); - $(this.settings.element.input.numberOfDigit).val(conf.numOfDigit); + document.querySelector(this.settings.element.input.fieldCode).value = conf.autoNumberingFieldcode; + document.querySelector(this.settings.element.input.textFormatSelect).value = conf.format; + document.querySelector(this.settings.element.input.dateFormatSelect).value = conf.dateFormat; + document.querySelector(this.settings.element.input.connectiveSelect).value = conf.connective; + document.querySelector(this.settings.element.input.prefix).value = conf.text; + document.querySelector(this.settings.element.input.preview).textContent = conf.preview; + document.querySelectorAll(this.settings.element.input.timing).forEach((radio) => { + radio.checked = (radio.value === conf.timing); + }); + document.querySelector(this.settings.element.input.apiToken).value = apiToken; + document.querySelector(this.settings.element.input.numberOfDigit).value = conf.numOfDigit; this.checkAutonumFormat(); }, listenAction: function() { const self = this; - $(this.settings.element.input.fieldCode + ', ' + + document.querySelectorAll( + this.settings.element.input.fieldCode + ', ' + this.settings.element.input.prefix + ', ' + this.settings.element.input.numberOfDigit + ', ' + this.settings.element.input.textFormatSelect + ', ' + this.settings.element.input.dateFormatSelect + ', ' + - this.settings.element.input.connectiveSelect) - .change(() => { - const format = self.createPreview($(self.settings.element.input.textFormatSelect).val()); - $(self.settings.element.input.preview).html(self.escapeHtml(format || '')); + this.settings.element.input.connectiveSelect + ).forEach((el) => { + el.addEventListener('change', () => { + const format = self.createPreview(document.querySelector(self.settings.element.input.textFormatSelect).value); + document.querySelector(self.settings.element.input.preview).innerHTML = self.escapeHtml(format || ''); }); - $(this.settings.element.input.textFormatSelect).change(() => { + }); + document.querySelector(this.settings.element.input.textFormatSelect).addEventListener('change', () => { self.checkAutonumFormat(); }); - $(this.settings.element.input.dateFormatSelect).change(() => { + document.querySelector(this.settings.element.input.dateFormatSelect).addEventListener('change', () => { self.propRadioTiming(); }); - $('button.plugin_submit').click(() => { + document.querySelector('button.plugin_submit').addEventListener('click', () => { self.settingSave(); }); - $('button.plugin_cancel').click(() => { + document.querySelector('button.plugin_cancel').addEventListener('click', () => { history.back(); }); }, createPreview: function(selectFormat) { - const text = $(this.settings.element.input.prefix).val(); + const text = document.querySelector(this.settings.element.input.prefix).value; if (!this.validateFormValue()) { return; } - const numOfDigit = parseInt($(this.settings.element.input.numberOfDigit).val(), 10); + const numOfDigit = parseInt(document.querySelector(this.settings.element.input.numberOfDigit).value, 10); const number = new Array(numOfDigit).join('0') + '1'; - const dateVal = $(this.settings.element.input.dateFormatSelect).val() || 'null'; - const connective = $(this.settings.element.input.connectiveSelect).val() || ''; + const dateVal = document.querySelector(this.settings.element.input.dateFormatSelect).value || 'null'; + const connective = document.querySelector(this.settings.element.input.connectiveSelect).value || ''; const date = dateVal !== 'null' ? moment().format(dateVal) : ''; switch (selectFormat) { @@ -344,8 +351,8 @@ kintone.plugin.app.setConfig(config); }, settingSaveProxy: function(callback) { - const apiToken = $(this.settings.element.input.apiToken).val(); - const numberingFieldcode = $(this.settings.element.input.fieldCode).val(); + const apiToken = document.querySelector(this.settings.element.input.apiToken).value; + const numberingFieldcode = document.querySelector(this.settings.element.input.fieldCode).value; const params = { app: kintone.app.getId(), @@ -382,18 +389,20 @@ this.checkAutonumFormat(); this.propRadioTiming(); const config = {}; - const autoNumberingFieldcode = $(this.settings.element.input.fieldCode).val(); - const format = this.formatType($(this.settings.element.input.textFormatSelect).val()); - const preview = $(this.settings.element.input.preview).text(); - const prefix = $(this.settings.element.input.prefix).val(); - const dateformat = $(this.settings.element.input.dateFormatSelect).val(); + const autoNumberingFieldcode = document.querySelector(this.settings.element.input.fieldCode).value; + const format = this.formatType(document.querySelector(this.settings.element.input.textFormatSelect).value); + const preview = document.querySelector(this.settings.element.input.preview).textContent; + const prefix = document.querySelector(this.settings.element.input.prefix).value; + const dateformat = document.querySelector(this.settings.element.input.dateFormatSelect).value; - const timing = $(this.settings.element.input.timing + ':checked').val() || 'none'; + const timing = document.querySelector(this.settings.element.input.timing + ':checked')?.value || 'none'; - const connective = $(this.settings.element.input.connectiveSelect).val(); - let numOfDigit = $(this.settings.element.input.numberOfDigit).val(); + const connective = document.querySelector(this.settings.element.input.connectiveSelect).value; + let numOfDigit = document.querySelector(this.settings.element.input.numberOfDigit).value; let validateResult = true; - $('.kintoneplugin-alert').remove(); + document.querySelectorAll('.kintoneplugin-alert').forEach((el) => { + el.remove(); + }); if (autoNumberingFieldcode === 'null') { this.alert(this.settings.element.input.fieldCode, @@ -406,7 +415,7 @@ validateResult = false; } else { numOfDigit = parseInt(numOfDigit, 10); - $(this.settings.element.input.numberOfDigit).val(numOfDigit); + document.querySelector(this.settings.element.input.numberOfDigit).value = numOfDigit; } // 採番書籍選択未選択チェック if (format[0] === 'null') { @@ -448,7 +457,7 @@ // 設定文書の値を返す config.autoNumberingFieldcode = autoNumberingFieldcode; - config.format = $(this.settings.element.input.textFormatSelect).val(); + config.format = document.querySelector(this.settings.element.input.textFormatSelect).value; config.format1 = format[0]; // date config.format2 = format[1]; // number config.format3 = format[2]; // textの何れかが入る。 @@ -457,17 +466,19 @@ config.preview = preview; config.timing = timing; config.connective = connective; - config.useProxy = $(this.settings.element.input.apiToken).val() !== '' ? '1' : '0'; + config.useProxy = document.querySelector(this.settings.element.input.apiToken).value !== '' ? '1' : '0'; config.numOfDigit = numOfDigit.toString(); return config; }, alert: function(element, mess) { - const elementParrent = $(element).parent(); - elementParrent.parent().find('.kintoneplugin-alert').remove(); - if ($('.kintoneplugin-alert').length === 0) { - $(element).focus(); + const elementParrent = element.parentElement; + elementParrent.parentElement.querySelectorAll('.kintoneplugin-alert').forEach((el) => { + el.remove(); + }); + if (document.querySelectorAll('.kintoneplugin-alert').length === 0) { + element.focus(); } - elementParrent.after('
' + mess + '
' + mess + '