Code: Select all
; ******************************
; Plugins
; ******************************
Macro InitPlugins(IsInitialized=#True) ; internal functions
CompilerIf IsInitialized
!"undefined"==typeof window.SpiderPlugins&&(window.SpiderPlugins={extensions:{},paths:{},names:[]})
CompilerElse
!window.SpiderPlugins={extensions:{},paths:{},names:[]};
CompilerEndIf
EndMacro
Procedure DeclareHeaderCSS(css.s)
!$('head').append( $('<link rel="stylesheet" type="text/css" />').attr('href', v_css) );
EndProcedure
Procedure DeclarePlugin(Plugin.s, Path.s, IsUsed=#True)
InitPlugins()
!,window.SpiderPlugins.paths[v_plugin]=v_path
!,v_isused && window.SpiderPlugins.names.push(v_plugin);
EndProcedure
Procedure UsePlugins(*FunctionUsingPlugins, EnforceDefine=#False)
!var cfg=$.extend({ enforceDefine: v_enforcedefine, paths: window.SpiderPlugins.paths }, window.SpiderPlugins.extensions);
!requirejs.config(cfg);
!require(window.SpiderPlugins.names, p_functionusingplugins);
InitPlugins(#False)
EndProcedure
; ******************************
; JSON Shorthand
; ******************************
#MemberEmpty=""
Macro OpenObjectJSON(member=#MemberEmpty)
CompilerIf #MemberEmpty=member
! {
CompilerElse
! member: {
CompilerEndIf
EndMacro
Macro CloseObjectJSON()
! },
EndMacro
Macro OpenArrayJSON(member=#MemberEmpty)
CompilerIf #MemberEmpty=member
! {
CompilerElse
! member: [
CompilerEndIf
EndMacro
Macro CloseArrayJSON()
! ],
EndMacro
Macro AddMemberJSON(member,value)
CompilerIf #True
! member:value,
CompilerEndIf
EndMacro
Macro AddValueJSON(value)
CompilerIf #True
! value,
CompilerEndIf
EndMacro
CompilerIf #PB_Compiler_IsMainFile
; *************************************
; EXAMPLE - Background Youtube video
; *************************************
Procedure CreateBackgroundVideo(YoutubeVideoId.s, IsLooping=#True, IsMute=#True)
!$('<div class="container" />').appendTo('body').tubular({videoId: v_youtubevideoid, repeat:v_islooping, mute:v_ismute});
!setTimeout(function(){
;! $('#tubular-container iframe').attr('src',$('#tubular-container iframe').attr('src')+'&iv_load_policy=3'); // remove annotation(s)
! $('#tubular-container,.container').addClass('fadeIn')
!}, 200);
EndProcedure
Procedure CreateWebsite(JqueryTubular,Organic,Absurd)
;your video background
CreateBackgroundVideo("X-dMOvEOQiM"); // 9hyHnSKE8os
;preprocessor to generate CSS
Protected dark_color.s = "rgba(0,0,0,.3)";
!var absurd = Absurd();
!var css = absurd.add({
OpenObjectJSON("a:link, a:visited") : AddMemberJSON("color","orange") : CloseObjectJSON()
OpenObjectJSON("a:hover") : AddMemberJSON("color","yellow") : AddMemberJSON("transition","1s color") : CloseObjectJSON()
OpenObjectJSON("body")
AddMemberJSON("bg","white")
AddMemberJSON("fz","20px")
AddMemberJSON("lh","24px")
AddMemberJSON("fontFamily","Helvetica, Arial, sans-serif")
AddMemberJSON("color","white")
OpenObjectJSON("#tubular-container,.container")
AddMemberJSON("opacity",0)
OpenObjectJSON("&.fadeIn")
AddMemberJSON("opacity",1)
AddMemberJSON("transition","1s opacity")
AddMemberJSON("transitionDelay","1s")
CloseObjectJSON()
CloseObjectJSON()
OpenObjectJSON(".container")
AddMemberJSON("paddingTop","30px")
AddMemberJSON("marginLeft","auto")
AddMemberJSON("marginRight","auto")
AddMemberJSON("width","800px")
OpenObjectJSON("section")
AddMemberJSON("marginTop","15px")
AddMemberJSON("marginBottom","15px")
AddMemberJSON("display","flex")
AddMemberJSON("flexFlow","row nowrap")
OpenObjectJSON("aside")
AddMemberJSON("flex","0 1 200px")
AddMemberJSON("marginRight","15px")
OpenObjectJSON("nav")
AddMemberJSON("display","flex")
AddMemberJSON("flexFlow","column nowrap")
AddMemberJSON("justifyContent","space-between")
OpenObjectJSON("a")
AddMemberJSON("color","white")
AddMemberJSON("marginBottom","5px")
AddMemberJSON("textDecoration","none")
AddMemberJSON("borderLeft","0px solid black")
AddMemberJSON("transition","0.2s border-left")
OpenObjectJSON("&:hover")
AddMemberJSON("borderLeft","10px solid red")
AddMemberJSON("transition","0.2s border-left")
CloseObjectJSON()
CloseObjectJSON()
CloseObjectJSON()
CloseObjectJSON()
OpenObjectJSON("article")
AddMemberJSON("flex","1 0 auto")
CloseObjectJSON()
CloseObjectJSON()
CloseObjectJSON()
OpenObjectJSON(".blackbox")
AddMemberJSON("bg", v_dark_color)
AddMemberJSON("pad", "10px")
CloseObjectJSON()
OpenObjectJSON(".shadow")
AddMemberJSON("textShadow","5px 5px 6px #000000")
CloseObjectJSON()
CloseObjectJSON()
!}).compile();
!$('<style />').html(css).appendTo('head');
;preprocessor to generate HTML
!var html = absurd.morph('html').add({
OpenObjectJSON("header.blackbox.shadow")
AddMemberJSON("h1","Fullscreen Background Video")
CloseObjectJSON()
OpenObjectJSON("section")
OpenObjectJSON("aside")
OpenArrayJSON("nav")
OpenObjectJSON() : AddMemberJSON("a.blackbox[href='#Home']","<i class='fa fa-home'></i> Home") : CloseObjectJSON()
OpenObjectJSON() : AddMemberJSON("a.blackbox[href='#Projects']","<i class='fa fa-git'></i> Projects") : CloseObjectJSON()
OpenObjectJSON() : AddMemberJSON("a.blackbox[href='#Downloads']","<i class='fa fa-download'></i> Downloads") : CloseObjectJSON()
OpenObjectJSON() : AddMemberJSON("a.blackbox[href='#About']","<i class='fa fa-info-circle'></i> About") : CloseObjectJSON()
CloseArrayJSON()
CloseObjectJSON()
OpenObjectJSON("article.blackbox")
AddMemberJSON("h3","Technical Details")
OpenArrayJSON("ul")
OpenObjectJSON() : AddMemberJSON("li","Video Source: <a href='https://youtu.be/X-dMOvEOQiM'>https://youtu.be/X-dMOvEOQiM</a>") : CloseObjectJSON()
OpenObjectJSON() : AddMemberJSON("li","Plugin: <a href='http://absurdjs.com/'>http://absurdjs.com/</a>") : CloseObjectJSON()
OpenObjectJSON()
OpenArrayJSON("li")
AddValueJSON("Plugin: ")
OpenObjectJSON() : AddMemberJSON("a[href='http://www.seanmccambridge.com/tubular/' ]","http://www.seanmccambridge.com/tubular/") : CloseObjectJSON()
AddValueJSON(" <i class='fa fa-thumbs-o-up'></i>")
CloseArrayJSON()
CloseObjectJSON()
CloseArrayJSON()
CloseObjectJSON()
CloseObjectJSON()
OpenObjectJSON("footer.blackbox.shadow")
AddMemberJSON("p","Demo powered by SpiderBasic")
CloseObjectJSON()
!}).compile();
!$('.container').append($(html));
EndProcedure
DeclareHeaderCSS("http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css") ;Awesome Image-Font Plugin
DeclarePlugin("JqueryTubular","//rawgit.com/jarc100/jquery-tubular/master/js/jquery.tubular.1.0") ;Tubular Plugin
DeclarePlugin("Organic","//cdnjs.cloudflare.com/ajax/libs/absurd/0.3.4/absurd.organic") ;Absurd Extension
DeclarePlugin("Absurd","//cdnjs.cloudflare.com/ajax/libs/absurd/0.3.4/absurd") ;Absurd Plugin
UsePlugins(@CreateWebsite())
CompilerEndIf