[TUTORIAL] Edição rápida na mensagem

Ver o tópico anterior Ver o tópico seguinte Ir em baixo

  • 0

[TUTORIAL] Edição rápida na mensagem

Mensagem por nikka em 11/07/14, 10:02 am



Edição rápida na mensagem

Neste novo tutorial poderemos adicionar uma função eficaz para as edições de mensagens. Ao clicar no botão Editar uma mensagem, a caixa de editar aparece automaticamente na própria mensagem, disponibilizando os botões completos da caixa de edição.


--> Tutoriais, dicas e astúcias <--
Edição rápida na mensagem



- Código a ser utilizado:
Código:
    /***
    * Fast edit without refresh window!
    * Version: 1.10292014-jq1.9.1 - ieiunium et dextera
    * Made and Optimizations by JScript - 2013/11/12
    * View more in: http://ajuda.forumeiros.com
    * Copyright (c) 2013 JScript <jscriptbrasil at live dot com>
    * This work is free. You can redistribute it and/or modify it
    * under the terms of the WTFPL, Version 2
    */
    var sFE_oldMsg = '', oFE_msgID = 0, sFE_subject = '', iFE_lt = 0, sFE_post = 'Send', iFE_auth1 = 0, iFE_auth2 = 0;

    jQuery(function () {
      var sCSS = '' +
          '<style>' +
          '.input_submit.alt {' +
            'background: none repeat scroll 0 0 #E2E9F0;' +
            'border-color: #DAE2EA;' +
            'border-radius: 3px 3px 3px 3px;' +
            'border-style: solid;' +
            'border-width: 1px;' +
            'box-shadow: 0 1px 0 0 #EFF3F8 inset, 0 2px 3px rgba(0, 0, 0, 0.2);' +
            'color: #464646;' +
            'margin-left: 4px !important;' +
            'padding: 4px;' +
            'text-decoration: none;' +
          '}' +
          '.input_text, .fdfButton {' +
            'padding: 4px !important;' +
            'box-shadow: 0 1px 0 0 #EFF3F8 inset, 0 2px 3px rgba(0, 0, 0, 0.2);' +
          '}' +
          '.desc {' +
            'background-color: #F1F6F9;' +
            'padding: 9px;' +
            'color: #777777;' +
            'font-size: 11px;' +
          '}' +
          '</style>';
      document.head.insertAdjacentHTML('beforeEnd', sCSS);

      jQuery('a[href*="mode=editpost"]').click(function (event) {
          event.preventDefault();
          var datahref = jQuery(this).attr('href');
          var post_ID = datahref.split('p=')[1].split('&')[0];
          /* Forum versions! */
          var phpBB2 = jQuery('#p' + post_ID).find('td .postbody div:eq(0)');
          var phpBB3 = jQuery('#p' + post_ID).find('div.content');
          var punbb = jQuery('#p' + post_ID).next().find('div.entry-content');
          var invision = jQuery('#p' + post_ID).find('div.post-entry');

          if (phpBB2.length) {
            oFE_msgID = phpBB2;
          } else if(phpBB3.length) {
            oFE_msgID = phpBB3;
          } else if(punbb.length) {
            oFE_msgID = punbb;
          } else if(invision.length) {
            oFE_msgID = invision;
          };
          fastEditMsg(post_ID);
      });
    });
    /***
    * Fast edit post!
    * Function: fastEditMsg(post_ID);
    */
    fastEditMsg = function(post_ID){
      if (isNaN(post_ID) || (jQuery('#p' + post_ID).length == 0) ) {return false}

      sFE_oldMsg = oFE_msgID.html();

      var sHtml = '<div class="main-content topic">' +
          '<div class="post">' +
            '<div id="editor_' + post_ID + '">' +
                '<textarea cols="9" id="text_editor_textarea_' + post_ID + '" name="message" onclick="storeCaret(this)" onkeyup="storeCaret(this)" onselect="storeCaret(this)" rows="15" style="width: 98%; height: 250px;" tabindex="3" wrap="virtual">' +
                '\n\n\n\n\n\nCarregando a mensagem, aguarde...</textarea>' +
                '<div class="row2 desc">' +
                  'Razão para editar: <input type="text" value="" name="post_edit_reason_' + post_ID + '" id="post_edit_reason_' + post_ID + '" class="input_text" maxlength="250" size="35"> ' +
                  '<input type="checkbox" value="1" id="add_edit_' + post_ID + '" name="add_edit_' + post_ID + '" style="vertical-align: middle ! important;"> <label for="add_edit_' + post_ID + '">Mostrar \'Ultima edição por\'</label>' +
                '</div>' +
                '<fieldset class="submit" style="font-size: 13px !important; padding: 15px 6px; text-align: center; border: 0 none; background-color: #D1DDEA;">' +
                  '<input class="button2 fdfButton" name="post" tabindex="6" type="button" value="Salvar Alterações" onclick="fastEditSave(' + post_ID + ')"> ' +
                  '<a class="input_submit alt" href="/post?p='+ post_ID + '&mode=editpost">Usar Editor Completo</a>' +
                  ' ou ' +
                  '<a class="cancel" title="Cancelar" href="javascript:void(0);" onclick="fastEditCancel(' + post_ID + ');">Cancelar</a>' +
                '</fieldset>' +
            '</div>' +
          '</div>' +
      '</div>';
      oFE_msgID.html(sHtml);

      var text_area = jQuery('#text_editor_textarea_' + post_ID);
      text_area.val(sFE_oldMsg.replace(/<br\s?\/?>/g,"\n"));
      /* text_area.val(HtmlToBBCode(sFE_oldMsg)); */

      try
      {
          text_area.sceditor({
            locale: "pt",
            height: "250px",
            width: "auto",
            plugins: "bbcode",
            toolbar: "bold,italic,underline,strike|left,center,right,justify|quote,code,faspoiler,fahide|servimg,image,link,youtube|size,color,font,removeformat|emoticon,date,time,maximize,source",
            parserOptions: {
                /*breakAfterBlock: false,*/
                /*removeEmptyTags: false, */
                /*fixInvalidNesting: false,*/
                /*fixInvalidChildren: false*/
            },
            style: "http://illiweb.com/rsc/85/frm/SCEditor/minified/jquery.sceditor.default.min.css",
            rtl: false,
            emoticonsEnabled: true,
            emoticonsCompat: true,
            emoticonsRoot: "",
            emoticonsURL: "/smilies.forum?f=9&mode=smilies_frame&t=1383011440"
          });
          text_area.sceditor("instance").toggleSourceMode();
          text_area.sceditor("instance").focus();
          jQuery("a.sceditor-button-source").addClass("hover");
          /*jQuery.sceditor.ShowHideToolbarElements();*/

          var container = $('.sceditor-container');
          var ciframe = container.find('iframe');
          var ctextarea = container.find('textarea');
          ciframe.width(ciframe.width() - 9);
          ctextarea.width(ctextarea.width() - 9);
          jQuery('.sceditor-resize-cover').show();
      } catch(e) { if( typeof(console) != 'undefined' ) { console.error(e); } }

      jQuery.get("/post?p=" + post_ID + "&mode=editpost", function(data) {
          sFE_subject  = jQuery(data).find('input[name="subject"]').val();
          var user_Msg = jQuery(data).find('#text_editor_textarea[name="message"]').val();
          text_area.val(user_Msg);
          text_area.sceditor('instance').val(user_Msg);

          iFE_lt = jQuery(data).find('input[name="lt"]').val();
          sFE_post = jQuery(data).find('input[name="post"]').val();

          var oTarget = jQuery(data).find('input[name="auth[]"]');
          iFE_auth1 = jQuery(oTarget[0]).val();
          iFE_auth2 = jQuery(oTarget[1]).val();
      }).done(function(){
          jQuery('.sceditor-resize-cover').hide();
      }).fail(function(){
          oFE_msgID.html(sFE_oldMsg);
          alert('Atenção!\n\n Ocorreu um erro ao requisitar a edição do post, aguarde 10 segundos e tente editar novamente!');
      });
      jQuery('html,body').animate({
          scrollTop: jQuery('#p' + post_ID).offset().top
      }, 1200);
    };
    /***
    * Fast cancel post!
    * Function: fastEditCancel(post_ID);
    */
    fastEditCancel = function(post_ID){
      oFE_msgID.html(sFE_oldMsg);
      jQuery('html,body').animate({
          scrollTop: jQuery('#p' + post_ID).offset().top
      }, 400);
    };
    /***
    * Fast edit post!
    * Function: fastEditSave(post_ID);
    */
    fastEditSave = function(post_ID) {
      if (isNaN(post_ID) || (jQuery('#p' + post_ID).length == 0) ) {return false}

      var text_area = jQuery('#text_editor_textarea_' + post_ID);
      var edit_reason = '';
      text_area.sceditor("instance").toggleSourceMode();
      var user_Msg = text_area.sceditor('instance').val();
      var sHtml = text_area.sceditor('instance').getSourceEditorValue();

      if(jQuery('#add_edit_' + post_ID).is(':checked')) {
          edit_reason = jQuery('#post_edit_reason_' + post_ID).val();
      }

      oFE_msgID.html(sHtml);
      if (sHtml.indexOf('<code>') !== -1) {
          var tagCode = oFE_msgID.children('code');
          var sContent = tagCode.html();
          tagCode.before('<div class="punbbtop">Código        <button onclick="punbbExpand(this); return false;">expand</button><button style="display: none" onclick="punbbCollapse(this); return false;">collapse</button>  <button onclick="punbbSelect(this); return false;">select</button>  <button onclick="punbbPopup(this); return false;">popup</button>  <button style="margin-right: 50px; float: right;" onclick="punbbAbout(this); return false;">?</button></div><pre class="highlight punbb_block">' + sContent + '</pre>');
          tagCode.remove();
          jQuery.getScript('http://balupton.github.io/jquery-syntaxhighlighter/scripts/jquery.syntaxhighlighter.min.js', function () {
            jQuery.SyntaxHighlighter.init({
                'wrapLines': false
            })
          })
      }

      jQuery.post("/post", {
          p: post_ID,
          lt: iFE_lt,
          auth: iFE_auth1,
          auth: iFE_auth2,
          mode: 'editpost',
          subject: sFE_subject,
          message: user_Msg,
          edit_reason: edit_reason,
          attach_sig: 1,
          notify: 0,
          post: sFE_post
      }).done(function(){
          /* */
      }).fail(function(){
          oFE_msgID.html(sFE_oldMsg);
          alert('Atenção!\n\n Ocorreu um erro ao salvar a edição do post, aguarde 10 segundos e tente editar novamente!');
      });
      jQuery('html,body').animate({
          scrollTop: jQuery('#p' + post_ID).offset().top
      }, 400);
    };


- Noção básica da função:
As páginas javascript ativas em seu fórum possibilita inserir scripts e jquery para personalizar seu fórum, contudo é importante saber que qualquer script encontrado na internet acabam por não surgir efeito nos fóruns.

Painel de controle >> Módulos >> HTML & JavaScript >> Gestão dos códigos JavaScripts >>
Seta Título Correspondente ao nome da página JavaScript/jQuery que será criada.
Seta Localização- São destinados os devidos locais para onde você aplicará os efeitos do JavaScript nos fóruns. No nosso caso, aplicaremos Em todas as páginas.
Seta Código JavaScript Campo destinado para receber os códigos JavaScript e jQuery.
Seta Habilitar o gerenciamento dos códigos JavaScript Ao selecionar a opção sim, estará ativando a função páginas Javascript no seu fórum. Se selecionar não, as páginas serão desabilitadas no fórum.

  • Resultado:





© Fórum dos Fóruns & JScript


Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título:
[Dúvida] Edição rápida na mensagem
avatar

nikka
Ex-Admineiro
Ex-Admineiro

Feminino
Inscrito dia : 16/12/2008
Mensagens : 15621
Pontos Ativos : 19895

Ver perfil do usuário http://ajuda.forumeiros.com/ https://www.facebook.com/forumeirospt https://twitter.com/Forumeiros_PT

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo


Permissão deste fórum:
Você não pode responder aos tópicos neste fórum