Drafts Directory: Fancy Post

Action

Posted by @jeffmueller, Last update over 3 years ago - Unlisted

Take an HTML prompt, and either post or save the post. Cancel to delete it forever. Because sometimes you don’t want to send a post. You can post to Micro.blog, Twitter, or both.

Install

Steps

htmlpreview

<!DOCTYPE html>
<html dir="auto">

<head>
  <title>"Post Composer"</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    @charset "utf-8";

    :root {
      --main-bg-color: white;
      --main-color: black;
      --alternate-bg-color: #efefef;
      --alternate-color: #222222;
      --main-border-color: #BBBBBB;
      --link-color: #48BB78;
    }

    @media (prefers-color-scheme: dark) {
      :root {
        --main-bg-color: #222222;
        --main-color: #eeeeee;
        --alternate-bg-color: #444444;
        --alternate-color: #cccccc;
        --main-border-color: #AAAAAA;
          --link-color: #48BB78;
      }
    }

    html {
      font-size: 100%;
      font-family: -apple-system, BlinkMacSystemFont, "helvetica neue", helvetica, roboto, noto, "segoe ui", arial, sans-serif;
      line-height: 1em;
      height: 100%;
    }

    body {
      margin: 0;
      padding: 1em;
      background-color: var(--main-bg-color);
      color: var(--main-color);
      height: 100%;
    }

    @media (max-device-width: 480px) {}

    @media (min-device-width: 481px) {
      body {
        margin: auto;
        max-width: 600px;
      }
    }

    blockquote {
      font-style: italic;
      margin: 1.5em 2em;
      padding: 1em;
      background-color: var(--alternate-bg-color);
      color: var(--alternate-color);
    }

    a {
      color: var(--link-color);
    }

    h4 {
    	margin: .25em 0;
    	padding: 0;
    }

    img {
      max-width: 90%;
    }
    
	button {
		color: #fff !important;
		text-transform: uppercase;
		text-decoration: none;
		background: var(--link-color);
		font-size: .9em;
		padding: .5em 1em;
		border-radius: 8px;
		display: inline-block;
		border: none;
		transition: all 0.4s ease 0s;
	}
	button:hover {
		letter-spacing: 1px;
		-webkit-box-shadow: 0px 5px 40px -10px rgba(0,0,0,0.57);
		-moz-box-shadow: 0px 5px 40px -10px rgba(0,0,0,0.57);
		box-shadow: 5px 40px -10px rgba(0,0,0,0.57);
		transition: all 0.4s ease 0s;
	}
        button.cancel {
             background-color:#bbbbbb;
        }
       
       form {
		background-color: var(--main-bg-color);
		color: var(--main-color);
	}

	textarea {
		padding: 1em;
		border-radius: 5px;
	}

	@media (prefers-color-scheme: dark) {
		textarea {
			border-color: #fff;
		}
	}

  </style>
</head>

<body>
<script>
// scripting taken from https://www.codexworld.com/live-character-counter-javascript/
function countChars(obj){
    var maxLength = 256;
    var strLength = obj.value.length;
    var charRemain = (maxLength - strLength);    
    if(charRemain < 0){
        document.getElementById("charNum").innerHTML = '<span style="color: red;">You have exceeded the limit of '+maxLength+' characters</span>';
    }else{
        document.getElementById("charNum").innerHTML = charRemain+' characters remaining';
    }
}
</script>

<div id="prompt" style="margin: auto; width: 80%; height: 40%;">
<h2 style="text-align: center;">Post Composer</h2>

<form style="text-align:center"> <textarea id="postText" style="margin:auto;width:90%;height:120px;font-size:100%;background-color: var(--main-bg-color);color: var(--main-color);font-family: -apple-system, sans-serif;maxlength="512" autofocus="true" onkeyup="countChars(this)"></textarea>
<p id="charNum" style="text-align:center;">256 characters remaining</p>

<p style="text-align: center;"><input type="checkbox" id="tweet-it" checked="checked"><label for="tweet-it">Twitter</label> <input type="checkbox" id="blog-it" checked="checked"><label for="blog-it">Micro.blog</label></p>

</form>

<p style="text-align: center;">
<button onclick="doCommand('postIt'); return false;">Post</button>
<button onclick="doCommand('save'); return false;">Save</button>
<button class="cancel" onclick="Drafts.cancel(); return false;"">Cancel</button>
</p>

<script>

const text = document.getElementById('postText');
const tweet = document.getElementById('tweet-it');
const micro = document.getElementById('blog-it');

function doCommand(cmd) {
	Drafts.send("command", cmd);
	Drafts.send("postText", text.value);
	Drafts.send("twitter", tweet.checked)
	Drafts.send("micro", micro.checked)
	Drafts.continue();
}

document.getElementById('postText').focus();
</script>
</div>
</body>

</html>

script (iOS only)

let f = () => {
  let cmd = context.previewValues["command"];
  let text = context.previewValues["postText"];
  let tweet_it = context.previewValues["twitter"];
  let micro = context.previewValues["micro"];
	
  if (!cmd) { return; }
	
  if (cmd == "postIt") {
    let d = new Draft();
    d.content = text;
    draft.addTag("status");
    draft.update();
		
    if (tweet_it == true) {
      var twitter = Twitter.create();
      var success = twitter.updateStatus(text);
      if (success) {
        console.log(twitter.lastResponse);
      }
      else {
        console.log(twitter.lastError);
        context.fail();
      }
    }
		
    if (micro == true) {
      var credential = Credential.create("Micro.blog", "Insert Micro.blog app token generated on Micro.blog account page.");
      credential.addTextField("apptoken", "App Token");
      credential.authorize();
      var appToken = credential.getValue("apptoken");
      var endpoint = "https://micro.blog/micropub";
      var http = HTTP.create();
      var response = http.request({
        "url": endpoint,
        "method": "POST",
        "encoding": "form",
        "data": {
          "h": "entry",
          "content": text
        },
        "headers": {
          "Authorization": "Bearer " + appToken
        }
      });

      console.log("Response: " + response.statusCode);

      if (response.statusCode != 200 && response.statusCode != 202) {
        context.fail();
      }
    }
  }
};

f();

Options

After Success Default

Notification Info

Log Level Info

Items available in the Drafts Directory are uploaded by community members. Use appropriate caution reviewing downloaded items before use.

After Success	Default
Notification	Info
Log Level	Info