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

Revision 5564, 18.3 KB checked in by marcieli, 12 years ago (diff)

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