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

Ir para baixo

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

Mensagem por nikka 11.07.14 14:02


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

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/rs3/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 >>
[TUTORIAL] Edição rápida na mensagem Painel13
[TUTORIAL] Edição rápida na mensagem 110111Seta Título Correspondente ao nome da página JavaScript/jQuery que será criada.
[TUTORIAL] Edição rápida na mensagem 110210Seta 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.
[TUTORIAL] Edição rápida na mensagem 110310Seta Código JavaScript Campo destinado para receber os códigos JavaScript e jQuery.
[TUTORIAL] Edição rápida na mensagem 110410Seta 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:
    [TUTORIAL] Edição rápida na mensagem 34ErxnT





© Fórum dos Fóruns & JScript


[TUTORIAL] Edição rápida na mensagem Act_bottom 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
nikka
nikka
Principal Contribuidor
Principal Contribuidor

Membro desde : 17/12/2008
Mensagens : 15620
Pontos : 19897

https://ajuda.forumeiros.com/ https://www.facebook.com/forumeirospt https://twitter.com/Forumeiros_PT

Ir para o topo Ir para baixo

Ir para o topo

- Tópicos semelhantes

 
Permissões neste sub-fórum
Não podes responder a tópicos