Export to JSON now has copy to clipboard button

Fixes #9
LupusUmbrae · May 30, 2016 · 97e004a · 97e004a
1 parent 75ab809
commit 97e004a
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 6 deletions.
diff --git a/static/javascript/kdm.js b/static/javascript/kdm.js
@@ -100,6 +100,8 @@
         $rootScope.timeline.options.push("Nemesis");
 
         $(function() {
+            new Clipboard('.btn');
+
             $('.dropdown-submenu').click(
             function(event) {
                 // stop bootstrap.js to hide the parents
@@ -128,7 +130,7 @@
                 }
             });
 
-            $("#loadjson").click(function() {
+            $("#loadjson-menu").click(function() {
                 $("#load-dialog").dialog("open");
             });
 
@@ -139,7 +141,7 @@
                 modal: true,
             });
 
-            $("#savejson").click(function() {
+            $("#savejson-menu").click(function() {
                 $('textarea#savejson').val(angular.element(document.body).scope().jsonify());
                 $("#save-dialog").dialog("open");
             });
@@ -359,7 +361,7 @@
     }
 
     function watchPrinciples(newVal, oldVal) {
-        if (newVal !== oldVal) {
+        if (newVal !== oldVal && newVal !== undefined && oldVal !== undefined) {
             var newCur;
             var oldCur;
             for (var i = 0; i < newVal.length; i++) {

diff --git a/templates/index.html b/templates/index.html
@@ -27,8 +27,8 @@
                 <li class="dropdown-submenu">
                   <a>Import/Export</a>
                   <ul class="dropdown-menu">
-                    <li><a id="savejson" href="javascript:void(0)">To JSON</a></li>
-                    <li><a id="loadjson" href="javascript:void(0)">Load JSON</a></li>
+                    <li><a id="savejson-menu" href="javascript:void(0)">To JSON</a></li>
+                    <li><a id="loadjson-menu" href="javascript:void(0)">Load JSON</a></li>
                   </ul>
                 </li>
                 <li role="separator" class="divider"></li>
@@ -62,7 +62,10 @@ <h1>Kingdom Death Monster</h1>
 
     <div id="save-dialog" title="From JSON" ng-cloak>
       <p>Copy JSON below</p>
-      <textarea rows="10" id="savejson" disabled="true"></textarea>
+      <textarea rows="10" id="savejson" readonly></textarea>
+      <button class="btn btn-default btn-copy" data-clipboard-target="#savejson">
+        Copy to clipboard
+      </button>
     </div>
 
     <div id="timeline-dialog" title="Add Event to Timeline">
@@ -96,6 +99,9 @@ <h1>Kingdom Death Monster</h1>
     <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js">
 </script>
 
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.5.10/clipboard.min.js">
+</script>
+
     <script type="text/javascript" src='static/javascript/kdm.js'>
 </script>
     <script type="text/javascript" src='static/javascript/kdm.config.js'>