Drafts Directory: Fancy M.B

Action

Posted by @jeffmueller, Last update over 2 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.

With apologies to Tim Nahumck, who wrote the original Fancy Tweet action. This is based very heavily on his work. Everyone thank Tim for being awesome.

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;
	}

	@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;text-decoration: underline;">Post Composer</h2>
<h5 style="text-align: center;">Post are limited to 256 chars, max.</h5>

<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; onkeyup="countChars(this)"></textarea></form>
<p id="charNum" style="text-align:center;">256 characters remaining</p>

<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');

function doCommand(cmd) {
	Drafts.send("command", cmd);
	Drafts.send("postText", text.value);
	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"];
	
	if (!cmd) { return; }	
	if (cmd == "postIt") {
		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"
	
		let d = new Draft();
		d.content = text;
		draft.addTag("status")
		draft.update()
		
		// create and post HTTP request
		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