Browse Source

initial

master
mark 2 years ago
commit
a969bd5830
3 changed files with 132 additions and 0 deletions
  1. +39
    -0
      index.html
  2. +80
    -0
      script.js
  3. +13
    -0
      style.css

+ 39
- 0
index.html View File

@@ -0,0 +1,39 @@
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:300,300italic,700,700italic">
<link rel="stylesheet" href="//cdn.rawgit.com/necolas/normalize.css/master/normalize.css">
<link rel="stylesheet" href="//cdn.rawgit.com/milligram/milligram/master/dist/milligram.min.css">
<link rel="stylesheet" href="style.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script type="text/javascript" src="script.js"></script>
<title>emote text generator</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="column"><h1>Emote Text Generator</h1></div>
</div>
<div class="row">
<div class="column">
<form>
<fieldset>
<label for="emoteType">Text Emote</label>
<select id="emoteType">
<option value="hacker">Hacker Text (hacker)</option>
<option value="sm64">Donkey Kong (sm64)</option>
<option value="emoji">Emoji (regonal_indicator)</option>
</select>
<textarea placeholder="Input Text" id="inputBox"></textarea>
<textarea id="outputBox" disabled></textarea>
<a class="button" id="copyButton">Copy</a>
</fieldset>
</form>
</div>
</div>
</div>
<div class="footer"><a href="https://mastodon.technology/@mdszy">mark</a> made this. <a href="https://liberapay.com/mdszy/">tips if you hate money</a></div>
</body>
</html>

+ 80
- 0
script.js View File

@@ -0,0 +1,80 @@
function fallbackCopyTextToClipboard(text) {
var textArea = document.createElement("textarea");
textArea.value = text;
document.body.appendChild(textArea);
textArea.focus();
textArea.select();

try {
var successful = document.execCommand('copy');
var msg = successful ? 'successful' : 'unsuccessful';
console.log('Fallback: Copying text command was ' + msg);
} catch (err) {
console.error('Fallback: Oops, unable to copy', err);
}

document.body.removeChild(textArea);
}
function copyTextToClipboard(text) {
if (!navigator.clipboard) {
fallbackCopyTextToClipboard(text);
return;
}
navigator.clipboard.writeText(text).then(function() {
console.log('Async: Copying to clipboard was successful!');
}, function(err) {
console.error('Async: Could not copy text: ', err);
});
}

var replaceMapping = {
hacker: {
regexp: /[A-Za-z]/g,
replace: ':hacker_$&: '
},
sm64: {
regexp: /[A-Za-z0-9'"]/g,
replace: ':sm64_$&: ',
postReplaceMatch: [/"/g, /'/g],
postReplace: ['dblquote', 'quote']
},
emoji: {
regexp: /[A-Za-z0-9#\*]/g,
replace: ':regional_indicator_$&: ',
postReplaceMatch: [ /regional_indicator_0/g, /regional_indicator_1/g, /regional_indicator_2/g, /regional_indicator_3/g, /regional_indicator_4/g, /regional_indicator_5/g, /regional_indicator_6/g, /regional_indicator_7/g, /regional_indicator_8/g, /regional_indicator_9/g, /regional_indicator_#/g, /regional_indicator_\*/g ],
postReplace: ['zero', 'one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine', 'hash', 'keycap_star' ]
}
}

function updateOutput() {
let inString = $('#inputBox').val();
let selectedEmote = $('#emoteType').val();
let mapping = replaceMapping[selectedEmote];
let regexp = mapping.regexp;
let replaceStr = mapping.replace;
let outString = inString.replace(regexp, replaceStr).toLowerCase();
if(mapping.postReplaceMatch) {
for(let i = 0; i < mapping.postReplaceMatch.length; i++) {
outString = outString.replace(mapping.postReplaceMatch[i], mapping.postReplace[i]);
}
}
$('#outputBox').val(outString.trim());
}

$(document).ready(function() {
$('#inputBox').on('input propertychange', function(e) {
updateOutput();
});
$('#emoteType').change(function(e) {
updateOutput();
});
$('#copyButton').on('click', function(e) {
copyTextToClipboard($('#outputBox').val());
});
});

+ 13
- 0
style.css View File

@@ -0,0 +1,13 @@
textarea {
resize: none;
}

.footer {
position: absolute;
right: 0;
bottom: 0;
left: 0;
padding: 1rem;
background-color: #efefef;
text-align: center;
}

Loading…
Cancel
Save