This is a pen, piggy-backing from the Query~ language, and is renamed Muffin$. I created both pens, but Muffin $tack seems to be easier to understand.
A Pen by Mink CBOS - Ephellon Dantzler on CodePen.
Created
November 22, 2014 20:37
-
-
Save Ephellon/83505977030b949fc65e to your computer and use it in GitHub Desktop.
Muffin $tack
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <title>Muffin$</title> | |
| <!-- Muffin$ (Muffin-Stack) JS library - Ephellon Dantzler !--> | |
| <body> | |
| <!-- key: | |
| -> [~^]$ - JS attachment | action to perform when "[~^]listeners" happens | |
| -> @ - href | |
| -> [~^]listeners - event listener[s], space seperated, exclude the "on" | "click," not "onclick" | |
| -> [~^]# - id[s], space seperated | |
| -> [~^]. - class[es], space seperated | |
| -> [~^]- - tag name[s], space seperated | |
| -> [~^]html - dialog (to show when "[~^]$" is triggered, makes it the new innerHTML) use "%html" for the original and the new to be displayed together | |
| -> != ... =! - comment | !==" ... "==! | |
| -> ^ - "not" | (same as "^#," finds 'other') what DOM to attach "^$" (or "$") to | |
| -> ~ - "and" | (same as "~#," attaches 'extra') extra DOM to attach to parent | |
| -> attr - attribute to attach (name) | |
| -> val - attribute to attach (value) | |
| -> @lang - language to use in this Query~ element. "Query~" is default. | |
| -> $.timeout - cron job timing, in milliseconds (timeout) | |
| -> $.interval - cron job timing, in milliseconds (interval) | |
| -> $.for - for loop | $.for="start::stop::increment::to-do" | |
| -> $.while - while loop | $.while="boolean::to-do" | |
| -> $.if - if loop | $.if="boolean::to-do" | |
| -> $.else - else | $.else="to-do" | |
| -> $.do - JS to execute even if "listeners" and/or "$" (don't) exist | |
| -> cron-job - script to execute when "$.timeout" or "$.interval" trigger, else "$" | |
| !--> | |
| <Muffin$ @lang="Muffin$" | |
| listeners="mouse-down mouse-up click" | |
| ~#="wim writ" $="getId('writ','Muffin$ is just a use of custom tags and a JS library.');" | |
| ^#="mo" ^$="getId('writ','Umm, up some');" | |
| $.timeout="5000" cron-job="getId('writ','umm, aren\'t you curious...');" | |
| html='<q id="quote" title="Neither is there anyone who loves, pursues, or desires pain itself, because it is pain."><i><b>Neque porro quisquam est qui dolorem ipsum quia dolor sit amet consectetur adipisci velit.</b></i></q> - <b>The Purposes of Good and Evil</b><br /><br />' | |
| css="color:#00aced;" | |
| >Opps, there was an error</Muffin$> | |
| <button id="wim"> | |
| What is Muffin$ | |
| </button> | |
| Or | |
| <button id="mo"> | |
| Move on-- | |
| </button> | |
| <br /> | |
| <p id="writ"> | |
| I'm just waiting :) | |
| </p> | |
| <br /> | |
| <script type="text/javascript" src="Muffin$.js"></script> | |
| </body> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // Muffin-Stack - Ephellon Dantzler Nov. 11, 2014 | 20:54 -06:00 CST | |
| function attr(w,a,v){ | |
| if(!w){return;} | |
| if(!v){ | |
| return w.getAttribute(a); | |
| } | |
| return w.setAttribute(a,v); | |
| } | |
| function getId(i,x,y){ | |
| if(i=='!'||!i){return;} | |
| g=document.getElementById(i); | |
| if(y){ | |
| attr(g,x,y); | |
| return; | |
| } | |
| if(x){ | |
| if(x!='$html'){g.innerHTML=x;} | |
| else{return g.innerHTML;} | |
| } | |
| return g; | |
| } | |
| function getClass(c,x,y,z){ | |
| if(c=='!'||!c){return;} | |
| g=document.getElementsByClassName(c); | |
| if(z){ | |
| attr(g[x],y,z); | |
| return; | |
| } | |
| if(y){ | |
| if(y!='$html'){g[x].innerHTML=y;} | |
| else{return g[x].innerHTML;} | |
| } | |
| return g; | |
| } | |
| function getTag(t,x,y,z){ | |
| if(t=='!'||!t){return;} | |
| g=document.getElementsByTagName(t); | |
| if(z){ | |
| attr(g[x],y,z); | |
| return; | |
| } | |
| if(y){ | |
| if(y!='$html'){g[x].innerHTML=y;} | |
| else{return g[x].innerHTML;} | |
| } | |
| return g; | |
| } | |
| function exec(x){ | |
| if(!!x){ | |
| eval(x.toString()); | |
| // var r = JSON.parse('{"k":"function(){'+x+';}"}'); | |
| // r.k(); | |
| } | |
| return; | |
| } | |
| // Muffin$ JS | |
| var Muffin$=Muffin$||(function() { | |
| var q = getTag('Muffin$'); | |
| if(!q){throw 'a "Muffin$" tag is needed';return;} | |
| for(var x=0; x<((q.length>1)?q.length:1); x++){ | |
| var stack = getTag('Muffin$')[x]; | |
| if(attr(stack,'@lang')&&attr(stack,'@lang')!='Muffin$'&&attr(stack,'@lang')!='Muffin-$tack'){return;} | |
| if(attr(stack,'#')){attr(stack,'id',attr(stack,'#'));} | |
| if(attr(stack,'.')){attr(stack,'class',attr(stack,'.'));} | |
| if(attr(stack,'@')){attr(stack,'href',attr(stack,'@'));} | |
| if(attr(stack,'attr')){attr(stack,attr(stack,'attr'),attr(stack,'val'));} | |
| if(attr(stack,'html')){stack.innerHTML=attr(stack,'html').toString().replace(/\%html/g,stack.innerHTML);} | |
| if(attr(stack,'css')){attr(stack,'style',attr(stack,'css'));} | |
| if(attr(stack,'$.do')){exec(attr(stack,'$.do'))} | |
| // normal | |
| if(attr(stack,'$')&&!(attr(stack,'~')||attr(stack,'~#')||attr(stack,'~.')||attr(stack,'~-')||attr(stack,'^')||attr(stack,'^#')||attr(stack,'^.')||attr(stack,'^-'))){ | |
| evl=attr(stack,'listeners').split(' '); | |
| for(var t=0; t<((evl.length>1)?evl.length:1); t++){ | |
| stack.addEventListener(evl[t].replace(/-/g,''), | |
| function(){ | |
| exec(attr(stack,'$')); | |
| if(attr(stack,'html')){ | |
| stack.innerHTML=attr(stack,'html'); | |
| } | |
| }); | |
| } | |
| } | |
| // extra | |
| if(attr(stack,'~')||attr(stack,'~#')){ | |
| amn=attr(stack,'~')||attr(stack,'~#'); | |
| amn=amn.split(' '); | |
| for(var u=0; u<((amn.length>1)?amn.length:1); u++){ | |
| stack_=getId(amn[u]); | |
| evl=attr(stack,'~listeners')||attr(stack,'listeners'); | |
| evl=evl.split(' '); | |
| for(var t=0; t<((evl.length>1)?evl.length:1); t++){ | |
| stack_.addEventListener(evl[t].replace(/-/g,''), | |
| function(){ | |
| exec(attr(stack,'~$')||attr(stack,'$')); | |
| if(attr(stack,'~html')||attr(stack,'html')){ | |
| stack.innerHTML=attr(stack,'~html')||attr(stack,'html'); | |
| } | |
| }); | |
| } | |
| } | |
| } | |
| // extra class | |
| if(attr(stack,'~.')){ | |
| var k; | |
| amn=attr(stack,'~.'); | |
| amn=amn.split(' '); | |
| for(var u=0; u<((amn.length>1)?amn.length:1); u++){ | |
| stack_=getClass(amn[u]); | |
| for(k=0; k<((stack_.length>1)?stack_.length:1); k++){ | |
| evl=attr(stack,'~listeners')||attr(stack,'listeners'); | |
| evl=evl.split(' '); | |
| for(var t=0; t<((evl.length>1)?evl.length:1); t++){ | |
| stack_[k].addEventListener(evl[t].replace(/-/g,''), | |
| function(){ | |
| exec(attr(stack,'~$')||attr(stack,'$')); | |
| if(attr(stack,'~html')||attr(stack,'html')){ | |
| stack_[k].innerHTML=attr(stack,'~html')||attr(stack,'html'); | |
| } | |
| }); | |
| } | |
| } | |
| } | |
| } | |
| // extra tag-name | |
| if(attr(stack,'~-')){ | |
| var k; | |
| amn=attr(stack,'~-'); | |
| amn=amn.split(' '); | |
| for(var u=0; u<((amn.length>1)?amn.length:1); u++){ | |
| stack_=getTag(amn[u]); | |
| for(k=0; k<((stack_.length>1)?stack_.length:1); k++){ | |
| evl=attr(stack,'~listeners')||attr(stack,'listeners'); | |
| evl=evl.split(' '); | |
| for(var t=0; t<((evl.length>1)?evl.length:1); t++){ | |
| stack_[k].addEventListener(evl[t].replace(/-/g,''), | |
| function(){ | |
| exec(attr(stack,'~$')||attr(stack,'$')); | |
| if(attr(stack,'~html')||attr(stack,'html')){ | |
| stack_[k].innerHTML=attr(stack,'~html')||attr(stack,'html'); | |
| } | |
| }); | |
| } | |
| } | |
| } | |
| } | |
| // alternate | |
| if(attr(stack,'^')||attr(stack,'^#')){ | |
| amn=attr(stack,'^')||attr(stack,'^#'); | |
| amn=amn.split(' '); | |
| for(var u=0; u<((amn.length>1)?amn.length:1); u++){ | |
| stack_=getId(amn[u]); | |
| evl=attr(stack,'^listeners')||attr(stack,'listeners'); | |
| evl=evl.split(' '); | |
| for(var t=0; t<((evl.length>1)?evl.length:1); t++){ | |
| stack_.addEventListener(evl[t].replace(/-/g,''), | |
| function(){ | |
| exec(attr(stack,'^$')||attr(stack,'$')); | |
| if(attr(stack,'^html')){ | |
| stack_.innerHTML=attr(stack,'^html'); | |
| } | |
| }); | |
| } | |
| } | |
| } | |
| // alternate class | |
| if(attr(stack,'^.')){ | |
| var k; | |
| amn=attr(stack,'^.'); | |
| amn=amn.split(' '); | |
| for(var u=0; u<((amn.length>1)?amn.length:1); u++){ | |
| stack_=getClass(amn[u]); | |
| for(k=0; k<((stack_.length>1)?stack_.length:1); k++){ | |
| evl=attr(stack,'^listeners')||attr(stack,'listeners'); | |
| evl=evl.split(' '); | |
| for(var t=0; t<((evl.length>1)?evl.length:1); t++){ | |
| stack_[k].addEventListener(evl[t].replace(/-/g,''), | |
| function(){ | |
| exec(attr(stack,'^$')||attr(stack,'$')); | |
| if(attr(stack,'^html')){ | |
| stack_[k].innerHTML=attr(stack,'^html'); | |
| } | |
| }); | |
| } | |
| } | |
| } | |
| } | |
| // alternate tag-name | |
| if(attr(stack,'^-')){ | |
| var k; | |
| amn=attr(stack,'^-'); | |
| amn=amn.split(' '); | |
| for(var u=0; u<((amn.length>1)?amn.length:1); u++){ | |
| stack_=getTag(amn[u]); | |
| for(k=0; k<((stack_.length>1)?stack_.length:1); k++){ | |
| evl=attr(stack,'^listeners')||attr(stack,'listeners'); | |
| evl=evl.split(' '); | |
| for(var t=0; t<((evl.length>1)?evl.length:1); t++){ | |
| stack_[k].addEventListener(evl[t].replace(/-/g,''), | |
| function(){ | |
| exec(attr(stack,'^$')||attr(stack,'$')); | |
| if(attr(stack,'^html')){ | |
| stack_[k].innerHTML=attr(stack,'^html'); | |
| } | |
| }); | |
| } | |
| } | |
| } | |
| } | |
| // timeout | |
| if(attr(stack,'$.timeout')){setTimeout(function(){exec(attr(stack,'cron-job')||attr(stack,'$'));},Number(attr(stack,'$.timeout').replace(/,/g,'')));} | |
| // interval | |
| if(attr(stack,'$.interval')){setInterval(function(){exec(attr(stack,'cron-job')||attr(stack,'$'));},Number(attr(stack,'$.interval').replace(/,/g,'')));} | |
| // for | |
| if(attr(stack,'$.for')){ | |
| f=attr(stack,'$.for').split('::'); | |
| for(var e=Number(f[0]); e<Number(f[1]); e+=Number(f[2])){ | |
| exec(f[3]); | |
| } | |
| } | |
| // while | |
| if(attr(stack,'$.while')){ | |
| f=attr(stack,'$.while').split('::'); | |
| while(f[0]){ | |
| exec(f[1]); | |
| } | |
| } | |
| // if | |
| if(attr(stack,'$.if')){ | |
| f=attr(stack,'$.if').split('::'); | |
| if(f[0]){ | |
| exec(f[1]); | |
| } | |
| if(!f[0]&&attr(stack,'$.else')){ | |
| exec(attr(stack,'$.else')+';'); | |
| } | |
| } | |
| stack.lang = 'Muffin$'; | |
| // end of main for | |
| } | |
| // end | |
| })(); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment