Fixed ability to drag note favorites onto NoteTabs panel

benji300 · Feb 23, 2021 · 08db5bb · 08db5bb
1 parent ac51d5b
commit 08db5bb
Show file tree

Hide file tree

Showing 5 changed files with 58 additions and 24 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Fixed
 
 - Issue that caused infinite message loop between plugin and app ([#7](https://github.com/benji300/joplin-note-tabs/issues/7))
+- Ability to drag note favorites onto [note-tabs plugin](https://github.com/benji300/joplin-note-tabs) panel
 
 ## [1.2.0] - 2021-02-17
 

diff --git a/src/favorites.ts b/src/favorites.ts
@@ -27,10 +27,10 @@ export interface IFavorite {
  * Definition of the favorite descriptions.
  */
 interface IFavoriteDesc {
-  name: string,
-  icon: string,
-  dataType: string,
-  label: string
+  readonly name: string,
+  readonly icon: string,
+  readonly dataType: string,
+  readonly label: string
 }
 
 /**
@@ -121,6 +121,25 @@ export class Favorites {
       .trim();
   }
 
+  static isNote(favorite: IFavorite): boolean {
+    if (favorite) {
+      return (favorite.type === FavoriteType.Note);
+    }
+    return false;
+  }
+
+  static isTodo(favorite: IFavorite): boolean {
+    if (favorite) {
+      return (favorite.type === FavoriteType.Todo);
+    }
+    return false;
+  }
+
+  static getDesc(favorite: IFavorite): IFavoriteDesc {
+    if (favorite === undefined) return;
+    return FavoriteDesc[favorite.type];
+  }
+
   /**
    * Gets the favorites with the handled value. Null if not exist.
    */

diff --git a/src/index.ts b/src/index.ts
@@ -1,7 +1,7 @@
 import joplin from 'api';
 import { MenuItem, MenuItemLocation } from 'api/types';
 import { ChangeEvent } from 'api/JoplinSettings';
-import { FavoriteType, IFavorite, FavoriteDesc, Favorites } from './favorites';
+import { FavoriteType, IFavorite, Favorites } from './favorites';
 import { Settings } from './settings';
 import { Panel } from './panel';
 import { Dialog } from './dialog';
@@ -37,9 +37,9 @@ joplin.plugins.register({
      */
     async function checkAndRemoveFavorite(favorite: IFavorite, index: number): Promise<boolean> {
       try {
-        await DATA.get([FavoriteDesc[favorite.type].dataType, favorite.value], { fields: ['id'] });
+        await DATA.get([Favorites.getDesc(favorite).dataType, favorite.value], { fields: ['id'] });
       } catch (err) {
-        const result: number = await Dialog.showMessage(`Cannot open favorite. Seems that the target ${FavoriteDesc[favorite.type].name.toLocaleLowerCase()} was deleted.\n\nDo you want to delete the favorite also?`);
+        const result: number = await Dialog.showMessage(`Cannot open favorite. Seems that the target ${Favorites.getDesc(favorite).name.toLocaleLowerCase()} was deleted.\n\nDo you want to delete the favorite also?`);
         if (!result) {
           await favorites.delete(index);
           await panel.updateWebview();
@@ -54,9 +54,9 @@ joplin.plugins.register({
      */
     async function checkAndUpdateType(favorite: IFavorite, index: number) {
       let newType: FavoriteType;
-      const note: any = await DATA.get([FavoriteDesc[favorite.type].dataType, favorite.value], { fields: ['id', 'is_todo'] });
-      if (favorite.type === FavoriteType.Note && note.is_todo) newType = FavoriteType.Todo;
-      if (favorite.type === FavoriteType.Todo && (!note.is_todo)) newType = FavoriteType.Note;
+      const note: any = await DATA.get([Favorites.getDesc(favorite).dataType, favorite.value], { fields: ['id', 'is_todo'] });
+      if (Favorites.isNote(favorite) && note.is_todo) newType = FavoriteType.Todo;
+      if (Favorites.isTodo(favorite) && (!note.is_todo)) newType = FavoriteType.Note;
       if (newType) {
         await favorites.changeType(index, newType);
         await panel.updateWebview();

diff --git a/src/panel.ts b/src/panel.ts
@@ -1,5 +1,5 @@
 import joplin from 'api';
-import { FavoriteDesc, Favorites, FavoriteType } from './favorites';
+import { Favorites } from './favorites';
 import { Settings } from './settings';
 
 export class Panel {
@@ -87,11 +87,16 @@ export class Panel {
 
       let typeIconHtml: string = '';
       if (this._settings.showTypeIcons) {
-        typeIconHtml = `<span class="fas ${FavoriteDesc[favorite.type].icon}" title="${FavoriteDesc[favorite.type].name}" style="color:${fg};"></span>`;
+        typeIconHtml = `<span class="fas ${Favorites.getDesc(favorite).icon}" title="${Favorites.getDesc(favorite).name}" style="color:${fg};"></span>`;
+      }
+
+      let dataId: string = '';
+      if (Favorites.isNote(favorite) || Favorites.isTodo(favorite)) {
+        dataId = `data-id="${favorite.value}"`;
       }
 
       favsHtml.push(`
-        <div id="favorite" data-id="${index++}" data-bg="${bg}" draggable="${this._settings.enableDragAndDrop}"
+        <div id="favorite" data-idx="${index++}" ${dataId} data-bg="${bg}" draggable="${this._settings.enableDragAndDrop}"
           onclick="clickFav(event)" oncontextmenu="openDialog(event)" onmouseover="setBackground(event,'${hoverBg}')" onmouseout="resetBackground(this)"
           ondragstart="dragStart(event)" ondragover="dragOver(event, '${hoverBg}')" ondragleave="dragLeave(event)" ondrop="drop(event)" ondragend="dragEnd(event)"
           style="height:${this._settings.lineHeight}px;min-width:${this._settings.minFavWidth}px;max-width:${this._settings.maxFavWidth}px;background:${bg};border-color:${dividerColor};">

diff --git a/src/webview.js b/src/webview.js
@@ -10,30 +10,34 @@ function cancelDefault(event) {
 function getDataId(currentTarget) {
   if (currentTarget && currentTarget.id === 'favorite') {
     return currentTarget.dataset.id;
-  } else {
-    return;
+  }
+}
+
+function getDataIdx(currentTarget) {
+  if (currentTarget && currentTarget.id === 'favorite') {
+    return currentTarget.dataset.idx;
   }
 }
 
 /* EVENT HANDLER */
 
 function openFav(currentTarget) {
-  const dataIdx = getDataId(currentTarget);
+  const dataIdx = getDataIdx(currentTarget);
   if (dataIdx) {
     webviewApi.postMessage({ name: 'favsOpen', index: dataIdx });
   }
 }
 
 function deleteFav(currentTarget) {
-  const dataIdx = getDataId(currentTarget);
+  const dataIdx = getDataIdx(currentTarget);
   if (dataIdx) {
     webviewApi.postMessage({ name: 'favsDelete', index: dataIdx });
   }
 }
 
 function openDialog(event) {
   if (!editStarted) {
-    const dataIdx = getDataId(event.currentTarget);
+    const dataIdx = getDataIdx(event.currentTarget);
     if (dataIdx) {
       webviewApi.postMessage({ name: 'favsEdit', index: dataIdx });
     }
@@ -74,7 +78,7 @@ document.addEventListener('change', event => {
   const element = event.target;
   if (editStarted && element.className === 'title') {
     enableEdit(element, false);
-    const dataIdx = element.parentElement.parentElement.dataset.id;
+    const dataIdx = element.parentElement.parentElement.dataset.idx;
     if (dataIdx && element.value !== '') {
       webviewApi.postMessage({ name: 'favsRename', index: dataIdx, newTitle: element.value });
     } else {
@@ -123,11 +127,16 @@ function resetTabBackgrounds() {
 }
 
 function dragStart(event) {
-  const dataIdx = getDataId(event.currentTarget);
+  const dataIdx = getDataIdx(event.currentTarget);
   if (dataIdx) {
-    event.dataTransfer.setData('text/x-plugin-favorites-id', dataIdx);
+    event.dataTransfer.setData('text/x-plugin-favorites-idx', dataIdx);
     sourceIdx = dataIdx;
   }
+  // prepare note ID for drag&drop to other panels
+  const dataId = getDataId(event.currentTarget);
+  if (dataId) {
+    event.dataTransfer.setData('text/x-plugin-favorites-id', dataId);
+  }
 }
 
 function dragEnd(event) {
@@ -139,7 +148,7 @@ function dragEnd(event) {
 function dragOver(event, hoverColor) {
   resetTabBackgrounds();
   cancelDefault(event);
-  if (sourceIdx !== getDataId(event.currentTarget)) {
+  if (sourceIdx !== getDataIdx(event.currentTarget)) {
     setBackground(event, hoverColor);
   }
 }
@@ -151,10 +160,10 @@ function dragLeave(event) {
 function drop(event) {
   resetTabBackgrounds();
   cancelDefault(event);
-  const dataTargetIdx = getDataId(event.currentTarget);
+  const dataTargetIdx = getDataIdx(event.currentTarget);
 
   // check whether plugin tab was dragged - trigger favsDrag message
-  const dataSourceIdx = event.dataTransfer.getData('text/x-plugin-favorites-id');
+  const dataSourceIdx = event.dataTransfer.getData('text/x-plugin-favorites-idx');
   if (dataSourceIdx) {
     if (dataTargetIdx !== sourceIdx) {
       webviewApi.postMessage({ name: 'favsDrag', index: dataSourceIdx, targetIdx: dataTargetIdx, });