QueryManager.on("currentQueryChanged", function (e, cq) {
try {
console.debug("currentQueryChanged event called", cq);
// In horizontal mode the code editor also snaps to the query width to give more space.
if (mode === HORIZONTAL) {
Splitter.updateElement(cq.width);
}
// Refresh codemirror
var cm = EditorManager.getCurrentFullEditor()._codeMirror;
cm.refresh();
// update the inline editor with the newly selected query.
updateInlineWidgets();
// Calling this function will write the new query to the style block
// in the iframe and also to the media-queries.css file.
refreshIFrameMediaQueries();
} catch (err) {
console.error("an unexpected exception occurred trying to handle currentQueryChanged event", err);
}
});
/**
* Builds the UI for responsive mode. Lots of DOM injecting here.
*/
function createResponseUI(previewPaneUrl) {
var doc = document;
doc.body.backgroundColor = "#303030";
var cm = EditorManager.getCurrentFullEditor()._codeMirror;
// create response main container and add to body
response = $('<div id="response" class="quiet-scrollbars"/>')[0];
doc.body.insertBefore(response, doc.body.firstChild);
// create toolbar and add to response div element
toolbar = new ResponseToolbar();
toolbar.resize(response.offsetWidth, true);
toolbar.$toolbar.appendTo(response);
toolbar.on('queryWidthChanged', function (e, newVal) {
console.log("queryWidthChanged triggered: " + newVal);
});
// add click handler for vertical/horizontal layout buttons
var horzLayoutBtn = document.getElementById("horzButt");
horzLayoutBtn.addEventListener('click', handleHorzLayoutToggle, false);
var vertLayoutBtn = document.getElementById("vertButt");
vertLayoutBtn.addEventListener('click', handleVertLayoutToggle, false);
// Here I add the live preview iframe wrapped in a div.
var domArray = [{tag: "div", attr: {id: "fwrap"}, parent: -1},
{tag: "iframe", attr: {id: "frame", class: "quiet-scrollbars", name: "frame", src: previewPaneUrl}, parent: 0}];
var frag = ResponseUtils.createDOMFragment(domArray);
response.appendChild(frag);
frame = doc.getElementById('frame');
var h = window.innerHeight;
// Set the initial heights of the panels to 60% response / 40% code editor.
response.style.height = (h * 0.6) + 'px';
mainView.style.height = (h - response.offsetHeight - 16) + 'px';
// Create a vertical splitter to divide the editor and the response UI
Splitter.makeResizable(response, 'vert', 100, cm);
splitter = document.querySelector('.vert-splitter');
// Manually fire the window resize event to position everything correctly.
handleWindowResize(null);
// Refresh codemirror
cm.refresh();
setupEventHandlers();
}
function showHorizontalLayout() {
// Update only if the response element exists
if (document.querySelector('#response')) {
// update the global class to indicate layout
document.body.classList.remove('response-vert');
document.body.classList.add('response-horz');
// clear any inline css rules on div#response and div.main-view
response.style.cssText = null;
mainView.style.cssText = null;
// Remove the current panel splitter
if (splitter !== undefined) {
response.removeChild(splitter);
}
// Create a new splitter for this mode
var cm = EditorManager.getCurrentFullEditor()._codeMirror;
Splitter.makeResizable(response, 'horz', 344, cm);
splitter = document.querySelector('.horz-splitter');
splitter.style.right = '-16px';
var w = window.innerWidth;
// Change to a left/right layout
response.style.width = (w * 0.5) + 'px';
mainView.style.left = (response.offsetWidth + 15) + 'px';
mainView.style.height = '100%';
toolbar.resize(response.offsetWidth);
// refresh layout
WorkspaceManager.recomputeLayout(true);
}
}
function showVerticalLayout() {
// Update only if the response element exists
if (document.querySelector('#response')) {
// update the global class to indicate layout
document.body.classList.remove('response-horz');
document.body.classList.add('response-vert');
// clear any inline css rules on div#response and div.main-view
response.style.cssText = null;
mainView.style.cssText = null;
// Remove the current panel splitter
if (splitter !== undefined) {
response.removeChild(splitter);
}
// Create a new splitter for this mode
var cm = EditorManager.getCurrentFullEditor()._codeMirror;
Splitter.makeResizable(response, 'vert', 100, cm);
splitter = document.querySelector('.vert-splitter');
var h = window.innerHeight;
// Change to a top/bottom layout
response.style.height = (h * 0.6) + 'px';
mainView.style.height = (h - response.offsetHeight - 16) + 'px';
toolbar.resize(response.offsetWidth);
// refresh layout
WorkspaceManager.recomputeLayout(true);
}
}