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

Revision 5537, 18.8 KB checked in by douglasz, 12 years ago (diff)

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