started work on adding highlight ability #3

voxmedia · Aug 9, 2017 · 0149636 · 0149636
1 parent 2149df8
commit 0149636
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 0 deletions.
diff --git a/less/quotable.less b/less/quotable.less
@@ -304,9 +304,11 @@ canvas {
             font-weight: inherit;
             margin: 0;
             line-height: 110%;
+            // background-color: #fff;
 
             span {
                 line-height: inherit !important;
+                background-color: #fff200;
             }
         }
 
@@ -334,6 +336,10 @@ canvas {
         line-height: 1.3;
         display: block;
         margin-top: 0;
+
+        span{
+          background-color: #fff200;
+        }
     }
 
     .show-credit {

diff --git a/www/js/quotable.js b/www/js/quotable.js
@@ -119,6 +119,17 @@ function adjustFontSize(size) {
     };
 }
 
+function getSelectionText() {
+    var text = "";
+    if (window.getSelection) {
+      console.log();
+        text = window.getSelection().toString();
+    } else if (document.selection && document.selection.type != "Control") {
+        text = document.selection.createRange().text;
+    }
+    return text;
+}
+
 $(function() {
     $text = $('.poster blockquote p, .source');
     $save = $('#save');
@@ -183,6 +194,26 @@ $(function() {
     //     console.log($(this)[0].selectionStart);
     //     process_text();
     // });
+    var selectedDiv;
+    $('.poster blockquote p').on('mousedown', function(){
+      selectedDiv = this;
+    });
+
+    $('.poster .source').on('mousedown', function(){
+      selectedDiv = this;
+    });
+
+    $(window).on('mouseup', function(){
+      if(getSelectionText().length > 0){
+        var selectedText = getSelectionText(),
+            text = $(selectedDiv).text(),
+            textArray = text.split(selectedText);
+
+        textArray.splice(1, 0, '<span>'+selectedText.split(' ').join('</span><span> </span><span>')+'</span>');
+        $(selectedDiv).html(textArray.join(''));
+        $(selectedDiv).blur();
+      }
+    });
 
 
     var quoteEl = document.querySelectorAll('.poster blockquote');