Replace messages jQuery drag/drop with native HTML5

This commit is contained in:
djmaze 2020-09-18 14:01:27 +02:00
parent d88c183112
commit c282e2c9b5
10 changed files with 91 additions and 149 deletions

View file

@ -1,7 +1,5 @@
<div class="e-item" data-bind="visible: visible, css: { 'i-am-inbox-wrapper': isInbox }">
<a class="e-link" data-bind="droppable: function (oEvent, oUi) { $root.messagesDrop($data, oUi); },
droppableOver: function (oEvent, oUi) { $root.messagesDropOver($data, oUi); },
droppableOut: function (oEvent, oUi) { $root.messagesDropOut($data, oUi); },
<a class="e-link" data-bind="droppable: $root,
css: { 'i-am-inbox': isInbox, 'selected': selected() && !isSystemFolder(), 'selectable': selectableForFolderList, 'hidden' : hidden, 'print-count': hasUnreadMessages, 'unread-sub': hasSubScribedUnreadMessagesSubfolders, 'system': isSystemFolder, 'anim-action-class': actionBlink }">
<span class="badge pull-right count" data-bind="text: printableUnreadCount"></span>
<i data-bind="css: collapsedCss()"></i>
@ -9,4 +7,4 @@
<span class="name" data-bind="text: name"></span>
</a>
<div class="b-sub-folders" data-bind="template: { name: 'MailFolderListItem', foreach: subFolders }, css: { 'collapsed': collapsed() }"></div>
</div>
</div>

View file

@ -1,5 +1,5 @@
<div class="e-item b-folder-system-item">
<a class="e-link" data-bind="droppable: function (oEvent, oUi) { $root.messagesDrop($data, oUi); }, css: { 'selected': selected, 'selectable': selectable, 'print-count': 0 < printableUnreadCount().length, 'anim-action-class': actionBlink, 'is-inbox': isInbox }">
<a class="e-link" data-bind="droppable: $root, css: { 'selected': selected, 'selectable': selectable, 'print-count': 0 < printableUnreadCount().length, 'anim-action-class': actionBlink, 'is-inbox': isInbox }">
<span class="badge pull-right count" data-bind="text: printableUnreadCount"></span>
&nbsp;
<span class="focused-poiner"></span>
@ -9,4 +9,4 @@
<i class="icon-star-empty"></i>
</span>
</a>
</div>
</div>

View file

@ -198,9 +198,10 @@
<div class="listEmptySearchList" data-bind="visible: !dragOver() && 0 === messageList().length && !messageListCompleteLoadingThrottle() && '' === messageListError() && '' !== messageListSearch()">
<span class="i18n" data-i18n="MESSAGE_LIST/EMPTY_SEARCH_LIST"></span>
</div>
<div data-bind="draggable: dragAndDronHelper, droppableSelector: '.b-folders .b-content'">
<div draggable="true" data-bind="draggable: dragStart">
<div class="messageListPlace" data-bind="template: { name: messageListItemTemplate(), foreach: messageList }"></div>
</div>
<div id="messagesDragImage"><span class="text"></span>&nbsp;<i class="icon-mail icon-white"></i></div>
</div>
</div>
</div>

View file

@ -15,7 +15,7 @@
<i class="icon-star-empty"></i>
</span>
</div>
<div class="dateParent actionHandle dragHandle">
<div class="dateParent actionHandle">
<time class="date" data-moment-format="SHORT" data-moment-format-title="FULL" data-bind="moment: dateTimeStampInUTC"></time>
</div>
<div class="threadsParent" data-bind="visible: 1 < threadsLen()">
@ -29,18 +29,18 @@
<div class="checkedParent">
<i class="checkboxMessage" data-bind="css: checked() ? 'checkboxMessage icon-checkbox-checked' : 'checkboxMessage icon-checkbox-unchecked'"></i>
</div>
<div class="senderParent actionHandle dragHandle">
<div class="senderParent actionHandle">
<span class="replyFlag"><i class="icon-reply"></i>&nbsp;</span>
<span class="forwardFlag"><i class="icon-forward"></i>&nbsp;</span>
<span class="sender" data-bind="text: senderEmailsString, attr: {'title': senderClearEmailsString}"></span>
&nbsp;
</div>
<div class="attachmentParent actionHandle dragHandle">
<div class="attachmentParent actionHandle">
<span class="attachment">
<i data-bind="css: attachmentIconClass"></i>
</span>
</div>
<div class="subjectParent actionHandle dragHandle">
<div class="subjectParent actionHandle">
<b class="importantMark">!</b>
<span class="subject emptySubjectText" data-bind="text: $root.emptySubjectValue"></span>
<span class="subject-prefix" data-bind="text: subjectPrefix"></span><span class="subject-suffix" data-bind="text: subjectSuffix"></span>

View file

@ -4,7 +4,7 @@
</div>
<div class="delimiter"></div>
<div class="wrapper">
<div class="dateParent actionHandle dragHandle">
<div class="dateParent actionHandle">
<time class="date" data-moment-format="SHORT" data-moment-format-title="FULL" data-bind="moment: dateTimeStampInUTC"></time>
</div>
<div class="threadsParent" data-bind="visible: 1 < threadsLen()">
@ -29,18 +29,18 @@
<i class="icon-star-empty"></i>
</span>
</div>
<div class="senderParent actionHandle dragHandle">
<div class="senderParent actionHandle">
<span class="replyFlag"><i class="icon-reply"></i>&nbsp;</span>
<span class="forwardFlag"><i class="icon-forward"></i>&nbsp;</span>
<span class="sender" data-bind="text: senderEmailsString, attr: {'title': senderClearEmailsString}"></span>
&nbsp;
</div>
<div class="attachmentParent actionHandle dragHandle">
<div class="attachmentParent actionHandle">
<span class="attachment">
<i data-bind="css: attachmentIconClass"></i>
</span>
</div>
<div class="subjectParent actionHandle dragHandle">
<div class="subjectParent actionHandle">
<b class="importantMark">!</b>
<span class="subject emptySubjectText" data-bind="text: $root.emptySubjectValue"></span>
<span class="subject-prefix" data-bind="text: subjectPrefix"></span><span class="subject-suffix" data-bind="text: subjectSuffix"></span>