[AddOn] Salvamento automático no editor

por Daemon 06.07.15 22:23

Salvamento automático no editor
É muito chato quando digitamos um texto enorme e de repente a internet cai no momento que enviamos a mensagem, ou o browser fecha sem querer, não é mesmo? Agora isso já não é mais um problema! Com este código poderemos salvar o texto digitado, em um tempo determinado!
Características e aplicação
Criador: @Daemon
Versão: 1.310042018
Versão: Todas as versões
Resultado da aplicação

Local de instalação
A instalação é única, e pode ser feita apenas criando um novo javascript. Para isso, acesse: Painel de Controle ->> Módulos >> HTML e Javascript >> Gestão dos códigos Javascript >> Criar um novo javascript >> Investimento >> Em todas as páginas. Código: /* * Application: Last auto-save * Date: 10/04/2018 * Version: 1.310042018 * Copyright (c) 2018 Daemon <bestskins.forumeiros.com> * This work is free. You can redistribute it and/or modify it / $(document).on("ready", function() { if (!$.sceditor) return; var lang = { dialogTitle: "Aviso de reciclagem", dialogContent: "Uma mensagem foi salva. Você quer reciclar?", dialogConfirm: "Sim", dialogCancel: "Não", savingNotice: "Último salvamento automático em" }; var config = { modal: $("<div>", { id: "myModal", class: "modal" }).html( '<div class="modal-content"></div>' ), dialog: $("<div>", { id: "myDialog", class: "dialog" }).html( '<div class="dialog-titlebar">' + ' <span class="dialog-title">' + lang.dialogTitle + '</span>' + '</div>' + '<div class="dialog-content">' + lang.dialogContent + '</div>' + '<div class="dialog-buttonpane">' + ' <div class="dialog-buttonset">' + ' <button type="button" class="dialog-button confirm">' + lang.dialogConfirm + '</button>' + ' <button type="button" class="dialog-button cancel">' + lang.dialogCancel + '</button>' + ' </div>' + '</div>' ), myCSS: '<style type="text/css">' + '.modal {' + ' display: none;' + ' position: fixed;' + ' z-index: 99999;' + ' right: 30px;' + ' bottom: 30px;' + ' overflow: auto;' + '}' + '.modal-content {' + ' position: relative;' + ' font-family: Verdana, Arial, Helvetica, sans-serif;' + ' background-color: #c3e0ff;' + ' margin: auto;' + ' padding: 13px;' + ' text-align: center;' + ' border: 1px solid #608eaf;' + ' color: #608eaf;' + ' width: 250px;' + ' border-radius: 3px;' + ' -moz-border-radius: 3px;' + ' -webkit-border-radius: 3px;' + ' box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);' + '}' + '.dialog {' + ' display: none;' + ' position: fixed;' + ' z-index: 99999;' + ' right: 30px;' + ' bottom: 30px;' + ' overflow: auto;' + ' width: 335px' + ' height: auto;' + ' font-family: Verdana, Arial, Helvetica, sans-serif;' + ' border: 1px solid #a6c9e2;' + ' background: #fcfdfd url(https://i.imgur.com/zSvngeq.png) 50% bottom repeat-x;' + ' color: #222222;' + '}' + '.dialog-titlebar {' + ' border: 1px solid #4297d7;' + ' background: #5c9ccc url(https://i.imgur.com/VKAHB77.png) 50% 50% repeat-x;' + ' color: #ffffff;' + ' font-weight: bold;' + '}' + '.dialog, .dialog-titlebar {' + ' -moz-border-radius: 5px;' + ' -webkit-border-radius: 5px;' + ' -khtml-border-radius: 5px;' + ' border-radius: 5px;' + '}' + '.dialog, .dialog-titlebar, .dialog-content {' + ' padding: 8px;' + '}' + '.dialog-buttonpane {' + ' border: 1px solid #a6c9e2;' + ' background: #fcfdfd url(https://i.imgur.com/44EUC3C.png) 50% bottom repeat-x;' + ' color: #222222;' + '}' + '.dialog-buttonpane {' + ' text-align: center;' + '}' + '.dialog-button {' + ' cursor: pointer;' + ' outline: none;' + ' border: 1px solid #c5dbec;' + ' background: #dfeffc url(https://i.imgur.com/p3HHEiR.png) 50% 50% repeat-x;' + ' font-weight: bold;' + ' color: #2e6e9e;' + ' margin: 8px;' + ' padding: 8px 15px;' + '}' + '.dialog-button:hover {' + ' border: 1px solid #79b7e7;' + ' background: #dfeffc url(https://i.imgur.com/jrnDbA8.png) 50% 50% repeat-x;' + ' font-weight: bold;' + ' color: #1d5987;' + '}' + '</style>', scrollSpeed: 750, // Page scrolling speed up to the editor typingInterval: 5000, // 5 seconds to save the message closingInterval: 5000, // 5 seconds to close the modal content: $.cookie("editor_sm"), expireTime: 10, // Time to expire the message (set 10 days as standard) editor: $("#text_editor_textarea").sceditor("instance") }; // Inserting CSS before page body $(config.myCSS).insertBefore("body"); // Inserting element modal append to page body $(config.modal).appendTo("body"); // Check for recycled message if (config.content) { // Inserting element dialog append to page body $(config.dialog).appendTo("body"); config.dialog.show("fast"); $.cookie("editor_sm", null); } // Declaring the variables var typingTimer = null, date = null, time = "", editorVal = null; // Whyle typing in the editor config.editor.keyUp(function() { clearTimeout(typingTimer); typingTimer = setTimeout(savingMessage, config.typingInterval); }).keyDown(function() { clearTimeout(typingTimer); }); // Recycle function config.dialog.on("click", ".confirm", function() { config.editor.val(config.content); $("body, html").stop().animate({ scrollTop: $("#quick_reply").offset().top; }, config.scrollSpeed); config.dialog.hide(); }); // Cancel function config.dialog.on("click", ".cancel", function() { config.dialog.hide("slow"); }); // Saving function function savingMessage() { date = new Date(); time = date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds(); editorVal = config.editor.val(); if (editorVal != "") { $.cookie("editor_sm", editorVal, { expires: config.expireTime }); config.modal.show("fast", function() { config.modal.find(".modal-content").html(lang.savingNotice + ": " + time); config.modal.delay(config.closingInterval).hide("slow"); }); } } }); Importante:* Para alterar o tempo de salvamento da mensagem, leia a instrução que está no código.

por JScript 06.07.15 22:29

Excelente @Daemon !!!

Estou testando o código e lhe informo de algum problema ou melhoria ok?

JS

por Shaman 06.07.15 23:13

Muito bom @Daemon mas uma dúvida, tem tamanho máximo de caracteres que ele salva? Como funciona o "em um tempo determinado!" ? Não entendi muito bem... Louco

por JScript 06.07.15 23:22

Shaman escreveu:(...)tem tamanho máximo de caracteres que ele salva?

Teoricamente o tamanho máximo de uma postagem que é em média 15.000 caracteres
Porém o Storage comporta até 5MB!

Shaman escreveu:Como funciona o "em um tempo determinado!" ?

É o tempo que o código leva para "salvar" a postagem em andamento.

JS

por Daemon 06.07.15 23:53

@JScript
Okay meu amigo, fique a vontade! heheh

@Shaman
Isso aí que o JC postou... Porém pode comportar até mais do que 5MB dependendo do browser.

por Shibiusa 07.07.15 18:49

Posso informar que funciona parcialmente no meu fórum. Guarda o conteúdo, mas não aparece o textinho do último salvamento. Talvez seja por ser phpbb2.
Além disso, salva o conteúdo para todas as respostas automáticas. Por exemplo, se eu estiver a postar num tópico e não o fizer, ao mudar para outro vai levar o conteúdo que escrevi para lá.

por Daemon 08.07.15 4:12

Atualizado Rosa

por Destroer 16.07.15 4:04

@Daemon

Perfeito! Era o que eu precisava no meu fórum, só fiz o ajuste de 1s, porque costumo usar muito pré-visualização, o que as vezes fazia ele não salvar a tempo por ter apertando para pré visualizar antes.

por Daemon 16.07.15 4:11

Destroer escreveu:@Daemon

Perfeito! Era o que eu precisava no meu fórum, só fiz o ajuste de 1s, porque costumo usar muito pré-visualização, o que as vezes fazia ele não salvar a tempo por ter apertando para pré visualizar antes.

Você diminuindo tanto o tempo de salvamento das mensagens, faz com que sejam feitas várias requisições, e pode dar o famoso "request limit"...

por Destroer 16.07.15 4:17

Entendo, tem como o usuário habilitar ou desabilitar ele quando quiser?

por Daemon 16.07.15 4:29

Há como sim! Irei fazer isto numa próxima versão, ok? Por enquanto, peço que altere o código pois foi atualizado! Piscada

por Destroer 16.07.15 5:19

Tudo bem, obrigado!

por Shibiusa 16.07.15 17:54

Agradeço o update com a correcção das falhas que mencionei. Entretanto, o nosso developer já criara um javascript próprio para o mesmo efeito e será esse o que utilizaremos Piscada

por RodrigoGatto 26.07.15 19:43

A ideia é ótima! Porém,na versão PHBBP3, não está reciclando a mensagem! Sempre que eu vou para outro tópico aparece a mensagem para reciclar e não funciiona.