Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <html>
- <head>
- <title>Texthooker</title>
- <script src="https://cdn.rawgit.com/lingtalfi/simpledrag/master/simpledrag.js"></script>
- <style type="text/css">
- body {
- background-color: #202020;
- color: #BCBCBC;
- height: 100%;
- }
- .container {
- position:fixed;
- top:3px;
- right:5px;
- display:inline-block;
- }
- .panes-container {
- display: flex;
- width: 100%;
- overflow: hidden;
- }
- .left-pane {
- width: 18%;
- background: #202020;
- }
- .panes-separator {
- width: 2%;
- background: red;
- position: relative;
- cursor: col-resize;
- }
- .right-pane {
- flex: auto;
- background: #202020;
- }
- .panes-container,
- .left-pane,
- .right-pane {
- margin: 0;
- padding: 0;
- height: 100%;
- }
- .panes-separator{
- background-color: #181818;
- width: 20px;
- }
- #counter {
- background-color:rgba(25,25,25,0.8);
- color:#9d9d9d;
- font-size:.4em;
- line-height:100%;
- float:left;
- padding-left:8px;
- padding-right:8px;
- padding-top:5px;
- padding-bottom:5px;
- }
- #remove_button {
- background-color:rgba(25,25,25,0.8);
- color:#9d9d9d;
- font-size:.4em;
- line-height:100%;
- float:right;
- margin-right:10px;
- padding-left:8px;
- padding-right:8px;
- padding-top:5px;
- padding-bottom:5px;
- cursor:pointer;
- cursor:hand;
- }
- </style>
- </head>
- <body>
- <div class="panes-container">
- <div class="left-pane" id="left-pane">
- allo
- </div>
- <div class="panes-separator" id="panes-separator"></div>
- <div class="right-pane" id="right-pane">
- aaaaa
- </div>
- </div>
- <div class="container">
- <!-- This is the div used for the "remove last line" button. -->
- <div id="remove_button" title="Remove last line">x</div>
- <!-- End button div. -->
- <!-- This is the div used for the counter. -->
- <div id="counter" title="No. of characters / No. of lines">0 / 0</div>
- <!-- End counter div. -->
- </div>
- <!-- jQuery is needed for the page to run. You can change this to an offline version if you prefer. -->
- <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
- <script>
- var leftPane = document.getElementById('left-pane');
- var rightPane = document.getElementById('right-pane');
- var paneSep = document.getElementById('panes-separator');
- // The script below constrains the target to move horizontally between a left and a right virtual boundaries.
- // - the left limit is positioned at 10% of the screen width
- // - the right limit is positioned at 90% of the screen width
- var leftLimit = 10;
- var rightLimit = 90;
- $(document).ready(function(){
- //The text inserter/scroller and the counter begin here.
- //These are needed later.
- oldlines = 0;
- chars = 0;
- //This listens for a node (line) to be inserted.
- document.addEventListener("DOMNodeInserted", function () {
- //Counter begins here. Get the current number of lines first.
- var lines = leftPane.length;
- //Second, confirm whether the node insertion was a new line.
- //(Rikai also inserts and removes a node (a div).)
- var isnew = lines - oldlines;
- if ( isnew > 0 ){
- //If it is a new line, do a character count of the line and add it to the running tally.
- var i=lines-1
- var newline = leftPane[i].innerHTML;
- var linechars = newline.length;
- newchars = chars + linechars;
- //Make the numbers look nice.
- var charsdisp = newchars.toLocaleString();
- var linesdisp = lines.toLocaleString();
- //Print the new counts into the counter.
- jQuery('#counter').text(charsdisp+' / '+linesdisp);
- //Get ready for the next line.
- oldlines = lines;
- chars = newchars;
- //The counter ends here
- //trying to move the text from the bottom to the left panel
- leftPane.innerHTML += document.getElementsByTagName('p')[0].innerHTML;
- var elements = div.getElementsByTagName('p');
- while (elements[0])
- elements[0].parentNode.removeChild(elements[0]);
- leftPane.innerHTML += $('body').children('p:last');
- $('body').children('p:last').remove();
- //text-scroller below
- //I've included it in the "if new line" statement.
- //(That is, it won't run unless a new line was added.)
- //Like this it won't autoscroll down every time Rikai is used.
- var LEEWAY = 200; // Amount of "leeway" pixels before latching onto the bottom.
- // Some obscene browser shit because making sense is for dweebs
- var b = document.body;
- var offset = b.scrollHeight - b.offsetHeight;
- var scrollPos = (b.scrollTop+offset);
- var scrollBottom = (b.scrollHeight - (b.clientHeight+offset));
- // If we are at the bottom, go to the bottom again.
- if (scrollPos >= scrollBottom - LEEWAY) {
- window.scrollTo(0,document.body.scrollHeight);
- }
- }; //This is the end of the "if new line" statement.
- }, false);
- //End of scroller and counter script.
- //Beginning of "remove last line" script.
- //Listen for click.
- document.getElementById("remove_button").addEventListener("click", function() {
- //Check whether there are any lines.
- var remove_lines = leftPane.length;
- if ( remove_lines > 0 ){
- //If there are, find the last line and do a character count.
- var q = remove_lines - 1;
- var last = leftPane[q].innerHTML;
- var lastlen = last.length;
- //Remove the last line.
- $('body').children('p:last').remove();
- //Update the counter.
- var newch = chars - lastlen;
- var newchdisp = newch.toLocaleString();
- var newl = oldlines - 1;
- var newldisp = newl.toLocaleString();
- jQuery('#counter').text(newchdisp+' / '+newldisp);
- //Prepare for next line.
- chars = newch;
- oldlines = newl;
- };
- });
- //End of "remove last line" script.
- });
- paneSep.sdrag(function (el, pageX, startX, pageY, startY, fix) {
- fix.skipX = true;
- if (pageX < window.innerWidth * leftLimit / 100) {
- pageX = window.innerWidth * leftLimit / 100;
- fix.pageX = pageX;
- }
- if (pageX > window.innerWidth * rightLimit / 100) {
- pageX = window.innerWidth * rightLimit / 100;
- fix.pageX = pageX;
- }
- var cur = pageX / window.innerWidth * 100;
- if (cur < 0) {
- cur = 0;
- }
- if (cur > window.innerWidth) {
- cur = window.innerWidth;
- }
- var right = (100-cur-2);
- leftPane.style.width = cur + '%';
- rightPane.style.width = right + '%';
- }, null, 'horizontal');
- </script>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement