<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html lang='en' class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/mavrK/pen/aWvmPO?depth=everything&order=popularity&page=57&q=vue&show_forks=false" />
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css'>
<style class="cp-pen-styles">* {
box-sizing: border-box;
-webkit-transition: 0.3s cubic-bezier(0.6, 0, 0.2, 1);
transition: 0.3s cubic-bezier(0.6, 0, 0.2, 1);
}
body {
background-color: #eee;
font-family: monospace;
overflow-x: hidden;
padding: 50px 0 20px;
}
.abs-center {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.rela-block {
display: block;
position: relative;
}
.rela-inline {
display: inline-block;
position: relative;
}
h2 {
position: absolute;
top: -24px;
font-size: 48px;
letter-spacing: -2px;
font-family: "Fredoka One";
color: #fff;
}
.main-header {
color: #3d4e55;
margin: 40px 40px 60px;
font-size: 54px;
text-align: center;
}
.editor-container {
z-index: 5;
position: fixed;
top: 0;
bottom: 0;
left: 0;
min-width: 500px;
max-width: 800px;
padding-top: 20px;
background-color: rgba(4,21,38,0.9);
box-shadow: 2px 0 16px -1px rgba(0,0,0,0.3);
-webkit-transition: 0.4s cubic-bezier(0.6, 0, 0.2, 1);
transition: 0.4s cubic-bezier(0.6, 0, 0.2, 1);
}
.editor-container.hidden {
left: -800px;
box-shadow: 2px 0 16px -1px rgba(0,0,0,0);
}
.editor-header {
font-size: 24px;
color: #fff;
padding: 0 40px 16px;
outline: none;
}
.editor-header::after {
content: '';
position: absolute;
height: 1px;
right: 20px;
left: 20px;
bottom: 0;
background-color: rgba(255,255,255,0.2);
}
.editor-button-container {
position: absolute;
left: 16px;
bottom: 30px;
}
.editor-button {
z-index: 2;
padding: 6px 12px;
margin-left: 16px;
background-color: #59b;
cursor: pointer;
}
.editor-button:active {
background-color: #7bd;
-webkit-transition: 0s;
transition: 0s;
}
.editor-button.disabled {
opacity: 0.35;
cursor: default;
}
.editor-button.disabled:active {
background-color: #59b;
}
.editor-button.pack-button {
position: fixed;
left: 20px;
top: -40px;
}
.editor-button.pack-button.visible {
top: 0;
}
#code {
padding: 16px 30px 16px 54px;
max-height: calc(100% - 120px);
color: #fff;
font-family: monospace;
text-align: left;
border-radius: 2px;
outline: none;
counter-reset: step;
overflow-y: auto;
}
#code::-webkit-scrollbar {
width: 6px;
}
#code::-webkit-scrollbar-thumb {
background-color: rgba(255,255,255,0.3);
}
#code p {
display: block;
position: relative;
line-height: 16px;
white-space: pre-wrap;
}
#code p::before {
content: counter(step);
counter-increment: step;
position: absolute;
right: calc(100% + 12px);
color: #678;
}
.func-container {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
padding: 20px;
margin-bottom: 20px;
}
.func {
-webkit-box-flex: 1;
-ms-flex: 1 1 0;
flex: 1 1 0;
position: relative;
min-width: 240px;
margin: 0 20px 20px;
padding: 20px;
background-color: #fff;
color: #adbec5;
box-shadow: 0 3px 9px -2px rgba(0,0,0,0);
cursor: default;
}
.func:hover {
box-shadow: 0 3px 9px -2px rgba(0,0,0,0.16);
}
.func::before {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 5px;
}
.func-name {
color: #3d4e55;
font-size: 15px;
cursor: pointer;
padding-right: 30px;
}
.func-desc {
margin-top: 10px;
}
.quick-add {
position: absolute;
top: 15px;
right: 15px;
height: 15px;
width: 15px;
border: 1px solid;
}
.added .quick-add {
background-color: #31dda2;
}
.catg-test::before {
background-color: #999;
}
.catg-string::before {
background-color: #f4e46c;
}
.catg-array::before {
background-color: #f8668f;
}
.catg-object::before {
background-color: #6a528f;
}
.catg-collection::before {
background-color: #2b7489;
}
.catg-dom::before {
background-color: #bf8520;
}
.catg-utility::before {
background-color: #f44336;
}
#code .js1 {
color: #e68;
}
#code .js2 {
color: #7ff;
font-style: italic;
}
#code .js-num {
color: #a7c;
}
#code .function-name {
color: #6e6;
}
#code .string,
#code .string * {
color: #ffd658;
}
#code .function-args,
#code .function-args * {
color: #ffa500;
}
#code .comment,
#code .comment * {
color: #999;
}
</style></head><body>
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css?family=Fredoka+One" rel="stylesheet">
<!-- PAC MAN -->
<div id="app">
<!-- Page Header -->
<h2 class="rela-block main-header">Package Manager</h2>
<!-- Show Final Package -->
<div :class="['editor-button', 'pack-button', package_code?'visible':'']" @click='show_package'>Show Package</div>
<!-- Collection of Functions -->
<div v-for="(catg,index) in func_catgs" :class="['rela-block','func-container','fc-'+catg]" :key="index">
<h2>{{catg}} functions</h2>
<div v-for="func in func_lib" v-if="func.catg === catg" :key="func.id"
:class="['func', 'func-'+func.id, 'catg-'+func.catg]">
<div class="rela-inline func-name" @click="display_code(func.id)">{{func.name}}</div>
<div class="rela-block func-desc" v-if="func.desc">{{func.desc}}</div>
<div class="quick-add" @click="add_toggle(func.id, func.name, func.code)"></div>
</div>
</div>
<!-- Text Editor -->
<div class="editor-container hidden">
<div contentEditable="false" class="rela-block editor-header">{{func_name}}</div>
<div contentEditable="true" id="code" class="rela-block" spellcheck="false" v-html="code"></div>
<div class="editor-button-container">
<div v-show="!(func_name === package_name)" :class="['rela-inline', 'editor-button', 'add', check_funcs.includes(func_name)?'disabled':'']" @click="add_to_package">Add to Pack</div>
<div v-show="(func_name === package_name)" class="rela-inline editor-button export" @click="minify">Export Code</div>
<div v-show="(func_name === package_name)" class="rela-inline editor-button save" @click="save_package">Save</div>
<div class="rela-inline editor-button close" @click='hide_editor'>Close</div>
</div>
</div>
</div>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
<script >/*
Hi, this is a thing that I made! I call it a package manager (Pacman for short), but I don't really know what this kind of thing is called.
I'm not sure if this is already a thing, but I had an idea one day that it would be cool to have access to all of the functions from different js libraries and pick the ones that you need for your specific project. This basically is a small collection of functions that I wrote (some are shitty, but they illustrate the point) that can be selected and exported as a minified js file.
// --- Current Functionality ---
// - Adding Functions -
You can view a function's code by clicking on the name of the function. Within the function's code editor, you can make changes to the function's code before adding it to the final package. Clicking the 'Add to Package' button at the bottom of the editor will add the function to the final package.
// - Quick-Adding and Removing -
You can quickly add any function to the final package by clicking on the quick-add box on the right side of the function's info box. You can also remove a function that has already been added to the final package by unchecking the function's quick-add box.
// - Final Package -
When code is added to the final package, a 'Show Package' button will drop down from the top left side of the screen. In the Final Package Editor, you can make final edits to the code before exporting. You can also edit the final package's name by clicking on it at the top of the editor. You must click on the save button at the bottom of the editor to keep the updated name. The final package's name will be the name of the file that is exported.
// - Issues -
Currently, edits make to the final package's code will not be kept if functions are added or removed from the final package, so edits should only be made when adding the function initially or immediately before exporting.
*/
// --- TO DO ---
// - Figure out how to have edits to the final package kept
// - Choice of minification and file type on code export
// - A way to search/filter functions (is it necessary?)
// - Make the UI responsive (especially the editor haha)
// --- PACKAGE MANAGER ---
var pacman = new Vue({
el: '#app',
data: {
func_lib: [
{
id: 0,
name: 'Test Function',
code: '<p>var banana = new String();</p><p>banana = \'bread\';</p><p> </p><p>// Add Function</p><p>function add(x,y) {</p><p> return Number(x) + Number(y);</p><p>};</p>',
desc: 'Test function for testing. Do not pay attention to this',
catg: 'test',
},
{
id: 1,
name: 'Each',
code: "<p>function each(obj,func) {</p><p> if(typeof(obj) === 'object') {</p><p> for(key in object) { func(obj[key]) }</p><p> } else { func(obj) }</p><p>};</p>",
desc: 'Applies a given function to each item in the given array',
catg: 'collection',
},
{
id: 2,
name: 'Add Class',
code: '<p>function add_class(el, class_name) {</p><p> if(!el.className.includes(class_name)) {</p><p> el.className += " "+class_name;</p><p> }</p><p>};</p>',
desc: 'Add a class to an element',
catg: 'dom',
},
{
id: 3,
name: 'Remove Class',
code: '<p>function remove_class(el, class_name) {</p><p> if(el.className.includes(class_name)) {</p><p> el.className = el.className.split(" "+class_name).join("");</p><p> }</p><p>};</p>',
desc: 'Remove a class from an element',
catg: 'dom',
},
{
id: 4,
name: 'Toggle Class',
code: '<p>function toggle_class(el, class_name) {</p><p> (el.className.includes(class_name))?(</p><p> el.className = el.className.split(" "+class_name).join("")</p><p> ):(</p><p> el.className += " "+class_name</p><p> )</p><p>};</p>',
desc: 'Toggle element class',
catg: 'dom',
},
{
id: 5,
name: 'Has Class',
code: '<p>function has_class(el, class_name) {</p><p> return (el.className.includes(class_name))</p><p>};</p>',
desc: 'Check to see if an element has a particular class',
catg: 'dom',
},
{
id: 6,
name: 'First',
code: '<p>function first(array, n) {</p><p> if(n === undefined) {</p><p> return array[0]</p><p> } else {</p><p> return array.slice(0,n)</p><p> }</p><p>};</p>',
desc: 'Returns the first element of an array. Passing n will return the first n elements of the array.',
catg: 'array',
},
{
id: 7,
name: 'Last',
code: '<p>function last(array, n) {</p><p> if(n === undefined) {</p><p> return array[array.length - 1]</p><p> } else {</p><p> return array.slice(Math.max(array.length - n, 1))</p><p> }</p><p>};</p>',
desc: 'Returns the last element of an array. Passing n will return the last n elements of the array.',
catg: 'array',
},
{
id: 8,
name: 'Filter',
code: '<p>function filter(obj, func) {</p><p> if(Array.isArray(obj)) {</p><p> var output = [];</p><p> for(i in obj) {</p><p> if(func(obj[i])) {output.push(obj[i])}</p><p> }</p><p> } else if(typeof(obj) === "object") {</p><p> var output = {};</p><p> for(key in obj) {</p><p> if(func(obj[key])) {output[key] = obj[key]}</p><p> }</p><p> } else {</p><p> if(func(obj)) {return obj}</p><p> }</p><p> return output;</p><p>};</p>',
desc: 'Looks through each value in the list, returning an array of all the values that pass a truth test (predicate).',
catg: 'collection',
},
{
id: 9,
name: 'Reject',
code: '<p>function reject(obj, func) {</p><p> if(Array.isArray(obj)) {</p><p> var output = [];</p><p> for(i in obj) {</p><p> if(!func(obj[i])) {output.push(obj[i])}</p><p> }</p><p> } else if(typeof(obj) === "object") {</p><p> var output = {};</p><p> for(key in obj) {</p><p> if(!func(obj[key])) {output[key] = obj[key]}</p><p> }</p><p> } else {</p><p> if(!func(obj)) {return obj}</p><p> }</p><p> return output;</p><p>};</p>',
desc: 'Returns the values in list without the elements that the truth test (predicate) passes. The opposite of filter.',
catg: 'collection',
},
{
id: 10,
name: 'Every',
code: '<p>function every(obj, func) {</p><p> if(Array.isArray(obj)) {</p><p> for(i in obj) {</p><p> if(!func(obj[i])) {return false}</p><p> }</p><p> } else if(typeof(obj) === "object") {</p><p> for(key in obj) {</p><p> if(!func(obj[key])) {return false}</p><p> }</p><p> } else {</p><p> if(!func(obj)) {return false}</p><p> }</p><p> return true;</p><p>};</p>',
desc: 'Returns true if all of the values in the list pass the predicate truth test. Short-circuits and stops traversing the list if a false element is found.',
catg: 'collection',
},
{
id: 11,
name: 'Partition',
code: '<p>function partition(obj, func) {</p><p> if(Array.isArray(obj)) {</p><p> var pass = [], fail = [];</p><p> for(i in obj) { (func(obj[i]))?(pass.push(obj[i])):(fail.push(obj[i])) }</p><p> } else if(typeof(obj) === "object") {</p><p> var pass = {}, fail = {};</p><p> for(key in obj) { (func(obj[key]))?(pass[key] = obj[key]):(fail[key] = obj[key]) }</p><p> }</p><p> return [pass,fail];</p><p>};</p>',
desc: 'Split array into two arrays: one whose elements all satisfy predicate and one whose elements all do not satisfy predicate.',
catg: 'collection',
},
{
id: 12,
name: 'Random',
code: '<p>function random(a, b) {</p><p> if(a !== undefined && b !== undefined) {</p><p> return Math.floor(Math.random() * (b - a) + a)</p><p> } else if(a) {</p><p> return Math.floor(Math.random() * a)</p><p> } else {</p><p> return Math.floor(Math.random() * 2)</p><p> }</p><p>};</p>',
desc: 'Returns a random integer between the given mininum and maximum. One parameter will be treated as a max. Will return either 0 or 1 if no parameters are passed.',
catg: 'utility',
},
{
id: 13,
name: 'Keys',
code: '<p>function keys(obj) {</p><p> if(typeof(obj) === "object") {</p><p> var arr = [];</p><p> for(key in obj) {arr.push(key)}</p><p> return arr;</p><p> }</p><p>};</p>',
desc: 'Retrieve all the names of the object\'s own enumerable properties.',
catg: 'object',
},
{
id: 14,
name: 'Values',
code: '<p>function values(obj) {</p><p> if(typeof(obj) === "object") {</p><p> var arr = [];</p><p> for(key in obj) {arr.push(obj[key])}</p><p> return arr;</p><p> }</p><p>};</p>',
desc: 'Return all of the values of the object\'s own properties.',
catg: 'object',
},
{
id: 15,
name: 'Pairs',
code: '<p>function pairs(obj) {</p><p> if(typeof(obj) === "object") {</p><p> var arr = [];</p><p> for(key in obj) {arr.push([key,obj[key]])}</p><p> return arr;</p><p> }</p><p>};</p>',
desc: 'Convert an object into a list of [key, value] pairs',
catg: 'object',
},
{
id: 16,
name: 'Greatest Common Denominator',
code: '<p>function gcd(a,b) {</p><p> if(a === b) {</p><p> return a; // Same number</p><p> } else if(a && b) {</p><p> var big, small;</p><p> (a > b)?(big = a, small = b):(big = b, small = a);</p><p> </p><p> while(big%small !== 0) {</p><p> if(big%small === small) { </p><p> return false;</p><p> } else {</p><p> var num = big%small;</p><p> big = small;</p><p> small = num;</p><p> };</p><p> };</p><p> </p><p> if(small === 1) { return false };</p><p> return small;</p><p> } else { return false };</p><p>};</p>',
desc: 'Returns the greatest common denominator of the two given numbers.',
catg: 'utility',
}
],
func_catgs: ['test','collection','array','object','dom','utility'/*,'function'*/],
func_name: '',
code: '',
package_name: 'Final Package',
package_funcs: []
},
computed: {
package_code: function() {
var code = ''
for(i in this.package_funcs) {if (window.CP.shouldStopExecution(1)){break;}
code += '<p class="comment">// --- '+this.package_funcs[i][0]+' ---</p>';
code += this.package_funcs[i][1]
}
window.CP.exitedLoop(1);
return code;
},
check_funcs: function() {
var output = [];
for(i in this.package_funcs){if (window.CP.shouldStopExecution(2)){break;}output.push(this.package_funcs[i][0])}
window.CP.exitedLoop(2);
return output;
}
},
methods: {
show_editor: function() { $('.editor-container').removeClass('hidden'); },
hide_editor: function() {
$('.editor-header').attr('contentEditable',false);
$('.editor-container').addClass('hidden');
},
display_code: function(index) {
$('.editor-header').attr('contentEditable',false);
this.func_name = this.func_lib[index].name;
this.code = this.func_lib[index].code;
this.show_editor();
setTimeout(function(){ highlight(); }, 50);
},
add_to_package: function() {
if(!this.check_funcs.includes(this.func_name)) {
this.package_funcs.push([this.func_name,$('#code').html()]);
for(i in this.func_lib) {if (window.CP.shouldStopExecution(3)){break;}
if(this.func_lib[i].name === this.func_name) {
$('.func-'+this.func_lib[i].id).addClass('added');
};
}
window.CP.exitedLoop(3);
;
this.hide_editor();
}
},
quick_add: function(index, name, code) {
if(!this.check_funcs.includes(name)) {
this.package_funcs.push([name,code]);
$('.func-'+index).addClass('added');
}
},
add_toggle: function(index, name, code) {
if($('.func-'+index).hasClass('added')){
for(i in this.package_funcs) {if (window.CP.shouldStopExecution(4)){break;}
if(this.package_funcs[i][0] === name) {
this.package_funcs.splice(i,1);
$('.func-'+index).removeClass('added');
}
}
window.CP.exitedLoop(4);
} else { this.quick_add(index,name,code); }
},
show_package: function() {
$('.editor-header').attr('contentEditable',true);
this.func_name = this.package_name;
this.code = this.package_code;
this.show_editor();
setTimeout(function(){ highlight(); }, 50);
},
save_package: function() {
this.package_name = $('.editor-header').text();
this.func_name = $('.editor-header').text();
},
minify: function() {
for(var i = 0; i < $('#code p').length; i++) {if (window.CP.shouldStopExecution(5)){break;}
var el = $('#code p')[i];
if(el.querySelectorAll(":scope > .comment").length) {
var full_length = el.textContent.trim().length;
var span_length = el.querySelectorAll(":scope > .comment")[0].textContent.trim().length;
if(full_length === span_length) { el.className += " comment"; }
} else if(el.textContent == false) { el.className += " comment"; };
}
window.CP.exitedLoop(5);
;
$('#code .comment').remove();
var code = $('#code').text().replace(/\s+/g,' ');
download($('.editor-header').text().trim().replace(/\s+/g,'_')+'.js',code); // +.js for a JavaScript file
}
}
});
// File Download Function
function download(filename, text) {
var element = document.createElement('a');
element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
element.setAttribute('download', filename);
element.style.display = 'none';
document.body.appendChild(element);
element.click();
document.body.removeChild(element);
}
// --- SYNTAX HIGHLIGHTING STUFF ---
// RegEx Variables for Syntax Highlighting
var strReg1 = /"(.*?)"/g,
strReg2 = /'(.*?)'/g,
numReg = /\b(\d+)/g,
jsReg1 = /\b(new|if|else|do|while|switch|for|foreach|in|continue|break|return|typeof)(?=[^\w])/g,
jsReg2 = /\b(document|window|Array|String|Object|Number|Function|function|var|\.length|\.\w+)(?=[^\w])/g,
funcReg = /\b(function<\/span>)(\s+\w+)(\()(.*?)(?=[\)])(?=[^\w])/g,
commentReg = /(\/\/.*)/g;
// Syntax Highlighting
function highlight_syntax(){
$.each($('#code p'),function(){
var string = this.innerText, parsed = string.replace(/[ \t]/g, ' ');
parsed = parsed.replace(strReg1,'<span class="string">"$1"</span>');
parsed = parsed.replace(strReg2,"<span class=\"string\">'$1'</span>");
parsed = parsed.replace(jsReg1,'<span class="js1">$1</span>');
parsed = parsed.replace(jsReg2,'<span class="js2">$1</span>');
parsed = parsed.replace(numReg,'<span class="js-num">$1</span>');
parsed = parsed.replace(funcReg,'$1<span class="function-name">$2</span>$3<span class="function-args">$4</span>');
parsed = parsed.replace(funcReg,'$1<span class="function-name">$2</span>$3<span class="function-args">$4</span>');
parsed = parsed.replace(commentReg,'<span class="comment">$1</span>');
parsed = parsed.split('\n').join('<br>');
this.innerHTML = parsed;
});
};
function highlight() { highlight_syntax(); highlight_syntax(); };
// Getting and setting caret position
function getCaretPos(el) {
var sel, caretOffset = 0,
doc = el.ownerDocument || el.document,
win = doc.defaultView || doc.parentWindow;
if (typeof win.getSelection !== "undefined") {
sel = win.getSelection();
if (sel.rangeCount > 0) {
var range = win.getSelection().getRangeAt(0);
var preCaretRange = range.cloneRange();
preCaretRange.selectNodeContents(el);
preCaretRange.setEnd(range.endContainer, range.endOffset);
caretOffset = preCaretRange.toString().length;
};
} else if ( (sel = doc.selection) && sel.type !== "Control") {
var textRange = sel.createRange();
var preCaretTextRange = doc.body.createTextRange();
preCaretTextRange.moveToElementText(el);
preCaretTextRange.setEndPoint("EndToEnd", textRange);
caretOffset = preCaretTextRange.text.length;
};
return caretOffset;
};
function setCaretPos(el, pos){
// Loop through all child nodes
for(var node of el.childNodes){if (window.CP.shouldStopExecution(6)){break;}
if(node.nodeType == 3){ // If text node
if(node.length >= pos){
var range = document.createRange(), sel = window.getSelection();
range.setStart(node,pos);
range.collapse(true);
sel.removeAllRanges();
sel.addRange(range);
return -1; // Done
} else { pos -= node.length; };
} else {
pos = setCaretPos(node,pos);
if(pos == -1){ return -1; }; // no need to finish the for loop
};
}
window.CP.exitedLoop(6);
;
return pos; // needed because of recursion stuff
};
// For tabs (normally tab switches the focus out of the window)
function insertTab() {
var sel, range;
if (window.getSelection) {
sel = window.getSelection();
if (sel.getRangeAt && sel.rangeCount) {
range = sel.getRangeAt(0);
range.deleteContents();
range.insertNode( document.createTextNode(' ') );
}
} else if (document.selection && document.selection.createRange) {
document.selection.createRange().text = ' ';
};
};
// --- DOC READY ---
$(document).ready(function(){
var el = document.getElementById('code');
// Typing within the text-editor
$('#code').keyup(function(e){
// Highlight syntax and set cursor
if(e.keyCode >= 48 || e.keyCode === 32) {
var caretPos = getCaretPos(el);
highlight();
setCaretPos(el,caretPos);
};
});
$('#code').keydown(function(e){
// For Tabbing
if(e.which === 9) {
var caretPos = getCaretPos(el) + 2;
insertTab();
highlight();
setCaretPos(el,caretPos);
e.preventDefault();
};
});
});
//# sourceURL=pen.js
</script>
</body></html>
