input-modal: delete function

src/common/molecules/input-modal.js

@@ -8,17 +8,28 @@ const CLOSE = 'mb/input-modal/CLOSE'
 class InputModal {
   @wired('.input-modal__input') input
   @wired('.input-modal__message') message
+  @wired('.input-modal__save') saveButton
+  @wired('.input-modal__delete') deleteButton
 
-  @on(OPEN)
+  @on(Action.INPUT_MODAL_OPEN)
   @nextTick
-  open ({ detail: { value, message, onSave } }) {
-    this.input.value = value
+  open ({ detail: { value, message, onSave, onDelete, needsInput = true } }) {
+    if (needsInput) {
+      this.input.classList.remove('hidden')
+    } else {
+      this.input.classList.add('hidden')
+    }
+    this.input.value = typeof value === 'string' ? value : ''
     if (message) {
       this.message.textContent = message
     } else {
       this.message.textContent = ''
     }
     this.onSaveHandler = onSave
+    this.saveButton.classList.toggle('hidden', typeof onSave !== 'function')
+    this.onDeleteHandler = onDelete
+    this.deleteButton.classList.toggle('hidden', typeof onDelete !== 'function')
+
     this.el.parentElement.classList.add('is-visible')
   }
 
@@ -27,9 +38,14 @@ class InputModal {
     this.onSaveHandler(this.input.value)
   }
 
+  @on.click.at('.input-modal__delete')
+  onDelete () {
+    this.onDeleteHandler(this.input.value)
+  }
+
   @on.outside('click')
   @on.click.at('.input-modal__cancel')
-  @on(CLOSE)
+  @on(Action.INPUT_MODAL_CLOSE)
   close () {
     this.el.parentElement.classList.remove('is-visible')
   }

src/common/molecules/input-modal.njk

@@ -10,6 +10,7 @@
         </div>
         <div class="input-modal__button-wrapper">
           <button class="input-modal__save button is-primary u-ml8 t-text">ui.form.save</button>
+          <button class="input-modal__delete button is-danger u-ml8 t-text">ui.form.delete</button>
           <button class="input-modal__cancel button t-text">ui.form.cancel</button>
         </div>
       </div>

src/common/molecules/input-modal.scss

@@ -8,6 +8,12 @@
   border-radius: 8px;
   box-shadow: 0 0 5px black;
 
+  &__input.hidden,
+  &__save.hidden,
+  &__delete.hidden {
+    display: none;
+  }
+
   &__button-wrapper {
     display: flex;
     flex-direction: row-reverse;
@@ -36,4 +42,3 @@
     opacity: 1;
   }
 }
-

src/const/action-types.js

@@ -38,3 +38,7 @@ exports.MODEL_UPDATE = 'mb/model/UPDATE'
 // ui
 exports.UI_SHOW = 'mb/ui/SHOW'
 exports.UI_HIDE = 'mb/ui/HIDE'
+
+// input-modal
+exports.INPUT_MODAL_OPEN = 'mb/input-modal/OPEN'
+exports.INPUT_MODAL_CLOSE = 'mb/input-modal/CLOSE'

src/pages/chart-settings/chart-settings-page.js

@@ -25,8 +25,7 @@ class ChartSettingsPage {
   }
 
   @on(OPEN_DELETE_MODAL)
-  @notifies(OPEN_DELETE_MODAL, '.is-open-modal-observer')
-  @notifies(Action.UI_SHOW, '.overlay-shadow')
+  @notifies(Action.INPUT_MODAL_OPEN, '.input-modal')
   onOpenDeleteModal ({ detail }) {
     return detail
   }

src/pages/chart-settings/edit-chart-tooltip.js

@@ -19,11 +19,18 @@ class EditChartTooltip {
 
   @on.click.at('.is-danger')
   @emits(OPEN_DELETE_MODAL)
-  onClickDelete () {}
+  onClickDelete () {
+    return {
+      message: `Are you sure deleting "${this.typeName}"?`,
+      needsInput: false,
+      onDelete: () => alert('delete')
+    }
+  }
 
   @on(OPEN_TOOLTIP)
   onOpenTooltip ({ detail: { id, typeName, disabled } }) {
     this.el.dataset.popperRef = `[id="${id}"]`
+    this.typeName = typeName
     this.el.dispatchEvent(new CustomEvent(capsidPopper.UPDATE))
     if (disabled) {
       this.editButton.disabled = true

src/pages/chart-settings/index.njk

@@ -67,4 +67,5 @@ js: pages/chart-settings/index.js
       </p>
     </div>
   </div>
+  {% include src + '/common/molecules/input-modal.njk' %}
 </main>

src/pages/document-settings/title-area.js

@@ -22,7 +22,8 @@ class TitleArea {
     return {
       message: t10.t('app.document.input_title'),
       value: this.title.textContent,
-      onSave: value => this.onInput(value)
+      onSave: value => this.onInput(value),
+      needsInput: true
     }
   }