Code

• Home
/
• Code

<?php
header(“Access-Control-Allow-Origin: *”);
?>
<style>
.tablink { cursor: pointer; padding: 2px 5px; border: 1px solid #4b89b2; background: #eee; }
.tablink:hover { text-decoration: underline; background: #4b89b2; color: #fff; }
.tabactive { border-bottom: #fff; background: #fff; }
</style>
<a class=”tablink” id=”tab1″ onclick=”showTab(1); return false;”>All</a>
<a class=”tablink” id=”tab2″ onclick=”showTab(2); return false;”>General</a>
<a class=”tablink” id=”tab3″ onclick=”showTab(3); return false;”>Planning</a>
<a class=”tablink” id=”tab4″ onclick=”showTab(4); return false;”>Project</a>
<a class=”tablink” id=”tab5″ onclick=”showTab(5); return false;”>Related</a>
<a class=”tablink” id=”tab6″ onclick=”showTab(6); return false;”>Release</a>
<script>

console.log(“initializing tabs”);

// array of tabs of array of external field ids for each tab
var tabs = [
[“title”,”flag”,”status”,”type”,”developper-assigned”,”description”,”rd-information”,”reported-by-2″,”link”,”image”,”email-tracking”,”release-notes-validation”
,”planning-accuracy-2″,”time-estimate”,”visibility”,”time-tracking”,”ressource”,”priority-3″,”sprint”,”waterfall-schedule”
,”inquiry”,”parent-story-analysis”,”related-project”,”product”,”area”,”active-qa-detail”
,”things-to-do-at-the-update”,”things-already-done-for-the-update”,”qa-information”,”release-notes-en”,”release-notes-fr”,”release”,”released-when”]
,[“title”,”flag”,”status”,”type”,”developper-assigned”,”description”,”rd-information”,”reported-by-2″,”link”,”image”,”email-tracking”,”release-notes-validation”]
,[“planning-accuracy-2″,”time-estimate”,”visibility”,”time-tracking”,”ressource”,”priority-3″,”sprint”,”waterfall-schedule”]
,[“related-project”,”ressource”,”priority-3″,”waterfall-schedule”,”waterfall-released-when”]
,[“inquiry”,”parent-story-analysis”,”related-project”,”product”,”area”,”active-qa-detail”,”ressource”]
,[“things-to-do-at-the-update”,”things-already-done-for-the-update”,”qa-information”,”release-notes-en”,”release-notes-fr”,”release”,”released-when”]
];

// array of external field ids that must stay hidden
var hiddenElm = [“section-5″,”section-3″,”section-2″,”section-8″,”section”,”field”,”calculation-2″,”section-6″,”section-4″];

// array of external field ids that must be highlighted
// var highlightElm = [“developper-assigned”,”release-notes-en”,”release-notes-fr”,”rd-information”];
// var importantElm = [“status”,”time-tracking”,”things-to-do-at-the-update”];
var highlightElm = [];
var importantElm = [];
var criticalElm = [];

function showTab(tab) {
tab = tab-1;
hideAll();

document.getElementById(“tab”+(tab+1)).classList.add(“tabactive”);

for (var j=0; j<tabs[tab].length; j++) {
// Get element
elm = document.getElementById(tabs[tab][j]);

//Skip “Hidden if empty” fields
if ( ! elm.classList.contains(“hidden”) ) {
document.getElementById(tabs[tab][j]).style.display = “list-item”;
}
}

// If we are on the All tab – we show always hidden elements
if ( tab == 0 ) {
alwaysHide(“list-item”);
}
}

function hideAll() {

for (var i=0; i<tabs.length; i++) {

if (document.getElementById(“tab”+(i+1))) document.getElementById(“tab”+(i+1)).classList.remove(“tabactive”);

for (var j=0; j<tabs[i].length; j++) {
elm = document.getElementById(tabs[i][j]);

//Skip “Hidden if empty” fields
if ( ! elm.classList.contains(“hidden”) ) {
document.getElementById(tabs[i][j]).style.display = “none”;
}

}
}

// Also hide always hidden elements
alwaysHide(“none”);
}

function alwaysHide(style) {
for (var i=0; i<hiddenElm.length; i++) {
elm = document.getElementById(hiddenElm[i]);

//Skip “Hidden if empty” fields
if ( ! elm.classList.contains(“hidden”) ) {
document.getElementById(hiddenElm[i]).style.display = style;
}
}
}

function highlight(elm,color) {
for (var i=0; i<elm.length; i++) {
document.getElementById(elm[i]).style.backgroundColor = color;
}
}

highlight(highlightElm,”#9999ff”);
highlight(importantElm,”#ffc266″);
highlight(criticalElm,”#ff6666″);

// We do not hide since we now use All tab as default selection
// alwaysHide();

showTab(1);

</script>