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 *
Line 
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}
18
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");
32                        save_editLabel();
33                       
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}
43
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}
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}
59
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
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
75function confirmDelete(id){
76        $.Zebra_Dialog('<strong>Deseja excluir esse marcador?</strong>', {
77                'type':     'question',
78                'title':    'Atenção',
79                'buttons': ['Sim','Não'],
80                'overlay_opacity': '0.5',
81                'onClose':  function(caption) {
82                        if(caption == 'Sim'){
83                                delete_label(id);
84                        }
85                }
86        });     
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){
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                }
102                $(".label-list-container .label-list li").each(function(){
103                        var regex_match_2 = $(this).attr("class").match(/label-item-([\d]+[()a-zA-Z]*)/);
104                       
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});
130                               
131                        winElement.find('.edit').unbind("click").click(editLabel);                             
132                        winElement.find('.close').click(deleteLabel);
133                       
134                        draw_tree_labels();
135                        updateMessageLabels(labelEdited.id);
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();                         
151                } else {
152                        alert("Mínimo 2 caracteres");
153                }
154        }                               
155        $(".label-list-container .label-list").find(".label-item-"+labelEdited.id).trigger("click");
156}
157
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        });
165               
166        DataLayer.remove('label', id);
167        DataLayer.commit(false, false, function(data){
168                $.contextMenu( 'destroy', ".table_box tbody tr");
169                loadMenu();
170                updateMessageLabels(id);               
171        });
172        winElement.find(".label-list li:first").trigger("click");
173       
174        if($(".label-list li").length == 0){
175                winElement.find(".label-list-container").html('<ul class="label-list"><li class="empty-item">'+get_lang("No labels found.")+'.</li></ul>');                     
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}
203
204function new_label(nameLabel, isNew){
205        var labelCreated = {
206                uid: User.me.id,
207                name : nameLabel,
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()
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(){
218
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,
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()
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               
235                draw_tree_labels();
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}
265
266function init_label(data){
267
268        winElement = data.window;
269       
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{
279                //Exibe a mensagem informando o usuário de que não há nenhum marcador cadastrado.
280                Label_List = winElement
281                .find(".label-list-container").html('<ul class="label-list"><li class="empty-item">'+get_lang("No labels found.")+'.</li></ul>');
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);
290        winElement.find('.close').click(deleteLabel);
291       
292        //marca 'd agua
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();
373                var nameLabel = winElement.find(".insert-label").val();
374                if(nameLabel.length >= 2){
375                        new_label(nameLabel, true);
376                        $.Watermark.ShowAll();
377                        winElement.find(".insert-label").val("");
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        });
388       
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){
391                var id = winElement.find(".edit-label").val();         
392                confirmDelete(id);
393                event.stopImmediatePropagation();
394        });
395       
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
404        winElement.find(".buttons .save-label").click(function(){
405                save_editLabel();
406        });     
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);
437        }).keyup();     
438}
439/**
440 * TODO:
441 * * Qunado excluir um marcador deve ser removido das mensagens sem que seja necessario atualizar o Expresso.
442 * * Quando editado um marcador dever ser atualizado na lista de mensagem onde esse marcador foi aplicado.
443 */
Note: See TracBrowser for help on using the repository browser.