New approach; trying to put as many files as possible on a remote ser…

…ver.
ocrdu · May 15, 2019 · 726a360 · 726a360
1 parent 888ae70
commit 726a360
Show file tree

Hide file tree

Showing 12 changed files with 78 additions and 55 deletions.
diff --git a/README.txt b/README.txt
@@ -1,12 +1,17 @@
-# share-on-steemit-button
 A simple Share-on-Steemit button
 
-All you need to put a simple share-on-Steemit button on a web page. Just put everything in a directory together somewhere and the example.html should work; you can put the DIV and its contents from the example in your own webpage.
+All you need to put a simple share-on-Steemit button on a web page. Put everything from the root directory in a directory together somewhere on a server and the example.html should work; you can put the DIV and its contents from the example in your own webpage.
 
-Note that: - there may be a newer version of steem.min.js on Github;
-           - the user must enter their private publishing key, not any other key;
+Don't forget to include the <BASE> element from the example.html file in the HEAD of your webpage-to-be-shared as well. This may break other links on your page; the alternative is setting a path to the place where the files in the "remote" directory are stored by hand in many places. I'm working on a better solution for this (trying to avoid server-side configuration).
+
+For now, I am hosting the files that are in the "remote" directory; please host them yourself and edit the <BASE> accordingly.
+
+A working demo can be found at https://ocrdu.nl/sosbtest/example.html.
+
+Note that: - the user must enter their private publishing key, not any other key;
            - there is only minimal input checking;
-           - the categories/tags of the posting made are hardcoded in shareonsteemit.js; you may want to change them;
+           - the categories/tags of the posting made are in pagetags.txt;
+           - the blurb you want to show for the shared page is in pageblurb.txt;
            - the slugifier that makes the permlink only does Latin, Greek, and Cyrillic alphabets;
            - a preview of the posting is activated by editing the body of the posting.
 

diff --git a/Remote/openpopup.js b/Remote/openpopup.js
@@ -0,0 +1,3 @@
+function openPopup() {
+  var popup = window.open("popup.html", "popupwindow", "toolbar=no, location=no, status=no, menubar=no, scrollbars=yes, resizable=yes, width=700, height=430, top=" + (screen.height-430)/4 + ", left=" + (screen.width-700)/2);
+}
diff --git a/steemit.html → Remote/popup.html b/steemit.html → Remote/popup.html
@@ -2,14 +2,14 @@
 <html lang="en" id="all">
   <head><title>Share page on Steemit</title>
     <meta charset="UTF-8">
-	<style>
-    h1,h2,h3,h4,h5,h6 {
-      font-family: Arial,Helvetica,sans-serif;
-    }
-	</style>
-    <script src="steem.min.js"></script>
+    <style>
+      h1,h2,h3,h4,h5,h6 {
+        font-family: Arial,Helvetica,sans-serif;
+      }
+    </style>
+    <script src="https://cdn.steemjs.com/lib/latest/steem.min.js"></script>
     <script src="showdown.min.js"></script>
-	<script src="shareonsteemit.js"></script>
+    <script src="shareonsteemit.js"></script>
   </head>
   <body style="background-color:#B2FFEE" onload="pasteParams(); resizeWindow();">
     <form>
@@ -24,11 +24,16 @@
       <br><hr><br>
       <div style="text-align:center;">
         <input type="text" id="title" placeholder="Title" size="80" maxlength="150" value="" onfocus="this.placeholder=''" onblur="this.placeholder='Title'" style="font-weight:bold; text-align:center; outline:none;" oninput="check()">
-		<br><br>
+  	    <br><br>
         <textarea id="article" rows="10" cols="80" oninput="check();preview();" style="outline:none;"></textarea>
-		<br><br>
+  	    <br><br>
         <input id="postbutton" type="button" style="font-weight:bold; background-color:#CCCCCC; color:#AAAAAA; padding:7px 16px; text-align:center; outline:none; border-radius:16px;" value="Post on Steemit" onClick="postArticle()" disabled>
       </div>
+      <input type="hidden" id="tag0" value="">
+      <input type="hidden" id="tag1" value="">
+      <input type="hidden" id="tag2" value="">
+      <input type="hidden" id="tag3" value="">
+      <input type="hidden" id="tag4" value="">
     </form>
 	<div id="preview"></div>
   </body>

diff --git a/shareonsteemit.js → Remote/shareonsteemit.js b/shareonsteemit.js → Remote/shareonsteemit.js
@@ -1,13 +1,12 @@
 function pasteParams() {
-  var params = location.search;
-  if (params.indexOf("&") != -1 && params.indexOf("title=") != -1 && params.indexOf("article=") != -1){
-    document.getElementById("title").setAttribute("value", decodeURIComponent(params.slice(0).split("&")[0].split("=")[1]));
-    document.getElementById("article").value = decodeURIComponent(params.slice(0).split("&")[1].split("=")[1]);
-    document.getElementById("article").innerHTML = document.getElementById("article").value;
-  }
+  var path = window.opener.document.location.toString();
+  path = path.substr(0, path.lastIndexOf("\/")) + "/";
+  document.getElementById("title").setAttribute("value", window.opener.document.title);
+  document.getElementById("article").value = window.opener.location.href;
+  document.getElementById("article").innerHTML = window.opener.location.href;
   try {
     var blurbRequest = new XMLHttpRequest(); //Should probably be implemented with fetch and promises these days, 
-    blurbRequest.open("GET", "pageblurb.txt", true); //but I couldn't get that to work consistently in all browsers
+    blurbRequest.open("GET", path + "pageblurb.txt", true); //but I couldn't get that to work consistently in all browsers
     blurbRequest.onreadystatechange = processBlurb;
     blurbRequest.send(null);
     function processBlurb() {
@@ -18,7 +17,30 @@ function pasteParams() {
       }
     }
   } catch(error){
-    console.log("No pageblurb.txt found: " + error);
+    console.log("Couldn't read pageblurb.txt: " + error);
+  }
+  document.getElementById("tag0").value = "sharedonsteemit"
+  try {
+    var tagsRequest = new XMLHttpRequest(); 
+    tagsRequest.open("GET", path + "pagetags.txt", true);
+    tagsRequest.onreadystatechange = processTags;
+    tagsRequest.send(null);
+    function processTags() {
+      if (tagsRequest.readyState == 4 && tagsRequest.status == 200) {
+        var tagstext = tagsRequest.responseText.toLowerCase().replace(/[^\w\s]/g,"").replace(/[\d_]/g,"");
+        var tagsarray = tagstext.split(" ");
+        tagsarray.splice(5);
+        var i, tagno;
+        for (i = 0; i < tagsarray.length; i++) {
+          tagno = "tag" + i.toString();
+          if (tagsarray[i].length > 2) {
+            document.getElementById(tagno).value = tagsarray[i];
+          }
+        }
+      }
+    }
+  } catch(error){
+    console.log("Couldn't read pagetags.txt: " + error);
   }
 }
 
@@ -29,27 +51,27 @@ function check() {
   var title = document.getElementById("title").value;
   var article = document.getElementById("article").value;
   if (title.length>0 && article.length>0 &&
-      account.length > 2  &&
-      account.length < 17  &&
+    account.length > 2  &&
+    account.length < 17  &&
 	  /^[a-z0-9\-\.]+$/.test(account)  &&
 	  /^[a-z]$/.test(account.charAt(0))  &&
 	  /^[a-z0-9]$/.test(account.charAt(account.length-1))  &&
-      key.length == 51 && 
+    key.length == 51 && 
 	  key.charAt(0) == "5" && 
 	  /^[123456789ABCDEFGHJKLMNPQRSTUVWXYZabcdefghijkmnopqrstuvwxyz]+$/.test(key) && 
 	  title.length > 0 && 
 	  article.length > 0) {
     document.getElementById("postbutton").disabled = false;
-	document.getElementById("postbutton").style.backgroundColor = "#06D6A9";
-	document.getElementById("postbutton").style.color = "black";
-	document.getElementById("postbutton").style.borderColor = "#5FBA7D";
-	document.getElementById("postbutton").style.cursor = "pointer";
+	  document.getElementById("postbutton").style.backgroundColor = "#06D6A9";
+	  document.getElementById("postbutton").style.color = "black";
+	  document.getElementById("postbutton").style.borderColor = "#5FBA7D";
+	  document.getElementById("postbutton").style.cursor = "pointer";
   } else {
     document.getElementById("postbutton").disabled = true;
     document.getElementById("postbutton").style.backgroundColor = "#CCCCCC";
-	document.getElementById("postbutton").style.color = "#AAAAAA";
-	document.getElementById("postbutton").style.borderColor = "";
-	document.getElementById("postbutton").style.cursor = "default";
+	  document.getElementById("postbutton").style.color = "#AAAAAA";
+	  document.getElementById("postbutton").style.borderColor = "";
+	  document.getElementById("postbutton").style.cursor = "default";
   }
 }
 
@@ -76,12 +98,16 @@ function preview() {
 function postArticle() {
   var username = document.getElementById("account").value;
   var postingkey = document.getElementById("key").value;
-  var category = "sharedonsteemit"; // First tag hardcoded here
   var title = document.getElementById("title").value;
   var uniquestring = new Date().toISOString().replace(/[^a-zA-Z0-9]+/g, '').toLowerCase();
   var permlink = slugify(uniquestring + "-" + title + "-shared on steemit");
   var body = document.getElementById("article").value;
-  steem.broadcast.comment(postingkey, "", category, username, permlink, title, body, {tags: [category, "ocrdu", "donate", "donations", ""]}, // Other tags hardcoded here
+  var category = document.getElementById("tag0").value;
+  var tag1 = document.getElementById("tag1").value;
+  var tag2 = document.getElementById("tag2").value;
+  var tag3 = document.getElementById("tag3").value;
+  var tag4 = document.getElementById("tag4").value;
+  steem.broadcast.comment(postingkey, "", category, username, permlink, title, body, {tags: [category, tag1, tag2, tag3, tag4]},
   function (err, result) {
     if (err) {
       alert('Something went wrong: ' + err);

diff --git a/showdown.min.js → Remote/showdown.min.js b/showdown.min.js → Remote/showdown.min.js
diff --git a/signup.png → Remote/signup.png b/signup.png → Remote/signup.png
diff --git a/steemit.png → Remote/steemit.png b/steemit.png → Remote/steemit.png
diff --git a/steemit_d.png → Remote/steemit_d.png b/steemit_d.png → Remote/steemit_d.png
diff --git a/example.html b/example.html
@@ -1,12 +1,14 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
+    <base href="https://ocrdu.nl/sosb/">
     <meta charset="UTF-8">
     <title>Share-on-Steemit button example</title>
   </head>
   <body>
     <div class="steemit" style="display:inline-block; vertical-align:middle;">
-      <a href="steemit.html" target="_blank" style="outline:none;" onclick="window.open('steemit.html?title=' + encodeURIComponent(document.title) + '&article=' + encodeURIComponent(location.href), 'targetWindow', 'toolbar=no, location=no, status=no, menubar=no, scrollbars=yes, resizable=yes, width=700, height=430, top=' + (screen.height-430)/4 + ', left=' + (screen.width-700)/2); return false;"><img src="steemit.png" alt="Steemit" onmouseover="this.src='steemit_d.png';" onmouseout="this.src='steemit.png';"></a>
+      <script src="openpopup.js"></script>
+      <img src="steemit.png" alt="Steemit" style="outline:none;" onmouseover="this.src='steemit_d.png'; style='cursor:pointer;'" onmouseout="this.src='steemit.png'; style='cursor:default;'" onclick="openPopup()">
     </div>
   </body>
 </html>
diff --git a/pageblurb.txt b/pageblurb.txt
@@ -2,5 +2,4 @@
 
 You can put the text you want to see shared for your page in the file *pageblurb.txt.*
 
-*If you delete pageblurb.txt, the article will only automatically show the URL of the page the button is on.*
-
+*If you delete pageblurb.txt, the article will only automatically show the URL of the page the button is on.*
diff --git a/pagetags.txt b/pagetags.txt
@@ -0,0 +1 @@
+sharedonsteemit ocrdu donate donations
diff --git a/steem.min.js b/steem.min.js
Original file line number	Diff line number	Diff line change
Expand Up		@@ -2,5 +2,4 @@

		You can put the text you want to see shared for your page in the file pageblurb.txt.

		If you delete pageblurb.txt, the article will only automatically show the URL of the page the button is on.

		If you delete pageblurb.txt, the article will only automatically show the URL of the page the button is on.