[TUTORIAL] Salvamento automático nos tópicos

   Neste tutorial, vamos aprender a implantar uma ferramenta eficaz em vossos fóruns, que faz com que você possa selecionar e salvar textos na caixa de mensagens dos tópicos. Para isso siga os passos abaixo atenciosamente.

   


   1º - Conhecendo o código à ser utilizado:
   Antes de mais nada, vamos ter conhecimento do código JavaScript à ser utilizado para fazermos tal função. Para isso, devemos aceder à página indicada no link abaixo, e selecionarmos o código que aparecerá:

Código:

function insertText(a){var c=localStorage.getItem("fasave"+a);if(c===null){$("#savep div[onClick^=insertText("+a+")]").remove()}else{if($("#savep select").val()==1){localStorage.removeItem("fasave"+a),localStorage.removeItem("fasavet"+a),$("#savep div[onClick^=insertText("+a+")]").remove()}else{if($("#savep select").val()==2){var b=localStorage.getItem("fasavet"+a),b=prompt("Título do salvamento :",b?b:"");b!==null&&(b==""?(localStorage.removeItem("fasavet"+a),$("#savep div[onClick^=insertText("+a+")]").text('"'+c.substr(0,30).replace(/</g,"<").replace(/>/g,">")+(c.length>30?"...":'"'))):(localStorage.setItem("fasavet"+a,b),$("#savep div[onClick^=insertText("+a+")]").text(b)))}else{replaceTxt(c)}}}}function replaceTxt(a){var c=$("#text_editor_textarea");if(c.length){start=c.attr("selectionStart");end=c.attr("selectionEnd");stop=c.attr("scrollTop");sleft=c.attr("scrollLeft");text=c.val();for(var b=[""],e=/^([sS]*?)((($$)+)($?)|($))0([sS]*)$/,d;d=a.match(e);){b[b.length-1]+=d[1],d[6]=="$"||d[4]==""?b[b.length]="":b[b.length-1]+=d[3].substr(0,d[3].length/2)+"0",a=d[7]}b[b.length-1]=a;e=text.substring(start,end);a=b[0];d=a.length;for(var f=1;f<b.length;f++){a+=e,a+=b[f]}c.attr({value:text.substr(0,start)+a+text.substr(end),selectionStart:start+d,selectionEnd:b.length>1?end+d:start+d,scrollTop:stop,scrollLeft:sleft})}}function saveExport(){for(var a=localStorage.getItem("fasave-length")===null?0:localStorage.getItem("fasave-length"),c="[",b=0;b<a;b++){var e=localStorage.getItem("fasave"+b);if(e!==null){var d=localStorage.getItem("fasavet"+b);c!="["&&(c+=",");c+=(d===null?"":escape(d)+":")+escape(e)}}c+="]";replaceTxt(c)}function saveImport(){var a=$("#text_editor_textarea").val().substring($("#text_editor_textarea").attr("selectionStart"),$("#text_editor_textarea").attr("selectionEnd")).replace(/s/g,"");if(/^[[%/^a-zA-Z0-9*@_+./:,-]*]$/.test(a)){for(var a=a.substr(1,a.length-2).split(","),c=0;c<a.length;c++){var b=a[c].split(":");b.length==2?saveItem(unescape(b[1]),unescape(b[0])):saveItem(unescape(b[0]),"")}}}function saveSelect(){var a=$("#text_editor_textarea");$(a).attr("selectionStart")-$(a).attr("selectionEnd")!=0&&(a=a.val().substring($(a).attr("selectionStart"),$(a).attr("selectionEnd")),saveItem(a,""))}function saveItem(a,c){for(var b=parseInt(localStorage.getItem("fasave-length")===null?0:localStorage.getItem("fasave-length")),e=0;e<b;e++){var d=localStorage.getItem("fasave"+e);d!==null&&d==a&&(localStorage.removeItem("fasavet"+e),$("#savep div[onClick^=insertText("+e+")]").remove(),localStorage.removeItem("fasave"+e))}localStorage.setItem("fasave"+b,a);c!=""&&localStorage.setItem("fasavet"+b,c);localStorage.setItem("fasave-length",b+1);$("#savep select").after('<div class="savedt" onClick="insertText('+b+');return false;">'+(c?c:"""+a.substr(0,30).replace(/</g,"<").replace(/>/g,">")+(a.length>30?"...":"""))+"</div>")}$(function(){$("#text_editor_textarea").length&&window.localStorage&&navigator.appName!="Microsoft Internet Explorer"&&($("#addbbcode16").after(' <span id="savec"><button id="saveb" class="button2" type="button" title="Salvar"><img src="http://i49.servimg.com/u/f49/15/59/73/38/save10.png" alt="Salvar" title="Salvar"></button></span>'),$("#saveb").click(function(a){if(a.shiftKey){$("#saveshift").length||$("#savec").append('<div class="save-bloc" id="saveshift"><div onClick="saveExport()">Exportar</div><div onClick="saveImport()">Importar</div></div>'),$("#savep").hide(300),$("#saveshift").slideToggle(300)}else{if(!$("#savep").length){$("#savec").append('<div class="save-bloc" id="savep"><select><option value="0">Inserir</option><option value="1">Suprimir</option><option value="2">Nomear</option></select><div id="saves" style="display:none"><hr /><span onClick="saveSelect()">Salvar a seleção</span></div></div>');$("#savep").click(function(a){a.stopPropagation()});for(var a=localStorage.getItem("fasave-length")===null?0:localStorage.getItem("fasave-length"),c=0;c<a;c++){var b=localStorage.getItem("fasave"+c);b!==null&&$("#savep select").after('<div class="savedt" onClick="insertText('+c+');return false;">'+(localStorage.getItem("fasavet"+c)===null?"""+b.substr(0,30).replace(/</g,"<").replace(/>/g,">")+(b.length>30?"...":"""):localStorage.getItem("fasavet"+c))+"</div>")}}$("#saveshift").hide(300);$("#savep").slideToggle(300)}}),$("#text_editor_textarea").select(function(){$("#saves").show()}),$("#text_editor_textarea").bind("click keyup keydown",function(){$(this).attr("selectionStart")-$(this).attr("selectionEnd")==0&&$("#saves").hide()}))});

   2º - Inserindo o código JavaScript:
   Vamos agora aceder à gestão das páginas JavaScript para adicionarmos o nosso código:
   Painel de controle -> Módulos -> HTML e Javascript -> Gestão dos códigos Javascript
   Depois carregue-se no botão "Criar um novo javascript".

   

   

Título - Terá de colocar um título para a página, de forma a poder identifica-lo na lista de páginas JavaScript do Painel de Controle;

Investimento - Escolha a opção "Em todas as páginas", para que a função não apresente erros na posição da coluna de perfis;

Código JavaScript - Neste campo teremos de inserir o código que trabalhamos no item anterior;

Confirmar - Por fim, após adicionar o código, terá de clicar neste botão para salvar a criação. Se você clicar em um outro botão ou em uma outra seção, as mudanças não serão validadas.

   3º - Inserindo o código CSS:
   Para a personalização funcionar corretamente, você deverá adicionar um código CSS na sua folha de estilos para que ela não apresente problemas:
   Painel de Controle -> Visualização -> Imagens e cores -> Cores -> Folha de estilo CSS
   
   Onde terá de adicionar o seguinte código:
   

#savec { position:relative; }.save-bloc { dispay: none; color: #555!important; cursor: point; z-index: 999; padding: 5px;  border: 1px solid #BCBCBC; background: #efefef url(https://2img.net/i/fa/prosilver/bg_button.gif) repeat-x; display:none;top:20px;left:0px;position:absolute; white-space:nowrap; }.save-bloc div:hover { color: #050505!important; }.save-bloc div { cursor: pointer; }.save-bloc select { background: #ccc; border: 1px solid #aaa; margin-bottom: 5px; }

   3º - O resultado final:
   

   

Funções da Ferramenta

   

   

• Inserir
     O "Inserir" tem como função, inserir na ferramenta as seleções de textos ou imagens que você quer. Para isso é bem simples. Com o botão esquerdo do mouse apertado, passe-o sobre a palavra ou texto desejado, selecionando-o. Assim que o fizer, clique na ferramenta, selecione "inserir" e em "Salvar seleção". Pronto, seu texto já foi guardado. No caso de imagens, somente clique na mesma e novamente salve.
  
     
  
  
  
     
  
• Suprimir
     O "Suprimir" tem como função, retirar os salvamentos que você selecionou no passo anterior na ferramenta de salvamentos. Para isso é simples,com o "suprimir" selecionado na ferramenta, simplesmente clique sobre o salvamento desejado para que o mesmo seja retirado.
  
     
  
  
  
     
  
• Nomear
     O "Nomear" tem como função, dar títulos aos seus salvamentos, assim personalizando-os. Para fazer tal modificação, na ferramenta de salvamentos, selecione "nomear". Logo após clique no salvamento desejado ao qual irá personalizar. Aparecerá um alerta em sua página, pedindo para adicionar o título desejado: "Título do salvamento:".
  
     
  
  
  
  

   


   

• Posso adicionar quantos salvamentos quiser?
     Sim, não há um limite exato para que seja impedido o adicionar de novos salvamentos, somente tome cuidado para não sobrecarregar a ferramenta, e por isso mesmo, o próprio fórum.
  

   

---

   


   

Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título:     Salvamento automático nos tópicos