Drafts Directory: Fancy Tweet

Action

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

Take an HTML prompt, and either tweet or save the tweet. Cancel to delete it forever. Because sometimes you don’t want to send a tweet.

Trusted member

Install

Steps

htmlpreview

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

<head>
  <title>"Tweet 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: #627EC9;
    }

    @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: #627EC9;
      }
    }

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

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

<form style="text-align:center"> <textarea id="tweetText" 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('tweet'); return false;">Tweet</button>
<button onclick="doCommand('save'); return false;">Save</button>
<button class="cancel" onclick="doCommand('cancel'); return false;"">Cancel</button>
</p>

<script>

const text = document.getElementById('tweetText');

function doCommand(cmd) {
	Drafts.send("command", cmd);
	Drafts.send("tweetText", text.value);
	Drafts.continue();
}

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

</html>

script (iOS only)

let f = () => {
	let cmd = context.previewValues["command"];
	let text = context.previewValues["tweetText"];
	
	if (!cmd) { return; }	
	if (cmd == "tweet") {
		// create twitter object
		var twitter = Twitter.create();
		// post tweet
		var success = twitter.updateStatus(text);
		if (success) {
			console.log(twitter.lastResponse);
			app.displaySuccessMessage("Posted to Twitter");
		}
		else {
			console.log(twitter.lastError);
			context.fail();
		}
	}
	else if (cmd == "save") {
		let d = new Draft();
		d.content = text;
		d.addTag("tweet");
		d.update();
		app.displayWarningMessage("Tweet saved in Drafts");
	}
	else if (cmd == "cancel") {
		app.displayInfoMessage("Tweet is gone forever…");
	}
}

f();

Options

After Success Default

Notification Error

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	Error
Log Level	Info