From c06a682fcdf744177edf00a7d7ea769ad4576fb6 Mon Sep 17 00:00:00 2001 From: Haidar Afif Maulana Date: Wed, 7 Mar 2018 15:22:02 +0700 Subject: [PATCH 1/7] init file index and miniquery --- index.html | 0 lib/miniquery.js | 0 2 files changed, 0 insertions(+), 0 deletions(-) create mode 100644 index.html create mode 100644 lib/miniquery.js diff --git a/index.html b/index.html new file mode 100644 index 0000000..e69de29 diff --git a/lib/miniquery.js b/lib/miniquery.js new file mode 100644 index 0000000..e69de29 From edcb27a144ef749521e05e38ef964fd4c1c6ea3c Mon Sep 17 00:00:00 2001 From: Haidar Afif Maulana Date: Wed, 7 Mar 2018 15:30:49 +0700 Subject: [PATCH 2/7] Selector Library --- index.html | 28 ++++++++++++++++++++++++++++ lib/miniquery.js | 15 +++++++++++++++ 2 files changed, 43 insertions(+) diff --git a/index.html b/index.html index e69de29..d653057 100644 --- a/index.html +++ b/index.html @@ -0,0 +1,28 @@ + + + + + MiniQuery + + + +
+ eyed +
+
+ klass +
+ click me + + + + + diff --git a/lib/miniquery.js b/lib/miniquery.js index e69de29..6c428a0 100644 --- a/lib/miniquery.js +++ b/lib/miniquery.js @@ -0,0 +1,15 @@ +class SweetSelector { + static select(input){ + if (input[0] == '#') { + return document.querySelector(input); + } else if (input[0] == '.') { + let doc = document.querySelectorAll(input); + if (doc.length == 1) { + return document.querySelector(input); + } + return doc; + } else if (input[0] != '.' && input[0] != '#') { + return document.querySelector(input); + } + } +} From fd9167946c4c0a746c3d6fd2ac0a4dc85a206ec9 Mon Sep 17 00:00:00 2001 From: Haidar Afif Maulana Date: Wed, 7 Mar 2018 15:39:50 +0700 Subject: [PATCH 3/7] Dom Manipulation Module --- index.html | 4 ++++ lib/miniquery.js | 19 +++++++++++++++++++ 2 files changed, 23 insertions(+) diff --git a/index.html b/index.html index d653057..0982632 100644 --- a/index.html +++ b/index.html @@ -22,6 +22,10 @@ console.log(klass); let a = SweetSelector.select('a') console.log(a); + DOM.hide('#eyed') + DOM.show('#eyed') + DOM.addClass('.klass','shadi') + DOM.removeClass('.klass','shadi') diff --git a/lib/miniquery.js b/lib/miniquery.js index 6c428a0..5e08252 100644 --- a/lib/miniquery.js +++ b/lib/miniquery.js @@ -13,3 +13,22 @@ class SweetSelector { } } } + +class DOM { + static hide(selector){ + let element = SweetSelector.select(selector); + element.style.display = "none" + } + static show(selector){ + let element = SweetSelector.select(selector); + element.style.display = "block" + } + static addClass(selector,className){ + let element = SweetSelector.select(selector); + element.classList.add(className); + } + static removeClass(selector,className){ + let element = SweetSelector.select(selector); + element.classList.remove(className); + } +} From 68406b05c3f3c0ce577b42b04a3ea12f8858b7cf Mon Sep 17 00:00:00 2001 From: Haidar Afif Maulana Date: Wed, 7 Mar 2018 15:47:06 +0700 Subject: [PATCH 4/7] EventDispatcher module --- index.html | 4 ++++ lib/miniquery.js | 13 +++++++++++++ 2 files changed, 17 insertions(+) diff --git a/index.html b/index.html index 0982632..f5fdd21 100644 --- a/index.html +++ b/index.html @@ -26,6 +26,10 @@ DOM.show('#eyed') DOM.addClass('.klass','shadi') DOM.removeClass('.klass','shadi') + EventDispatcher.on('.klass','click',() => { + console.log("awesome"); + }); + EventDispatcher.trigger('.klass','click'); diff --git a/lib/miniquery.js b/lib/miniquery.js index 5e08252..f575e7f 100644 --- a/lib/miniquery.js +++ b/lib/miniquery.js @@ -32,3 +32,16 @@ class DOM { element.classList.remove(className); } } + +class EventDispatcher { + static on(selector,event,callback){ + const element = SweetSelector.select(selector); + element.addEventListener(event, callback); + } + static trigger(selector,event){ + const element = SweetSelector.select(selector); + if (event == 'click') { + element.click(); + } + } +} From d591cc50e9f6ebcc9272f8c48ed5597c41f4aff5 Mon Sep 17 00:00:00 2001 From: Haidar Afif Maulana Date: Wed, 7 Mar 2018 15:52:39 +0700 Subject: [PATCH 5/7] Fix dispacth event module trigger --- lib/miniquery.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/lib/miniquery.js b/lib/miniquery.js index f575e7f..fe95645 100644 --- a/lib/miniquery.js +++ b/lib/miniquery.js @@ -40,8 +40,6 @@ class EventDispatcher { } static trigger(selector,event){ const element = SweetSelector.select(selector); - if (event == 'click') { - element.click(); - } + element.dispatchEvent(new Event(event)); } } From eb32fbe1eeba50f54908bdd113cf20aed87ccfee Mon Sep 17 00:00:00 2001 From: Haidar Afif Maulana Date: Wed, 7 Mar 2018 17:58:37 +0700 Subject: [PATCH 6/7] AjaxWrapper module --- index.html | 10 ++++++++++ lib/miniquery.js | 15 +++++++++++++++ 2 files changed, 25 insertions(+) diff --git a/index.html b/index.html index f5fdd21..7931201 100644 --- a/index.html +++ b/index.html @@ -30,6 +30,16 @@ console.log("awesome"); }); EventDispatcher.trigger('.klass','click'); + AjaxWrapper.request({ + url: 'http://localhost:3000/search?q=hacktiv8', + type: 'GET', + success: () => { + console.log('berhasil'); + }, + fail: () => { + console.log('gagal'); + } + }) diff --git a/lib/miniquery.js b/lib/miniquery.js index fe95645..acb7ded 100644 --- a/lib/miniquery.js +++ b/lib/miniquery.js @@ -43,3 +43,18 @@ class EventDispatcher { element.dispatchEvent(new Event(event)); } } +class AjaxWrapper { + static request(obj){ + var xhttp = new XMLHttpRequest(); + xhttp.onreadystatechange = function() { + if (this.readyState == 4 && this.status == 200) { + obj.success(this.responseText); + } else { + obj.fail(); + } + }; + xhttp.open(obj.type,obj.url, true); + xhttp.send(); + } + +} From 49aa7f5d03d9c2fa999cdce347a1cb9395f3a375 Mon Sep 17 00:00:00 2001 From: Haidar Afif Maulana Date: Wed, 7 Mar 2018 18:39:03 +0700 Subject: [PATCH 7/7] miniquery and $ to use miniquery method --- index.html | 36 ++++++++++++++++++----- lib/miniquery.js | 76 ++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 104 insertions(+), 8 deletions(-) diff --git a/index.html b/index.html index 7931201..46b5f20 100644 --- a/index.html +++ b/index.html @@ -22,18 +22,38 @@ console.log(klass); let a = SweetSelector.select('a') console.log(a); - DOM.hide('#eyed') - DOM.show('#eyed') - DOM.addClass('.klass','shadi') - DOM.removeClass('.klass','shadi') - EventDispatcher.on('.klass','click',() => { + // DOM.hide('#eyed') + miniquery('#eyed').hide(); + miniquery('#eyed').show(); + $('#eyed').hide(); + // DOM.show('#eyed') + // DOM.addClass('.klass','shadi') + miniquery('.klass').addClass('shadi'); + // DOM.removeClass('.klass','shadi') + miniquery('.klass').removeClass('shadi'); + + // EventDispatcher.on('.klass','click',() => { + // console.log("awesome"); + // }); + miniquery('.klass').on('click',() => { console.log("awesome"); }); - EventDispatcher.trigger('.klass','click'); - AjaxWrapper.request({ + // EventDispatcher.trigger('.klass','click'); + miniquery('.klass').trigger('click'); + // AjaxWrapper.request({ + // url: 'http://localhost:3000/search?q=hacktiv8', + // type: 'GET', + // success: () => { + // console.log('berhasil'); + // }, + // fail: () => { + // console.log('gagal'); + // } + // }) + miniquery().ajax({ url: 'http://localhost:3000/search?q=hacktiv8', type: 'GET', - success: () => { + success: (data) => { console.log('berhasil'); }, fail: () => { diff --git a/lib/miniquery.js b/lib/miniquery.js index acb7ded..5317058 100644 --- a/lib/miniquery.js +++ b/lib/miniquery.js @@ -1,5 +1,9 @@ + class SweetSelector { static select(input){ + if (input == undefined) { + return null + } if (input[0] == '#') { return document.querySelector(input); } else if (input[0] == '.') { @@ -58,3 +62,75 @@ class AjaxWrapper { } } +var miniquery = function(context) { + if (this.__proto__.constructor !== miniquery) { + return new miniquery(context); + } + this.element = SweetSelector.select(context) ; + this.hide = function(){ + this.element.style.display = "none" + } + this.show = function(){ + this.element.style.display = "block" + } + this.addClass = function(className){ + this.element.classList.add(className); + } + this.removeClass = function(className){ + this.element.classList.remove(className); + } + this.on = function(event,callback){ + this.element.addEventListener(event, callback); + } + this.trigger = function(event){ + this.element.dispatchEvent(new Event(event)); + } + this.ajax = function (obj){ + var xhttp = new XMLHttpRequest(); + xhttp.onreadystatechange = function() { + if (this.readyState == 4 && this.status == 200) { + obj.success(this.responseText); + } else { + obj.fail(); + } + }; + xhttp.open(obj.type,obj.url, true); + xhttp.send(); + } +}; +var $ = function(context) { + if (this.__proto__.constructor !== miniquery) { + return new miniquery(context); + } + this.element = SweetSelector.select(context) ; + this.hide = function(){ + this.element.style.display = "none" + } + this.show = function(){ + this.element.style.display = "block" + } + this.addClass = function(className){ + this.element.classList.add(className); + } + this.removeClass = function(className){ + this.element.classList.remove(className); + } + this.on = function(event,callback){ + this.element.addEventListener(event, callback); + } + this.trigger = function(event){ + this.element.dispatchEvent(new Event(event)); + } + this.ajax = function (obj){ + var xhttp = new XMLHttpRequest(); + xhttp.onreadystatechange = function() { + if (this.readyState == 4 && this.status == 200) { + obj.success(this.responseText); + } else { + obj.fail(); + } + }; + xhttp.open(obj.type,obj.url, true); + xhttp.send(); + } +};