mail_folder_list.js: accept hover and drop events
authorArt Cancro <ajc@citadel.org>
Mon, 3 Jul 2023 17:07:39 +0000 (08:07 -0900)
committerArt Cancro <ajc@citadel.org>
Mon, 3 Jul 2023 17:07:39 +0000 (08:07 -0900)
webcit-ng/README.md
webcit-ng/static/css/webcit.css
webcit-ng/static/index.html
webcit-ng/static/js/mail_folder_list.js
webcit-ng/static/js/view_mail.js

index e5714bd8141bf257cac7672a015d4e61e4bd3119..a7890dcf96360184dfdd74e08f77856e6f4a0a05 100644 (file)
@@ -26,6 +26,7 @@ REST format URLs will generally take the form of:
 * libcitadel for information about the Citadel server, some string handling, and the JSON encoder
 * Expat for DAV handling
 * OpenSSL for TLS
+* FontAwesome for icons
 
 ## We are NOT using
 * Your favorite javascript library
index 8bda814ff0d212f133f4b37fb14eab69859dfd20..9031087f54dad55965f2615fd52976b106c9ffe1 100644 (file)
@@ -279,11 +279,12 @@ html,body,h1,h2,h3,h4,h5 {
 }
 
 .ctdl_mail_folders li {
-       color: DarkSlateGrey;
+       color: Black;
+       padding-left: 10px;
 }
 
 .ctdl_mail_folders li:hover {
-       color: Black;
+       color: DarkSlateGrey;
 }
 
 .ctdl-avatar {
index acff2e5d859f29123de26a464283c8e932ff7e22..28e750e6f52ed765f92a71310d2133c6b0f7e13d 100644 (file)
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 
 <!-- 
-       Copyright (c) 1996-2022 by Art Cancro and the citadel.org team.
+       Copyright (c) 1996-2023 by Art Cancro and the citadel.org team.
        This program is open source software.  Use, duplication, or
        disclosure are subject to the GNU General Public License v3.
 -->
@@ -18,7 +18,7 @@
 <div class="ctdl-modal" id="ctdl_big_modal"></div>
 
 <!-- When we need a custom ghost image for drag-and-drop, we can attach it to this element -->
-<div id="ctdl_draggo" style="position:absolute; left:0px; top:0px; z-index:-9">DRAGGO</div>
+<div id="ctdl_draggo" style="position:absolute; left:0px; top:0px; z-index:-9"> </div>
 
 <div class="ctdl-main-grid-container">
 
index e84730586964b1432a1aa459b9b57712f22a299e..ba8a74f56dd26cef4bff340d2f02387c48e31659 100644 (file)
@@ -10,7 +10,7 @@
 function display_mail_folder_list(target_div) {
 
        display_mail_folder_list_async = async(target_div) => {
-               let rendered_list = "hi from display_mail_folder_list_async()";
+               let rendered_list = "";
 
                // load the room list from the Citadel Server
                response = await fetch("/ctdl/r/", { method: "GET" } );
@@ -51,7 +51,11 @@ function render_mail_folder_list(roomlist_json) {
        for (let i=0; i<roomlist_json.length; ++i) {
                if (roomlist_json[i].current_view == views.VIEW_MAILBOX) {
                        rendered_list += "<li "
-                                       + "onmouseup=\"mail_mouseup('" + roomlist_json[i].name + "');\" "
+                                       + "id=\"" + randomString() + "\" "
+                                       + "onDragEnter=\"return mail_dragenter_handler(event)\" "
+                                       + "onDragOver=\"return mail_dragover_handler(event)\" "
+                                       + "onDragLeave=\"return mail_dragleave_handler(event)\" "
+                                       + "onDrop=\"return mail_drop_handler(event, '" + escapeJS(roomlist_json[i].name) + "')\" "
                                        + "onClick=\"gotoroom('" + roomlist_json[i].name + "');\">"
                                        + ((roomlist_json[i].name == "Mail") ? _("INBOX") : escapeHTML(roomlist_json[i].name))
                                        + "</li>\n"
@@ -63,13 +67,28 @@ function render_mail_folder_list(roomlist_json) {
 }
 
 
-// The user released the mouse button over a folder name -- this is probably a drop event
-function mail_mouseup(roomname) {
-       console.log("mail_mouseup " + roomname);
+function mail_dragenter_handler(event) {
+       event.preventDefault();
+       return false;
+}
+
+
+function mail_dragover_handler(event) {
+       event.preventDefault();
+       return false;
+}
 
-       // todo:
-       // 1. First check to see if a drag operation is in progress.  Exit if there is no such case.
-       // 2. Perform the MOVE operation on the selected rows.
 
+function mail_dragleave_handler(event) {
+       event.preventDefault();
+       return false;
 }
 
+
+function mail_drop_handler(event, to_room) {
+       console.log("Drop! " + event.currentTarget.id + " to room '" + to_room + "'");
+       event.preventDefault();
+       return false;
+}
+
+
index ff50eae3c5cff4397c9090b80f163b05de8d33c2..a925ce5b37249b12eb7827ded6258b910fd9dd11 100644 (file)
@@ -522,7 +522,7 @@ function make_cc_bcc_visible() {
 // Helper function for mail_send_messages() to extract and decode metadata values.
 function msm_field(element_name, separator) {
        let s1 = document.getElementById(element_name).innerHTML;
-       let s2 = s1.replaceAll("|",separator);          // Replace "|" with "!" because "|" is a field separator in Citadel wire protocol
+       let s2 = s1.replaceAll("|",separator);          // Replace "|" with "!" because "|" is a field separator in Citadel
        let s3 = decodeURI(s2);
        let s4 = document.createElement("textarea");    // This One Weird Trick Unescapes All HTML Entities
        s4.innerHTML = s3;