SHARE
TWEET

Untitled

a guest Jul 22nd, 2019 65 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <html>
  2. <head>
  3. <title>Texthooker</title>
  4.     <script src="https://cdn.rawgit.com/lingtalfi/simpledrag/master/simpledrag.js"></script>
  5.     <style type="text/css">
  6.  
  7.     body {
  8.         background-color: #202020;
  9.         color: #BCBCBC;
  10.         height: 100%;
  11.     }
  12.  
  13.     .container {
  14.         position:fixed;
  15.         top:3px;
  16.         right:5px;
  17.         display:inline-block;
  18.     }
  19.  
  20.     .panes-container {
  21.         display: flex;
  22.         width: 100%;
  23.         overflow: hidden;
  24.     }
  25.        
  26.     .left-pane {
  27.         width: 18%;
  28.         background: #202020;
  29.     }
  30.  
  31.     .panes-separator {
  32.         width: 2%;
  33.         background: red;
  34.         position: relative;
  35.         cursor: col-resize;
  36.     }
  37.  
  38.     .right-pane {
  39.         flex: auto;
  40.         background: #202020;
  41.     }
  42.  
  43.     .panes-container,
  44.     .left-pane,
  45.     .right-pane {
  46.         margin: 0;
  47.         padding: 0;
  48.         height: 100%;
  49.     }
  50.        
  51.        
  52.     .panes-separator{
  53.         background-color: #181818;
  54.         width: 20px;
  55.     }
  56.        
  57.     #counter {
  58.         background-color:rgba(25,25,25,0.8);
  59.         color:#9d9d9d;
  60.         font-size:.4em;
  61.         line-height:100%;
  62.         float:left;
  63.         padding-left:8px;
  64.         padding-right:8px;
  65.         padding-top:5px;
  66.         padding-bottom:5px;
  67.     }
  68.  
  69.     #remove_button {
  70.         background-color:rgba(25,25,25,0.8);
  71.         color:#9d9d9d;
  72.         font-size:.4em;
  73.         line-height:100%;
  74.         float:right;
  75.         margin-right:10px;
  76.         padding-left:8px;
  77.         padding-right:8px;
  78.         padding-top:5px;
  79.         padding-bottom:5px;
  80.         cursor:pointer;
  81.         cursor:hand;
  82.     }
  83.  
  84.     </style>
  85.    
  86. </head>
  87. <body>
  88.  
  89.  
  90.     <div class="panes-container">
  91.     <div class="left-pane" id="left-pane">
  92.         allo
  93.     </div>
  94.     <div class="panes-separator" id="panes-separator"></div>
  95.     <div class="right-pane" id="right-pane">
  96.         aaaaa
  97.     </div>
  98. </div>
  99.  
  100.     <div class="container">
  101.  
  102.     <!-- This is the div used for the "remove last line" button. -->
  103.         <div id="remove_button" title="Remove last line">x</div>
  104.     <!-- End button div. -->
  105.  
  106.     <!-- This is the div used for the counter. -->
  107.         <div id="counter" title="No. of characters / No. of lines">0 / 0</div>
  108.     <!-- End counter div. -->
  109.         </div>
  110.  
  111.  
  112.         <!-- jQuery is needed for the page to run. You can change this to an offline version if you prefer. -->
  113.         <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
  114.  
  115.         <script>
  116.  
  117.         var leftPane = document.getElementById('left-pane');
  118.         var rightPane = document.getElementById('right-pane');
  119.         var paneSep = document.getElementById('panes-separator');
  120.  
  121.            
  122.         // The script below constrains the target to move horizontally between a left and a right virtual boundaries.
  123.         // - the left limit is positioned at 10% of the screen width
  124.         // - the right limit is positioned at 90% of the screen width
  125.         var leftLimit = 10;
  126.         var rightLimit = 90;
  127.  
  128.            
  129.  
  130.          $(document).ready(function(){
  131.  
  132.         //The text inserter/scroller and the counter begin here.
  133.  
  134.         //These are needed later.
  135.         oldlines = 0;
  136.         chars = 0;
  137.  
  138.         //This listens for a node (line) to be inserted.
  139.         document.addEventListener("DOMNodeInserted", function () {
  140.           //Counter begins here. Get the current number of lines first.
  141.           var lines = leftPane.length;
  142.  
  143.           //Second, confirm whether the node insertion was a new line.
  144.           //(Rikai also inserts and removes a node (a div).)
  145.           var isnew = lines - oldlines;
  146.           if ( isnew > 0 ){
  147.               //If it is a new line, do a character count of the line and add it to the running tally.
  148.               var i=lines-1
  149.               var newline = leftPane[i].innerHTML;
  150.               var linechars = newline.length;
  151.               newchars = chars + linechars;
  152.  
  153.               //Make the numbers look nice.
  154.               var charsdisp = newchars.toLocaleString();
  155.               var linesdisp = lines.toLocaleString();
  156.  
  157.               //Print the new counts into the counter.
  158.               jQuery('#counter').text(charsdisp+' / '+linesdisp);
  159.  
  160.               //Get ready for the next line.
  161.               oldlines = lines;
  162.               chars = newchars;
  163.  
  164.               //The counter ends here
  165.              
  166.               //trying to move the text from the bottom to the left panel
  167.               leftPane.innerHTML += document.getElementsByTagName('p')[0].innerHTML;
  168.               var elements = div.getElementsByTagName('p');
  169.              
  170.               while (elements[0])
  171.                   elements[0].parentNode.removeChild(elements[0]);
  172.              
  173.               leftPane.innerHTML += $('body').children('p:last');
  174.               $('body').children('p:last').remove();
  175.              
  176.              
  177.               //text-scroller below
  178.               //I've included it in the "if new line" statement.
  179.               //(That is, it won't run unless a new line was added.)
  180.               //Like this it won't autoscroll down every time Rikai is used.
  181.  
  182.               var LEEWAY = 200; // Amount of "leeway" pixels before latching onto the bottom.
  183.  
  184.               // Some obscene browser shit because making sense is for dweebs
  185.               var b = document.body;
  186.               var offset = b.scrollHeight - b.offsetHeight;
  187.               var scrollPos = (b.scrollTop+offset);
  188.               var scrollBottom = (b.scrollHeight - (b.clientHeight+offset));
  189.  
  190.               // If we are at the bottom, go to the bottom again.
  191.               if (scrollPos >= scrollBottom - LEEWAY) {
  192.                  window.scrollTo(0,document.body.scrollHeight);
  193.               }
  194.  
  195.           }; //This is the end of the "if new line" statement.
  196.  
  197.         }, false);
  198.  
  199.         //End of scroller and counter script.
  200.  
  201.  
  202.         //Beginning of "remove last line" script.
  203.  
  204.         //Listen for click.
  205.         document.getElementById("remove_button").addEventListener("click", function() {
  206.  
  207.             //Check whether there are any lines.
  208.             var remove_lines = leftPane.length;
  209.             if ( remove_lines > 0 ){
  210.  
  211.                 //If there are, find the last line and do a character count.
  212.                 var q = remove_lines - 1;
  213.                 var last = leftPane[q].innerHTML;
  214.                 var lastlen = last.length;
  215.  
  216.                 //Remove the last line.
  217.                 $('body').children('p:last').remove();
  218.  
  219.                 //Update the counter.
  220.                 var newch = chars - lastlen;
  221.                 var newchdisp = newch.toLocaleString();
  222.                 var newl = oldlines - 1;
  223.                 var newldisp = newl.toLocaleString();
  224.                 jQuery('#counter').text(newchdisp+' / '+newldisp);
  225.  
  226.                 //Prepare for next line.
  227.                 chars = newch;
  228.                 oldlines = newl;
  229.             };
  230.         });
  231.  
  232.         //End of "remove last line" script.
  233.  
  234.         });  
  235.            
  236.         paneSep.sdrag(function (el, pageX, startX, pageY, startY, fix) {
  237.  
  238.             fix.skipX = true;
  239.  
  240.             if (pageX < window.innerWidth * leftLimit / 100) {
  241.                 pageX = window.innerWidth * leftLimit / 100;
  242.                 fix.pageX = pageX;
  243.             }
  244.             if (pageX > window.innerWidth * rightLimit / 100) {
  245.                 pageX = window.innerWidth * rightLimit / 100;
  246.                 fix.pageX = pageX;
  247.             }
  248.  
  249.             var cur = pageX / window.innerWidth * 100;
  250.             if (cur < 0) {
  251.                 cur = 0;
  252.             }
  253.             if (cur > window.innerWidth) {
  254.                 cur = window.innerWidth;
  255.             }
  256.  
  257.  
  258.             var right = (100-cur-2);
  259.             leftPane.style.width = cur + '%';
  260.             rightPane.style.width = right + '%';
  261.  
  262.         }, null, 'horizontal');
  263.  
  264.            
  265.            
  266.        
  267.         </script>
  268.  
  269. </body>
  270. </html>
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
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!
 
Top