Action

Fancy Tweet

Posted by @nahumck, Last update about 1 month 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.

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="Drafts.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();
    }
    </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);
    		}
    		else {
    			console.log(twitter.lastError);
    			context.fail();
    		}
    	}
    	else if (cmd == "save") {
    		let d = new Draft();
    		d.content = text;
    		d.addTag("tweet");
    		d.update();
    	}
    }
    
    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.