Rx Framework

샘플 기간만료 Sample For Expired Date

기간이 만료되었을 시에 표시 문구 Sample for Expired Date.
샘플 Navigator Sample Navigator

메뉴 생성과 페이지 전환하는 샘플 코드 Sample code for creating menus and switching pages.

// HTML <div id="container" class="container"> </div> <div class="container content"> <div id="contentBody"> </div> </div>

const SampleNavigator = { /* State Checker @Boolean : Checking For navData */ isReady : false, /* Sample For Navigator @Object : { logoSrc : String, // Optional nav : [ { name : String, ContentsHTML : String } ], rightButton : { name : String, clickToCallback : Function } // Optional } */ navData : {}, /** * Navigator DOM id * Create By createRandomKey */ navId : '', /** * Navigator Right Button DOM id * Create By createRandomKey */ navRightButtonId : '', /** * nav Click Callback * @Function */ clickToCallback : null, /** * @Option { navData : {}, clickToCallback : function(){} } */ init : function(option){ this.navData = option['navData'] ? option['navData'] : {}; this.clickToCallback = option['clickToCallback'] ? option['clickToCallback'] : () => { console.log('NOT SETTING clickToCallback In navData'); }; this.isReady = this.checkReady(); }, // @private checkReady : function(){ const keys = Object.keys(this.navData); let isOkay = keys.length > 0 ? true : false; if(!isOkay) return false; const essentialKeys = ['nav']; for(let i = 0; i < essentialKeys.length; i++){ isOkay = false; for(let k = 0; k < keys.length; k++){ if(keys[k] === essentialKeys[i]){ isOkay = true; break; } } if(!isOkay) break; } return isOkay; }, // @private createRandomKey : function(){ return 'xxxxxxxx'.replace(/[xy]/g, function(c) { var r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8); return v.toString(16); }); }, /** * * Create HTML For Navi * @Returns { Html : Type String For DOM, setEvent : Function } * */ getNavHTML : function(){ if(!this.isReady) return alert('No option. Check navData'); const logoSrc = this.navData['logoSrc']; // Essential this.navId = this.createRandomKey(); const nav = this.navData['nav']; this.navRightButtonId = this.createRandomKey(); const rightButton = this.navData['rightButton']; let logoHtml = ``; if(logoSrc){ logoHtml = ` <div class="logo"> <img src="${logoSrc}" alt="Logo"/> </div> `; } let rightHtml = ``; if(rightButton){ rightHtml = ` <div id='${this.navRightButtonId}' class="navi-right"> <button>Get Started</button> </div> `; } let li = ``; for(let i = 0; i < nav.length; i++){ li += `<li data-index='${i}'>${nav[i]['name']}</li>`; } const html = ` <div id='${this.navId}' class="navi"> ${logoHtml} <ul>${li}</ul> ${rightHtml} </div> `; // Set Events // const setHtmlEvent = function(){ // const allLis = document.getElementById(this.navId).getElementsByTagName('LI'); // for(let i = 0; i < allLis.length; i++){ // allLis[i].addEventListener('click', this.clickToCallback); // } // // Right Button // const rightBtn = document.getElementById(this.navRightButtonId); // if(!rightBtn) return; // rightBtn.addEventListener('click', this.navData['rightButton']['clickToCallback']); // }; function setHtmlEvent(){ const allLis = document.getElementById(this.navId).getElementsByTagName('LI'); for(let i = 0; i < allLis.length; i++){ allLis[i].addEventListener('click', this.clickToCallback); } // Right Button const rightBtn = document.getElementById(this.navRightButtonId); if(!rightBtn) return; rightBtn.addEventListener('click', this.navData['rightButton']['clickToCallback']); } // (Optional) Set RightEvent return { Html : html, setEvent : setHtmlEvent.bind(this), }; }, /** * * Create HTML For Navi * @Returns Type HTML Elements For DOM * */ getNavHTMLElements : function(){ if(!this.isReady) return alert('No option. Check navData'); }, /** * * Get ContentsHTML By index * @Parameters _index : (String) Navigator Index * @Returns String * */ getContentsHTML : function(_index){ return this.navData['nav'][Number(_index)]['ContentsHTML']; } }
Controller 분리 Controller Separation

다른 Controller 붙이는 법 How to attach another controller

// HTML <div id="container" class="container"> </div> <div class="container content"> <div id="contentBody"> </div> </div>

const SampleAnimation = { /** * Action Animation * @Function * @Parameters (DOM) target * @Parameters (String) html * @Parameters (Function) callback - optional */ actionAnimation : function(target, html, callback){ // Define Animation target.style.transition = 'all .3s'; target.style.opacity = '0'; setTimeout(function(){ target.innerHTML = html; setTimeout(function(){ target.style.opacity = '1'; if(callback) callback(); }, 300); }, 300); } }; const SampleNavigator = { /** * Sample Animation Controller * @Controller */ SampleAnimation : SampleAnimation, /** * * @public * SampleAnimation actionAnimation */ actionAnimation : function(target, html, callback){ this.SampleAnimation.actionAnimation(target, html, callback); }, /* State Checker @Boolean : Checking For navData */ isReady : false, /* Sample For Navigator @Object : { logoSrc : String, // Optional nav : [ { name : String, ContentsHTML : String } ], rightButton : { name : String, clickToCallback : Function } // Optional } */ navData : {}, /** * Navigator DOM id * Create By createRandomKey */ navId : '', /** * Navigator Right Button DOM id * Create By createRandomKey */ navRightButtonId : '', /** * nav Click Callback * @Function */ clickToCallback : null, /** * @Option { navData : {}, clickToCallback : function(){} } */ init : function(option){ this.navData = option['navData'] ? option['navData'] : {}; this.clickToCallback = option['clickToCallback'] ? option['clickToCallback'] : () => { console.log('NOT SETTING clickToCallback In navData'); }; this.isReady = this.checkReady(); }, // @private checkReady : function(){ const keys = Object.keys(this.navData); let isOkay = keys.length > 0 ? true : false; if(!isOkay) return false; const essentialKeys = ['nav']; for(let i = 0; i < essentialKeys.length; i++){ isOkay = false; for(let k = 0; k < keys.length; k++){ if(keys[k] === essentialKeys[i]){ isOkay = true; break; } } if(!isOkay) break; } return isOkay; }, // @private createRandomKey : function(){ return 'xxxxxxxx'.replace(/[xy]/g, function(c) { var r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8); return v.toString(16); }); }, /** * * Create HTML For Navi * @Returns { Html : Type String For DOM, setEvent : Function } * */ getNavHTML : function(){ if(!this.isReady) return alert('No option. Check navData'); const logoSrc = this.navData['logoSrc']; // Essential this.navId = this.createRandomKey(); const nav = this.navData['nav']; this.navRightButtonId = this.createRandomKey(); const rightButton = this.navData['rightButton']; let logoHtml = ``; if(logoSrc){ logoHtml = ` <div class="logo"> <img src="${logoSrc}" alt="Logo"/> </div> `; } let rightHtml = ``; if(rightButton){ rightHtml = ` <div id='${this.navRightButtonId}' class="navi-right"> <button>Get Started</button> </div> `; } let li = ``; for(let i = 0; i < nav.length; i++){ li += `<li data-index='${i}'>${nav[i]['name']}</li>`; } const html = ` <div id='${this.navId}' class="navi"> ${logoHtml} <ul>${li}</ul> ${rightHtml} </div> `; // Set Events // const setHtmlEvent = function(){ // const allLis = document.getElementById(this.navId).getElementsByTagName('LI'); // for(let i = 0; i < allLis.length; i++){ // allLis[i].addEventListener('click', this.clickToCallback); // } // // Right Button // const rightBtn = document.getElementById(this.navRightButtonId); // if(!rightBtn) return; // rightBtn.addEventListener('click', this.navData['rightButton']['clickToCallback']); // }; function setHtmlEvent(){ const allLis = document.getElementById(this.navId).getElementsByTagName('LI'); for(let i = 0; i < allLis.length; i++){ allLis[i].addEventListener('click', this.clickToCallback); } // (Optional) Set RightEvent // Right Button const rightBtn = document.getElementById(this.navRightButtonId); if(!rightBtn) return; rightBtn.addEventListener('click', this.navData['rightButton']['clickToCallback']); } return { Html : html, setEvent : setHtmlEvent.bind(this), }; }, /** * * Create HTML For Navi * @Returns Type HTML Elements For DOM * */ getNavHTMLElements : function(){ if(!this.isReady) return alert('No option. Check navData'); }, /** * * Get ContentsHTML By index * @Parameters _index : (String) Navigator Index * @Returns String * */ getContentsHTML : function(_index){ return this.navData['nav'][Number(_index)]['ContentsHTML']; } }
Controller Pack 활용법 How to use Controller Pack

Controller를 Pack처럼 사용하는 방법 How to use Controller like a Pack

// HTML <div id="container" class="container"> </div> <div class="container content"> <div id="contentBody"> </div> </div>

const SampleAnimationPacks = { /** * Animation List * @Object * animation[ { name : String, action : Function } ] */ animation : [], init : function(){ this.animation = [ { name : 'fade', action : (target, html, callback) => { // Define Animation console.log('fade Start'); target.style.transition = 'all .3s'; target.style.opacity = '0'; setTimeout(function(){ target.innerHTML = html; setTimeout(function(){ target.style.opacity = '1'; if(callback) callback(); }, 300); }, 300); }}, { name : 'topDown', action : (target, html, callback) => { // Define Animation console.log('topDown Start'); target.style.transition = 'all .3s'; target.style.opacity = '0'; target.style.transform = 'translate(0, -100%)'; setTimeout(function(){ target.innerHTML = html; setTimeout(function(){ target.style.opacity = '1'; setTimeout(function(){ target.style.transform = 'translate(0, 0)'; if(callback) callback(); }, 300); }, 300); }, 300); }}, ] }, /** * Get All Keys * @Function */ getAllAnimationKeys : function(){ const keys = []; for(let i = 0; i < this.animation.length; i++){ keys.push(this.animation[i]['name']); } return keys; }, /** * Get All List * @Function */ getAllAnimationList : function(){ return this.animation; }, /** * Get One of All AnimationPacks By Key Value * @Function * @Parameters (String) _key */ getAnimationPackByKey : function(_key){ let targetPack; for(let i = 0; i < this.animation.length; i++){ if(this.animation[i]['name'] === _key){ targetPack = this.animation[i]; break; } } if(!targetPack) return console.log('CANNOT FIND ' + _keys); console.log(targetPack); return targetPack['action']; }, }; const SampleAnimation = { /** * SampleAnimationPacks * @Controller */ SampleAnimationPacks : SampleAnimationPacks, /** * Action Animation * @Function * @Parameters (DOM) target * @Parameters (String) html * @Parameters (Function) callback - optional */ actionAnimation : function(target, html, callback){ // Define Animation }, /** * Action Animation * @Function * @Parameters (DOM) target * @Parameters (String) html * @Parameters (String) key * @Parameters (Function) callback - optional */ actionAnimationByPack : function(target, html, key, callback){ // Define Animation const action = this.SampleAnimationPacks.getAnimationPackByKey(key); if(action) action(target, html, callback); } }; const SampleNavigator = { /** * Sample Animation Controller * @Controller */ SampleAnimation : SampleAnimation, /** * * @public * SampleAnimation actionAnimation */ actionAnimation : function(target, html, callback){ this.SampleAnimation.actionAnimation(target, html, callback); }, /** * * @public * SampleAnimation actionAnimationByPack */ actionAnimationByPack : function(target, html, key, callback){ this.SampleAnimation.actionAnimationByPack(target, html, key, callback); }, /* State Checker @Boolean : Checking For navData */ isReady : false, /* Sample For Navigator @Object : { logoSrc : String, // Optional nav : [ { name : String, ContentsHTML : String } ], rightButton : { name : String, clickToCallback : Function } // Optional } */ navData : {}, /** * Navigator DOM id * Create By createRandomKey */ navId : '', /** * Navigator Right Button DOM id * Create By createRandomKey */ navRightButtonId : '', /** * nav Click Callback * @Function */ clickToCallback : null, /** * @Option { navData : {}, clickToCallback : function(){} } */ init : function(option){ this.navData = option['navData'] ? option['navData'] : {}; this.clickToCallback = option['clickToCallback'] ? option['clickToCallback'] : () => { console.log('NOT SETTING clickToCallback In navData'); }; this.isReady = this.checkReady(); }, // @private checkReady : function(){ const keys = Object.keys(this.navData); let isOkay = keys.length > 0 ? true : false; if(!isOkay) return false; const essentialKeys = ['nav']; for(let i = 0; i < essentialKeys.length; i++){ isOkay = false; for(let k = 0; k < keys.length; k++){ if(keys[k] === essentialKeys[i]){ isOkay = true; break; } } if(!isOkay) break; } return isOkay; }, // @private createRandomKey : function(){ return 'xxxxxxxx'.replace(/[xy]/g, function(c) { var r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8); return v.toString(16); }); }, /** * * Create HTML For Navi * @Returns { Html : Type String For DOM, setEvent : Function } * */ getNavHTML : function(){ if(!this.isReady) return alert('No option. Check navData'); const logoSrc = this.navData['logoSrc']; // Essential this.navId = this.createRandomKey(); const nav = this.navData['nav']; this.navRightButtonId = this.createRandomKey(); const rightButton = this.navData['rightButton']; let logoHtml = ``; if(logoSrc){ logoHtml = ` <div class="logo"> <img src="${logoSrc}" alt="Logo"/> </div> `; } let rightHtml = ``; if(rightButton){ rightHtml = ` <div id='${this.navRightButtonId}' class="navi-right"> <button>Get Started</button> </div> `; } let li = ``; for(let i = 0; i < nav.length; i++){ li += `<li data-index='${i}'>${nav[i]['name']}</li>`; } const html = ` <div id='${this.navId}' class="navi"> ${logoHtml} <ul>${li}</ul> ${rightHtml} </div> `; // Set Events // const setHtmlEvent = function(){ // const allLis = document.getElementById(this.navId).getElementsByTagName('LI'); // for(let i = 0; i < allLis.length; i++){ // allLis[i].addEventListener('click', this.clickToCallback); // } // // Right Button // const rightBtn = document.getElementById(this.navRightButtonId); // if(!rightBtn) return; // rightBtn.addEventListener('click', this.navData['rightButton']['clickToCallback']); // }; function setHtmlEvent(){ const allLis = document.getElementById(this.navId).getElementsByTagName('LI'); for(let i = 0; i < allLis.length; i++){ allLis[i].addEventListener('click', this.clickToCallback); } // (Optional) Set RightEvent // Right Button const rightBtn = document.getElementById(this.navRightButtonId); if(!rightBtn) return; rightBtn.addEventListener('click', this.navData['rightButton']['clickToCallback']); } return { Html : html, setEvent : setHtmlEvent.bind(this), }; }, /** * * Create HTML For Navi * @Returns Type HTML Elements For DOM * */ getNavHTMLElements : function(){ if(!this.isReady) return alert('No option. Check navData'); }, /** * * Get ContentsHTML By index * @Parameters _index : (String) Navigator Index * @Returns String * */ getContentsHTML : function(_index){ return this.navData['nav'][Number(_index)]['ContentsHTML']; }, }

RX - (알엑스DRIVE - (RXDRIVE))

RX - (알엑스DRIVE - (RXDRIVE))