add textbox

rudenoise · Apr 29, 2015 · 39526f4 · 39526f4
1 parent be06710
commit 39526f4
Show file tree

Hide file tree

Showing 7 changed files with 97 additions and 3 deletions.
diff --git a/TextAreas/TextAreas.Shared/js/default.js b/TextAreas/TextAreas.Shared/js/default.js
@@ -16,6 +16,7 @@
                 // Restore application state here.
             }
             textArea.setUp();
+            textBox.setUp();
 
             args.setPromise(WinJS.UI.processAll());
         }

diff --git a/TextAreas/TextAreas.Shared/js/textArea.js b/TextAreas/TextAreas.Shared/js/textArea.js
@@ -3,6 +3,9 @@
     var goBtn, textArea, output;
 
     function getContent() {
+        // swap line breaks for <br>
+        // in real app also needs escaping of tags etc... (is there anything built in?)
+        // also in app the area would need to grow to accomodate pasted/typed input without using scroll-bars
         output.innerHTML = textArea.value.replace(/[\r\n]{1,}/g, '<br></br>');
     }
 

diff --git a/TextAreas/TextAreas.Shared/js/textBox.js b/TextAreas/TextAreas.Shared/js/textBox.js
@@ -1,7 +1,50 @@
 (function () {
     'use strict';
+    var textBox, btn, out, savedRange;
+
+    function getContent() {
+        var innerHTML = toStaticHTML(textBox.innerHTML)
+            .replace(/(\<|\<\/)div\>/g, '')
+            .replace(/\<br\>/g, '<br></br>');
+        out.innerHTML = innerHTML;
+    }
+
     WinJS.Namespace.define('textBox', {
         setUp: function () {
+            textBox = document.getElementById('textBoxIn');
+            btn = document.getElementById('textBoxGo');
+            out = document.getElementById('textBoxOut');
+
+            textBox.onbeforepaste = function () {
+                savedRange = window.getSelection().getRangeAt(0);
+
+            };
+            textBox.onpaste = function (e) {
+                console.log('paste');
+                e.preventDefault();
+                e.returnValue = false;
+                var dataPackageView = Windows.ApplicationModel.DataTransfer.Clipboard.getContent();
+                if (dataPackageView.contains(Windows.ApplicationModel.DataTransfer.StandardDataFormats.text)) {
+                    dataPackageView.getTextAsync().done(function (text) {
+                        //var caretPos = getCaretPosition(ti);
+                        //textBox.innerText = textBox.innerText.slice(0, caretPos) + text + ti.innerText.slice(caretPos);
+                        //var caretPos = getCaretPosition();
+                        console.log(savedRange);
+                        var first = textBox.innerHTML.slice(0, savedRange.startOffset);
+                        first = first.replace(/\<br\>/g, '\n');
+                        first = first.replace(/\&nbsp;/g, ' ');
+                        var last = textBox.innerHTML.slice(savedRange.endOffset);
+                        last = last.replace(/\<br\>/g, '\n');
+                        last = last.replace(/\&nbsp\;/g, ' ');
+                        textBox.innerText = first + text + last;
+
+                    }, function (e) {
+                        console.error('paste error', e);
+                    });
+                }
+            };
+
+            btn.addEventListener('pointerdown', getContent, false);
         }
     });
 }());
diff --git a/TextAreas/TextAreas.Windows/bin/Debug/AppX/js/default.js b/TextAreas/TextAreas.Windows/bin/Debug/AppX/js/default.js
@@ -16,6 +16,7 @@
                 // Restore application state here.
             }
             textArea.setUp();
+            textBox.setUp();
 
             args.setPromise(WinJS.UI.processAll());
         }

diff --git a/TextAreas/TextAreas.Windows/bin/Debug/AppX/js/textArea.js b/TextAreas/TextAreas.Windows/bin/Debug/AppX/js/textArea.js
@@ -3,6 +3,9 @@
     var goBtn, textArea, output;
 
     function getContent() {
+        // swap line breaks for <br>
+        // in real app also needs escaping of tags etc... (is there anything built in?)
+        // also in app the area would need to grow to accomodate pasted/typed input without using scroll-bars
         output.innerHTML = textArea.value.replace(/[\r\n]{1,}/g, '<br></br>');
     }
 

diff --git a/TextAreas/TextAreas.Windows/bin/Debug/AppX/js/textBox.js b/TextAreas/TextAreas.Windows/bin/Debug/AppX/js/textBox.js
@@ -1,7 +1,50 @@
 (function () {
     'use strict';
+    var textBox, btn, out, savedRange;
+
+    function getContent() {
+        var innerHTML = toStaticHTML(textBox.innerHTML)
+            .replace(/(\<|\<\/)div\>/g, '')
+            .replace(/\<br\>/g, '<br></br>');
+        out.innerHTML = innerHTML;
+    }
+
     WinJS.Namespace.define('textBox', {
         setUp: function () {
+            textBox = document.getElementById('textBoxIn');
+            btn = document.getElementById('textBoxGo');
+            out = document.getElementById('textBoxOut');
+
+            textBox.onbeforepaste = function () {
+                savedRange = window.getSelection().getRangeAt(0);
+
+            };
+            textBox.onpaste = function (e) {
+                console.log('paste');
+                e.preventDefault();
+                e.returnValue = false;
+                var dataPackageView = Windows.ApplicationModel.DataTransfer.Clipboard.getContent();
+                if (dataPackageView.contains(Windows.ApplicationModel.DataTransfer.StandardDataFormats.text)) {
+                    dataPackageView.getTextAsync().done(function (text) {
+                        //var caretPos = getCaretPosition(ti);
+                        //textBox.innerText = textBox.innerText.slice(0, caretPos) + text + ti.innerText.slice(caretPos);
+                        //var caretPos = getCaretPosition();
+                        console.log(savedRange);
+                        var first = textBox.innerHTML.slice(0, savedRange.startOffset);
+                        first = first.replace(/\<br\>/g, '\n');
+                        first = first.replace(/\&nbsp;/g, ' ');
+                        var last = textBox.innerHTML.slice(savedRange.endOffset);
+                        last = last.replace(/\<br\>/g, '\n');
+                        last = last.replace(/\&nbsp\;/g, ' ');
+                        textBox.innerText = first + text + last;
+
+                    }, function (e) {
+                        console.error('paste error', e);
+                    });
+                }
+            };
+
+            btn.addEventListener('pointerdown', getContent, false);
         }
     });
 }());
diff --git a/TextAreas/TextAreas.Windows/bin/Debug/AppX/vs.appxrecipe b/TextAreas/TextAreas.Windows/bin/Debug/AppX/vs.appxrecipe
@@ -54,15 +54,15 @@
     </AppxPackagedFile>
     <AppxPackagedFile Include="C:\Users\rudenoise\Documents\TextAreas\TextAreas\TextAreas.Shared\js\default.js">
       <PackagePath>js\default.js</PackagePath>
-      <Modified>2015-04-29T09:21:56.564</Modified>
+      <Modified>2015-04-29T09:40:09.878</Modified>
     </AppxPackagedFile>
     <AppxPackagedFile Include="C:\Users\rudenoise\Documents\TextAreas\TextAreas\TextAreas.Shared\js\textArea.js">
       <PackagePath>js\textArea.js</PackagePath>
-      <Modified>2015-04-29T09:29:08.254</Modified>
+      <Modified>2015-04-29T09:32:44.590</Modified>
     </AppxPackagedFile>
     <AppxPackagedFile Include="C:\Users\rudenoise\Documents\TextAreas\TextAreas\TextAreas.Shared\js\textBox.js">
       <PackagePath>js\textBox.js</PackagePath>
-      <Modified>2015-04-29T09:21:21.755</Modified>
+      <Modified>2015-04-29T09:43:26.052</Modified>
     </AppxPackagedFile>
     <AppxPackagedFile Include="C:\Users\rudenoise\Documents\TextAreas\TextAreas\TextAreas.Windows\bin\Debug\ReverseMap\resources.pri">
       <PackagePath>resources.pri</PackagePath>