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

Revision 5547, 18.0 KB checked in by douglasz, 12 years ago (diff)

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