diff --git a/examples/vote/js/config.js b/examples/vote/js/config.js index c8634eb..9eab69f 100644 --- a/examples/vote/js/config.js +++ b/examples/vote/js/config.js @@ -4,11 +4,9 @@ * * Licensed under the MIT License */ -jQuery.noConflict(); - -(function(pluginId, $) { +(function(pluginId) { 'use strict'; - + console.log(document.readyState); const Msg = { en: { description1: 'This Plug-in uses the User selection field ' @@ -125,7 +123,9 @@ jQuery.noConflict(); item: '
' }, render: function() { - this.$el = $(this.template.container); + const wrap = document.createElement('div'); + wrap.innerHTML = this.template.container.trim(); + this.$el = wrap.firstElementChild; this.catchElement(); this.renderItemList(this.settings.itemList); this.setSelectedValue(); @@ -139,42 +139,47 @@ jQuery.noConflict(); setSelectedValue: function(data) { const arrItem = []; if (data) { - this.$listOption.find('.kintoneplugin-dropdown-list-item').each((index, item) => { - if (data === $(item).data('value')) { - arrItem.push($(item)); + this.$listOption.querySelectorAll('.kintoneplugin-dropdown-list-item').forEach((item) => { + if (data === item.dataset.value) { + arrItem.push(item); } }); this.data.value = data; - this.data.name = arrItem[0].text(); + this.data.name = arrItem[0].textContent; + } + const itemSelected = this.$el.querySelector('.kintoneplugin-dropdown-list-item-selected'); + if (itemSelected) { + itemSelected.classList.remove('kintoneplugin-dropdown-list-item-selected'); } - const itemSelected = this.$el.find('.kintoneplugin-dropdown-list-item-selected'); - itemSelected.removeClass('kintoneplugin-dropdown-list-item-selected'); if (!this.data.value) { - const $selected = $(this.$el.find('.kintoneplugin-dropdown-list-item')[0]); - $selected.addClass('kintoneplugin-dropdown-list-item-selected'); + const firstItem = this.$el.querySelector('.kintoneplugin-dropdown-list-item'); + if (firstItem) { + firstItem.classList.add('kintoneplugin-dropdown-list-item-selected'); + } } else { - arrItem[0].addClass('kintoneplugin-dropdown-list-item-selected'); + arrItem[0].classList.add('kintoneplugin-dropdown-list-item-selected'); } - this.$select.text(this.data.name); + this.$select.textContent = this.data.name; }, renderItemList: function() { - const self = this; - const $itemList = this.$el.find('.kintoneplugin-dropdown-list'); - let $item = $(this.template.item); - $item.text(this.data.name); - $itemList.append($item); + const $itemList = this.$el.querySelector('.kintoneplugin-dropdown-list'); + let $item = document.createElement('div'); + $item.className = 'kintoneplugin-dropdown-list-item'; + $item.textContent = this.data.name; + $itemList.appendChild($item); - $.each(this.settings.itemList, (index, item) => { - $item = $(self.template.item); - $item.text(item.name); - $item.data('value', item.value); - $itemList.append($item); - }); + for (const item of this.settings.itemList) { + $item = document.createElement('div'); + $item.className = 'kintoneplugin-dropdown-list-item'; + $item.textContent = item.name; + $item.dataset.value = item.value; + $itemList.appendChild($item); + } }, catchElement: function() { - this.$select = this.$el.find('.kintoneplugin-dropdown-selected-name'); - this.$listOption = this.$el.find('.kintoneplugin-dropdown-list'); + this.$select = this.$el.querySelector('.kintoneplugin-dropdown-selected-name'); + this.$listOption = this.$el.querySelector('.kintoneplugin-dropdown-list'); }, bindEvent: function() { this.handleDropdownOuterClick(); @@ -183,25 +188,39 @@ jQuery.noConflict(); }, handleDropdownOuterClick: function() { const self = this; - this.$el.find('.kintoneplugin-dropdown-outer').click(() => { - self.$listOption.toggle(); + this.$el.querySelector('.kintoneplugin-dropdown-outer').addEventListener('click', () => { + const list = self.$listOption; + if (list.style.display === 'none' || getComputedStyle(list).display === 'none') { + list.style.display = 'block'; + } else { + list.style.display = 'none'; + } }); }, handleDropdownListClick: function() { const self = this; - this.$listOption.on('click', '.kintoneplugin-dropdown-list-item', (e) => { - self.data.name = $(e.target).text(); - self.data.value = $(e.target).data('value'); + this.$listOption.addEventListener('click', (e) => { + const row = e.target.closest('.kintoneplugin-dropdown-list-item'); + if (!row || !self.$listOption.contains(row)) { + return; + } + self.data.name = row.textContent; + self.data.value = row.dataset.value; self.setSelectedValue(self.data.value); - self.$listOption.toggle(); + const list = self.$listOption; + if (list.style.display === 'none' || getComputedStyle(list).display === 'none') { + list.style.display = 'block'; + } else { + list.style.display = 'none'; + } }); }, handleOutsideDropdownListClick: function() { const self = this; - $('body').on('click', (event) => { - const isClickOnDropdown = $(event.target).closest(self.$el).length > 0; + document.body.addEventListener('click', (event) => { + const isClickOnDropdown = self.$el.contains(event.target); if (!isClickOnDropdown) { - self.$listOption.hide(); + self.$listOption.style.display = 'none'; } }); } @@ -221,50 +240,66 @@ jQuery.noConflict(); } function createVoteDescription(text) { - return $('

' + text + '

'); + const p = document.createElement('p'); + p.appendChild(document.createTextNode(' ' + text)); + return p; } function createVoteLabel(text) { - return $('
' + text + '
'); + const div = document.createElement('div'); + div.className = 'kintoneplugin-label'; + div.textContent = text; + return div; } function createVoteField(language) { - const $container = $('
'); - $container.append(createVoteLabel(Msg[language].labelOfVoteField)); - $container.append(createVoteDescription(Msg[language].descriptionOfVoteField1)); - $container.append(createVoteDescription(Msg[language].descriptionOfVoteField2)); - $container.append('
'); - $container.append($('
')); + const $container = document.createElement('div'); + $container.className = 'kintoneplugin-row'; + $container.appendChild(createVoteLabel(Msg[language].labelOfVoteField)); + $container.appendChild(createVoteDescription(Msg[language].descriptionOfVoteField1)); + $container.appendChild(createVoteDescription(Msg[language].descriptionOfVoteField2)); + $container.appendChild(document.createElement('br')); + const slot = document.createElement('div'); + slot.className = 'vote-dropdown'; + $container.appendChild(slot); return $container; } function createCountfield(language) { - const $container = $('
'); - $container.append(createVoteLabel(Msg[language].labelOfCountfield)); - $container.append(createVoteDescription(Msg[language].descriptionOfCountField1)); - $container.append(createVoteDescription(Msg[language].descriptionOfCountField2)); - $container.append('
'); - $container.append($('
')); + const $container = document.createElement('div'); + $container.className = 'kintoneplugin-row'; + $container.appendChild(createVoteLabel(Msg[language].labelOfCountfield)); + $container.appendChild(createVoteDescription(Msg[language].descriptionOfCountField1)); + $container.appendChild(createVoteDescription(Msg[language].descriptionOfCountField2)); + $container.appendChild(document.createElement('br')); + const slot = document.createElement('div'); + slot.className = 'count-dropdown'; + $container.appendChild(slot); return $container; } function createForm(name, language) { - const $form = $('
'); - $form.append(createVoteField(language)); - $form.append(createCountfield(language)); + const $form = document.createElement('form'); + $form.setAttribute('name', name); + $form.appendChild(createVoteField(language)); + $form.appendChild(createCountfield(language)); return $form; } function createVoteSaveBtn(language) { - return $(''); + const btn = document.createElement('button'); + btn.className = 'kintoneplugin-button-dialog-ok'; + btn.type = 'button'; + btn.id = 'setting_submit'; + btn.appendChild(document.createTextNode(Msg[language].btnSave)); + return btn; } function renderConfigUI(language) { - const $Container = $('#vote-plugin-container'); - $Container.append(createVoteDescription(Msg[language].description1)); - $Container.append(createVoteDescription(Msg[language].description2)); - $Container.append(createVoteDescription(Msg[language].description3)); - $Container.append('
'); - $Container.append(createForm('setting', language)); - $Container.append(createVoteSaveBtn(language)); + const $Container = document.getElementById('vote-plugin-container'); + $Container.appendChild(createVoteDescription(Msg[language].description1)); + $Container.appendChild(createVoteDescription(Msg[language].description2)); + $Container.appendChild(createVoteDescription(Msg[language].description3)); + $Container.appendChild(document.createElement('br')); + $Container.appendChild(createForm('setting', language)); + $Container.appendChild(createVoteSaveBtn(language)); } - $(document).ready(() => { + // document.addEventListener('DOMContentLoaded', () => { const loginInfo = kintone.getLoginUser(); const lang = getLanguage(loginInfo.language); renderConfigUI(lang); @@ -278,7 +313,7 @@ jQuery.noConflict(); }, (resp) => { const settingVoteField = {itemList: []}; const settingCountField = {itemList: []}; - $.each(resp.properties, (index, property) => { + for (const property of Object.values(resp.properties)) { const data = { name: property.label, value: property.code @@ -288,13 +323,13 @@ jQuery.noConflict(); } else if (property.type === 'USER_SELECT') { settingVoteField.itemList.push(data); } - }); + } voteDropdown = new Dropdown(settingVoteField); - $('.vote-dropdown').append(voteDropdown.render()); + document.querySelector('.vote-dropdown').appendChild(voteDropdown.render()); countDropdown = new Dropdown(settingCountField); - $('.count-dropdown').append(countDropdown.render()); + document.querySelector('.count-dropdown').appendChild(countDropdown.render()); const config = kintone.plugin.app.getConfig(pluginId); if (config.vote_field && config.vote_count_field) { @@ -302,10 +337,13 @@ jQuery.noConflict(); countDropdown.setSelectedValue(config.vote_count_field); } + Loading.hide(); + }, (error) => { + console.error(error); Loading.hide(); }); - $('#setting_submit').click(() => { + document.getElementById('setting_submit').addEventListener('click', () => { const config = {}; const voteValue = voteDropdown.getSelectedData().value; config.vote_field = !voteValue ? '' : voteValue; @@ -315,5 +353,5 @@ jQuery.noConflict(); kintone.plugin.app.setConfig(config); }); - }); -})(kintone.$PLUGIN_ID, jQuery); + // }); +})(kintone.$PLUGIN_ID); diff --git a/examples/vote/js/mobile-vote.js b/examples/vote/js/mobile-vote.js index 1d53bcf..82dc9be 100644 --- a/examples/vote/js/mobile-vote.js +++ b/examples/vote/js/mobile-vote.js @@ -4,9 +4,8 @@ * * Licensed under the MIT License */ -jQuery.noConflict(); -(function(pluginId, $) { +(function(pluginId) { 'use strict'; const APPID = kintone.mobile.app.getId(); @@ -52,26 +51,50 @@ jQuery.noConflict(); + ' ' + '', createPopup: function() { - this.control.popup = $(this.template); - $('body').append(this.control.popup[0]); + const popup = document.createElement('div'); + popup.className = 'customization-notify error'; + + const notifyTitle = document.createElement('div'); + notifyTitle.className = 'notify-title'; + + const closeButton = document.createElement('div'); + closeButton.className = 'close-button'; + + const closeButtonIcon = document.createElement('div'); + closeButtonIcon.className = 'close-button-icon'; + + const icon1 = document.createElement('div'); + icon1.className = 'icon-1'; + + const icon2 = document.createElement('div'); + icon2.className = 'icon-2'; + + icon1.appendChild(icon2); + closeButtonIcon.appendChild(icon1); + closeButton.appendChild(closeButtonIcon); + popup.appendChild(notifyTitle); + popup.appendChild(closeButton); + + this.control.popup = popup; + document.body.appendChild(this.control.popup); this.bindEvent(); return this.control.popup; }, showPopup: function(message) { - this.control.popup.find('.notify-title').text(message); + this.control.popup.querySelector('.notify-title').textContent = message; - const popupWidth = this.control.popup.width(); - this.control.popup.css({left: '-' + popupWidth / 2 + 'px'}); + const popupWidth = this.control.popup.offsetWidth; + this.control.popup.style.left = '-' + popupWidth / 2 + 'px'; - this.control.popup.addClass('notify-slidedown'); + this.control.popup.classList.add('notify-slidedown'); }, hidePopup: function() { - this.control.popup.removeClass('notify-slidedown'); + this.control.popup.classList.remove('notify-slidedown'); }, bindEvent: function() { - this.control.popup.click(() => { + this.control.popup.addEventListener('click', () => { this.hidePopup(); }); } @@ -126,7 +149,7 @@ jQuery.noConflict(); return voteUsers.length; }, isLoginUserVoted: function() { - return $.grep(voteUsers, (user) => { + return voteUsers.filter((user) => { return user.code === kintone.getLoginUser().code; }).length !== 0; }, @@ -134,7 +157,7 @@ jQuery.noConflict(); const that = this; const promise = this.fetch().then(() => { if (that.isLoginUserVoted()) { - voteUsers = $.grep(voteUsers, (user) => { + voteUsers = voteUsers.filter((user) => { return user.code !== kintone.getLoginUser().code; }); } else { @@ -148,65 +171,69 @@ jQuery.noConflict(); return promise; }, fetch: function() { - const d = new $.Deferred(); - kintone.api(kintone.api.url('/k/v1/record', true), 'GET', { - 'app': APPID, - 'id': recordId - }, (evt) => { - voteUsers = evt.record[VOTE_FIELD].value; - revision = evt.record.$revision.value; - d.resolve(); + return new Promise((resolve) => { + kintone.api(kintone.api.url('/k/v1/record', true), 'GET', { + 'app': APPID, + 'id': recordId + }, (evt) => { + voteUsers = evt.record[VOTE_FIELD].value; + revision = evt.record.$revision.value; + resolve(); + }); }); - return d.promise(); }, update: function() { - const d = new $.Deferred(); - const newRecord = {}; - newRecord[VOTE_FIELD] = {'value': voteUsers}; - newRecord[VOTE_COUNT_FIELD] = {'value': voteUsers.length}; - kintone.api(kintone.api.url('/k/v1/record', true), 'PUT', { - 'app': APPID, - 'id': recordId, - 'record': newRecord, - 'revision': revision - }, d.resolve, (e) => { - NotifyPopup.showPopup(createErrorMessage(e)); + return new Promise((resolve) => { + const newRecord = {}; + newRecord[VOTE_FIELD] = {'value': voteUsers}; + newRecord[VOTE_COUNT_FIELD] = {'value': voteUsers.length}; + kintone.api(kintone.api.url('/k/v1/record', true), 'PUT', { + 'app': APPID, + 'id': recordId, + 'record': newRecord, + 'revision': revision + }, resolve, (e) => { + NotifyPopup.showPopup(createErrorMessage(e)); + }); }); - return d.promise(); } }; } function fetchVoteModel(language) { - const d = new $.Deferred(); - const id = kintone.mobile.app.record.getId(); - kintone.api(kintone.api.url('/k/v1/record', true), 'GET', { - 'app': APPID, - 'id': id - }, (evt) => { - const record = { - '$id': {'value': id}, - '$revision': evt.record.$revision - }; - record[VOTE_FIELD] = evt.record[VOTE_FIELD]; - d.resolve(new VoteModel(record, language)); + return new Promise((resolve) => { + const id = kintone.mobile.app.record.getId(); + kintone.api(kintone.api.url('/k/v1/record', true), 'GET', { + 'app': APPID, + 'id': id + }, (evt) => { + const record = { + '$id': {'value': id}, + '$revision': evt.record.$revision + }; + record[VOTE_FIELD] = evt.record[VOTE_FIELD]; + resolve(new VoteModel(record, language)); + }); }); - return d.promise(); } function VoteView(model) { - const $element = $(''); + const $element = document.createElement('span'); + $element.className = 'vote-plugin-show'; let clickable = true; function updateImg(voted) { - $element.find('.vote-plugin-img').toggleClass('vote-plugin-voted', voted); + $element.querySelector('.vote-plugin-img').classList.toggle('vote-plugin-voted', voted); } function updateCounterEl(usercount) { - $element.find('.vote-plugin-count').remove(); + $element.querySelector('.vote-plugin-count')?.remove(); if (usercount !== 0) { - $element.append($('').addClass('vote-plugin-count').text(usercount)); + const span = document.createElement('span'); + span.classList.add('vote-plugin-count'); + span.textContent = usercount; + $element.appendChild(span); } } @@ -224,19 +251,20 @@ jQuery.noConflict(); function renderImgAndCounter() { // createImg - const $imgEl = $(''); - $element.append($imgEl); + const $imgEl = document.createElement('span'); + $imgEl.className = 'vote-plugin-img'; + $element.appendChild($imgEl); updateImg(model.isLoginUserVoted()); // createCounter updateCounterEl(model.countVoteUsers()); - $element.click(handleClick); + $element.addEventListener('click', handleClick); } return { append: function($parentEl) { - $parentEl.append($element); + $parentEl.appendChild($element); renderImgAndCounter(); }, @@ -269,9 +297,9 @@ jQuery.noConflict(); NotifyPopup.createPopup(); fetchVoteModel(lang).then((voteModel) => { - const $labelEl = $(kintone.mobile.app.getHeaderSpaceElement()); + const $labelEl = kintone.mobile.app.getHeaderSpaceElement(); new VoteView(voteModel).prepend($labelEl); }); }); -})(kintone.$PLUGIN_ID, jQuery); +})(kintone.$PLUGIN_ID); diff --git a/examples/vote/js/vote.js b/examples/vote/js/vote.js index cc85fb4..cd5172a 100644 --- a/examples/vote/js/vote.js +++ b/examples/vote/js/vote.js @@ -4,9 +4,7 @@ * * Licensed under the MIT License */ -jQuery.noConflict(); - -(function(pluginId, $) { +(function(pluginId) { 'use strict'; const APPID = kintone.app.getId(); @@ -51,27 +49,30 @@ jQuery.noConflict(); + ' ' + '', createPopup: function(e) { - this.control.popup = $(this.template); - $('body').append(this.control.popup[0]); + const tpl = document.createElement('template'); + tpl.innerHTML = this.template; + this.control.popup = tpl.content.firstElementChild; + document.body.appendChild(this.control.popup); this.bindEvent(); return this.control.popup; }, showPopup: function(message) { - this.control.popup.find('.notify-title').text(message); + this.control.popup.querySelector('.notify-title').textContent = message; - const popupWidth = this.control.popup.width(); - this.control.popup.css({left: '-' + popupWidth / 2 + 'px'}); + const popupWidth = this.control.popup.offsetWidth; + this.control.popup.style.left = '-' + popupWidth / 2 + 'px'; - this.control.popup.addClass('notify-slidedown'); + this.control.popup.classList.add('notify-slidedown'); }, hidePopup: function() { - this.control.popup.removeClass('notify-slidedown'); + this.control.popup.classList.remove('notify-slidedown'); }, bindEvent: function() { - this.control.popup.click(() => { - this.hidePopup(); + const self = this; + this.control.popup.addEventListener('click', function() { + self.hidePopup(); }); } }; @@ -91,13 +92,12 @@ jQuery.noConflict(); function getRecordNumberFieldCode(fields) { let code = ''; - $.each(fields, (fieldCode, value) => { + for (const [fieldCode, value] of Object.values(fields)) { if (value.type === 'RECORD_NUMBER') { code = fieldCode; - return false; + break; } - return true; - }); + } return code; } @@ -137,7 +137,7 @@ jQuery.noConflict(); return voteUsers.length; }, isLoginUserVoted: function() { - return $.grep(voteUsers, (user) => { + return voteUsers.filter((user) => { return user.code === kintone.getLoginUser().code; }).length !== 0; }, @@ -145,7 +145,7 @@ jQuery.noConflict(); const that = this; const promise = this.fetch().then(() => { if (that.isLoginUserVoted()) { - voteUsers = $.grep(voteUsers, (user) => { + voteUsers = voteUsers.filter((user) => { return user.code !== kintone.getLoginUser().code; }); } else { @@ -159,90 +159,94 @@ jQuery.noConflict(); return promise; }, fetch: function() { - const d = new $.Deferred(); - kintone.api(kintone.api.url('/k/v1/record', true), 'GET', { - 'app': APPID, - 'id': recordId - }, (evt) => { - voteUsers = evt.record[VOTE_FIELD].value; - revision = evt.record.$revision.value; - d.resolve(); + return new Promise((resolve) => { + kintone.api(kintone.api.url('/k/v1/record', true), 'GET', { + 'app': APPID, + 'id': recordId + }, (evt) => { + voteUsers = evt.record[VOTE_FIELD].value; + revision = evt.record.$revision.value; + resolve(); + }); }); - return d.promise(); }, update: function() { - const d = new $.Deferred(); - const newRecord = {}; - newRecord[VOTE_FIELD] = {'value': voteUsers}; - newRecord[VOTE_COUNT_FIELD] = {'value': voteUsers.length}; - kintone.api(kintone.api.url('/k/v1/record', true), 'PUT', { - 'app': APPID, - 'id': recordId, - 'record': newRecord, - 'revision': revision - }, d.resolve, (e) => { - NotifyPopup.showPopup(createErrorMessage(e)); + return new Promise((resolve) => { + const newRecord = {}; + newRecord[VOTE_FIELD] = {'value': voteUsers}; + newRecord[VOTE_COUNT_FIELD] = {'value': voteUsers.length}; + kintone.api(kintone.api.url('/k/v1/record', true), 'PUT', { + 'app': APPID, + 'id': recordId, + 'record': newRecord, + 'revision': revision + }, resolve, (e) => { + NotifyPopup.showPopup(createErrorMessage(e)); + }); }); - return d.promise(); } }; } function fetchVoteModel(language) { - const d = new $.Deferred(); const id = kintone.app.record.getId(); - kintone.api(kintone.api.url('/k/v1/record', true), 'GET', { - 'app': APPID, - 'id': id - }, (evt) => { - const record = { - '$id': {'value': id}, - '$revision': evt.record.$revision - }; - record[VOTE_FIELD] = evt.record[VOTE_FIELD]; - d.resolve(new VoteModel(record, language)); + return new Promise((resolve) => { + kintone.api(kintone.api.url('/k/v1/record', true), 'GET', { + 'app': APPID, + 'id': id + }, (evt) => { + const record = { + '$id': {'value': id}, + '$revision': evt.record.$revision + }; + record[VOTE_FIELD] = evt.record[VOTE_FIELD]; + resolve(new VoteModel(record, language)); + }); }); - return d.promise(); } function fetchVoteModels(language) { - const d = new $.Deferred(); - const query = kintone.app.getQuery(); - kintone.api(kintone.api.url('/k/v1/records', true), 'GET', { - 'app': APPID, - 'query': query, - 'fields': ['$id', VOTE_FIELD, '$revision'] - }, (evt) => { - const models = []; - $.each(evt.records, (i, record) => { - const model = new VoteModel(record, language); - models.push(model); + return new Promise((resolve) => { + kintone.api(kintone.api.url('/k/v1/records', true), 'GET', { + 'app': APPID, + 'query': query, + 'fields': ['$id', VOTE_FIELD, '$revision'] + }, (evt) => { + const models = []; + for (let i = 0; i < evt.records.length; i++) { + const model = new VoteModel(evt.records[i], language); + models.push(model); + } + resolve(models); }); - d.resolve(models); }); - return d.promise(); } function VoteView(model) { - const $element = $('