75 lines
2.4 KiB
JavaScript
75 lines
2.4 KiB
JavaScript
|
|
||
|
|
|
||
|
|
// switch to target tab pane
|
||
|
|
function switchTab(targetId){
|
||
|
|
var panes = document.querySelectorAll('.tab-content .tab-pane');
|
||
|
|
for (var i=0; i< panes.length; i++){
|
||
|
|
panes[i].style.display = 'none';
|
||
|
|
}
|
||
|
|
var targetPane = document.getElementById(targetId);
|
||
|
|
if(targetPane){
|
||
|
|
targetPane.style.display = 'block';
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// send ajax post request with content to specified url
|
||
|
|
function ajaxPost(content, url, callback){
|
||
|
|
var xhr = new XMLHttpRequest();
|
||
|
|
xhr.open('POST', url, true);
|
||
|
|
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
|
||
|
|
xhr.onreadystatechange = function(){
|
||
|
|
if(xhr.readyState === XMLHttpRequest.DONE){
|
||
|
|
if(xhr.status === 200){
|
||
|
|
callback(xhr.responseText);
|
||
|
|
} else {
|
||
|
|
console.error("AJAX error: " + xhr.status);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
var params = 'content=' + encodeURIComponent(content);
|
||
|
|
xhr.send(params);
|
||
|
|
}
|
||
|
|
|
||
|
|
// load preview via ajax into preview element
|
||
|
|
function loadPreview(previewElement){
|
||
|
|
var sourceId = previewElement.getAttribute('data-source');
|
||
|
|
var handlerUrl = previewElement.getAttribute('data-handler');
|
||
|
|
var method = previewElement.getAttribute('data-method');
|
||
|
|
var sourceElement = document.getElementById(sourceId);
|
||
|
|
if(sourceElement){
|
||
|
|
var content = sourceElement.value;
|
||
|
|
if(method && method.toLowerCase() == 'post'){
|
||
|
|
ajaxPost(content, handlerUrl, function (response){
|
||
|
|
previewElement.innerHTML = response;
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// initialise tab links to handle tab switching
|
||
|
|
function initTabs(){
|
||
|
|
var tabLinks = document.querySelectorAll('.tabs a[data-target]');
|
||
|
|
for(var i=0; i<tabLinks.length; i++){
|
||
|
|
tabLinks[i].addEventListener('click', function(e){
|
||
|
|
e.preventDefault();
|
||
|
|
var target = this.getAttribute('data-target');
|
||
|
|
switchTab(target);
|
||
|
|
|
||
|
|
// if the new tab has a preview element, load the preview
|
||
|
|
var pane = document.getElementById(target);
|
||
|
|
if(pane){
|
||
|
|
var previewElement = pane.querySelector('.preview');
|
||
|
|
if(previewElement){
|
||
|
|
console.log('pane has preview el')
|
||
|
|
loadPreview(previewElement);
|
||
|
|
} else {
|
||
|
|
console.log('pane doesnt have preview el');
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
document.addEventListener('DOMContentLoaded', function(){
|
||
|
|
initTabs();
|
||
|
|
});
|