Created
July 17, 2017 14:06
-
-
Save jhyang12345/84d81f13d1259e663a5e139e434aabdc to your computer and use it in GitHub Desktop.
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
const Tab = class { | |
constructor(id, selected, url) { | |
this.id = id; | |
this.selected = selected; | |
this.url = url; | |
this.addClickListener(); | |
} | |
addClickListener() { | |
var curElement = document.querySelector("#" + this.id); | |
curElement.addEventListener("click", this.ajaxResponse.bind(this)); | |
} | |
selectTab() { | |
this.selected = true; | |
} | |
unselectTab() { | |
this.selected = false; | |
} | |
ajaxResponse() { | |
var text_box = document.querySelector("#my_position"); | |
var oReq = new XMLHttpRequest(); | |
oReq.addEventListener("load", function () { | |
var result = this.responseText; | |
var data = JSON.parse(result); | |
console.log(data); | |
handleTextBox(text_box, data); | |
}); | |
console.log(this.url); | |
oReq.open("GET", this.url); | |
oReq.send(); | |
} | |
} | |
const TabHolder = class { | |
constructor(tablist, elementId, func) { | |
this.tablist = tablist; | |
this.tabHolderDom = document.querySelector(elementId); | |
// func function that is bound to tabHolderDom must call tabClicked(id); | |
this.tabHolderDom.addEventListener("click", func.bind(this)); | |
} | |
listTabs() { | |
for(var i = 0; i < this.tablist.length; ++i) { | |
console.log(this.tablist[i]); | |
} | |
} | |
tabClicked(id) { | |
for(var i = 0; i < this.tablist.length; ++i) { | |
var cur = this.tablist[i]; | |
var tab = document.querySelector("#" + cur.id); | |
if(cur.id != id) { | |
cur.unselectTab; | |
tab.classList.remove("selectedTab"); | |
} else { | |
cur.selectTab; | |
tab.classList.add("selectedTab"); | |
var text_box = document.querySelector("#my_position"); | |
cur.ajaxResponse(null, cur.url); | |
} | |
} | |
} | |
} | |
function handleTextBox(text_box, data) { | |
var title = data["title"]; | |
var body = data["body"]; | |
text_box.querySelector(".myName").innerHTML = title; | |
text_box.querySelector(".myDesc").innerHTML = body; | |
} | |
function func(event) { | |
if(event.target.nodeName === "SPAN") { | |
event.target.parentElement.click(); | |
console.log("SPAN clicked"); | |
return; | |
} else { | |
this.tabClicked(event.target.id); | |
event.stopPropagation(); | |
} | |
} | |
document.addEventListener("DOMContentLoaded", function(event) { | |
var position = new Tab("position", true, "http://jsonplaceholder.typicode.com/posts/1"); | |
var friend = new Tab("friend", false, "http://jsonplaceholder.typicode.com/posts/2"); | |
var theme = new Tab("theme", false, "http://jsonplaceholder.typicode.com/posts/3"); | |
var news = new Tab("news", false, "http://jsonplaceholder.typicode.com/posts/4"); | |
var tabHolder = new TabHolder([position, friend, theme, news], "nav", func); | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment