API tools faq
paste
Advertisement
nzisaacnz

editor

nzisaacnz
Sep 19th, 2014
343
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 21.23 KB | None | 0 0
raw download clone embed print report
  1. <html>
  2.   <head>
  3.     <script>
  4.       function AjaxForm(f,ret)
  5.       {
  6.         var inps = [], txts = [],xmlhttp;
  7.                                for(var a=0; a<f.childNodes.length; a++)
  8.                               {
  9.                               var b = f.childNodes[a];
  10.                    if(b.value!==undefined&&b.name!==undefined)inps.push(b);
  11.                    }
  12.                    for(var a=0; a<inps.length; a++)
  13.                    {
  14.                    var txt=escape(inps[a].name)+"=";
  15.        if(inps[a].type=="file")
  16.        {
  17.          if(inps[a].fileData)
  18.          {
  19.            txt+=encodeURIComponent(inps[a].fileData);
  20.            txt+="&"+escape(inps[a].name+"Title")+"="+encodeURIComponent(inps[a].value.match(/(?:[^\
  21.  
  22. \]*){1}$/));
  23.          }
  24.        }
  25.        else txt+=encodeURIComponent(inps[a].value);
  26.        txts.push(txt);
  27.      }
  28.      var postData = txts.join("&");
  29.      if (window.XMLHttpRequest)
  30.      {
  31.        xmlhttp=new XMLHttpRequest();
  32.      }
  33.      else
  34.      {
  35.        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  36.      }
  37.      xmlhttp.onreadystatechange=function()
  38.      {
  39.        if (xmlhttp.readyState==4 && xmlhttp.status==200)
  40.        {
  41.          ret(xmlhttp.responseText);
  42.        }
  43.      }
  44.      switch(f.method.toUpperCase())
  45.      {
  46.        case "GET":
  47.          xmlhttp.open(f.method,f.action+"?"+postData,true);
  48.          xmlhttp.send();
  49.          break;
  50.        case "POST":
  51.          xmlhttp.open(f.method,f.action,true);
  52.          xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
  53.          xmlhttp.send(postData);
  54.          break;
  55.      }
  56.      }
  57.    </script>
  58.     <style>
  59.       .folder,.file
  60.       {
  61.         display:block;
  62.         padding:5px;
  63.         padding-right:0px;
  64.         white-space: nowrap;
  65.         width:20px;
  66.       }
  67.       .folder
  68.       {
  69.         margin:10px;
  70.         margin-right:0px;
  71.        
  72.         background: linear-gradient(to right, rgba(255,183,50,1) 63%,rgba(255,255,255,1) 78%);
  73.        
  74.         border:1px solid;
  75.         border-right:0px solid;
  76.       }
  77.       .file
  78.       {
  79.         margin-left:10px;
  80.         background: linear-gradient(to right, rgba(50,183,255,1) 63%,rgba(255,255,255,1) 78%);
  81.       }
  82.       #localFileExplorerWrap
  83.       {
  84.         position:absolute;
  85.         left:0;top:0;bottom:0;
  86.         width:300px;
  87.         overflow-y:scroll;
  88.       }
  89.       #explorer
  90.       {
  91.         position:absolute;
  92.         left:300px;
  93.         top:0;bottom:0;right:0;
  94.       }
  95.      
  96.       .menuButton
  97.       {
  98.         border:1px solid;
  99.         display:block;
  100.         z-index:100;
  101.         padding-left:20px;
  102.         padding-right:20px;
  103.         background-color:#FFF;
  104.         white-space: nowrap;
  105.       }
  106.       .menuButton >.menu
  107.       {
  108.         position:absolute;
  109.         display:none;
  110.       }
  111.       .menuButton:hover >.menu
  112.       {
  113.         display:block;
  114.        
  115.       }
  116.      
  117.       .cover
  118.       {
  119.         position:absolute;
  120.         display:block;
  121.         top:18px;
  122.         bottom:0;right:0;left:0;
  123.         background-color:rgba(0,0,0,0.5);
  124.         padding:20px;
  125.         color:#FFF;
  126.         overflow-y:scroll;
  127.       }
  128.       .cover.hide
  129.       {
  130.         position:relative;
  131.         display:inline-block;
  132.         height:18px;
  133.         padding:0px;
  134.         padding-left:10px;
  135.         width:90px;
  136.         margin-top:-18px;
  137.         white-space: nowrap;
  138.         overflow:hidden;
  139.       }
  140.      
  141.      
  142.       .cover.hide .title
  143.       {
  144.         position:absolute;
  145.         background-color:rgb(0,0,0);
  146.         opacity:1;
  147.         display:block;
  148.         left:0;
  149.         top:0;
  150.         width:100%;
  151.         padding:0px;
  152.       }
  153.       .cover.hide:hover .title
  154.       {
  155.         position:absolute;
  156.         opacity:0;
  157.         display:block;
  158.         z-index:-1;
  159.       }
  160.       .cover .hex {
  161.         display: inline-block;
  162.         font-family:Courier New;
  163.         padding: 2px;
  164.       }
  165.       .cover .close,
  166.       .cover .show,
  167.       .cover .hide,
  168.       .cover .title,
  169.       .cover .toggle
  170.       {
  171.         padding:5px;
  172.         display:inline;
  173.       }
  174.       .cover .content
  175.       {
  176.         background-color:#FFF;
  177.         color:#000;
  178.         background-repeat: no-repeat;
  179.         background-size: contain;
  180.         background-position: 50% 50%;
  181.         width:100%;
  182.         height:100%;
  183.         resize:none;
  184.       }
  185.     </style>
  186.     <script>
  187.       var FileModule =
  188.           {
  189.       modules:new Array(),
  190.        create:function(name,process,accept)
  191.        {
  192.          var mod = {process:process,accepts:accept};
  193.          FileModule.modules[name] = mod;
  194.        },
  195.        run:function(file,result)
  196.        {
  197.          for(var a in FileModule.modules)
  198.          {
  199.            if(FileModule.modules[a].accepts(file,result))
  200.            {
  201.              FileModule.modules[a].process(file.name,result);
  202.              break;
  203.            }
  204.          }
  205.        }
  206.       };
  207.      
  208.      
  209.      
  210.      
  211.      
  212.      
  213.       var folder = new Array();
  214.      
  215.      
  216.       function CreateLocalDir(dir,path,index,file)
  217.       {
  218.         if(index<path.length-1)
  219.        {
  220.          if(!dir["/"+path[index]]){dir["/"+path[index]] = new Array();}
  221.          CreateLocalDir(dir["/"+path[index]],path,index+1,file);
  222.        }
  223.        else
  224.        {
  225.          dir.push({path:path[index],file:file});
  226.        }
  227.      }
  228.      
  229.      function UpdateLocalFiles(elem,event)
  230.      {
  231.        folder = new Array();
  232.        localFileExplorer.innerHTML = "";
  233.        var files = elem.files;
  234.        for (var i = 0; i < files.length; i++)
  235.        {
  236.          var path = files[i].webkitRelativePath.split("/");
  237.          CreateLocalDir(folder,path,0,files[i]);
  238.        }
  239.        for(var a in folder)
  240.        {
  241.          var div = document.createElement("div");
  242.          div.innerText = a;
  243.          div.className = "folder";
  244.          div.setAttribute("path",a);
  245.          div.addEventListener("click",function(event){DisplayLocalFolder(event,this)},false);
  246.          localFileExplorer.appendChild(div);
  247.        }
  248.      }
  249.      
  250.      function DisplayLocalFile(event,clicked)
  251.      {
  252.        if(clicked == event.target)
  253.        {
  254.          var file = clicked.file;
  255.          var fr = new FileReader();
  256.          fr.onload = function()
  257.          {
  258.            if(fr.readyState==2){FileModule.run(file,this.result)};
  259.          }
  260.          switch(file.type)
  261.          {
  262.            case "text/plain":
  263.            case "text/html":
  264.            case "text/css":
  265.            case "application/javascript":
  266.              fr.readAsText(file);
  267.              break;
  268.            case "image/jpeg":
  269.            case "image/png":
  270.            case "image/gif":
  271.              fr.readAsDataURL(file);
  272.              break;
  273.            default:
  274.              fr.readAsBinaryString(file);
  275.          }
  276.        }
  277.      }
  278.      
  279.      function CreateUnknownDisplay(name,result)
  280.      {
  281.        var cover = document.createElement("div");
  282.        var content = document.createElement("div");
  283.        
  284.        cover.className="cover";
  285.        content.className="content";
  286.        
  287.        content.innerText ="Unknown file type!\nDisplay \""+name+"\" using:\n";
  288.        
  289.        for(var a in FileModule.modules)
  290.        {
  291.          if(a!="Unknown")
  292.          {
  293.            var button = document.createElement("button");
  294.            button.innerHTML = a;
  295.            button.module = FileModule.modules[a];
  296.            button.onclick = function()
  297.            {
  298.              this.module.process(name,result);
  299.              cover.parentNode.removeChild(cover);
  300.            }
  301.            content.appendChild(button);
  302.          }
  303.        }
  304.        cover.appendChild(content);
  305.        explorer.appendChild(cover);
  306.      }
  307.      
  308.      function CreateTextDisplay(name,result)
  309.      {
  310.        var cover = document.createElement("div");
  311.        var close = document.createElement("div");
  312.        var hide = document.createElement("div");
  313.        var show = document.createElement("div");
  314.        var title = document.createElement("div");
  315.        var menu = document.createElement("div");
  316.        var content = document.createElement("textarea");
  317.        cover.className="cover";
  318.        close.className="close";
  319.        hide.className="hide";
  320.        show.className="show";
  321.        menu.className="menu";
  322.        title.className = "title";
  323.        content.className="content";
  324.        cover.title = title.innerText = name;
  325.        close.innerText = "[x]";
  326.        hide.innerText = "[-]";
  327.        show.innerText = "[+]";
  328.        hide.addEventListener("click",function()
  329.                               {
  330.                                 cover.className = "cover hide";
  331.                               },false);
  332.        show.addEventListener("click",function()
  333.                               {
  334.                                 cover.className = "cover";
  335.                               },false);
  336.        close.addEventListener("click",function()
  337.                                {
  338.                                  cover.parentNode.removeChild(cover);
  339.                                },false);
  340.        menu.appendChild(close);
  341.        menu.appendChild(hide);
  342.        menu.appendChild(show);
  343.        menu.appendChild(title);
  344.        content.value = result;
  345.        cover.appendChild(menu);
  346.        cover.appendChild(content);
  347.        explorer.appendChild(cover);
  348.        return new Array(cover,close,hide,show,title,menu,content);
  349.      }
  350.      
  351.      function CreateHexDisplay(name,result)
  352.      {
  353.        var cover = document.createElement("div");
  354.        var close = document.createElement("div");
  355.        var hide = document.createElement("div");
  356.        var show = document.createElement("div");
  357.        var title = document.createElement("div");
  358.        var menu = document.createElement("div");
  359.        var content = document.createElement("div");
  360.        cover.className="cover";
  361.        close.className="close";
  362.        hide.className="hide";
  363.        show.className="show";
  364.        menu.className="menu";
  365.        title.className = "title";
  366.        content.className="content";
  367.        cover.title = title.innerText = name;
  368.        close.innerText = "[x]";
  369.        hide.innerText = "[-]";
  370.        show.innerText = "[+]";
  371.        hide.addEventListener("click",function()
  372.                               {
  373.                                 cover.className = "cover hide";
  374.                               },false);
  375.        show.addEventListener("click",function()
  376.                               {
  377.                                 cover.className = "cover";
  378.                               },false);
  379.        close.addEventListener("click",function()
  380.                                {
  381.                                  cover.parentNode.removeChild(cover);
  382.                                },false);
  383.        menu.appendChild(close);
  384.        menu.appendChild(hide);
  385.        menu.appendChild(show);
  386.        menu.appendChild(title);
  387.        for(var a=0; a<result.length; a+=3)
  388.        {
  389.          var arr = new Array(result.charCodeAt(a),result.charCodeAt(a+1),result.charCodeAt(a+2));
  390.          var int = (arr[0]<<16)+(arr[1]<<8)+(arr[2]);
  391.          var foreground = "000000"+(int).toString(16);
  392.          var background = "000000"+(16777215-int).toString(16);
  393.          var res=document.createElement("span");
  394.          res.className="hex";
  395.          res.title=result[a]+result[a+1]+result[a+2];
  396.          res.innerText=foreground.substr(foreground.length-6);
  397.          res.style.backgroundColor ="#"+background.substr(background.length-6);
  398.          res.style.color ="#"+foreground.substr(foreground.length-6);
  399.          content.appendChild(res);
  400.        }
  401.        cover.appendChild(menu);
  402.        cover.appendChild(content);
  403.        explorer.appendChild(cover);
  404.        return new Array(cover,close,hide,show,title,menu,content);
  405.      }
  406.      
  407.      function CreateHTMLDisplay(name,result)
  408.      {
  409.        var cover = document.createElement("div");
  410.        var close = document.createElement("div");
  411.        var hide = document.createElement("div");
  412.        var show = document.createElement("div");
  413.        var title = document.createElement("div");
  414.        var toggle = document.createElement("div");
  415.        var menu = document.createElement("div");
  416.        var content = document.createElement("div");
  417.        var inp = document.createElement("textarea");
  418.        var prev = document.createElement("iframe");
  419.        
  420.        
  421.        cover.className="html cover";
  422.        close.className="close";
  423.        hide.className="hide";
  424.        show.className="show";
  425.        menu.className="menu";
  426.        title.className = "title";
  427.        toggle.className = "toggle";
  428.        content.className="content";
  429.        
  430.        inp.className="content";
  431.        prev.className="content";
  432.        
  433.        cover.title = title.innerText = name;
  434.        close.innerText = "[x]";
  435.        hide.innerText = "[-]";
  436.        show.innerText = "[+]";
  437.        toggle.innerText = "[preview]";
  438.        
  439.        hide.addEventListener("click",function()
  440.                               {
  441.                                 cover.className = "cover hide";
  442.                               },false);
  443.        show.addEventListener("click",function()
  444.                               {
  445.                                 cover.className = "cover";
  446.                               },false);
  447.        close.addEventListener("click",function()
  448.                                {
  449.                                  cover.parentNode.removeChild(cover);
  450.                                },false);
  451.        toggle.addEventListener("click",function()
  452.                                 {
  453.                                   if(toggle.innerText=="[preview]")
  454.                                   {
  455.                                     toggle.innerText="[code]";
  456.                                     inp.style.display="none";
  457.                                     prev.style.display="";
  458.                                   }
  459.                                   else
  460.                                   {
  461.                                     toggle.innerText="[preview]";
  462.                                     inp.style.display="";
  463.                                     prev.style.display="none";
  464.                                   }
  465.                                 },false);
  466.        
  467.        
  468.        prev.style.display="none";
  469.        inp.value = result;
  470.        inp.onchange = function(event)
  471.        {
  472.          prev.contentDocument.open();
  473.          prev.contentDocument.write(inp.value);
  474.          prev.contentDocument.close();
  475.        };
  476.        
  477.        content.appendChild(inp);
  478.        content.appendChild(prev);
  479.        
  480.        menu.appendChild(close);
  481.        menu.appendChild(hide);
  482.        menu.appendChild(show);
  483.        menu.appendChild(title);
  484.        menu.appendChild(toggle);
  485.        
  486.        cover.appendChild(menu);
  487.        cover.appendChild(content);
  488.        explorer.appendChild(cover);
  489.        
  490.        inp.onchange();
  491.        return new Array(cover,close,hide,show,title,toggle,menu,content,inp,prev);
  492.      }
  493.      
  494.      function CreatePHPDisplay(name,result)
  495.      {
  496.        var html = CreateHTMLDisplay(name,result);
  497.        var inp = html[8];
  498.        var prev = html[9];
  499.        inp.onchange = function(event)
  500.        {
  501.          dataInp.value = inp.value;
  502.          AjaxForm(previewForm,function(data)
  503.                    {
  504.                      prev.contentDocument.open();
  505.                      prev.contentDocument.write(data);
  506.                      prev.contentDocument.close();
  507.                    });
  508.        };
  509.        inp.onchange();
  510.      }
  511.      
  512.      function CreateImageDisplay(name,result)
  513.      {
  514.        var cover = document.createElement("div");
  515.        var close = document.createElement("div");
  516.        var hide = document.createElement("div");
  517.        var show = document.createElement("div");
  518.        var title = document.createElement("div");
  519.        var menu = document.createElement("div");
  520.        var content = document.createElement("div");
  521.        
  522.        cover.className="cover";
  523.        close.className="close";
  524.        hide.className="hide";
  525.        show.className="show";
  526.        menu.className="menu";
  527.        title.className = "title";
  528.        
  529.        content.className="content";
  530.        
  531.        cover.title = title.innerText = name;
  532.        
  533.        close.innerText = "[x]";
  534.        hide.innerText = "[-]";
  535.        show.innerText = "[+]";
  536.        
  537.        hide.addEventListener("click",function()
  538.                               {
  539.                                 cover.className = "cover hide";
  540.                               },false);
  541.        
  542.        show.addEventListener("click",function()
  543.                               {
  544.                                 cover.className = "cover";
  545.                               },false);
  546.        close.addEventListener("click",function()
  547.                                {
  548.                                  cover.parentNode.removeChild(cover);
  549.                                },false);
  550.        
  551.        menu.appendChild(close);
  552.        menu.appendChild(hide);
  553.        menu.appendChild(show);
  554.        menu.appendChild(title);
  555.        
  556.        content.style.backgroundImage  = "url("+result+")";
  557.        
  558.        cover.appendChild(menu);
  559.        cover.appendChild(content);
  560.        
  561.        explorer.appendChild(cover);
  562.        return new Array(cover,close,hide,show,title,menu,content);
  563.      }
  564.      
  565.      
  566.      
  567.      FileModule.create("Text",   CreateTextDisplay,   function(file,result){return /application
  568.  
  569. \/javascript|text\/(plain|css)/.test(file.type);});
  570.      FileModule.create("HTML",   CreateHTMLDisplay,   function(file,result){return /text\/html/.test
  571.  
  572. (file.type);});
  573.      FileModule.create("PHP",    CreatePHPDisplay,    function(file,result){return /.php$/.test
  574.  
  575. (file.name);});
  576.      FileModule.create("Image",  CreateImageDisplay,  function(file,result){return /^image\//.test
  577.  
  578. (file.type);});
  579.      FileModule.create("Hex",    CreateHexDisplay,    function(file,result){return /.exe$/.test
  580.  
  581. (file.name);});
  582.      FileModule.create("Unknown",CreateUnknownDisplay,function(file,result){return true;});
  583.      
  584.      function DisplayLocalFolder(event,clicked)
  585.      {
  586.        if(clicked == event.target)
  587.        {
  588.          var parent = event.target;
  589.          var alreadyOpen = parent.getElementsByTagName("div");
  590.          if(alreadyOpen.length>0)
  591.           {
  592.             while(alreadyOpen.length>0)
  593.             {
  594.               parent.removeChild(alreadyOpen[0]);
  595.             }
  596.           }
  597.           else
  598.           {
  599.             var path = parent.getAttribute("path").split(/(?=\/)/).filter(Boolean);
  600.             var dir = folder[path[0]];
  601.            
  602.             for(var a=1; a<path.length; a++)
  603.            {
  604.              dir = dir[path[a]];
  605.            }
  606.            for(var a in dir)
  607.            {
  608.              if(!/^[0-9]+$/.test(a))
  609.              {
  610.                var div = document.createElement("div");
  611.                div.innerText = a.substr(1);
  612.                div.className = "folder";
  613.                div.setAttribute("path",path.join("")+a);
  614.                div.addEventListener("click",function(event){DisplayLocalFolder(event,this)},false);
  615.                parent.appendChild(div);
  616.              }
  617.            }
  618.            for(var a in dir)
  619.            {
  620.              if(/^[0-9]+$/.test(a))
  621.              {
  622.                var div = document.createElement("div");
  623.                div.className = "file";
  624.                div.innerText = dir[a].path;
  625.                div.file = dir[a].file;
  626.                div.addEventListener("click",function(event){DisplayLocalFile(event,this)},false);
  627.                parent.appendChild(div);
  628.              }
  629.            }
  630.            
  631.          }
  632.        }
  633.      }
  634.    </script>
  635.   </head>
  636.   <body>
  637.     <form method="POST" action="ajax.php" id="previewForm">
  638.       <input type="hidden" name="data" id="dataInp" value=""/>
  639.       <input type="hidden" name="debug" id="debugInp" value="true"/>
  640.       <input type="hidden" name="save" id="save" value="no"/>
  641.       <input type="hidden" name="location" id="loc" value=""/>
  642.       <input type="hidden" id="autosave" name="savecb"/>
  643.     </form>
  644.     <div id="localFileExplorerWrap">
  645.       <input type="file" id="localFilesInput" webkitdirectory directory multiple
  646.  
  647. onchange="UpdateLocalFiles(this,event)" style="display:none"/>
  648.       <div id="localFileExplorerMenu">
  649.         <div class="menuButton">File Explorer
  650.           <div class="menu">
  651.             <div class="menuButton">New
  652.               <div class="menu" id="fileTypes">
  653.                 <div class="menuButton" type="text/plain">Text File</div>
  654.                 <div class="menuButton" type="image/png">Image</div>
  655.                 <div class="menuButton" type="text/html">PHP page</div>
  656.               </div>
  657.             </div>
  658.             <div class="menuButton" onclick="Save()">Save all</div>
  659.             <div class="menuButton" onclick="localFilesInput.click()">Open</div>
  660.           </div>
  661.         </div>
  662.       </div>
  663.       <div id="localFileExplorer" oncontextmenu="ShowOptions(event)"></div>
  664.     </div>
  665.     <div id="explorer">
  666.      
  667.     </div>
  668.   </body>
  669. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
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
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!