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

Revision 5607, 16.8 KB checked in by thiago, 12 years ago (diff)

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