diff --git a/plugins/kolab_notes/kolab_notes.php b/plugins/kolab_notes/kolab_notes.php index 6b55f642..792dbc7b 100644 --- a/plugins/kolab_notes/kolab_notes.php +++ b/plugins/kolab_notes/kolab_notes.php @@ -1118,7 +1118,7 @@ class kolab_notes extends rcube_plugin $path_imap = explode($delim, $newfolder); $list['name'] = kolab_storage::object_name($newfolder); $list['editname'] = rcube_charset::convert(array_pop($path_imap), 'UTF7-IMAP'); - $list['listname'] = (!empty($path_imap) ? str_repeat('   ', count($path_imap)) . '» ' : '') . $list['editname']; + $list['listname'] = $list['editname']; } break; diff --git a/plugins/kolab_notes/kolab_notes_ui.php b/plugins/kolab_notes/kolab_notes_ui.php index 940ebcd7..1e0835df 100644 --- a/plugins/kolab_notes/kolab_notes_ui.php +++ b/plugins/kolab_notes/kolab_notes_ui.php @@ -40,7 +40,6 @@ class kolab_notes_ui */ public function init_templates() { - $this->plugin->register_handler('plugin.tagslist', array($this, 'tagslist')); $this->plugin->register_handler('plugin.notebooks', array($this, 'folders')); #$this->plugin->register_handler('plugin.folders_select', array($this, 'folders_select')); $this->plugin->register_handler('plugin.searchform', array($this->rc->output, 'search_form')); @@ -55,8 +54,6 @@ class kolab_notes_ui $this->rc->output->include_script('treelist.js'); $this->plugin->include_script('notes.js'); - jqueryui::tagedit(); - // include kolab folderlist widget if available if (in_array('libkolab', $this->plugin->api->loaded_plugins())) { $this->plugin->api->include_script('libkolab/js/folderlist.js'); @@ -216,13 +213,6 @@ class kolab_notes_ui return html::tag('table', $attrib, '', html::$common_attrib); } - public function tagslist($attrib) - { - $attrib += array('id' => 'rcmkolabnotestagslist'); - $this->rc->output->add_gui_object('notestagslist', $attrib['id']); - return html::tag('ul', $attrib, '', html::$common_attrib); - } - public function editform($attrib) { $attrib += array('action' => '#', 'id' => 'rcmkolabnoteseditform'); @@ -267,9 +257,9 @@ class kolab_notes_ui ) . html::div('form-group row', html::label(array('class' => 'col-sm-2 col-form-label'), $this->plugin->gettext('kolab_notes.tags')) - . html::div(array('class' => 'tagline tagedit col-sm-10', 'style' => 'display:none'), ' ') + . html::div(array('class' => 'tagline tagedit col-sm-10'), ' ') ) - . html::div(array('class' => 'dates', 'style' => 'display:none'), + . html::div(array('class' => 'dates text-only', 'style' => 'display:none'), html::div('form-group row', html::label(array('class' => 'col-sm-2 col-form-label'), $this->plugin->gettext('created')) . html::span('col-sm-10', html::span('notecreated form-control-plaintext', '')) diff --git a/plugins/kolab_notes/notes.js b/plugins/kolab_notes/notes.js index fc700f6f..c41566d4 100644 --- a/plugins/kolab_notes/notes.js +++ b/plugins/kolab_notes/notes.js @@ -36,11 +36,9 @@ function rcube_kolab_notes_ui(settings) var notebookslist; var noteslist; var notesdata = {}; - var tagsfilter = []; - var tags = []; + var taglist; var search_request; var search_query; - var tag_draghelper; var render_no_focus; var me = this; @@ -273,62 +271,38 @@ function rcube_kolab_notes_ui(settings) $('#notessortmenu a.by-' + settings.sort_col).addClass('selected'); } - // click-handler on tags list - $(rcmail.gui_objects.notestagslist).on('click', 'li', function(e){ - var item = e.target.nodeName == 'LI' ? $(e.target) : $(e.target).closest('li'), - tag = item.data('value'); - - if (!tag) - return false; - - // reset selection on regular clicks - var index = $.inArray(tag, tagsfilter); - var shift = e.shiftKey || e.ctrlKey || e.metaKey; - - if (!shift) { - if (tagsfilter.length > 1) - index = -1; - - $('li', rcmail.gui_objects.notestagslist).removeClass('selected').attr('aria-checked', 'false'); - tagsfilter = []; - } - - // add tag to filter - if (index < 0) { - item.addClass('selected').attr('aria-checked', 'true'); - tagsfilter.push(tag); - } - else if (shift) { - item.removeClass('selected').attr('aria-checked', 'false'); - var a = tagsfilter.slice(0,index); - tagsfilter = a.concat(tagsfilter.slice(index+1)); - } - - filter_notes(); - - // clear text selection in IE after shift+click - if (shift && document.selection) - document.selection.empty(); - - e.preventDefault(); - return false; - }) - .on('keypress', 'li', function(e) { - if (e.keyCode == 13) { - $(this).trigger('click', { pointerType:'keyboard' }); - } - }) - .mousedown(function(e){ - // disable content selection with the mouse - e.preventDefault(); - return false; - }); - init_editor(); if (settings.selected_list) { notebookslist.select(settings.selected_list) } + + rcmail.addEventListener('kolab-tags-search', filter_notes) + .addEventListener('kolab-tags-drop-data', function(e) { return notesdata[e.id]; }) + .addEventListener('kolab-tags-drop', function(e) { + if ($(e.list).is('#kolabnoteslist')) { + return; + } + + var rec = notesdata[e.id]; + + if (rec && rec.id && e.tag) { + savedata = me.selected_note && rec.uid == me.selected_note.uid ? get_save_data() : $.extend({}, rec); + + if (savedata.id) delete savedata.id; + if (savedata.html) delete savedata.html; + + if (!savedata.tags) + savedata.tags = []; + savedata.tags.push(e.tag); + + rcmail.lock_form(rcmail.gui_objects.noteseditform, true); + saving_lock = rcmail.set_busy(true, 'kolab_notes.savingdata'); + rcmail.http_post('action', { _data: savedata, _do: 'edit' }, true); + } + }); + + rcmail.triggerEvent('kolab-notes-init'); } this.init = init; @@ -387,7 +361,7 @@ function rcube_kolab_notes_ui(settings) this.init_dialog = init_dialog; /** - * initialize tinyMCE editor + * Initialize TinyMCE editor */ function init_editor(callback) { @@ -682,24 +656,25 @@ function rcube_kolab_notes_ui(settings) reset_view(); noteslist.clear(true); notesdata = {}; - tagsfilter = []; update_state(); } - function filter_notes() + /** + * Filter notes by tag + */ + function filter_notes(tags) { - // tagsfilter var id, note, tr, match; for (id in noteslist.rows) { tr = noteslist.rows[id].obj; note = notesdata[id]; match = note.tags && note.tags.length; - for (var i=0; match && note && i < tagsfilter.length; i++) { - if ($.inArray(tagsfilter[i], note.tags) < 0) + for (var i=0; match && note && i < tags.length; i++) { + if ($.inArray(tags[i], note.tags) < 0) match = false; } - if (match || !tagsfilter.length) { + if (match || !tags.length) { $(tr).show(); } else { @@ -711,9 +686,7 @@ function rcube_kolab_notes_ui(settings) me.selected_note = null; noteslist.clear_selection(); }, function(){ - tagsfilter = []; - filter_notes(); - update_tagcloud(); + filter_notes(tags); }); } } @@ -748,7 +721,7 @@ function rcube_kolab_notes_ui(settings) notesdata[rec.id] = rec; } - render_tagslist(data.tags || [], !data.search) + update_taglist(); rcmail.set_busy(false, 'loading', ui_loading); rcmail.triggerEvent('listupdate', {list: noteslist, rowcount:noteslist.rowcount}); @@ -796,6 +769,12 @@ function rcube_kolab_notes_ui(settings) titlecontainer = rcmail.gui_objects.noteviewtitle || container, is_html = false; + // tag-edit line + if (window.kolab_tags_input) { + $('.tagline', titlecontainer).parent('.form-group').show(); + taglist = kolab_tags_input($('.tagline', titlecontainer), data.tags, readonly); + } + $('.notetitle', titlecontainer).val(data.title).prop('disabled', readonly).show(); $('.dates .notecreated', titlecontainer).text(data.created || ''); $('.dates .notechanged', titlecontainer).text(data.changed || ''); @@ -803,34 +782,6 @@ function rcube_kolab_notes_ui(settings) $('.dates', titlecontainer).show(); } - // tag-edit line - var tagline = $('.tagline', titlecontainer).empty()[readonly?'addClass':'removeClass']('disabled').show(); - $.each(typeof data.tags == 'object' && data.tags.length ? data.tags : [''], function(i,val) { - $('') - .attr('name', 'tags[]') - .attr('tabindex', '0') - .addClass('tag') - .val(val) - .appendTo(tagline); - }); - - if (!data.tags || !data.tags.length) { - $('').addClass('placeholder') - .html(rcmail.gettext('notags', 'kolab_notes')) - .appendTo(tagline) - .click(function(e) { $(this).parent().find('.tagedit-list').trigger('click'); }); - } - - $('.tagline input.tag', titlecontainer).tagedit({ - animSpeed: 100, - allowEdit: false, - allowAdd: !readonly, - allowDelete: !readonly, - checkNewEntriesCaseSensitive: false, - autocompleteOptions: { source: tags, minLength: 0, noCheck: true }, - texts: { removeLinkTitle: rcmail.gettext('removetag', 'kolab_notes') } - }); - if (data.links) { $.each(data.links, function(i, link) { var li = $('
  • ').addClass('link') @@ -858,11 +809,6 @@ function rcube_kolab_notes_ui(settings) }); } - if (!readonly) { - $('.tagedit-list', titlecontainer) - .on('click', function(){ $('.tagline .placeholder').hide(); }); - } - if (!data.list) data.list = list.id; @@ -891,9 +837,6 @@ function rcube_kolab_notes_ui(settings) // read possibly re-formatted content back from editor for later comparison me.selected_note.description = rcmail.editor.get_content().replace(/^\s*(

    <\/p>\n*)?/, ''); is_html = true; - - if (!me.selected_note.uid) - $('.notetitle', titlecontainer).focus().select(); } else { gui_object('noteseditform', container).hide(); @@ -911,6 +854,9 @@ function rcube_kolab_notes_ui(settings) // Elastic $(container).parents('.watermark').addClass('formcontainer'); $('#notedetailsbox').parent().trigger('loaded'); + + if (!readonly) + $('.notetitle', titlecontainer).focus().select(); } /** @@ -1161,88 +1107,26 @@ function rcube_kolab_notes_ui(settings) } /** - * + * Display the given counts to each tag */ - function render_tagslist(newtags, replace) + function update_taglist(tags) { - if (replace) { - tags = newtags; - } - else { - var i, append = []; - for (i=0; i < newtags.length; i++) { - if ($.inArray(newtags[i], tags) < 0) - append.push(newtags[i]); + // compute counts first by iterating over all notes + var counts = {}; + $.each(notesdata, function(id, rec) { + for (var t, j=0; rec && rec.tags && j < rec.tags.length; j++) { + t = rec.tags[j]; + if (typeof counts[t] == 'undefined') + counts[t] = 0; + counts[t]++; } - if (!append.length) { - update_tagcloud(); - return; // nothing to be added - } - tags = tags.concat(append); - } - - // sort tags first - tags.sort(function(a,b){ - return a.toLowerCase() > b.toLowerCase() ? 1 : -1; - }) - - var widget = $(rcmail.gui_objects.notestagslist).html(''); - - // append tags to tag cloud - $.each(tags, function(i, tag){ - li = $('

  • ') - .attr('rel', tag) - .data('value', tag) - .html(Q(tag) + '') - .appendTo(widget) - .draggable({ - addClasses: false, - revert: 'invalid', - revertDuration: 300, - helper: tag_draggable_helper, - start: tag_draggable_start, - appendTo: 'body', - cursor: 'pointer' - }); }); - update_tagcloud(); - } + rcmail.triggerEvent('kolab-tags-counts', {counter: counts}); - /** - * Display the given counts to each tag and set those inactive which don't - * have any matching records in the current view. - */ - function update_tagcloud(counts) - { - // compute counts first by iterating over all visible task items - if (typeof counts == 'undefined') { - counts = {}; - $.each(notesdata, function(id, rec){ - for (var t, j=0; rec && rec.tags && j < rec.tags.length; j++) { - t = rec.tags[j]; - if (typeof counts[t] == 'undefined') - counts[t] = 0; - counts[t]++; - } - }); + if (tags && tags.length) { + rcmail.triggerEvent('kolab-tags-refresh', {tags: tags}); } - - $(rcmail.gui_objects.notestagslist).children('li').each(function(i,li){ - var elem = $(li), tag = elem.attr('rel'), - count = counts[tag] || 0; - - elem.children('.count').html(count+''); - if (count == 0) elem.addClass('inactive'); - else elem.removeClass('inactive'); - - if (tagsfilter && tagsfilter.length && $.inArray(tag, tagsfilter)) { - elem.addClass('selected').attr('aria-checked', 'true'); - } - else { - elem.removeClass('selected').attr('aria-checked', 'false'); - } - }); } /** @@ -1257,10 +1141,10 @@ function rcube_kolab_notes_ui(settings) if (is_new || me.selected_note && data.id == me.selected_note.id) { render_note(data); - render_tagslist(data.tags || []); + update_taglist(data.tags || []); } else if (data.tags) { - render_tagslist(data.tags); + update_taglist(data.tags); } // add list item on top @@ -1291,7 +1175,8 @@ function rcube_kolab_notes_ui(settings) close_history_dialog(); me.selected_note = null; $('.notetitle', rcmail.gui_objects.noteviewtitle).val('').hide(); - $('.tagline, .dates', rcmail.gui_objects.noteviewtitle).hide(); + $('.dates', rcmail.gui_objects.noteviewtitle).hide(); + $('.tagline', rcmail.gui_objects.noteviewtitle).parent('.form-group').hide(); $(rcmail.gui_objects.noteseditform).hide().parents('.watermark').removeClass('formcontainer'); $(rcmail.gui_objects.notesdetailview).hide(); $(rcmail.gui_objects.notesattachmentslist).html(''); @@ -1350,7 +1235,7 @@ function rcube_kolab_notes_ui(settings) description: rcmail.editor.get_content().replace(/^\s*(

    <\/p>\n*)?/, ''), list: listselect.length ? listselect.val() : me.selected_note.list || me.selected_list, uid: me.selected_note.uid, - tags: [] + tags: taglist ? kolab_tags_input_value(taglist) : [] }; // copy links @@ -1358,17 +1243,6 @@ function rcube_kolab_notes_ui(settings) savedata.links = me.selected_note.links; } - // collect tags - $('.tagedit-list input[type="hidden"]', rcmail.gui_objects.noteviewtitle).each(function(i, elem){ - if (elem.value) - savedata.tags.push(elem.value); - }); - // including the "pending" one in the text box - var newtag = $('#tagedit-input').val(); - if (newtag != '') { - savedata.tags.push(newtag); - } - return savedata; } @@ -1491,7 +1365,7 @@ function rcube_kolab_notes_ui(settings) rcmail.http_post('action', { _data: { uid: uids.join(','), list: me.selected_list }, _do: 'delete' }, true); reset_view(); - update_tagcloud(); + update_taglist(); noteslist.clear_selection(); }); } @@ -1533,81 +1407,6 @@ function rcube_kolab_notes_ui(settings) window.history.replaceState({}, document.title, rcmail.url('', query)); } } - - - /* Helper functions for drag & drop functionality of tags */ - - function tag_draggable_helper() - { - if (!tag_draghelper) - tag_draghelper = $('

    '); - else - tag_draghelper.html(''); - - $(this).clone().addClass('tag').appendTo(tag_draghelper); - return tag_draghelper; - } - - function tag_draggable_start(event, ui) - { - // register notes list to receive drop events - $('li', rcmail.gui_objects.noteslist).droppable({ - hoverClass: 'droptarget', - accept: tag_droppable_accept, - drop: tag_draggable_dropped, - addClasses: false - }); - - // allow to drop tags onto edit form title - $(rcmail.gui_objects.noteviewtitle).droppable({ - drop: function(event, ui){ - $('#tagedit-input').val(ui.draggable.data('value')).trigger('transformToTag'); - $('.tagline .placeholder', rcmail.gui_objects.noteviewtitle).hide(); - }, - addClasses: false - }) - } - - function tag_droppable_accept(draggable) - { - if (rcmail.busy) - return false; - - var tag = draggable.data('value'), - drop_id = $(this).attr('id').replace(/^rcmrow/, ''), - drop_rec = notesdata[drop_id]; - - // target already has this tag assigned - if (!drop_rec || (drop_rec.tags && $.inArray(tag, drop_rec.tags) >= 0)) { - return false; - } - - return true; - } - - function tag_draggable_dropped(event, ui) - { - var drop_id = $(this).attr('id').replace(/^rcmrow/, ''), - tag = ui.draggable.data('value'), - rec = notesdata[drop_id], - savedata; - - if (rec && rec.id) { - savedata = me.selected_note && rec.uid == me.selected_note.uid ? get_save_data() : $.extend({}, rec); - - if (savedata.id) delete savedata.id; - if (savedata.html) delete savedata.html; - - if (!savedata.tags) - savedata.tags = []; - savedata.tags.push(tag); - - rcmail.lock_form(rcmail.gui_objects.noteseditform, true); - saving_lock = rcmail.set_busy(true, 'kolab_notes.savingdata'); - rcmail.http_post('action', { _data: savedata, _do: 'edit' }, true); - } - } - } diff --git a/plugins/kolab_notes/skins/elastic/templates/notes.html b/plugins/kolab_notes/skins/elastic/templates/notes.html index 1d68b698..f11e963f 100644 --- a/plugins/kolab_notes/skins/elastic/templates/notes.html +++ b/plugins/kolab_notes/skins/elastic/templates/notes.html @@ -6,7 +6,7 @@
    - +

    @@ -21,16 +21,8 @@
    -
    +
    -
    - +
    -

    - +

    diff --git a/plugins/kolab_notes/skins/larry/notes.css b/plugins/kolab_notes/skins/larry/notes.css index beb14349..37e34909 100644 --- a/plugins/kolab_notes/skins/larry/notes.css +++ b/plugins/kolab_notes/skins/larry/notes.css @@ -68,17 +68,9 @@ left: 252px; } -.notesview #tagsbox { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 240px; -} - .notesview #notebooksbox { position: absolute; - top: 252px; + top: 0; left: 0; width: 100%; bottom: 0px; @@ -272,11 +264,6 @@ border-bottom: 0; } -.notesview .ui-dialog-content .tagline { - display: none !important; -} - -.notesview .notetitle .disabled .tagedit-list, .notesview .notetitle input.inline-edit:disabled { outline: none; padding-left: 0; @@ -306,7 +293,6 @@ } .notesview .notetitle .dates, -.notesview .notetitle .tagline, .notesdialog .notebookselect label { color: #999; font-weight: normal; @@ -318,38 +304,6 @@ margin-top: 4px; } -.notesview .notetitle .tagline { - position: relative; - cursor: text; - margin: 4px 0 0 0; -} - -.notesview .notetitle .tagline.disabled { - margin-top: 0; -} - -.notesview .notetitle .tagline .placeholder { - position: absolute; - top: 6px; - left: 6px; - z-index: 2; -} - -.notesview .notetitle .tagline.disabled .placeholder { - left: 0; -} - -.notesview .notetitle .tagedit-list { - position: relative; - z-index: 1; - min-height: 32px; -/* padding: 2px; */ - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - -ms-box-sizing: border-box; - box-sizing: border-box; -} - .notetitle .col-form-label { display: none; } @@ -366,23 +320,6 @@ clear: both; } -/* Firefox 3.6 */ -_:not(), _:-moz-handler-blocked, .notesview .notetitle .tagedit-list { - min-height: 26px; -} - -.notesview .notetitle .disabled .tagedit-list { - min-height: 26px; -} - -.notesview .notetitle #tagedit-input { - background: none; -} - -.notesview .tag-draghelper { - z-index: 1000; -} - .notesview .notetitle .notecreated, .notesview .notetitle .notechanged { display: inline-block; diff --git a/plugins/kolab_notes/skins/larry/templates/listform.html b/plugins/kolab_notes/skins/larry/templates/listform.html new file mode 100644 index 00000000..5fc9ea3b --- /dev/null +++ b/plugins/kolab_notes/skins/larry/templates/listform.html @@ -0,0 +1,18 @@ + + + +<roundcube:object name="pagetitle" /> + + + + +

    :

    + +
    + +
    + + + + + diff --git a/plugins/kolab_notes/skins/larry/templates/notes.html b/plugins/kolab_notes/skins/larry/templates/notes.html index ec47f3c8..58e026f0 100644 --- a/plugins/kolab_notes/skins/larry/templates/notes.html +++ b/plugins/kolab_notes/skins/larry/templates/notes.html @@ -30,13 +30,6 @@
    -
    -

    -
    - -
    -
    -

    @@ -160,8 +153,6 @@ $(document).ready(function(e){ orientation:'v', relative:true, start:240, min:180, size:12, render:layout_view }).init(); new rcube_splitter({ id:'noteslistsplitter2', p1:'#noteslistbox', p2:'#notedetailsbox', orientation:'v', relative:true, start:242, min:180, size:12, render:layout_view }).init(); - new rcube_splitter({ id:'notesviewsplitterv', p1:'#tagsbox', p2:'#notebooksbox', - orientation:'h', relative:true, start:242, min:120, size:12, offset:4 }).init(); function layout_view() { @@ -217,7 +208,6 @@ $(document).ready(function(e){ return false; }); - }); diff --git a/plugins/kolab_tags/kolab_tags.js b/plugins/kolab_tags/kolab_tags.js index 323a5c97..ddc26209 100644 --- a/plugins/kolab_tags/kolab_tags.js +++ b/plugins/kolab_tags/kolab_tags.js @@ -26,7 +26,7 @@ */ window.rcmail && rcmail.addEventListener('init', function() { - if (rcmail.task == 'mail') { + if (rcmail.task == 'mail' || rcmail.task == 'notes') { var msg_view = rcmail.env.action == 'show' || rcmail.env.action == 'preview'; if (!msg_view && rcmail.env.action) { @@ -35,7 +35,13 @@ window.rcmail && rcmail.addEventListener('init', function() { // load tags cloud if (rcmail.gui_objects.taglist) { - load_tags(); + // Tags for kolab_notes plugin have to be initialized via an event + if (rcmail.task == 'notes' && !window.kolabnotes) { + rcmail.addEventListener('kolab-notes-init', load_tags); + } + else { + load_tags(); + } } // display tags in message subject (message window) @@ -79,7 +85,7 @@ window.rcmail && rcmail.addEventListener('init', function() { return true; } if (p.command == 'reset-tags') { - return !!(tagsfilter.length && rcmail.message_list); + return !!(tagsfilter.length && main_list_widget()); } }); } @@ -99,16 +105,31 @@ window.rcmail && rcmail.addEventListener('init', function() { $('a.menuselector span', $(this).parent()).text(title); }); } + + // Allow other plugins to update tags list + rcmail.addEventListener('kolab-tags-counts', update_counts) + .addEventListener('kolab-tags-refresh', refresh_tags); } }); -var tagsfilter = [], tag_selector_element, tag_form_data, tag_form_save_func, +var tag_selector_element, tag_form_data, tag_form_save_func, + tagsfilter = [], + tagscounts = [], reset_css = {color: '', backgroundColor: ''}; +function main_list_widget() +{ + if (rcmail.task == 'mail' && rcmail.message_list) + return rcmail.message_list; + + if (rcmail.task == 'notes' && rcmail.noteslist) + return rcmail.noteslist; +} + // fills tag cloud with tags list function load_tags() { - var ul = $('#taglist'), clickable = rcmail.message_list; + var ul = $('#taglist'), clickable = !!main_list_widget(); $.each(rcmail.env.tags, function(i, tag) { var li = add_tag_element(ul, tag, clickable); @@ -130,9 +151,10 @@ function load_tags() function add_tag_element(list, tag, clickable) { - // @todo: .append('') var element = $('
  • ').attr('class', tag_class_name(tag)) - .text(tag.name).data('tag', tag.uid).appendTo(list); + .text(tag.name).data('tag', tag.uid) + .append('') + .appendTo(list); if (clickable) { element.click(function(e) { @@ -173,12 +195,38 @@ function add_tag_element(list, tag, clickable) e.preventDefault(); return false; - }) + }); + + if (!$('html.touch').length) { + element.draggable({ + addClasses: false, + cursor: 'default', + cursorAt: {left: -10}, + revert: 'invalid', + revertDuration: 300, + helper: tag_draggable_helper, + start: tag_draggable_start, + appendTo: 'body' + }); + } } return element; } +function update_counts(p) +{ + $('#taglist > li').each(function(i,li) { + var elem = $(li), tagid = elem.data('tag'), + tag = tag_find(tagid); + count = tag && p.counter ? p.counter[tag.name] : ''; + + elem.children('.count').text(count ? count : ''); + }); + + tagscounts = p.counter; +} + function manage_tags() { // display it as popup @@ -388,6 +436,29 @@ function update_tags(response) // reset tag selector popup tag_selector_reset(); + if (response.refresh) { + var list = $('#taglist'); + + tagsfilter = $.map(list.children('.selected'), function(li) { + return $(li).data('tag'); + }); + + list.html(''); + load_tags(); + update_counts({counter: tagscounts}); + + if (tagsfilter.length) { + list.children('li').each(function() { + if ($.inArray($(this).data('tag'), tagsfilter) > -1) { + $(this).addClass('selected'); + } + }); + apply_tags_filter(); + } + + return; + } + // remove deleted tags remove_tags(response['delete'], response.mark); @@ -405,9 +476,9 @@ function update_tags(response) var i, old, tag = this, id = tag.uid, filter = function() { return $(this).data('tag') == id; }, tagbox = $('#taglist li').filter(filter), - elements = $('span.tagbox').filter(filter), + elements = $('.tagbox').filter(filter), win = rcmail.get_frame_window(rcmail.env.contentframe), - framed = win && win.jQuery ? win.jQuery('span.tagbox').filter(function() { return win.jQuery(this).data('tag') == id; }) : []; + framed = win && win.jQuery ? win.jQuery('.tagbox').filter(function() { return win.jQuery(this).data('tag') == id; }) : []; selected = $.inArray(String(id), tagsfilter); for (i in rcmail.env.tags) @@ -454,7 +525,8 @@ function remove_tags(tags, selection) } var taglist = $('#taglist li'), - tagboxes = $((selection && rcmail.message_list ? 'tr.selected ' : '') + 'span.tagbox'), + list = main_list_widget(), + tagboxes = $((selection && list ? 'tr.selected ' : '') + 'span.tagbox'), win = rcmail.get_frame_window(rcmail.env.contentframe), frame_tagboxes = win && win.jQuery ? win.jQuery('span.tagbox') : [], update_filter = false; @@ -492,11 +564,28 @@ function remove_tags(tags, selection) } }); - if (update_filter && rcmail.message_list) { + if (update_filter && list) { apply_tags_filter(); } } +// kolab-tags-refresh event handler, allowing plugins to refresh +// the tags list e.g. when a new tag is created +function refresh_tags(e) +{ + // find a new tag + $.each(e.tags || [], function() { + for (var i in rcmail.env.tags) { + if (rcmail.env.tags[i].name == this) { + return; + } + } + + rcmail.http_post('plugin.kolab_tags', {_act: 'refresh'}, rcmail.display_message(rcmail.get_label('loading'), 'loading')); + return false; + }); +} + // unselect all selected tags in the tag cloud function reset_tags() { @@ -602,8 +691,21 @@ function tag_remove(props, obj, event) // executes messages search according to selected messages function apply_tags_filter() { - rcmail.enable_command('reset-tags', tagsfilter.length && rcmail.message_list); - rcmail.qsearch(); + rcmail.enable_command('reset-tags', tagsfilter.length && main_list_widget()); + + if (rcmail.task == 'mail') + rcmail.qsearch(); + else { + // Convert tag id to tag label + var tags = []; + $.each(rcmail.env.tags, function() { + if ($.inArray(this.uid, tagsfilter) > -1) { + tags.push(this.name); + } + }); + + rcmail.triggerEvent('kolab-tags-search', tags); + } } // adds _tags argument to http search request @@ -896,3 +998,162 @@ function tag_class_name(tag) { return 'kolab-tag-' + tag.uid.replace(/[^a-z0-9]/ig, ''); } + +function kolab_tags_input(element, tags, readonly) +{ + var list, + tagline = $(element)[readonly ? 'addClass' : 'removeClass']('disabled').empty().show(), + source_callback = function(request, response) { + request = request.term.toUpperCase(); + response($.map(rcmail.env.tags || [], function(v) { + if (request.length && v.name.toUpperCase().indexOf(request) > -1) + return v.name; + })); + }; + + $.each(tags && tags.length ? tags : [''], function(i,val) { + $('').attr({name: 'tags[]', tabindex: '0', 'class': 'tag'}) + .val(val) + .appendTo(tagline); + }); + + if (!tags || !tags.length) { + $('').addClass('placeholder') + .text(rcmail.gettext('kolab_tags.notags')) + .appendTo(tagline) + .click(function(e) { list.trigger('click'); }); + } + + $('input.tag', element).tagedit({ + animSpeed: 100, + allowEdit: false, + allowAdd: !readonly, + allowDelete: !readonly, + checkNewEntriesCaseSensitive: false, + autocompleteOptions: { source: source_callback, minLength: 0, noCheck: true }, + texts: { removeLinkTitle: rcmail.gettext('kolab_tags.untag') } + }); + + list = element.find('.tagedit-list'); + + list.addClass('form-control'); // Elastic + + if (!readonly) { + list.on('click', function() { $('.placeholder', element).hide(); }); + } + + // Track changes on the list to style tag elements + if (window.MutationObserver) { + var observer = new MutationObserver(kolab_tags_input_update); + observer.observe(list[0], {childList: true}); + } + else { + list.on('click keyup', kolab_tags_input_update); + } + + kolab_tags_input_update({target: list}); + + return list; +} + +function kolab_tags_input_update(e) +{ + var tags = {}, + target = e.length && e[0].target ? e[0].target : e.target; + + // first generate tags list indexed by name + $.each(rcmail.env.tags, function(i, tag) { + tags[tag.name] = tag; + }); + + $(target).find('li.tagedit-listelement-old:not([class*="tagbox"])').each(function() { + var text = $('span', this).text(); + + $(this).addClass('tagbox'); + + if (tags[text]) { + $(this).data('tag', tags[text].uid); + tag_set_color(this, tags[text]); + } + }); +} + +function kolab_tags_input_value(element) +{ + var tags = []; + + $(element || '.tagedit-list').find('input').each(function(i, elem) { + if (elem.value) + tags.push(elem.value); + }); + + return tags; +} + +function tag_draggable_helper() +{ + var draghelper = $('.tag-draghelper'), + tagid = $(this).data('tag'), + node = $(this).clone(), + tagbox = $(''); + + if (!draghelper.length) { + draghelper = $('
    '); + } + + $('span.count', node).remove(); + tagbox.text(node.text()).appendTo(draghelper.html('')); + tag_set_color(tagbox, tag_find(tagid)); + + return draghelper[0]; +} + +function tag_draggable_start(event, ui) +{ + // register notes list to receive drop events + if (rcmail.gui_objects.noteslist) { + $('tr', rcmail.gui_objects.noteslist).droppable({ + addClasses: false, + hoverClass: 'droptarget', + accept: tag_droppable_accept, + drop: tag_draggable_dropped + }); + } + + // allow to drop tags onto edit form title + $('body.task-notes .content.formcontainer,#notedetailstitle.boxtitle').droppable({ + addClasses: false, + accept: function() { return $(this).is('.formcontainer,.boxtitle'); }, + drop: function(event, ui) { + var tag = tag_find(ui.draggable.data('tag')); + $('#tagedit-input').val(tag.name).trigger('transformToTag'); + $('.tagline .placeholder', rcmail.gui_objects.noteviewtitle).hide(); + } + }).addClass('tag-droppable'); +} + +function tag_draggable_dropped(event, ui) +{ + var drop_id = $(this).attr('id').replace(/^rcmrow/, ''), + tag = tag_find(ui.draggable.data('tag')); + + rcmail.triggerEvent('kolab-tags-drop', {id: drop_id, tag: tag.name, list: $(this).parent()}); +} + +function tag_droppable_accept(draggable) +{ + if (rcmail.busy) { + return false; + } + + var tag = tag_find(draggable.data('tag')), + drop_id = $(this).attr('id').replace(/^rcmrow/, ''), + data = rcmail.triggerEvent('kolab-tags-drop-data', {id: drop_id}); + + // target already has this tag assigned + if (!data || (data.tags && $.inArray(tag.name, data.tags) >= 0)) { + return false; + } + + return true; +} diff --git a/plugins/kolab_tags/kolab_tags.php b/plugins/kolab_tags/kolab_tags.php index 12fbb01d..b4fff996 100644 --- a/plugins/kolab_tags/kolab_tags.php +++ b/plugins/kolab_tags/kolab_tags.php @@ -23,7 +23,7 @@ class kolab_tags extends rcube_plugin { - public $task = 'mail'; + public $task = 'mail|notes'; public $rc; public $home; diff --git a/plugins/kolab_tags/lib/kolab_tags_engine.php b/plugins/kolab_tags/lib/kolab_tags_engine.php index 226edb0e..1c45040f 100644 --- a/plugins/kolab_tags/lib/kolab_tags_engine.php +++ b/plugins/kolab_tags/lib/kolab_tags_engine.php @@ -46,12 +46,7 @@ class kolab_tags_engine */ public function ui() { - // set templates of Files UI and widgets - if ($this->rc->task != 'mail') { - return; - } - - if ($this->rc->action && !in_array($this->rc->action, array('show', 'preview'))) { + if ($this->rc->action && !in_array($this->rc->action, array('show', 'preview', 'dialog-ui'))) { return; } @@ -62,7 +57,7 @@ class kolab_tags_engine $this->rc->output->add_label('cancel', 'save'); $this->plugin->add_label('tags', 'add', 'edit', 'delete', 'saving', 'nameempty', 'nameexists', 'colorinvalid', 'untag', 'tagname', - 'tagcolor', 'tagsearchnew', 'newtag'); + 'tagcolor', 'tagsearchnew', 'newtag', 'notags'); $this->rc->output->add_handlers(array( 'plugin.taglist' => array($this, 'taglist'), @@ -71,11 +66,12 @@ class kolab_tags_engine $ui = $this->rc->output->parse('kolab_tags.ui', false, false); $this->rc->output->add_footer($ui); - // load miniColors + // load miniColors and tagedit jqueryui::miniColors(); + jqueryui::tagedit(); // Modify search filter (and set selected tags) - if ($this->rc->action == 'show' || !$this->rc->action) { + if ($this->rc->task == 'mail' && ($this->rc->action == 'show' || !$this->rc->action)) { $this->search_filter_mods(); } } @@ -283,6 +279,18 @@ class kolab_tags_engine } } + /** + * Refresh tags list + */ + public function action_refresh() + { + $taglist = $this->backend->list_tags(); + $taglist = array_map(array($this, 'parse_tag'), $taglist); + + $this->rc->output->set_env('tags', $taglist); + $this->rc->output->command('plugin.kolab_tags', array('refresh' => 1)); + } + /** * Template object building tags list/cloud */ diff --git a/plugins/kolab_tags/localization/en_US.inc b/plugins/kolab_tags/localization/en_US.inc index 26b07248..4dab4012 100644 --- a/plugins/kolab_tags/localization/en_US.inc +++ b/plugins/kolab_tags/localization/en_US.inc @@ -15,6 +15,7 @@ $labels['tagactions'] = 'Tag actions...'; $labels['tagadd'] = 'Tag as...'; $labels['tagremove'] = 'Remove tag...'; $labels['untag'] = 'Remove tag'; +$labels['notags'] = 'No tags'; $labels['tagremoveall'] = 'Remove all tags'; $labels['add'] = 'Add'; $labels['edit'] = 'Edit'; diff --git a/plugins/kolab_tags/skins/elastic/templates/ui.html b/plugins/kolab_tags/skins/elastic/templates/ui.html index 9eee997d..728d4e8e 100644 --- a/plugins/kolab_tags/skins/elastic/templates/ui.html +++ b/plugins/kolab_tags/skins/elastic/templates/ui.html @@ -28,7 +28,7 @@ $(document).ready(function(e) { // put tags cloud under folders list var tagcloud = $('#tagcloud').detach(); - $('#folderlist-content > ul:last').after(tagcloud.show()); + $('#folderlist-content,#notebooks-content').children('ul:first').after(tagcloud.show()); // add tag message menu positions to Mark menu var menu = $('#tagmessagemenu li').detach(); @@ -36,7 +36,7 @@ $(document).ready(function(e) { // add tags management menu positions to folder actions menu menu = $('#tagsmenu li').detach(); - $('#mailboxoptions-menu ul').append(menu); + $('#mailboxoptions-menu,#notebookactions-menu').find('ul').append(menu); // Apply tags colors in Elastic-way rcmail.addEventListener('kolab-tags-update', function() { @@ -58,7 +58,7 @@ $(document).ready(function(e) { // Ignore tags coloring on lists, handled above, use default method for tagboxes only rcmail.addEventListener('kolab-tag-color', function(prop) { - if ($(prop.obj).is('li')) { + if ($(prop.obj).is('li:not(.tagedit-listelement)')) { return false; } }); diff --git a/plugins/kolab_tags/skins/larry/style.css b/plugins/kolab_tags/skins/larry/style.css index 175cef0a..8edcfef7 100644 --- a/plugins/kolab_tags/skins/larry/style.css +++ b/plugins/kolab_tags/skins/larry/style.css @@ -70,6 +70,7 @@ ul.toolbarmenu li span.icon.tagremoveall { } .tag-draghelper .tag .count, +#taglist li .count:empty, #taglist li.inactive .count { display: none; } @@ -138,3 +139,86 @@ ul.toolbarmenu li span.icon.tagremoveall { #tag-selector li.search input { width: 120px; } + +.tagline { + color: #999; + font-weight: normal; + font-size: 0.9em; + position: relative; + cursor: text; + margin: 4px 0 0 0; + min-height: 31px; +} + +.tagline.disabled { + margin-top: 0; +} + +.tagline .tagedit-list { + min-height: 31px; +} + +.tagline.disabled .tagedit-list { + outline: none; + padding-left: 0; + border: 0; + min-height: 31px; + background: rgba(255,255,255,0.01); + -webkit-box-shadow: none; + -moz-box-shadow: none; + -o-box-shadow: none; + box-shadow: none; +} + +.tagline .placeholder { + position: absolute; + top: 6px; + left: 6px; + z-index: 2; +} + +.tagline.disabled .placeholder { + left: 0; +} + +.tagedit-list { + position: relative; + z-index: 1; + min-height: 32px; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + -ms-box-sizing: border-box; + box-sizing: border-box; +} + +.tagedit-list #tagedit-input { + background: none; +} + +.tag-draghelper { + z-index: 1000; +} + +.tagedit span.tag-element, +.tagedit-list li.tagedit-listelement-old { + background: #ddeef5 !important; + border: 0 !important; + padding: 2px 20px 0 6px !important; + line-height: 1.5 !important; + position: relative !important; +} + +.tagedit-list li.tagedit-listelement-old a.tagedit-close, +.tagedit-list li.tagedit-listelement-old a.tagedit-break, +.tagedit-list li.tagedit-listelement-old a.tagedit-delete, +.tagedit-list li.tagedit-listelement-old a.tagedit-save { + position: absolute !important; + top: 1px !important; + right: 0; + background: transparent !important; + text-indent: initial !important; +} + +.tag-droppable.ui-droppable-hover { + background-color: #e8e798; +} \ No newline at end of file diff --git a/plugins/kolab_tags/skins/larry/templates/ui.html b/plugins/kolab_tags/skins/larry/templates/ui.html index 0b8d66a7..ffa02531 100644 --- a/plugins/kolab_tags/skins/larry/templates/ui.html +++ b/plugins/kolab_tags/skins/larry/templates/ui.html @@ -31,11 +31,25 @@ $(document).ready(function(e) { // put tags cloud under folders list - var tagcloud = $('#tagcloud').detach(); - $('#mailview-left').append(tagcloud.show()); + var containers, tagcloud = $('#tagcloud').detach(); - new rcube_splitter({ id:'mailtagsplitter', p1:'#mailboxcontainer', p2:'#tagcloud', - orientation:'h', relative:true, start:242, min:120, size:12, offset:4 }).init(); + if (rcmail.env.task == 'mail') + containers = { + sidebar: '#mailview-left', + list: '#mailboxcontainer' + }; + else if (rcmail.env.task == 'notes') + containers = { + sidebar: '#sidebar', + list: '#notebooksbox' + }; + + if (containers) { + $(containers.sidebar).append(tagcloud.show()); + + new rcube_splitter({ id: rcmail.task + 'tagsplitter', p1:containers.list, p2:'#tagcloud', + orientation:'h', relative:true, start:242, min:120, size:12, offset:4 }).init(); + } // add tag message menu positions to Mark menu var menu = $('#tagmessagemenu li').detach(); diff --git a/plugins/libkolab/skins/elastic/include/kolab_tags.less b/plugins/libkolab/skins/elastic/include/kolab_tags.less index a1ab0d2a..bc93a8d0 100644 --- a/plugins/libkolab/skins/elastic/include/kolab_tags.less +++ b/plugins/libkolab/skins/elastic/include/kolab_tags.less @@ -42,6 +42,26 @@ margin: 0 .5rem 0 .2rem; } } + + .count { + position: absolute; + top: 0; + right: 0; + min-width: 2em; + line-height: 1.4rem; + margin: (@listing-line-height - 1.4rem)/2; + padding: 0 .3em; + border-radius: .4em; + background: @color-list-secondary; + color: #fff; + text-align: center; + font-weight: bold; + + html.touch & { + line-height: 2rem; + margin: (@listing-touch-line-height - 2rem)/2; + } + } } #tagsform option:before, @@ -93,14 +113,15 @@ .tagbox { color: #fff; - background-color: @color-main; + background-color: @color-main !important; + border: 0 !important; border-radius: .25rem; max-width: 4em; padding: .1rem .4rem; margin-right: .2rem; font-weight: bold; - a { + &:not(.tagedit-listelement) a { color: inherit; padding-left: .5rem; text-decoration: none; @@ -110,3 +131,12 @@ font-size: 1.2rem; } } + +.tag-droppable.formcontainer { + &.ui-droppable-active { + background-color: @color-black-shade-bg !important; + } + &.ui-droppable-hover { + background-color: @color-list-droptarget-background !important; + } +}