source: trunk/prototype/modules/mail/js/label.js @ 5586

Revision 5586, 16.5 KB checked in by douglasz, 12 years ago (diff)

Ticket #2486 - Atualizar a lista de mensagens quando editar ou excluir um marcador
  • Property svn:executable set to *
RevLine 
[5547]1function configureLabel(event, ui){
2        var idmarkernow = $(this).find('[name="labelItemId"]').val();
3        winElement.find('.edit-label').val(idmarkernow);
4        winElement.find('.input-nome').val($(this).find("span").text());
5       
6        var colorpicker = winElement.find('.lebals-colorpicker');
7        colorpicker.find('input[name="backgroundColor"]').val(rgb2hex($(this).css("backgroundColor")))
8        .css("background-color", $(this).css("backgroundColor")).focus().end()
9        .find('input[name="fontColor"]').val(rgb2hex($(this).css("color"))).css("background-color", $(this).css("color")).focus().end()
10        .find('input[name="borderColor"]').val(rgb2hex($(this).css("border-left-color"))).css("background-color", $(this).css("border-left-color")).focus().end()
11        .find('.preview-label-outer').css({
12                'background-color':$(this).css("backgroundColor"),
13                'color':$(this).css("color"),
14                'border-color':$(this).css("border-left-color")
15        })             
16        winElement.find(".preview-label-inner").text($(this).text());
17}
[5564]18
[5537]19function editLabel(){   
20        var conteudoSpan = $(this).parent().find(".text-list").text();
21        var span = $(this).parent().find(".text-list");
22        $(this).parent().trigger('click').unbind('click', configureLabel).find("span.text-list")
23        .html('<input name="edit-value-list" class="edit-value-list" type="text" value="'+conteudoSpan+'">').find("input[name='edit-value-list']").keydown(function(event){
24                event.stopPropagation();
25                $("input.edit-value-list").keyup(function () {
26                        var value = $(this).val();
27                        winElement.find('.input-nome').val(value);
28                }).keyup();
29                if(event.keyCode == 13){
30                        $(span).html($(".label-list").find(".edit-value-list").val())
31                        .parent().find('.edit').removeClass("hidden").parents("li").click(configureLabel).trigger("click");
[5564]32                        save_editLabel();
[5554]33                       
[5537]34                }else if( event.keyCode == 27){
35                        $(this).trigger("focusout");
36                }
37        }).focusout(function(){
38                $(span).html(conteudoSpan)
39                .parent().find('.edit').removeClass("hidden").parents("li").click(configureLabel);
40        }).focus();
41        $(this).addClass("hidden");
42}
[5566]43
[5537]44function deleteLabel(event){
45        var id = $(this).parents(".label-item").attr("class").match(/label-item-([\d]+[()a-zA-Z]*)/)[1];
46        confirmDelete(id);
47        event.stopImmediatePropagation();
48}
[5564]49
50function colors_suggestions(){
51        return [
52                                {name:'Padrão', border:'#3366cc', font:'#ffffff', background:'#3366cc'},
53                                {name:'Coala', border:'#123456', font:'#ffffff', background:'#385c80'},
54                                {name:'Tomate', border:'#d5130b', font:'#111111', background:'#e36d76'},
55                                {name:'Limão', border:'#32ed21', font:'#1f3f1c', background:'#b2f1ac'},
56                                {name:'Alto contraste', border:'#000000', font:'#ffffff', background:'#222222'}
57                        ]               
58}
[5566]59
[5564]60function rgb2hex(rgb){
61 rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
62 return "#" +
63  ("0" + parseInt(rgb[1],10).toString(16)).slice(-2) +
64  ("0" + parseInt(rgb[2],10).toString(16)).slice(-2) +
65  ("0" + parseInt(rgb[3],10).toString(16)).slice(-2);
66}
67
[5586]68function updateMessageLabels(idLabel){
69        var msgsReference = DataLayer.get('labeled', {filter: ['=', 'labelId', ''+idLabel]}, true);
70        for(var i = 0; i < msgsReference.length; i++){
71                updateLabelsColumn({msg_number: msgsReference[i].messageNumber, boxname: msgsReference[i].folderName});
72        }       
73}
74
[5564]75function confirmDelete(id){
76        $.Zebra_Dialog('<strong>Deseja excluir esse marcador?</strong>', {
77                'type':     'question',
78                'title':    'Atenção',
[5586]79                'buttons': ['Sim','Não'],
80                'overlay_opacity': '0.5',
[5564]81                'onClose':  function(caption) {
82                        if(caption == 'Sim'){
83                                delete_label(id);
84                        }
85                }
86        });     
[5566]87}               
88       
89function save_editLabel(){             
90        var qtdLi = $(".label-list-container ul").find("li").not(".empty-item").length;
91        // salvar marcador
92        if(qtdLi > 0){
[5554]93                $(".save-label").button("disable");
94                var labelEdited = {
95                        id : winElement.find(".edit-label").val(),
96                        uid: User.me.id,
97                        name : winElement.find('.input-nome').val(),
98                        backgroundColor : winElement.find("input[name='backgroundColor']").val(),
99                        fontColor : winElement.find("input[name='fontColor']").val(),
100                        borderColor : winElement.find("input[name='borderColor']").val()
101                }
[5566]102                $(".label-list-container .label-list li").each(function(){
103                        var regex_match_2 = $(this).attr("class").match(/label-item-([\d]+[()a-zA-Z]*)/);
[5554]104                       
[5566]105                         if(regex_match_2 && regex_match_2[1] && regex_match_2[1] == labelEdited.id){
106                           $(this).html("<input type='hidden' name='labelItemId' class='id-item-list' value='"+labelEdited.id+"'>"+"<span class='text-list'>"+labelEdited.name+"</span><div class='button close tiny' style='float: right'></div><div class='button edit tiny' style='float: right'></div>").css({
107                                "background" : labelEdited.backgroundColor,
108                                "color" : labelEdited.fontColor,
109                                "border-color" : labelEdited.borderColor       
110                           });
111                         }     
112                });
113               
114                $("#MyMarckersList .label-list li").each(function(){
115                        var regex_match_2 = $(this).attr("class").match(/label-item-([\d]+[()a-zA-Z]*)/);
116                       
117                        if(regex_match_2 && regex_match_2[1] && regex_match_2[1] == labelEdited.id){
118                                $(this).html("<input type='hidden' name='labelItemId' class='id-item-list' value='"+labelEdited.id+"'>"+"<span>"+labelEdited.name+"</span>");
119                                $(this).find(".square-color").css('background', labelEdited.backgroundColor);
120                        }       
121                });
122                DataLayer.put('label', labelEdited.id, labelEdited);
123                DataLayer.commit(false, false, function(){
124                        winElement.find(".insert-label").val("");
125                        $.Watermark.ShowAll();
126                       
127                        $(".label-list-container .label-list li").find('.button').button()
128                                .filter('.edit').button({icons:{primary:'ui-icon-pencil'}, text:false}).end()
129                                .filter('.close').button({icons:{primary:'ui-icon-close'}, text:false});
[5554]130                               
[5566]131                        winElement.find('.edit').unbind("click").click(editLabel);                             
132                        winElement.find('.close').click(deleteLabel);
133                       
134                        draw_tree_labels();
[5586]135                        updateMessageLabels(labelEdited.id);
[5566]136                       
137                        /**
138                        * Atualiza menu remove o menu presente em cada mensagem listada em uma pasta
139                        * e carrega novamente para que os dados sejam atualizados
140                        */
141                        $.contextMenu( 'destroy', ".table_box tbody tr");
142                        loadMenu();
143                });
144        // criar marcador
145        } else {
146                var nameLabel = winElement.find(".input-nome").val();
147                if(nameLabel.length >= 2){
148                        new_label(nameLabel, false);                           
149                        winElement.find(".insert-label").val("");
150                        $.Watermark.ShowAll();                         
[5563]151                } else {
[5566]152                        alert("Mínimo 2 caracteres");
153                }
154        }                               
155        $(".label-list-container .label-list").find(".label-item-"+labelEdited.id).trigger("click");
[5554]156}
[5566]157
[5537]158function delete_label(id){
159        $(".label-list li").each(function () {
160                var regex_match = $(this).attr("class").match(/label-item-([\d]+[()a-zA-Z]*)/);
161                if (regex_match && regex_match[1] && regex_match[1] == id) {   
162                        $(this).remove();
163                }
164        });
[5586]165               
[5537]166        DataLayer.remove('label', id);
[5586]167        DataLayer.commit(false, false, function(data){
168                $.contextMenu( 'destroy', ".table_box tbody tr");
169                loadMenu();
170                updateMessageLabels(id);               
171        });
[5537]172        winElement.find(".label-list li:first").trigger("click");
173       
174        if($(".label-list li").length == 0){
[5586]175                winElement.find(".label-list-container").html('<ul class="label-list"><li class="empty-item">'+get_lang("No labels found.")+'.</li></ul>');                     
[5537]176        }
177        var qtdLi = $(".label-list-container ul").find("li").not(".empty-item").length;
178        if (qtdLi == 0){
179                $(".my-labels").addClass("hidden");
180                $(".label-list-container ul").find(".empty-item").css("display","");
181                winElement.find(".buttons .save-label .ui-button-text").text('Criar');
182                $(".delete-label").button("disable");   
183                               
184                winElement.find('.input-nome').val("");
185                winElement.find(".preview-label-inner").text("");
186       
187                var colorpicker = winElement.find('.lebals-colorpicker');
188                colorpicker.find('input[name="backgroundColor"]').val("#ebebeb")
189                .css("background-color", "#ebebeb").focus().end()
190                .find('input[name="fontColor"]').val("#000000").css("background-color", "#000000").focus().end()
191                .find('input[name="borderColor"]').val("#000000").css("background-color", "#000000").focus().end()
192                .find('.preview-label-outer').css({
193                        'background-color':"#ebebeb",
194                        'color':"#000000",
195                        'border-color':"#000000"
196                });
197                $(".input-nome").keyup(function () {
198                        var value = $(this).val();
199                        winElement.find('.preview-label-inner').text(value);
200                }).keyup();                             
201        }               
202}
[5566]203
[5547]204function new_label(nameLabel, isNew){
[5537]205        var labelCreated = {
206                uid: User.me.id,
207                name : nameLabel,
[5547]208                backgroundColor : !!isNew ? '#ebebeb' : winElement.find("input[name='backgroundColor']").val(),
209                fontColor : !!isNew ? '#000000' : winElement.find("input[name='fontColor']").val(),
210                borderColor :!!isNew ? '#000000' : winElement.find("input[name='borderColor']").val()
[5537]211        }
212        DataLayer.put('label', labelCreated);
213       
214        $(".add-label-button").removeClass("ui-icon ui-icon-plus")
215        .html('<img alt="Carregando" title="Carregando" style="margin-left:10px;" src="../prototype/modules/mail/img/loader.gif" />');
216       
217        DataLayer.commit(false, false, function(){
[5533]218
[5537]219                labels = DataLayer.get('label',{criteria:{order: 'id'}}, true);
220                newLabel = {
221                        id: labels[labels.length - 1].id,
222                        name : labels[labels.length- 1].name,
223                        uid: User.me.id,
[5547]224                        bgColor : !!isNew ? '#ebebeb' : winElement.find("input[name='backgroundColor']").val(),
225                        fontColor : !!isNew ? '#000000' : winElement.find("input[name='fontColor']").val(),
226                        borderColor : !!isNew ? '#000000' : winElement.find("input[name='borderColor']").val()
[5537]227                };
228
229                $(".label-list-container ul").find(".empty-item").css("display","none");
230                $(".label-list-container ul")
231                .prepend(DataLayer.render("../prototype/modules/mail/templates/label_listitem.ejs", newLabel))
232                .find("li:first")
233                .fadeIn("slow").click(configureLabel);
234               
[5566]235                draw_tree_labels();
[5537]236
237                $(".label-list-container .label-list li").not(".empty-item").click(function(){
238                        $(".label-list-container .label-list li").find("img").remove();
239                        $(".label-list-container .label-list li.label-item").removeClass("selected");
240                        $(this).prepend("<img src='../prototype/modules/mail/img/triangle.png' style='margin: 0 5px 0 -5px;'>");
241                        $(this).addClass("selected");
242                });
243               
244                $(".label-list-container .label-list li").find('.button').button()
245                .filter('.edit').button({icons:{primary:'ui-icon-pencil'}, text:false}).end()
246                .filter('.close').button({icons:{primary:'ui-icon-close'}, text:false});
247               
248                //posiciona para edição o label inserido                       
249                winElement.find("ul.label-list li:first").trigger("click");                     
250                winElement.find(".buttons .save-label .ui-button-text").text('Salvar');
251                $(".delete-label").button("enable");
252               
253                winElement.find('.edit').unbind("click").click(editLabel);                             
254                winElement.find('.close').click(deleteLabel);
255               
256                $(".my-labels").removeClass("hidden");
257               
258                $.contextMenu( 'destroy', ".table_box tbody tr");
259                loadMenu();
260               
261                $(".add-label-button").empty()
262                .addClass("ui-icon ui-icon-plus");
263        });
264}
[5566]265
[5533]266function init_label(data){
267
268        winElement = data.window;
[5547]269       
[5533]270        //TODO Mudar quando API abstrair atualizações no cache
271        DataLayer.remove('label',false);
272        labels = DataLayer.get('label',{criteria:{order: 'name'}});
273       
274        if(labels){
275                Label_List = winElement
276                .find(".label-list-container").html(DataLayer.render("../prototype/modules/mail/templates/label_list.ejs", {labels: labels}));
277               
278        }else{
[5537]279                //Exibe a mensagem informando o usuário de que não há nenhum marcador cadastrado.
[5533]280                Label_List = winElement
[5586]281                .find(".label-list-container").html('<ul class="label-list"><li class="empty-item">'+get_lang("No labels found.")+'.</li></ul>');
[5533]282               
283        }
284        Label_List.end()
285        .find('.button').button()
286        .filter('.edit').button({icons:{primary:'ui-icon-pencil'}, text:false}).end()
287        .filter('.close').button({icons:{primary:'ui-icon-close'}, text:false});       
288       
289        winElement.find('.edit').click(editLabel);
[5537]290        winElement.find('.close').click(deleteLabel);
[5533]291       
[5537]292        //marca 'd agua
[5533]293        winElement.find(".insert-label").Watermark(winElement.find(".insert-label").val());
294       
295        $("input.insert-label").keyup(function () {
296                $.Watermark.HideAll();
297                var value = $(this).val();
298                winElement.find('.input-nome').val(value);
299        }).keyup();
300       
301        if (!(labels)){
302                winElement.find(".buttons .save-label .ui-button-text").text('Criar');
303                $(".delete-label").button("disable");
304        }else{
305                winElement.find(".label-list li:first").addClass("selected").prepend("<img src='../prototype/modules/mail/img/triangle.png' style='margin: 0 5px 0 -5px;'>");
306        }
307        $(".save-label").button("disable");
308        /**
309        * seta a ação de click para os marcadores listados na tela
310        */
311        winElement.find(".label-list li").not(".empty-item").click(configureLabel);
312       
313        if (data.selectedItem)
314                winElement.find(".label-list li.label-item-"+data.selectedItem).trigger("click");
315        else
316                winElement.find(".label-list li:first").trigger("click");
317               
318        var dataColorPicker = {
319                colorsSuggestions: colors_suggestions()
320        };
321       
322        winElement.find('select.color-suggestions').change(function() {
323                $(".save-label").button("enable");
324                var colorpicker = winElement.find('.lebals-colorpicker');
325                var colors;
326                if(colors = dataColorPicker.colorsSuggestions[$(this).val()]) {
327                        colorpicker
328                        .find('input[name="fontColor"]').val(colors.font).focus().end()
329                        .find('input[name="backgroundColor"]').val(colors.background).focus().end()
330                        .find('input[name="borderColor"]').val(colors.border).focus().end()
331
332                        .find('.preview-label-outer').css({
333                                'background-color':dataColorPicker.colorsSuggestions[$(this).val()].background,
334                                'border-color':dataColorPicker.colorsSuggestions[$(this).val()].border,
335                                'color':dataColorPicker.colorsSuggestions[$(this).val()].font
336                        });
337                }                                       
338        });
339        var colorpickerPreviewChange = function(color) {
340                       
341                var pickedup = winElement.find('.colorwell-selected').val(color).css('background-color', color);
342
343                $(".save-label").button("enable");
344               
345                var colorpicker = winElement.find('.lebals-colorpicker');                       
346
347                if (pickedup.is('input[name="backgroundColor"]')) {
348                        colorpicker.find('.preview-label-outer').css('background-color',color);
349                } else if (pickedup.is('input[name="fontColor"]')) {
350                        colorpicker.find('.preview-label-outer').css('color',color);
351                } else if (pickedup.is('input[name="borderColor"]')) {
352                        colorpicker.find('.preview-label-outer').css('border-color',color);
353                }               
354        }
355               
356        var f = $.farbtastic(winElement.find('.colorpicker'), colorpickerPreviewChange);
357        var selected;
358                               
359        winElement.find('.colorwell').each(function () {
360                f.linkTo(this);
361        })
362        .focus(function() {
363                if (selected) {
364                        $(selected).removeClass('colorwell-selected');
365                }
366                $(selected = this).addClass('colorwell-selected');
367                f.linkTo(this, colorpickerPreviewChange);
368                f.linkTo(colorpickerPreviewChange);
369        });
370       
371        winElement.find(".add-label-button").click(function (event) {
372                $.Watermark.HideAll();
[5537]373                var nameLabel = winElement.find(".insert-label").val();
374                if(nameLabel.length >= 2){
[5547]375                        new_label(nameLabel, true);
[5537]376                        $.Watermark.ShowAll();
377                        winElement.find(".insert-label").val("");
[5533]378                        } else {
379                                alert("Mínimo 2 caracteres");
380                        }
381                event.stopImmediatePropagation();
382        });
383       
384        winElement.find('.insert-label').keydown(function(event, ui) {
385                if (event.keyCode == 13)
386                        winElement.find(".add-label-button").trigger('click');
387        });
[5537]388       
[5533]389        //excluir marcador {deve ser para o botão grande na janela de edição e nao o pequeno da lista}
390        winElement.find(".buttons .delete-label").click(function(event){
[5586]391                var id = winElement.find(".edit-label").val();         
[5533]392                confirmDelete(id);
393                event.stopImmediatePropagation();
394        });
[5537]395       
[5533]396        $(".label-list-container .label-list li").not(".empty-item").click(function(){
397                $(".label-list-container .label-list li").find("img").remove();
398                $(".label-list-container .label-list li.label-item").removeClass("selected");
399                $(this).prepend("<img src='../prototype/modules/mail/img/triangle.png' style='margin: 0 5px 0 -5px;'>");
400                $(this).addClass("selected");
401        });
402               
403        //salvar/criar marcador
[5564]404        winElement.find(".buttons .save-label").click(function(){
405                save_editLabel();
406        });     
[5533]407        //desfazer marcador
408        winElement.find(".buttons .undo-label").click(function(event){
409                var edit = winElement.find(".edit-label").val();               
410                $(".label-list-container .label-list li").each(function(){
411                        var regex_match_3 = $(this).attr("class").match(/label-item-([\d]+[()a-zA-Z]*)/);
412                        if(regex_match_3 && regex_match_3[1] && regex_match_3[1] == edit){
413                                $(this).trigger("click");
414                        }
415                });
416        });
417       
418        //fechar
419        $(".button-close-window .close-window").click(function(){
420                $(".label-configure-win").dialog("close");
421        });     
422                       
423        $(".configure-label-content").find("input[type='text']").focus(function () {
424                $(this).keyup(function(){
425                        var value = $(this).val();
426                        if(value){
427                                $(".save-label").button("enable");     
428                        }else{
429                                $(".save-label").button("disable");     
430                        }
431                });
432        });     
433       
434        $(".input-nome").keyup(function () {
435                                var value = $(this).val();
436                                winElement.find('.preview-label-inner').text(value);
[5537]437        }).keyup();     
[5533]438}
439/**
440 * TODO:
441 * * Qunado excluir um marcador deve ser removido das mensagens sem que seja necessario atualizar o Expresso.
[5566]442 * * Quando editado um marcador dever ser atualizado na lista de mensagem onde esse marcador foi aplicado.
[5533]443 */
Note: See TracBrowser for help on using the repository browser.