diff --git a/README.md b/README.md index 6523c75..e422416 100644 --- a/README.md +++ b/README.md @@ -3,29 +3,17 @@ This is an online tutorial for CraftKit. -1. Open Playground ([https://craftkit.github.io/craftkit-playground/](https://craftkit.github.io/craftkit-playground/)) -2. Open 1.'s browser console -3. Open a tutorial page listed below in another window -4. Copy and paste snippets documented in the tutorial into the 2.'s console +Open [Playground (https://craftkit.dev/craftkit-playground/)](https://craftkit.dev/craftkit-playground/) and load sample code, or write your own code to see how it works. Enjoy! - ## 📚 Tutorials -🏝 [CraftKit Basics](./craft-uikit.md) : Craft-UIKit basic logics -🏝 [Craft.Widget.QuickTools](./craft-widget-quicktools.md) -🏝 [Craft-Widget-Calendar](./craft-widget-calendar.md) -🏝 [Craft-Widget-NavigationGroup](./craft-widget-navigationgroup.md) -🏝 [Craft-Widget-StickyHeaderNavi](./craft-widget-stickyheadernavi.md) - - -## 🗒 Run locally - -``` -ws -v -p 8008 -d docs --spa index.html --spa.asset-test-fs -``` - +🏝 [CraftKit Basics](./tutorials/craft-uikit.md) : Craft-UIKit basic logics +🏝 [Craft.Widget.QuickTools](./tutorials/craft-widget-quicktools.md) +🏝 [Craft-Widget-Calendar](./tutorials/craft-widget-calendar.md) +🏝 [Craft-Widget-NavigationGroup](./tutorials/craft-widget-navigationgroup.md) +🏝 [Craft-Widget-StickyHeaderNavi](./tutorials/craft-widget-stickyheadernavi.md) ## 🖋 License diff --git a/docs/craft-uikit.min.js b/docs/craft-uikit.min.js deleted file mode 100644 index 1146e4c..0000000 --- a/docs/craft-uikit.min.js +++ /dev/null @@ -1 +0,0 @@ -window.Craft=function(t){var e={};function n(i){if(e[i])return e[i].exports;var o=e[i]={i:i,l:!1,exports:{}};return t[i].call(o.exports,o,o.exports,n),o.l=!0,o.exports}return n.m=t,n.c=e,n.d=function(t,e,i){n.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:i})},n.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},n.t=function(t,e){if(1&e&&(t=n(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var i=Object.create(null);if(n.r(i),Object.defineProperty(i,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var o in t)n.d(i,o,function(e){return t[e]}.bind(null,o));return i},n.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return n.d(e,"a",e),e},n.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},n.p="",n(n.s=0)}([function(t,e,n){"use strict";const i=n(1);t.exports=i.default||i},function(t,e,n){"use strict";n.r(e);var i={packagename:"Craft.Core.Defaults",BASE_DIV_NAME:"CraftRoot",ALLOW_COMPONENT_SHORTCUT:!1};class o{constructor(t){this.launch=t.launch,this.path=t.path,this.event=t.event}}var s={packagename:"Craft.Core.HashRouter",route:function(t,e){let n=window.location.hash.match(/^#\/(.*)/),i="";n&&(i=n[1]);let s=new o({launch:e,path:i,event:t||{}});a.getRootViewController().resolveRoutingRequest(s)},normalize:function(t){return t||(t=""),"#/"+(t=t.replace(/^#*\/*/,""))}},a={packagename:"Craft.Core.Context",rootViewController:"",app:"",setApp:function(t){this.app=t,this.app.router?this.router=this.app.router:this.router=s},getApp:function(){return this.app},setRootElement:function(t){this.rootElement=t},getRootElement:function(){return this.rootElement},setRootViewController:function(t){this.rootViewController=t,this.rootElement||(this.rootElement=document.getElementById(i.BASE_DIV_NAME)),t.viewWillAppear(),t.isViewLoaded||t.loadView(),this.rootElement.appendChild(t.view),t.viewDidAppear(),window.addEventListener("popstate",e=>{t.didReceivePopstate(e)})},getRootViewController:function(){return this.rootViewController},router:"",setRouter:function(t){this.router=t},getRouter:function(){return this.router}},r={packagename:"Craft.Core.Bootstrap",boot:function(t){if(!t)throw"no app";a.setApp(t),a.getApp().didBootApplication()}},h={packagename:"Craft.Core.PathRouter",route:function(t,e){let n=window.location.pathname,i=new o({launch:e,path:n,event:t||{}});a.getRootViewController().resolveRoutingRequest(i)},normalize:function(t){return t||(t=""),"/"+(t=t.replace(/^#*\/*/,""))}},l={packagename:"Craft.Core.ComponentStack",counter:0,container:{},push:function(t){this.container[t.componentId]=t},set:function(t,e){this.container[t]=e,i.ALLOW_COMPONENT_SHORTCUT&&(window[t]=e)},get:function(t){return this.container[t]},del:function(t){delete this.container[t],i.ALLOW_COMPONENT_SHORTCUT&&delete window[t]},nextSerial:function(){return this.counter++}},d={packagename:"Craft.Core.KeyboardManager",keyboard_actions:{},handler:function(t){Craft.Core.KeyboardManager.action(t.keyCode)},activate:function(){window.addEventListener("keyup",this.handler)},deactivate:function(){window.removeEventListener("keyup",this.handler)},register:function(t,e,n){t&&e&&n&&(this.keyboard_actions[e]||(this.keyboard_actions[e]={}),this.keyboard_actions[e][t]=n)},remove:function(t){if(t)for(var e=Object.keys(this.keyboard_actions),n=0;n{e.appendChild(n.view),i&&i(),n.viewDidAppear()})}appendView(t){this.appendSubView(t)}removeSubView(t){if(!t)return;let e,n;t instanceof p?e=t:(e=t.component,n=t.callback),e.viewWillDisappear(()=>{e.view.remove(),n&&n(),e.viewDidDisappear()})}removeView(t){this.removeSubView(t)}removeFromParent(t){this.parent.removeSubView(this)}replaceView(t){if(!t)return;let e,n,i;if(t instanceof p)e=this.root,n=t;else{if(t.id){let n=t.id.replace(/^#/,"");e=this.shadow.getElementById(n)}else e=t.target||this.root;n=t.component,i=t.callback}for(;e.firstChild;)e.removeChild(e.firstChild);this.appendSubView({target:e,component:n})}style(t){return".root {}"}template(t){return'
'}}var u={packagename:"Craft.Core.Transition",animate:function(t){new w(t).animate()}};class w{constructor(t){this.packagename="Craft.Core.Transition.Animator",this.DEFAULT_DURATION=150,this.DEFAULT_EASE="ease-in",this.options=t}animate(){let t=this.options.element,e=this.options.properties||{},n=this.options.duration||this.DEFAULT_DURATION,i=this.options.delay||0,o=this.options.ease||this.DEFAULT_EASE,s=this.options.callback;if(!t)return;let a=!1,r=[],h=Object.keys(e);for(let e=0;e1)return void(this.lastMultiTouch=Date.now());let e=t.touches[0].clientX,n=t.touches[0].clientY,i=this.xDown-e,o=this.yDown-n,s=Date.now()-this.tDown,a=Date.now()-this.lastMultiTouch;Math.abs(i)+Math.abs(o)Math.abs(o)?i>0?this.swipeLeftHandler&&this.swipeLeftHandler(t):this.swipeRightHandler&&this.swipeRightHandler(t):o>0?this.swipeUpHandler&&this.swipeUpHandler(t):this.swipeDownHandler&&this.swipeDownHandler(t),this.xDown=null,this.yDown=null,this.tDown=null)}}class g extends p{getViewController(){return this.viewController}setViewController(t){this.viewController=t}}class y extends g{constructor(){super(),this.packagename="Craft.UI.DefaultViewController"}viewDidLoad(t){this.enableContentTapped(),t&&t()}enableContentTapped(){m.enableTap({target:this.view,tap:t=>{c.notify("ContentTapped",t)}})}appendSubView(t){if(!t)return;let e;e=t instanceof p?t:t.component,e.setViewController(this),super.appendSubView(t)}style(){return"\n\t\t\t* { box-sizing:border-box; margin:0; padding:0; }\n\t\t\t:host {\n\t\t\t\theight: 100%;\n\t\t\t\twidth: 100%;\n\t\t\t\tmargin: 0px;\n\t\t\t\toverflow: hidden;\n\t\t\t\tbox-sizing: border-box;\n\t\t\t}\n\t\t\t.root {\n\t\t\t\theight: 100%;\n\t\t\t\twidth: 100%;\n\t\t\t\tmargin: 0px;\n\t\t\t\toverflow: hidden;\n\t\t\t\tbox-sizing: border-box;\n\t\t\t}\n\t\t"}template(){return'\n\t\t\t
\n\t\t'}}var C={hasDisplayCutout:function(){let t=/iPad|iPhone|iPod/.test(navigator.userAgent),e=window.devicePixelRatio||1,n=window.screen.width*e,i=window.screen.height*e;return!(!t||1125!==n||2436!==i)||(!(!t||1242!==n||2688!==i)||!(!t||828!==n||1792!==i))},isStandaloneMode:function(){let t=1==window.navigator.standalone,e=window.matchMedia("(display-mode: standalone)").matches;return t||e}};const b={};b.Core={Bootstrap:r,Context:a,Defaults:i,ComponentStack:l,KeyboardManager:d,NotificationCenter:c,Component:p,StickComponent:class extends p{init(){this.packagename?this.componentname=this.packagename.replace(/[\/\.]/g,"_"):this.componentname=this.constructor.name,this.componentId=this.componentname,ComponentStack.set(this.componentId,this)}},Transition:u,Gesture:m,Route:o,Router:{packagename:"Craft.Core.Router",route:function(t,e){}},HashRouter:s,PathRouter:h},b.UI={View:g,BlockView:class extends g{showView(t){this.view.style.display="block",t&&t()}hideView(t){this.view.style.display="none",t&&t()}style(t){return super.style(t)+"\n\t\t\t:host {\n\t\t\t\tdisplay:block;\n\t\t\t}\n\t\t"}},InlineBlockView:class extends g{showView(t){this.view.style.display="inline-block",t&&t()}hideView(t){this.view.style.display="none",t&&t()}style(t){return super.style(t)+"\n\t\t\t:host {\n\t\t\t\tdisplay:inline-block;\n\t\t\t}\n\t\t"}},DefaultViewController:y,DefaultRootViewController:class extends y{constructor(){super(),this.packagename="Craft.UI.DefaultRootViewController"}bringup(){this.didReceivePopstate(null,!0)}didReceivePopstate(t,e){a.getRouter().route(t,e)}pushState(t){let e=t.state,n=t.title,i=t.path;window.history.pushState(e,n,i)}replaceState(t){let e=t.state,n=t.title,i=t.path;window.history.replaceState(e,n,i)}resolveRoutingRequest(t){}},ModalViewController:class extends g{constructor(){super(),this.packagename="Craft.UI.ModalViewController",this.MaskConfig={},this.MaskConfig.color="#000",this.MaskConfig.opacity=.5,this.AnimationConfig={},this.AnimationConfig.duration=150,this.AnimationConfig.delayShow=0,this.AnimationConfig.delayHide=150,this.mask="",this.container="",this.content="",this.viewController=""}viewDidLoad(t){this.mask=this.shadow.getElementById("mask"),this.container=this.shadow.getElementById("container"),this.view.addEventListener("touchmove",t=>{t.preventDefault()}),this.mask.addEventListener("touchmove",t=>{t.preventDefault()})}setContent(t){t.isViewLoaded||t.loadView(),this.content=t,this.content.setViewController(this),this.container.style["margin-top"]=String(window.screen.height)+"px",this.container.innerHTML="",this.content.viewWillAppear(),this.container.appendChild(this.content.view)}showMask(t){this.mask.style.display="block",this.mask.style.opacity=this.MaskConfig.opacity,this.mask.style["background-color"]=this.MaskConfig.color,t&&t()}hideMask(t){u.animate({element:this.mask,properties:{opacity:0},duration:this.AnimationConfig.duration,delay:this.AnimationConfig.delayHide,callback:()=>{this.mask.style.display="none",t&&t()}})}showContent(t){this.showMask(),this.content.viewDidAppear(),u.animate({element:this.container,properties:{"margin-top":"0px"},duration:this.AnimationConfig.duration,delay:this.AnimationConfig.delayShow,callback:t})}hideContent(t){this.hideMask(),this.content.viewWillDisappear(),u.animate({element:this.container,properties:{"margin-top":String(window.screen.height)+"px"},duration:this.AnimationConfig.duration,delay:this.AnimationConfig.delay,callback:()=>{this.content.viewDidDisappear(),this.hideMask(t)}})}style(){return"\n\t\t\t* { \n\t\t\t\tbox-sizing:border-box; margin:0; padding:0;\n\t\t\t}\n\t\t\t:host {\n\t\t\t\tposition: fixed;\n\t\t\t\ttop: 0;\n\t\t\t\tleft: 0;\n\t\t\t\twidth: 100vw;\n\t\t\t\theight: 100vh;\n\t\t\t\toverflow-x: hidden;\n\t\t\t\toverflow-y: hidden;\n\t\t\t\t-webkit-tap-highlight-color:rgba(0,0,0,0);\n\t\t\t\t-webkit-touch-callout: none;\n\t\t\t}\n\t\t\t.root {\n\t\t\t\twidth: 100vw;\n\t\t\t\theight: 100vh;\n\t\t\t\t-webkit-tap-highlight-color:rgba(0,0,0,0);\n\t\t\t\t-webkit-touch-callout: none;\n\t\t\t}\n\t\t\t.mask {\n\t\t\t\tposition: fixed;\n\t\t\t\ttop: 0;\n\t\t\t\tleft: 0;\n\t\t\t\twidth: 100vw;\n\t\t\t\theight: 100vh;\n\t\t\t\tpadding-top: env(safe-area-inset-top);\n\t\t\t\tpadding-bottom: env(safe-area-inset-bottom);\n\t\t\t\tbackground-color: #000;\n\t\t\t\topacity: 0.5;\n\t\t\t\toverflow-x: hidden;\n\t\t\t\toverflow-y: hidden;\n\t\t\t\t-webkit-tap-highlight-color:rgba(0,0,0,0);\n\t\t\t\t-webkit-touch-callout: none;\n\t\t\t}\n\t\t\t.container {\n\t\t\t\tdisplay: block;\n\t\t\t\tposition: absolute;\n\t\t\t\ttop: 0px;\n\t\t\t\tleft: 0px;\n\t\t\t\tmargin-top: 0px;\n\t\t\t\tpadding-top: env(safe-area-inset-top);\n\t\t\t\tpadding-bottom: env(safe-area-inset-bottom);\n\t\t\t\tmin-width: 100vw;\n\t\t\t\theight: 100vh;\n\t\t\t\tcolor: #000;\n\t\t\t\toverflow-x: hidden;\n\t\t\t\toverflow-y: hidden;\n\t\t\t}\n\t\t"}template(){return'\n\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t
\n\t\t'}},Device:C},b.Widget={},b.usePackage=function(t){t.inject(b)};e.default=b}]); \ No newline at end of file diff --git a/docs/index.css b/docs/index.css new file mode 100644 index 0000000..095bd9a --- /dev/null +++ b/docs/index.css @@ -0,0 +1,195 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body, +html { + height: 100%; + font-family: 'Roboto Mono', monospace; + background-color: #282c34; + color: #abb2bf; + display: flex; + flex-direction: column; +} + +.playground-container { + display: flex; + flex: 1; + flex-direction: row; + flex-grow: 1; + overflow: hidden; +} + +.preview-command-wrapper { + display: flex; + flex: 1; + flex-direction: column; +} + +/* Header styles */ +h1 { + padding: 20px; + font-size: 24px; + font-weight: 700; + color: #61afef; +} + +h3 { + font-weight: 700; + margin-bottom: 10px; + color: #61afef; +} + +p { + margin-bottom: 20px; +} + +/* Form element styles for textarea */ +textarea { + background-color: #282c34; + color: #abb2bf; + border-radius: 5px; + padding: 10px; + font-size: 14px; + resize: none; + flex-grow: 1; + margin-bottom: 10px; + border: 1px solid #61afef; + transition: background-color 0.3s ease; +} + +/* Form element styles for select */ +select { + background-color: #282c34; + color: #abb2bf; + border-radius: 5px; + padding: 10px; + font-size: 14px; + height: 40px; + border: 1px solid #61afef; + width: 60%; + appearance: none; + transition: background-color 0.3s ease; + background: url('data:image/svg+xml;utf8,') + no-repeat right 10px center; +} + +/* Form element styles for button */ +button { + background-color: #282c34; + color: #abb2bf; + border-radius: 5px; + padding: 10px 20px; + font-size: 14px; + height: 40px; + cursor: pointer; + border: none; + font-weight: bold; + transition: background-color 0.3s ease; + margin-top: 10px; +} + +button:hover { + background-color: #528bca; +} + +/* Selector-wrapper styles */ +.selector-wrapper { + display: flex; + justify-content: center; + align-items: center; + margin-top: 10px; + margin-bottom: 10px; + margin-left: 10px; + margin-right: auto; + width: 33%; + height: 60px; +} + +.selector-wrapper select { + margin: 0 10px; +} + +.selector-wrapper button { + margin: 0 10px; + background-color: #343942; +} +.selector-wrapper button:hover { + background-color: #528bca; +} + +.code-editor { + display: flex; + flex: 1; + flex-direction: column; + padding: 20px; + overflow: hidden; + margin: 20px; + border-radius: 10px; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); + background-color: #343942; +} + +.command-executor { + display: flex; + flex: 1; + flex-direction: column; + padding: 20px; + overflow: hidden; + margin: 0 20px 20px 0; + border-radius: 10px; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); + background-color: #343942; +} + +#preview-container { + display: flex; + flex: 1; + flex-direction: column; + padding: 20px; + overflow: hidden; + margin: 20px 20px 20px 0; + border-radius: 10px; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); + background-color: #343942; +} + +.CodeMirror { + height: 100%; + min-height: 100%; + border-radius: 5px; +} + +#js-code { + min-height: 200px; +} + +#command-input { + min-height: 200px; +} + +#preview { + display: flex; + flex: 1; + flex-grow: 1; + overflow: auto; + flex-direction: column; + padding: 20px; + overflow: hidden; + background-color: #ffffff; + margin: 20px; + border-radius: 10px; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); +} + +.js-code-wrapper { + flex-grow: 1; + overflow: auto; +} + +.command-editor-wrapper { + flex-grow: 1; + overflow: auto; +} diff --git a/docs/index.html b/docs/index.html index d2e7d09..f8852e0 100644 --- a/docs/index.html +++ b/docs/index.html @@ -1,70 +1,133 @@ - + + - - - - CraftKit Playground - - - - - - + + + CraftKit Playground + + + + + + + + + - + + +

CraftKit Playground

+
+ + +
+
+
+

Class

+

Write your CraftKit classes here

+
+
+
+
+
+
+

Preview

+
+ +
+
+

Execute Command

+

Write your CraftKit operation here

+
+
+
+ +
+
+
- + + \ No newline at end of file diff --git a/docs/logo.gif b/docs/logo.gif deleted file mode 100644 index 6d75374..0000000 Binary files a/docs/logo.gif and /dev/null differ diff --git a/docs/sampledata/simple_style.css b/docs/sampledata/simple_style.css new file mode 100644 index 0000000..f748f02 --- /dev/null +++ b/docs/sampledata/simple_style.css @@ -0,0 +1,2 @@ +h1 { color:red; } +p { line-height: 2em; } diff --git a/docs/samples/Accessing_Instance_Variables_from_Template_Literals/classes.txt b/docs/samples/Accessing_Instance_Variables_from_Template_Literals/classes.txt new file mode 100644 index 0000000..c3af0e8 --- /dev/null +++ b/docs/samples/Accessing_Instance_Variables_from_Template_Literals/classes.txt @@ -0,0 +1,18 @@ +class Example extends Craft.UI.View { + constructor(options){ + super(options); + this.data = { val: 'Hello!' }; + } + action(str){ + alert(str); + } + template(self){ + return ` +
+
+ ${this.data.val} traditional looks and feel +
+
+ `; + } +} \ No newline at end of file diff --git a/docs/samples/Accessing_Instance_Variables_from_Template_Literals/command.txt b/docs/samples/Accessing_Instance_Variables_from_Template_Literals/command.txt new file mode 100644 index 0000000..ce048ba --- /dev/null +++ b/docs/samples/Accessing_Instance_Variables_from_Template_Literals/command.txt @@ -0,0 +1,3 @@ +var example = new Example(); +example.loadView(); +Craft.Core.Context.getRootViewController().appendSubView(example); diff --git a/docs/samples/Cascading_ViewController_and_GoF_Facade_Pattern/classes.txt b/docs/samples/Cascading_ViewController_and_GoF_Facade_Pattern/classes.txt new file mode 100644 index 0000000..2afcfa4 --- /dev/null +++ b/docs/samples/Cascading_ViewController_and_GoF_Facade_Pattern/classes.txt @@ -0,0 +1,68 @@ +class PanelController extends Craft.UI.DefaultViewController { + viewDidLoad(callback) { + for (let i = 0; i < 9; i++) { + let p = new Panel({ + delegate: this, + num: i, + }); + this.appendView({ + id: "container", + component: p, + }); + } + if (callback) { + callback(); + } + } + forcus(num) { + this.shadow.getElementById("forcus").innerHTML = num; + } + style(componentId) { + return ` + .root { box-sizing:border-box; } + #container { + width: 318px; + display:flex; flex-direction:row; flex-wrap:wrap; + margin-right:auto; margin-left:auto; + } + `; + } + template(componentId) { + return ` +
+
+ Selected: +
+
+
+ `; + } +} +class Panel extends Craft.UI.View { + constructor(options) { + super(options); + this.delegate = options.delegate; + this.data = { num: options.num }; + } + style(componentId) { + return ` + .root { + box-sizing:border-box; + width:100px; height:100px; margin:3px; + background-color:#eee; + display: flex; + justify-content: center; + align-items: center; + } + `; + } + template(componentId) { + return ` +
+
+ select: ${this.data.num} +
+
+ `; + } +} \ No newline at end of file diff --git a/docs/samples/Cascading_ViewController_and_GoF_Facade_Pattern/command.txt b/docs/samples/Cascading_ViewController_and_GoF_Facade_Pattern/command.txt new file mode 100644 index 0000000..01be1a2 --- /dev/null +++ b/docs/samples/Cascading_ViewController_and_GoF_Facade_Pattern/command.txt @@ -0,0 +1,3 @@ +var panelController = new PanelController(); +panelController.loadView(); +Craft.Core.Context.getRootViewController().appendSubView(panelController); diff --git a/docs/samples/Cascading_ViewController_and_GoF_Facade_Pattern_2/classes.txt b/docs/samples/Cascading_ViewController_and_GoF_Facade_Pattern_2/classes.txt new file mode 100644 index 0000000..6e6d7f3 --- /dev/null +++ b/docs/samples/Cascading_ViewController_and_GoF_Facade_Pattern_2/classes.txt @@ -0,0 +1,66 @@ +class PanelController extends Craft.UI.DefaultViewController { + viewDidLoad(callback) { + for (let i = 0; i < 9; i++) { + let p = new Panel({ + num: i, + }); + this.appendView({ + id: "container", + component: p, + }); + } + if (callback) { + callback(); + } + } + forcus(num) { + this.shadow.getElementById("forcus").innerHTML = num; + } + style(componentId) { + return ` + .root { box-sizing:border-box; } + #container { + width: 318px; + display:flex; flex-direction:row; flex-wrap:wrap; + margin-right:auto; margin-left:auto; + } + `; + } + template(componentId) { + return ` +
+
+ Selected: +
+
+
+ `; + } +} +class Panel extends Craft.UI.View { + constructor(options) { + super(options); + this.data = { num: options.num }; + } + style(componentId) { + return ` + .root { + box-sizing:border-box; + width:100px; height:100px; margin:3px; + background-color:#eee; + display: flex; + justify-content: center; + align-items: center; + } + `; + } + template(componentId) { + return ` +
+
+ select: ${this.data.num} +
+
+ `; + } +} \ No newline at end of file diff --git a/docs/samples/Cascading_ViewController_and_GoF_Facade_Pattern_2/command.txt b/docs/samples/Cascading_ViewController_and_GoF_Facade_Pattern_2/command.txt new file mode 100644 index 0000000..01be1a2 --- /dev/null +++ b/docs/samples/Cascading_ViewController_and_GoF_Facade_Pattern_2/command.txt @@ -0,0 +1,3 @@ +var panelController = new PanelController(); +panelController.loadView(); +Craft.Core.Context.getRootViewController().appendSubView(panelController); diff --git a/docs/samples/Component_Structure_and_Instance_Identification/classes.txt b/docs/samples/Component_Structure_and_Instance_Identification/classes.txt new file mode 100644 index 0000000..1d9fe05 --- /dev/null +++ b/docs/samples/Component_Structure_and_Instance_Identification/classes.txt @@ -0,0 +1,64 @@ +class Vehicle extends Craft.UI.View { + whoami() { + return this.shadow.getElementById("text").innerHTML; + } + style(componentId) { + return ` + .root { color: red; } + `; + } + template(componentId) { + return ` +
+ Generic Vehicle +
+ `; + } +} + +class Bike extends Vehicle { + style(componentId) { + return super.style(componentId) + ` + .root { color: blue; } + `; + } + template(componentId) { + return ` +
+ I'm Bike. +
+ `; + } +} + +class Car extends Vehicle { + style(componentId) { + return super.style(componentId) + ` + .root { color: purple; } + `; + } + template(componentId) { + return ` +
+ I'm Car. +
+ `; + } +} +class DangerousTruck extends Car { + ignite() { + this.shadow.getElementById("text").innerHTML = "🚛🔥🔥🔥"; + } + cooldown() { + this.shadow.getElementById("text").innerHTML = "I'm COOL Truck."; + } + template(componentId) { + return ` +
+ + I'm dangerous Truck. + +
+ `; + } +} diff --git a/docs/samples/Component_Structure_and_Instance_Identification/command.txt b/docs/samples/Component_Structure_and_Instance_Identification/command.txt new file mode 100644 index 0000000..9b88601 --- /dev/null +++ b/docs/samples/Component_Structure_and_Instance_Identification/command.txt @@ -0,0 +1,7 @@ +var truck_view = new DangerousTruck(); +truck_view.loadView(); +Craft.Core.Context.getRootViewController().appendSubView(truck_view); + +var car_view = new Car(); +car_view.loadView(); +Craft.Core.Context.getRootViewController().appendSubView(car_view); diff --git a/docs/samples/Creating_a_Package_Namespace/classes.txt b/docs/samples/Creating_a_Package_Namespace/classes.txt new file mode 100644 index 0000000..76ad70d --- /dev/null +++ b/docs/samples/Creating_a_Package_Namespace/classes.txt @@ -0,0 +1,32 @@ +// top level package + +const MyCompany = {}; + +MyCompany.usePackage = function(packages){ + packages.inject(MyCompany); +}; + +window.MyCompany = MyCompany; + +// MyApp package definition (in a separate file/module) + +class MyBaseView extends Craft.UI.View { + template(componentId) { + return `
This is MyBaseView
`; + } +} + +const Packages = { + BaseView: MyBaseView +}; + +Packages.inject = function(MyCompany){ + window.MyCompany.MyApp = MyCompany.MyApp || {}; + if(!window.MyCompany.MyApp.Widget){ + MyCompany.MyApp.Widget = Packages; + } +}; + +// integrate package into MyCompany namespace + +window.MyCompany.usePackage(Packages); diff --git a/docs/samples/Creating_a_Package_Namespace/command.txt b/docs/samples/Creating_a_Package_Namespace/command.txt new file mode 100644 index 0000000..e370f3d --- /dev/null +++ b/docs/samples/Creating_a_Package_Namespace/command.txt @@ -0,0 +1,5 @@ +// create a view (in a HTML file) + +Craft.Core.Context.getRootViewController().appendSubView( + new MyCompany.MyApp.Widget.BaseView() +); diff --git a/docs/samples/Data_Injection_for_Remote_Data_Updates/classes.txt b/docs/samples/Data_Injection_for_Remote_Data_Updates/classes.txt new file mode 100644 index 0000000..d9d7758 --- /dev/null +++ b/docs/samples/Data_Injection_for_Remote_Data_Updates/classes.txt @@ -0,0 +1,110 @@ +class ProductListController extends Craft.UI.View { + constructor(options) { + super(options); + this.data = { products: [] }; + this.views = { current: null }; + } + viewDidLoad(callback) { + this.loadData(); + this.renderReloadBtn(); + if (callback) callback(); + } + loadData() { + this.renderLoading(); + + let xhr = new XMLHttpRequest(); + xhr.onload = () => { + this.data.products = JSON.parse(xhr.response); + this.renderProductList(); + }; + xhr.open( + "GET", + "sampledata/simple_products.json" + ); + xhr.send(); + } + renderLoading() { + let view = new Loading(); + this.replaceView({ id: "list", component: view }); + this.views.current?.unloadView(); // Quick and dirty cleanup + this.views.current = view; + } + renderProductList() { + let view = new ProductList({ delegate: this }); + this.replaceView({ id: "list", component: view }); + this.views.current?.unloadView(); // Another quick and dirty cleanup + this.views.current = view; + } + renderReloadBtn() { + this.appendView({ + id: "btn", + component: new ReloadBtn({ delegate: this }), + }); + } + style(componentId) { + return ` + #btn { background-color: #eee; } + `; + } + template(componentId) { + return ` +
+
+
+
+ `; + } +} + +class Loading extends Craft.UI.View { + template(componentId) { + return `
Loading...
`; + } +} +class ReloadBtn extends Craft.UI.View { + constructor(options) { + super(options); + this.delegate = options.delegate; + } + reloadData() { + this.delegate.loadData(); + } + style(componentId) { + return `.root { cursor: pointer; }`; + } + template(componentId) { + return ` +
+ Reload data +
+ `; + } +} + +class ProductList extends Craft.UI.View { + constructor(options) { + super(options); + this.delegate = options.delegate; + this.views = { products: [] }; + } + viewDidLoad(callback) { + this.delegate.data.products.forEach((p) => { + let view = new Product(p); + this.appendView(view); + this.views.products.push(view); + }); + } +} +class Product extends Craft.UI.View { + constructor(options) { + super(options); + this.data = options; + } + template(componentId) { + return ` +
+ ${this.data.name} : ${this.data.price} +
+ `; + } +} \ No newline at end of file diff --git a/docs/samples/Data_Injection_for_Remote_Data_Updates/command.txt b/docs/samples/Data_Injection_for_Remote_Data_Updates/command.txt new file mode 100644 index 0000000..fd78c23 --- /dev/null +++ b/docs/samples/Data_Injection_for_Remote_Data_Updates/command.txt @@ -0,0 +1,3 @@ +var view = new ProductListController(); +view.loadView(); +Craft.Core.Context.getRootViewController().appendSubView(view); \ No newline at end of file diff --git a/docs/samples/Managing_Instance_Data_in_Views/classes.txt b/docs/samples/Managing_Instance_Data_in_Views/classes.txt new file mode 100644 index 0000000..486b644 --- /dev/null +++ b/docs/samples/Managing_Instance_Data_in_Views/classes.txt @@ -0,0 +1,44 @@ +class HeaderTitle extends Craft.UI.View { + constructor(options) { + super(options); + this.data = { + title: options.title, + }; + } + template(componentId) { + return ` +
+

${this.data.title}

+
+ `; + } +} + +class SmallHeaderTitle extends HeaderTitle { + constructor(options) { + super(options); + this.data = { + title: options.title, + }; + } +} + +class DualHeaderTitle extends HeaderTitle { + constructor(options) { + super(options); + this.data = Object.assign( + { + sub: options.subtitle, + }, + this.data + ); + } + template(componentId) { + return ` +
+

${this.data.title}

+

${this.data.sub}

+
+ `; + } +} diff --git a/docs/samples/Managing_Instance_Data_in_Views/command.txt b/docs/samples/Managing_Instance_Data_in_Views/command.txt new file mode 100644 index 0000000..8e4647b --- /dev/null +++ b/docs/samples/Managing_Instance_Data_in_Views/command.txt @@ -0,0 +1,20 @@ +var headerTitle = new HeaderTitle({ + title: "Title" +}); +headerTitle.loadView(); +Craft.Core.Context.getRootViewController().appendSubView(headerTitle); + +// SmallHeaderTitle +var smallHeaderTitle = new SmallHeaderTitle({ + title: "Title" +}); +smallHeaderTitle.loadView(); +Craft.Core.Context.getRootViewController().appendSubView(smallHeaderTitle); + +// DualHeaderTitle +var dualHeaderTitle = new DualHeaderTitle({ + title: "Title", + subtitle: "Subtitle" +}); +dualHeaderTitle.loadView(); +Craft.Core.Context.getRootViewController().appendSubView(dualHeaderTitle); diff --git a/docs/samples/Managing_Sub_Views_for_Array_Data/classes.txt b/docs/samples/Managing_Sub_Views_for_Array_Data/classes.txt new file mode 100644 index 0000000..836494d --- /dev/null +++ b/docs/samples/Managing_Sub_Views_for_Array_Data/classes.txt @@ -0,0 +1,55 @@ +var products = [ + { name: "Apple", price: 10 }, + { name: "Orange", price: 13 }, + { name: "Strawberry", price: 20 }, + { name: "Pear", price: 9 }, +]; + +class ProductListLoop extends Craft.UI.View { + constructor(options) { + super(options); + this.data = { products: options.products }; + this.views = {}; + } + template(componentId) { + return ` +
+ ${this.data.products.map((product, idx) => ` +
+ ${product.name} : ${product.price} +
+ `).join("")} +
+ `; + } +} + +class Product extends Craft.UI.View { + constructor(options) { + super(options); + this.data = options; + this.views = {}; + } + template(componentId) { + return ` +
+ ${this.data.name} : ${this.data.price} +
+ `; + } +} + +class ProductListFactorize extends Craft.UI.View { + constructor(options) { + super(options); + this.data = { products: options.products }; + this.views = { products: [] }; + } + viewDidLoad(callback) { + this.data.products.forEach((p) => { + let view = new Product(p); + this.appendView(view); + this.views.products.push(view); + }); + } +} diff --git a/docs/samples/Managing_Sub_Views_for_Array_Data/command.txt b/docs/samples/Managing_Sub_Views_for_Array_Data/command.txt new file mode 100644 index 0000000..4b9141c --- /dev/null +++ b/docs/samples/Managing_Sub_Views_for_Array_Data/command.txt @@ -0,0 +1,11 @@ +var productListLoop = new ProductListLoop({ + products: products +}); +productListLoop.loadView(); +Craft.Core.Context.getRootViewController().appendSubView(productListLoop); + +var productListFactorize = new ProductListFactorize({ + products: products +}); +productListFactorize.loadView(); +Craft.Core.Context.getRootViewController().appendSubView(productListFactorize); diff --git a/docs/samples/Managing_Sub_views/classes.txt b/docs/samples/Managing_Sub_views/classes.txt new file mode 100644 index 0000000..a81c6de --- /dev/null +++ b/docs/samples/Managing_Sub_views/classes.txt @@ -0,0 +1,39 @@ +class Header extends Craft.UI.View { + constructor(options) { + super(options); + this.views = {}; + } + viewDidLoad(callback) { + let title = new Title(); + this.appendSubView(title); + this.views.title = title; + + let backbtn = new BackBtn(); + this.appendSubView(backbtn); + this.views.backbtn = backbtn; + + if (callback) { + callback(); + } + } + updateTitleText(text) { + this.views.title.setText(text); + } +} + + +class Title extends Craft.UI.View { + constructor(options) { + super(options); + } + template(componentId) { + return ` +
+

Title

+
+ `; + } + setText(text) { + this.shadow.getElementById("title").innerHTML = text; + } +} diff --git a/docs/samples/Managing_Sub_views/command.txt b/docs/samples/Managing_Sub_views/command.txt new file mode 100644 index 0000000..2b8e2bb --- /dev/null +++ b/docs/samples/Managing_Sub_views/command.txt @@ -0,0 +1,4 @@ +var header = new Header(); +header.loadView(); +Craft.Core.Context.getRootViewController().appendSubView(header); + diff --git a/docs/samples/Routing_with_Strategy_Pattern_Object/classes.txt b/docs/samples/Routing_with_Strategy_Pattern_Object/classes.txt new file mode 100644 index 0000000..a44e4ae --- /dev/null +++ b/docs/samples/Routing_with_Strategy_Pattern_Object/classes.txt @@ -0,0 +1,35 @@ +class Apple extends Craft.UI.View { + template(componentId) { + return `
🍎
`; + } +} + +class Orange extends Craft.UI.View { + template(componentId) { + return `
🍊
`; + } +} + +class PageController extends Craft.UI.DefaultRootViewController { + constructor(options) { + super(options); + this.data = { + map: { + apple: new Apple(), + orange: new Orange(), + }, + }; + } + resolveRoutingRequest(route) { + let path = route.path || "apple"; + let view = this.data.map[path]; + this.replaceView(view); + if (route.launch) { + window.history.replaceState({}, "", "#/" + path); + } else { + if (!route.event) { + window.history.pushState({}, "", "#/" + path); + } + } + } +} diff --git a/docs/samples/Routing_with_Strategy_Pattern_Object/command.txt b/docs/samples/Routing_with_Strategy_Pattern_Object/command.txt new file mode 100644 index 0000000..8c73b5e --- /dev/null +++ b/docs/samples/Routing_with_Strategy_Pattern_Object/command.txt @@ -0,0 +1,7 @@ +// 1. Run, and see your browser location +// 2. Change the location to #/orange, and see the Preview + +var rootViewController = new PageController(); +Craft.Core.Context.setRootViewController(rootViewController); + +rootViewController.bringup(); diff --git a/docs/samples/Style_Sharing_and_Object_Oriented_CSS/classes.txt b/docs/samples/Style_Sharing_and_Object_Oriented_CSS/classes.txt new file mode 100644 index 0000000..c60b791 --- /dev/null +++ b/docs/samples/Style_Sharing_and_Object_Oriented_CSS/classes.txt @@ -0,0 +1,61 @@ +class Hello extends Craft.UI.View { + style(componentId){ + return super.style(componentId) + ` + .root { margin: 50px; } + .text { color: black; } + `; + } + template(componentId){ + return ` +
+

Hello

+

World!

+
+ `; + } +} + +class HelloRed extends Hello { + style(componentId){ + return super.style(componentId) + ` + .text { color: red; } + `; + } +} + +class HeaderStyling { + static style() { return `h1 { color: red; }`; } +} + +class ParagraphStyling { + static style() { return `p { line-height: 2em; }`; } +} + +class TextBlock extends Craft.UI.View { + style(componentId){ + return HeaderStyling.style() + ParagraphStyling.style() + ` + p { color: blue; } + `; + } +} + +class DynamicTextBlockController extends Craft.UI.View { + viewDidLoad(callback){ + this.appendSubView(new Hello({ + styles: [HeaderStyling, ParagraphStyling] + })); + } +} + +class DaynamicTextBlock extends Craft.UI.View { + constructor(options){ + super(options); + this.injectedStyles = options.styles; + } + style(componentId){ + return this.injectedStyles.map(style => style.style()).join('') + ` + p { color: blue; } + `; + } +} + diff --git a/docs/samples/Style_Sharing_and_Object_Oriented_CSS/command.txt b/docs/samples/Style_Sharing_and_Object_Oriented_CSS/command.txt new file mode 100644 index 0000000..e3529d3 --- /dev/null +++ b/docs/samples/Style_Sharing_and_Object_Oriented_CSS/command.txt @@ -0,0 +1,11 @@ +var helloRed = new HelloRed(); +helloRed.loadView(); +Craft.Core.Context.getRootViewController().appendSubView(helloRed); + +var textBlock = new TextBlock(); +textBlock.loadView(); +Craft.Core.Context.getRootViewController().appendSubView(textBlock); + +var dynamicTextBlockController = new DynamicTextBlockController(); +dynamicTextBlockController.loadView(); +Craft.Core.Context.getRootViewController().appendSubView(dynamicTextBlockController); diff --git a/docs/samples/Styling_Dynamic_Shadow_Hosts/classes.txt b/docs/samples/Styling_Dynamic_Shadow_Hosts/classes.txt new file mode 100644 index 0000000..e8ba110 --- /dev/null +++ b/docs/samples/Styling_Dynamic_Shadow_Hosts/classes.txt @@ -0,0 +1,144 @@ +class Example extends Craft.UI.View { + style(componentId) { + return ` + :host { + padding-top: env(safe-area-inset-top); + padding-left: env(safe-area-inset-left); + padding-right: env(safe-area-inset-right); + } + `; + } + template(componentId) { + return ` +
+ Example +
+ `; + } +} + +class Example2 extends Craft.UI.View { + updateShadowStyle() { + this.shadow.host.style.width = "200px"; + } + style(componentId) { + return ` + :host { + width: 100px; + } + `; + } + template(componentId) { + return ` +
+ Example2 +
+ `; + } +} + +class Example3 extends Craft.UI.View { + viewDidLoad(callback) { + this.appendView(new Example3Wrapped()); + if (callback) { + callback(); + } + } + style(componentId) { + return ` + .light { color: #333; background-color: #fff; } + .dark { color: #fff; background-color: #333; } + `; + } +} + +class Example3Wrapped extends Craft.UI.View { + constructor(options) { + super(options); + this.data = { mode: 0 }; + } + toggleMode() { + this.data.mode++; + if (this.data.mode % 2) { + this.shadow.host.classList.add("light"); + this.shadow.host.classList.remove("dark"); + } else { + this.shadow.host.classList.add("dark"); + this.shadow.host.classList.remove("light"); + } + } + style(componentId) { + return ` + :host { color: #333; background-color: #fff; } + .root { + width: 100px; margin-left: auto; margin-right: auto; + } + `; + } + template(componentId) { + return ` +
+ Example3Wrapped +
+ `; + } +} + +class Example4Wrapper extends Craft.UI.View { + constructor(options) { + super(options); + this.data = { mode: 1 }; + this.views = { example: null }; + } + viewDidLoad(callback) { + this.views.example = new Example4Wrapped({ delegate: this }); + this.appendView(this.views.example); + if (callback) { + callback(); + } + } + toggleMode() { + if (this.data.mode++ % 2) { + this.views.example.darkMode(); + } else { + this.views.example.lightMode(); + } + } + style(componentId) { + return ` + .light { color:#333; background-color: #fff; } + .dark { color:#fff; background-color: #333; } + `; + } +} + +class Example4Wrapped extends Craft.UI.View { + constructor(options) { + super(options); + this.delegate = options.delegate; + } + lightMode() { + this.shadow.host.classList.add("light"); + this.shadow.host.classList.remove("dark"); + } + darkMode() { + this.shadow.host.classList.add("dark"); + this.shadow.host.classList.remove("light"); + } + style(componentId) { + return ` + :host { color:#333; background-color: #fff; } + .root { + width:100px; marign-left:auto; marign-right:auto; + } + `; + } + template(componentId) { + return ` +
+ Example4Wrapped +
+ `; + } +} diff --git a/docs/samples/Styling_Dynamic_Shadow_Hosts/command.txt b/docs/samples/Styling_Dynamic_Shadow_Hosts/command.txt new file mode 100644 index 0000000..02a1300 --- /dev/null +++ b/docs/samples/Styling_Dynamic_Shadow_Hosts/command.txt @@ -0,0 +1,18 @@ +var example = new Example(); +example.loadView(); +Craft.Core.Context.getRootViewController().appendSubView(example); + +// Example2 +var example2 = new Example2(); +example2.loadView(); +Craft.Core.Context.getRootViewController().appendSubView(example2); + +// Example3 +var example3 = new Example3(); +example3.loadView(); +Craft.Core.Context.getRootViewController().appendSubView(example3); + +// Example4Wrapper +var example4 = new Example4Wrapper(); +example4.loadView(); +Craft.Core.Context.getRootViewController().appendSubView(example4); diff --git a/docs/samples/Updating_Views/classes.txt b/docs/samples/Updating_Views/classes.txt new file mode 100644 index 0000000..9e1ac7a --- /dev/null +++ b/docs/samples/Updating_Views/classes.txt @@ -0,0 +1,177 @@ +class CounterView1 extends Craft.UI.View { + constructor(options) { + super(options); + this.data = { count: 0 }; + } + countup() { + this.data.count++; + this.shadow.getElementById("counter").innerHTML = this.data.count; + } + template(componentId) { + return ` +
+ ${this.data.count} +
+ `; + } +} + +class CounterView2 extends Craft.UI.View { + constructor(options) { + super(options); + this.data = { count: 0 }; + } + countup() { + this.data.count++; + this.renderView(); + } + template(componentId) { + return ` +
+ ${this.data.count} +
+ `; + } +} + +class CounterView3 extends Craft.UI.View { + constructor(options) { + super(options); + this.data = { count: 0 }; + this.templates = { + even: () => `Some complex even view: ${this.data.count}`, + odd: () => `Some complex odd view: ${this.data.count}`, + }; + this.crr_template = this.templates.even(); + } + countup() { + this.data.count++; + this.crr_template = + this.data.count % 2 == 0 ? this.templates.even() : this.templates.odd(); + this.renderView(); + } + template(componentId) { + return ` +
+ ${this.crr_template} +
`; + } +} + +class CounterView4 extends Craft.UI.View { + constructor(options) { + super(options); + this.data = { count: 0 }; + this.views = { numbox: null }; + } + countup() { + this.data.count++; + this.updateNumBoxView(); + } + updateNumBoxView() { + let view = new NumBoxView({ num: this.data.count }); + this.replaceView({ id: "container", component: view }); + this.views.numbox?.unloadView(); + this.views.numbox = view; + } + viewDidLoad(callback) { + this.updateNumBoxView(); + if (callback) { + callback(); + } + } + template(componentId) { + return ` +
+
+
+ `; + } +} + +class NumBoxView extends Craft.UI.View { + constructor(options) { + super(options); + this.data = options; + } + template(componentId) { + return ` +
+ ${this.data.num} +
+ `; + } +} + +class CounterView5 extends Craft.UI.View { + constructor(options) { + super(options); + this.data = { count: 0 }; + this.views = { + even: new EvenNumBoxView({ delegate: this }), + odd: new OddNumBoxView({ delegate: this }), + }; + } + viewDidLoad(callback) { + this.updateNumBoxView(); + if (callback) { + callback(); + } + } + countup() { + this.data.count++; + this.updateNumBoxView(); + } + updateNumBoxView() { + if (this.data.count % 2 == 0) { + this.views.even.renderView(); + this.replaceView({ + id: "container", + component: this.views.even, + }); + } else { + this.views.odd.renderView(); + this.replaceView({ + id: "container", + component: this.views.odd, + }); + } + } + template(componentId) { + return ` +
+
+
+ `; + } +} + +class EvenNumBoxView extends Craft.UI.View { + constructor(options) { + super(options); + this.delegate = options.delegate; + } + template(componentId) { + return ` +
+ Some complex even view structure: + ${this.delegate.data.count} +
+ `; + } +} + +class OddNumBoxView extends Craft.UI.View { + constructor(options) { + super(options); + this.delegate = options.delegate; + } + template(componentId) { + return ` +
+ Some complex odd view structure: + ${this.delegate.data.count} +
+ `; + } +} diff --git a/docs/samples/Updating_Views/command.txt b/docs/samples/Updating_Views/command.txt new file mode 100644 index 0000000..b0ed72a --- /dev/null +++ b/docs/samples/Updating_Views/command.txt @@ -0,0 +1,20 @@ +var counterView1 = new CounterView1(); +counterView1.loadView(); +Craft.Core.Context.getRootViewController().appendSubView(counterView1); + +var counterView2 = new CounterView2(); +counterView2.loadView(); +Craft.Core.Context.getRootViewController().appendSubView(counterView2); + +var counterView3 = new CounterView3(); +counterView3.loadView(); +Craft.Core.Context.getRootViewController().appendSubView(counterView3); + +var counterView4 = new CounterView4(); +counterView4.loadView(); +Craft.Core.Context.getRootViewController().appendSubView(counterView4); + +var counterView5 = new CounterView5(); +counterView5.loadView(); +Craft.Core.Context.getRootViewController().appendSubView(counterView5); + diff --git a/docs/samples/Using_Package_Name_as_Instance_Identifier/classes.txt b/docs/samples/Using_Package_Name_as_Instance_Identifier/classes.txt new file mode 100644 index 0000000..8d3c01c --- /dev/null +++ b/docs/samples/Using_Package_Name_as_Instance_Identifier/classes.txt @@ -0,0 +1,23 @@ +class Example extends Craft.UI.View { + template(componentId) { + return ` +
+ Hello World! +
+ `; + } +} + +class Example2 extends Craft.UI.View { + constructor(options) { + super(options); + this.packagename = "com.craftclay.Example"; + } + template(componentId) { + return ` +
+ Hello World! +
+ `; + } +} diff --git a/docs/samples/Using_Package_Name_as_Instance_Identifier/command.txt b/docs/samples/Using_Package_Name_as_Instance_Identifier/command.txt new file mode 100644 index 0000000..a0c3c71 --- /dev/null +++ b/docs/samples/Using_Package_Name_as_Instance_Identifier/command.txt @@ -0,0 +1,7 @@ +var view = new Example(); +view.loadView(); +Craft.Core.Context.getRootViewController().appendSubView(view); + +var view2 = new Example2(); +view2.loadView(); +Craft.Core.Context.getRootViewController().appendSubView(view2); \ No newline at end of file diff --git a/docs/samples/sample1/classes.txt b/docs/samples/sample1/classes.txt new file mode 100644 index 0000000..f1faa7e --- /dev/null +++ b/docs/samples/sample1/classes.txt @@ -0,0 +1,70 @@ +class Vehicle extends Craft.UI.View { + whoami() { + return this.shadow.getElementById("text").innerHTML; + } + style(componentId) { + return ` + .root { color: red; } + `; + } + template(componentId) { + return ` +
+ Generic Vehicle +
+ `; + } +} + +class Bike extends Vehicle { + style(componentId) { + return super.style(componentId) + ` + .root { color: blue; } + `; + } + template(componentId) { + return ` +
+ I'm Bike. +
+ `; + } +} + +class Car extends Vehicle { + style(componentId) { + return super.style(componentId) + ` + .root { color: purple; } + `; + } + template(componentId) { + return ` +
+ I'm Car. +
+ `; + } +} + +class DangerousTruck extends Car { + ignite(){ + this.shadow.getElementById('text').innerHTML = "🚛🔥🔥🔥"; + } + cooldown(){ + this.shadow.getElementById('text').innerHTML = "I'm COOL Truck."; + } + style(componentId){ + return super.style(componentId) + ` + .root { color:purple; } + `; + } + template(componentId){ + return ` +
+ + I'm dangerous Truck. + +
+ `; + } +} diff --git a/docs/samples/sample1/command.txt b/docs/samples/sample1/command.txt new file mode 100644 index 0000000..9b88601 --- /dev/null +++ b/docs/samples/sample1/command.txt @@ -0,0 +1,7 @@ +var truck_view = new DangerousTruck(); +truck_view.loadView(); +Craft.Core.Context.getRootViewController().appendSubView(truck_view); + +var car_view = new Car(); +car_view.loadView(); +Craft.Core.Context.getRootViewController().appendSubView(car_view); diff --git a/package.json b/package.json index 5c32591..0bdcd5a 100644 --- a/package.json +++ b/package.json @@ -1,24 +1,21 @@ { "name": "@craftkit/craftkit-playground", - "version": "1.0.0", + "version": "2.0.0", "description": "CraftKit Playground", "main": "", "module": "", "unpkg": "", "dependencies": { - "local-web-server": "^3.0.7" }, - "devDependencies": {}, "scripts": { - "playground": "node_modules/.bin/ws -v -p 8000 -d docs --spa index.html --spa.asset-test-fs" }, "repository": { "type": "git", "url": "git+https://github.com/craftkit/craftkit-playground.git" }, "keywords": [ - "Tutorial", - "Playgound", + "Tutorial", + "Playgound", "WebComponents", "Shadow DOM", "OOP", diff --git a/craft-uikit.md b/tutorials/craft-uikit.md similarity index 100% rename from craft-uikit.md rename to tutorials/craft-uikit.md diff --git a/docs/craft-widget-calendar-design-1.js b/tutorials/craft-widget-calendar-design-1.js similarity index 100% rename from docs/craft-widget-calendar-design-1.js rename to tutorials/craft-widget-calendar-design-1.js diff --git a/craft-widget-calendar.md b/tutorials/craft-widget-calendar.md similarity index 100% rename from craft-widget-calendar.md rename to tutorials/craft-widget-calendar.md diff --git a/craft-widget-navigationgroup.md b/tutorials/craft-widget-navigationgroup.md similarity index 100% rename from craft-widget-navigationgroup.md rename to tutorials/craft-widget-navigationgroup.md diff --git a/craft-widget-quicktools.md b/tutorials/craft-widget-quicktools.md similarity index 100% rename from craft-widget-quicktools.md rename to tutorials/craft-widget-quicktools.md diff --git a/craft-widget-stickyheadernavi.md b/tutorials/craft-widget-stickyheadernavi.md similarity index 100% rename from craft-widget-stickyheadernavi.md rename to tutorials/craft-widget-stickyheadernavi.md