SHARE
TWEET

Untitled

a guest Jul 19th, 2019 67 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1.     // Isso aqui ja faz pegar todos os pais.
  2.  
  3.     var elements = [];
  4.     var posicaoX = 0;
  5.     var posicaoY = 0;
  6.  
  7.     function rightclick() {
  8.         var rightclick;
  9.         var e = window.event;
  10.      
  11.       // Detecta um clique esquerdo fora da caixa pra fechar ela.
  12.         if(e.which == 1){
  13.           var auxTarget = e.target;
  14.           var dontDelete = false;
  15.  
  16.           // O carinha existe, vamos ver se eu cliquei dentro ou fora.
  17.           if($("#containerCSSEditor")){
  18.  
  19.           while(auxTarget.tagName != "BODY"){
  20.               if(auxTarget.getAttribute("id") == "containerCSSEditor")
  21.               dontDelete = true;
  22.               auxTarget = auxTarget.parentNode;
  23.           }
  24.        
  25.           // Cliquei fora, pode deletar.
  26.           if(!dontDelete) $("#containerCSSEditor").remove();
  27.           }
  28.         }  
  29.  
  30.         if (e.which == 3 || e.button == 2){
  31.           var auxTarget = e.target;
  32.           var act = true;
  33.           if(auxTarget.getAttribute("id") == "containerCSSEditor" || auxTarget.parentNode.getAttribute("id") == "containerCSSEditor" || auxTarget.parentNode.getAttribute("id") == "CSSEditorUlContainer"){
  34.             act = false;
  35.           }
  36.           if(act){
  37.             elements = [];
  38.             var target = e.target;
  39.             posicaoX = e.pageX;
  40.             posicaoY = e.pageY;
  41.             auxTarget = target;
  42.            
  43.             if($("#containerCSSEditor")){
  44.                 $("#containerCSSEditor").remove();
  45.             }
  46.  
  47.             while(auxTarget.tagName != "BODY"){
  48.                 elements.push(auxTarget);
  49.                 auxTarget = auxTarget.parentNode;
  50.             }
  51.        
  52.             criarListaCSS(false);
  53.           }
  54.         }
  55.     }
  56.  
  57.     function criarListaCSS(verdade){
  58.  
  59.         $("#containerCSSEditor").remove();
  60.          
  61.         // Cria o container Geral.
  62.         var cssEditForm = document.createElement("div");
  63.         cssEditForm.setAttribute("id", "containerCSSEditor");
  64.  
  65.         // Cria o titulo do css;
  66.         var cssTitle = document.createElement("h3");
  67.         cssTitle.setAttribute("id", "cssEditorTitle");
  68.         cssTitle.append("CSS Aplicados");
  69.  
  70.         // Cria a lista e vamos comecar a tacar as coisa ali. (TODO)
  71.         var cssULContainer = document.createElement("ul");
  72.         cssULContainer.setAttribute("id", "CSSEditorUlContainer");
  73.  
  74.         // Agora comeca a adicionar os elementos da lista.
  75.  
  76.         for(var i = 0; i < elements.length; i++){
  77.             var cssEditorLi = document.createElement("li");
  78.             cssEditorLi.setAttribute("class", "cssEditorLi");
  79.             cssEditorLi.setAttribute("id", "EditorLi"+i);
  80.             cssEditorLi.setAttribute("onclick", "abreEditorCSS(" + i + ")");
  81.             var classe = elements[i].className;
  82.             var idElemento = elements[i].id;
  83.  
  84.             if(classe != ""){
  85.                 classe = "."+classe;
  86.             }
  87.             if(idElemento != ""){
  88.                 idElemento = "#"+idElemento;
  89.             }
  90.  
  91.             if(!verdade){
  92.                 if(classe != "" && classe != ""){
  93.                     cssEditorLi.innerHTML = elements[i].tagName.toLowerCase() + classe + " " + idElemento;
  94.                     cssULContainer.append(cssEditorLi);
  95.                 }
  96.             }else{
  97.                 cssEditorLi.innerHTML = elements[i].tagName.toLowerCase() + classe + " " + idElemento;
  98.                 cssULContainer.append(cssEditorLi);
  99.             }
  100.         }
  101.        
  102.         cssEditForm.append(cssTitle);
  103.         cssEditForm.append(cssULContainer);
  104.         if(!verdade){
  105.             var voltarCSSEditorNode = document.createElement("article");
  106.             voltarCSSEditorNode.setAttribute("class", "button-voltar");
  107.             voltarCSSEditorNode.setAttribute("id", "carregar");
  108.             voltarCSSEditorNode.setAttribute("onclick", "criarListaCSS(true)");
  109.             voltarCSSEditorNode.innerHTML = "Carregar todos os elementos";
  110.             cssEditForm.append(voltarCSSEditorNode);
  111.         }
  112.  
  113.         $("body").append(cssEditForm);
  114.         $("#containerCSSEditor").css("top", posicaoY).css("left", posicaoX);
  115.     }
  116.  
  117.  
  118.     function abreEditorCSS(index){
  119.  
  120.       var top = $("#containerCSSEditor").css("top");
  121.       var left = $("#containerCSSEditor").css("left");
  122.       $("#containerCSSEditor").remove();
  123.       // Cria um novo editor, dessa vez com base em um form.
  124.       var containerCSSEditorNode = document.createElement("div");
  125.       containerCSSEditorNode.setAttribute("id", "containerCSSEditor");
  126.  
  127.       var voltarCSSEditorNode = document.createElement("article");
  128.       voltarCSSEditorNode.setAttribute("class", "button-voltar");
  129.       voltarCSSEditorNode.setAttribute("id", "voltarButton");
  130.       voltarCSSEditorNode.setAttribute("onclick", "criarListaCSS(false)");
  131.       voltarCSSEditorNode.innerHTML = "Voltar"
  132.       containerCSSEditorNode.append(voltarCSSEditorNode);
  133.  
  134.       var quebraLinha = document.createElement("br");
  135.       containerCSSEditorNode.append(quebraLinha);
  136.  
  137.       // Botar um titulo pra ficar mais bonitin
  138.       var cssTitleNode = document.createElement("h3");
  139.       cssTitleNode.setAttribute("id", "cssEditorTitle");
  140.       cssTitleNode.append("Alterar CSS");
  141.       containerCSSEditorNode.append(cssTitleNode);
  142.  
  143.       // Cria o form.
  144.       var formCSSEditorNode = document.createElement("form");
  145.       formCSSEditorNode.setAttribute("id", "formCSSEditor");
  146.       formCSSEditorNode.setAttribute("method", "post");
  147.       formCSSEditorNode.setAttribute("action", "google.com"); // TODO.
  148.       // Agora cria os inputs do form
  149.       // Nome do elemento.
  150.       var inputNameCSSEditorNode = document.createElement("input");
  151.       inputNameCSSEditorNode.setAttribute("readonly", "");
  152.       inputNameCSSEditorNode.setAttribute("name", "divName");
  153.       inputNameCSSEditorNode.setAttribute("id", "divName");
  154.       inputNameCSSEditorNode.setAttribute("type", "text");
  155.       inputNameCSSEditorNode.setAttribute("value", "< " + elements[index].tagName.toLowerCase() + " class='" + elements[index].className + "' id='" + elements[index].id + "' >");
  156.       formCSSEditorNode.append(inputNameCSSEditorNode);
  157.  
  158.       // Agora as regras.
  159.       var inputCssCSSEditorNode = document.createElement("textarea");
  160.       inputCssCSSEditorNode.setAttribute("rows", "30")
  161.       inputCssCSSEditorNode.setAttribute("name", "inputCSSEditorCSS");
  162.       inputCssCSSEditorNode.setAttribute("id", "inputCSSEditorCSS");
  163.       inputCssCSSEditorNode.setAttribute("type", "text");
  164.       inputCssCSSEditorNode.setAttribute("placeholder", "Carregando...");
  165.       formCSSEditorNode.append(inputCssCSSEditorNode);
  166.  
  167.       // Botao de submit;
  168.       var submitCSSEditorNode = document.createElement("button");
  169.       submitCSSEditorNode.setAttribute("class", "button");
  170.       submitCSSEditorNode.setAttribute("id", "saveButtonCSSEditor");
  171.       submitCSSEditorNode.setAttribute("onclick", "removeFormCSSEditor");
  172.       submitCSSEditorNode.innerHTML = "Enviar Alterações"
  173.       // Agora comeca a putaria de juntar tudo.
  174.       formCSSEditorNode.append(submitCSSEditorNode);
  175.       containerCSSEditorNode.append(formCSSEditorNode);
  176.       $("body").append(containerCSSEditorNode);
  177.       // Aparentemente jquery so funciona se ele ja ta appended.
  178.       $("#containerCSSEditor").css("top", top).css("left", left);
  179.       // Por enquanto, nao quero nenhum submit.
  180.       document.addEventListener("submit", function(e){
  181.           e.preventDefault();
  182.       })
  183.     }
  184.  
  185.     function getAllStyles(elem) {
  186.       if (!elem) return []; // Element does not exist, empty list.
  187.       var win = document.defaultView || window, style, styleNode = [];
  188.       if (win.getComputedStyle) { /* Modern browsers */
  189.           style = win.getComputedStyle(elem, '');
  190.           for (var i=0; i<style.length; i++) {
  191.               styleNode.push( style[i] + ':' + style.getPropertyValue(style[i]) );
  192.               //               ^name ^           ^ value ^
  193.           }
  194.       } else if (elem.currentStyle) { /* IE */
  195.           style = elem.currentStyle;
  196.           for (var name in style) {
  197.               styleNode.push( name + ':' + style[name] );
  198.           }
  199.       } else { /* Ancient browser..*/
  200.           style = elem.style;
  201.           for (var i=0; i<style.length; i++) {
  202.               styleNode.push( style[i] + ':' + style[style[i]] );
  203.           }
  204.       }
  205.       return styleNode;
  206.     }
  207.  
  208.  
  209.  
  210.  
  211.  
  212.     function removeFormCSSEditor(){
  213.     $("#containerCSSEditor").remove();
  214.     }
  215.  
  216.     var sheet = (function(){
  217.       var style = document.createElement("style");
  218.       style.appendChild(document.createTextNode(""));
  219.       document.head.appendChild(style);
  220.  
  221.       return style.sheet;
  222.     });
  223.     var v = sheet();
  224.     v.insertRule(
  225.       "#containerCSSEditor{"  +
  226.         "position: absolute;" +
  227.         "display: table;" +
  228.         "height: 600px;" +
  229.         "width: 450px;" +
  230.         "background: #e6e6e6;" +
  231.         "overflow-x: hidden;" +
  232.         "overflow-y: scroll;" +
  233.         "border-radius: 10px;" +
  234.         "border: 1px solid black;" +
  235.         "padding-top: 10px;" +
  236.       "}"
  237.     );
  238.     v.insertRule(
  239.       "#containerCSSEditor input, #containerCSSEditor button, #containerCSSEditor textarea{" +
  240.         "width: 80%; " +
  241.         "box-sizing: border-box; " +
  242.         "background: #616161; " +
  243.         "margin-left: 10%;" +
  244.         "margin-bottom: 4px; " +
  245.         "color: #FFF; " +
  246.         "font-family: monospace;" +
  247.         "border-radius: 5px;" +
  248.         "height: 20px;" +
  249.         "z-index: 10;" +
  250.       "}"
  251.     );
  252.     v.insertRule(
  253.       "#cssEditorTitle{" +
  254.         "margin-top: 0;" +
  255.         "text-align: center;" +
  256.         "padding-bottom: 10px;" +
  257.         "border-bottom: 1px solid black;"+
  258.       "}"
  259.     )
  260.     v.insertRule(
  261.       "#CSSEditorUlContainer{" +
  262.         "max-height: 450px;" +
  263.         "overflow-x: hidden;" +
  264.         "overflow-y: scroll;" +
  265.         "margin-left: -40px" +
  266.       "}"
  267.     );
  268.     v.insertRule(
  269.       ".cssEditorLi{" +
  270.         "padding-top: 15px;" +
  271.         "padding-bottom: 7px;" +
  272.         "padding-left: 25px;" +
  273.         "height: 25px;" +
  274.         "width: 100%;" +
  275.         "background: #e6e6e6;" +
  276.         "font-size: 14px;" +
  277.         " transition: transform .2s;" +
  278.         "border-bottom: 1px solid black;" +
  279.         "cursor: pointer;" +
  280.         "list-style-type: none;" +
  281.       "}"
  282.     );
  283.     v.insertRule(
  284.       ".cssEditorLi:hover{" +
  285.         "background: #b3b3b3;" +
  286.         "padding-left: 10px;" +
  287.         "transform: scale(1.1);" +
  288.         "border: 1px solid black;" +
  289.         "margin-top: 3px;" +
  290.       "}"
  291.     );
  292.     v.insertRule(
  293.       ".button-voltar{" +
  294.         "color: black;" +
  295.         "cursor: pointer;" +
  296.         "margin-left: 20px;" +
  297.         "padding: 7px;" +
  298.         "border: 1px solid black;" +
  299.         "border-radius: 10px;" +
  300.         "background-color: #5692b0;" +
  301.       "}"
  302.     );
  303.    
  304.     v.insertRule(
  305.       "#divName{"+
  306.         "display: block;" +
  307.         "text-align: center;" +
  308.         "font-size: 14px;" +
  309.       "}"
  310.     );
  311.  
  312.     v.insertRule(
  313.       "#inputCSSEditorCSS{" +
  314.         "overflow-x: hidden;" +
  315.         "overflow-y: scroll;" +
  316.         "height: 100%!important;" +
  317.         "max-height: 360px!important;" +
  318.         "margin-top: 10px!important;" +
  319.         "margin-bottom: 10px!important;" +
  320.       "}"
  321.     );
  322.     $("html").unbind().mousedown(rightclick);
  323.  
  324.     //window.onload = function() {
  325.       document.addEventListener("contextmenu", function(e){
  326.         if(e.which == 3 || e.button == 2){
  327.           e.preventDefault();
  328.         }
  329.       }, false);
  330.     //}
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top