Fossil

Check-in [d521007602]
Login

Check-in [d521007602]

Many hyperlinks are disabled.
Use anonymous login to enable hyperlinks.

Overview
Comment:chat: improved visual notification of drag/drop into the file input selector.
Downloads: Tarball | ZIP archive
Timelines: family | ancestors | descendants | both | chatroom-dev
Files: files | file ages | folders
SHA3-256: d5210076029f28380c30de2e2c2d056e4d6215a849655c77b0c55290eb6ebef9
User & Date: stephan 2020-12-23 15:12:09.555
Context
2020-12-23
15:18
chat: when pasting an image and a file is already selected, make sure to clear out that selected file state to avoid conflicting data. ... (check-in: 63ec4a5bcd user: stephan tags: chatroom-dev)
15:12
chat: improved visual notification of drag/drop into the file input selector. ... (check-in: d521007602 user: stephan tags: chatroom-dev)
15:00
chat: reworked the drag/drop bits to take advantage of Firefox and Chrome already supporting drag/drop onto a file input element. ... (check-in: 7e48953c16 user: stephan tags: chatroom-dev)
Changes
Unified Diff Ignore Whitespace Patch
Changes to src/chat.c.
︙︙
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93




94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132

  @ #chat-input-line > input[type=submit] {
  @   flex: 1 5 auto;
  @   max-width: 6em;
  @ }
  @ #chat-input-line > input[type=text] {
  @   flex: 5 1 auto;
  @ }
  @ #chat-input-file {
  @   display: flex;
  @   flex-direction: row;
  @   align-items: center;
  @ }
  @ #chat-input-file > .help-buttonlet,
  @ #chat-input-file > input[type=file] {
  @   align-self: flex-start;
  @   margin-right: 0.5em;
  @   flex: 1 1 auto;




  @ }
  @ #chat-input-file > input {
  @   flex: 1 0 auto;
  @ }
  @ .chat-timestamp {
  @    font-family: monospace;
  @    font-size: 0.8em;
  @    white-space: pre;
  @    text-align: left;
  @    opacity: 0.8;
  @ }
  @ .dragover {
  @   border: 1px dashed green;
  @ }
  @ #chat-drop-details {
  @   flex: 0 1 auto;
  @   padding: 0.5em 1em;
  @   margin-left: 0.5em;
  @   white-space: pre;
  @   font-family: monospace;
  @   max-width: 50%%;
  @ }
  @ </style>
  @ <form accept-encoding="utf-8" id="chat-form">
  @ <div id='chat-input-area'>
  @   <div id='chat-input-line'>
  @     <input type="text" name="msg" id="sbox" \
  @      placeholder="Type message here.">
  @     <input type="submit" value="Send">
  @   </div>
  @   <div id='chat-input-file'>
  @     <input type="file" name="file">
  @     <div id="chat-drop-details"></div>
  @   </div>
  @ </div>
  @ </form>
  @ <hr>

  /* New chat messages get inserted immediately after this element */








|




|
|


|
>
>
>
>











|


















|
|








77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136

  @ #chat-input-line > input[type=submit] {
  @   flex: 1 5 auto;
  @   max-width: 6em;
  @ }
  @ #chat-input-line > input[type=text] {
  @   flex: 5 1 auto;
  @ }
  @ #chat-input-file-area  {
  @   display: flex;
  @   flex-direction: row;
  @   align-items: center;
  @ }
  @ #chat-input-file-area > .help-buttonlet,
  @ #chat-input-file {
  @   align-self: flex-start;
  @   margin-right: 0.5em;
  @   flex: 0 1 auto;
  @ }
  @ #chat-input-file {
  @   border: 1px solid rgba(0,0,0,0);/*to avoid UI shift during drop-targeting*/
  @   border-radius: 0.25em;
  @ }
  @ #chat-input-file > input {
  @   flex: 1 0 auto;
  @ }
  @ .chat-timestamp {
  @    font-family: monospace;
  @    font-size: 0.8em;
  @    white-space: pre;
  @    text-align: left;
  @    opacity: 0.8;
  @ }
  @ #chat-input-file.dragover {
  @   border: 1px dashed green;
  @ }
  @ #chat-drop-details {
  @   flex: 0 1 auto;
  @   padding: 0.5em 1em;
  @   margin-left: 0.5em;
  @   white-space: pre;
  @   font-family: monospace;
  @   max-width: 50%%;
  @ }
  @ </style>
  @ <form accept-encoding="utf-8" id="chat-form">
  @ <div id='chat-input-area'>
  @   <div id='chat-input-line'>
  @     <input type="text" name="msg" id="sbox" \
  @      placeholder="Type message here.">
  @     <input type="submit" value="Send">
  @   </div>
  @   <div id='chat-input-file-area'>
  @     <input type="file" name="file" id="chat-input-file">
  @     <div id="chat-drop-details"></div>
  @   </div>
  @ </div>
  @ </form>
  @ <hr>

  /* New chat messages get inserted immediately after this element */
︙︙
Changes to src/chat.js.
︙︙
74
75
76
77
78
79
80






















81
82
83
84
85
86
87

    F.helpButtonlets.create(
      help,
      "Select a file to upload, drag/drop a file into this spot, ",
      "or paste an image from the clipboard if supported by ",
      "your environment."
    );
  }























  /* Injects element e as a new row in the chat, at the top of the list */
  const injectMessage = function f(e){
    if(!f.injectPoint){
      f.injectPoint = document.querySelector('#message-inject-point');
    }
    if(f.injectPoint.nextSibling){








>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>








74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109

    F.helpButtonlets.create(
      help,
      "Select a file to upload, drag/drop a file into this spot, ",
      "or paste an image from the clipboard if supported by ",
      "your environment."
    );
  }
  ////////////////////////////////////////////////////////////
  // File drag/drop visual notification.
  const dropHighlight = form.file /* target zone */;
  const dropEvents = {
    drop: function(ev){
      D.removeClass(dropHighlight, 'dragover');
    },
    dragenter: function(ev){
      ev.preventDefault();
      ev.dataTransfer.dropEffect = "copy";
      D.addClass(dropHighlight, 'dragover');
    },
    dragleave: function(ev){
      D.removeClass(dropHighlight, 'dragover');
    },
    dragend: function(ev){
      D.removeClass(dropHighlight, 'dragover');
    }
  };
  Object.keys(dropEvents).forEach(
    (k)=>form.file.addEventListener(k, dropEvents[k], true)
  );

  /* Injects element e as a new row in the chat, at the top of the list */
  const injectMessage = function f(e){
    if(!f.injectPoint){
      f.injectPoint = document.querySelector('#message-inject-point');
    }
    if(f.injectPoint.nextSibling){
︙︙