Package Manager Thing
How do I make an package manager thing?
What is a package manager thing? How do you make a package manager thing? This script and codes were developed by Kyle Shanks on 04 August 2022, Thursday.
Package Manager Thing - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Package Manager Thing</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</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='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 src="js/index.js"></script>
</body>
</html>
Package Manager Thing - Script Codes CSS Codes
* { 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;
}
.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;
}
Package Manager Thing - Script Codes JS Codes
/*
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(array) }</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', }, ], 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) { code += '<p class="comment">// --- '+this.package_funcs[i][0]+' ---</p>'; code += this.package_funcs[i][1] } return code; }, check_funcs: function() { var output = []; for(i in this.package_funcs){output.push(this.package_funcs[i][0])} 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(this.func_lib[i].name === this.func_name) { $('.func-'+this.func_lib[i].id).addClass('added'); }; }; 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(this.package_funcs[i][0] === name) { this.package_funcs.splice(i,1); $('.func-'+index).removeClass('added'); } } } 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++) { 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"; }; }; $('#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(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 }; }; 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(); }; });
});
Developer | Kyle Shanks |
Username | mavrK |
Uploaded | August 04, 2022 |
Rating | 4 |
Size | 9,754 Kb |
Views | 42,504 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Hexagon Stuff | 5,802 Kb |
Idk yet | 5,894 Kb |
Metro Stuff | 5,077 Kb |
Swirly dot thing | 3,642 Kb |
Food Stuff | 7,387 Kb |
Test design stuff | 5,669 Kb |
Placeholder Site | 8,005 Kb |
Just social stuff | 4,617 Kb |
Unsplash Redesign Stuff | 10,046 Kb |
Hex Clock | 3,459 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
Blockquote design | Sjmcpherson | 1,863 Kb |
Review test | Otro_user_gil | 4,054 Kb |
Twinkling Stars | Ripley6811 | 2,750 Kb |
CSS3 Form Page Design | Rssatnam | 3,613 Kb |
A Pen by James Podles | Jpod | 2,656 Kb |
JavaScript constructors | Simboonlong | 2,415 Kb |
Headroom.js demo | WickyNilliams | 3,982 Kb |
Sassy Buttons | Elyseholladay | 2,299 Kb |
Right Click Menu | Anodpixels | 2,252 Kb |
Vue.js Starter | Andymerskin | 1,268 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!