mirror of
https://github.com/pattern-lab/patternlab-php.git
synced 2025-01-18 06:38:20 +01:00
simple JS libraries to handle display/communication of code view
This commit is contained in:
Dave Olsen
parent
cc3976f9ba
commit
d953581926
79
public/styleguide/js/code-pattern.js
Normal file
79
public/styleguide/js/code-pattern.js
Normal file
@ -0,0 +1,79 @@
|
||||
/*!
|
||||
* Code View Support for Patterns - v0.3
|
||||
*
|
||||
* Copyright (c) 2013 Dave Olsen, http://dmolsen.com
|
||||
* Licensed under the MIT license
|
||||
*
|
||||
*/
|
||||
|
||||
var codePattern = {
|
||||
|
||||
codeOverlayActive: false,
|
||||
codeEmbeddedActive: false,
|
||||
|
||||
/**
|
||||
* toggle the annotation feature on/off
|
||||
* based on the great MDN docs at https://developer.mozilla.org/en-US/docs/Web/API/window.postMessage
|
||||
* @param {Object} event info
|
||||
*/
|
||||
receiveIframeMessage: function(event) {
|
||||
|
||||
// does the origin sending the message match the current host? if not dev/null the request
|
||||
if ((window.location.protocol != "file:") && (event.origin !== window.location.protocol+"//"+window.location.host)) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (event.data.codeToggle != undefined) {
|
||||
|
||||
// if this is an overlay make sure it's active for the onclick event
|
||||
codePattern.codeOverlayActive = false;
|
||||
codePattern.codeEmbeddedActive = false;
|
||||
|
||||
// see which flag to toggle based on if this is a styleguide or view-all page
|
||||
var body = document.getElementsByTagName("body");
|
||||
if ((event.data.codeToggle == "on") && (body[0].classList.contains("sg-pattern-list"))) {
|
||||
codePattern.codeEmbeddedActive = true;
|
||||
} else if (event.data.codeToggle == "on") {
|
||||
codePattern.codeOverlayActive = true;
|
||||
}
|
||||
|
||||
// if comments embedding is turned off make sure to hide the annotations div
|
||||
if (!codePattern.codeEmbeddedActive && (body[0].classList.contains("sg-pattern-list"))) {
|
||||
var els = document.getElementsByClassName("sg-code");
|
||||
for (var i = 0; i < els.length; i++) {
|
||||
els[i].style.display = "none";
|
||||
}
|
||||
}
|
||||
|
||||
// if comments overlay is turned on add the has-comment class and pointer
|
||||
if (codePattern.codeOverlayActive) {
|
||||
|
||||
var targetOrigin = (window.location.protocol == "file:") ? "*" : window.location.protocol+"//"+window.location.host;
|
||||
obj = { "codeOverlay": "on", "lineage": lineage, "html": document.getElementById("sg-pattern-html").textContent, "css": document.getElementById("sg-pattern-css").textContent };
|
||||
parent.postMessage(obj,targetOrigin);
|
||||
|
||||
} else if (codePattern.codeEmbeddedActive) {
|
||||
|
||||
// if code embedding is turned on simply display them
|
||||
var els = document.getElementsByClassName("sg-code");
|
||||
for (var i = 0; i < els.length; ++i) {
|
||||
els[i].style.display = "block";
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
// add the onclick handlers to the elements that have an annotations
|
||||
window.addEventListener("message", codePattern.receiveIframeMessage, false);
|
||||
|
||||
// before unloading the iframe make sure any active overlay is turned off/closed
|
||||
window.onbeforeunload = function() {
|
||||
var obj = { "codeOverlay": "off" };
|
||||
var targetOrigin = (window.location.protocol == "file:") ? "*" : window.location.protocol+"//"+window.location.host;
|
||||
parent.postMessage(obj,targetOrigin);
|
||||
};
|
||||
155
public/styleguide/js/code-viewer.js
Normal file
155
public/styleguide/js/code-viewer.js
Normal file
@ -0,0 +1,155 @@
|
||||
/*!
|
||||
* Code View Support for the Viewer - v0.1
|
||||
*
|
||||
* Copyright (c) 2013 Brad Frost, http://bradfrostweb.com & Dave Olsen, http://dmolsen.com
|
||||
* Licensed under the MIT license
|
||||
*
|
||||
*/
|
||||
|
||||
var codeViewer = {
|
||||
|
||||
codeActive: false,
|
||||
sw: document.documentElement.clientWidth,
|
||||
breakpoint: 650,
|
||||
|
||||
onReady: function() {
|
||||
|
||||
$('body').addClass('code-ready');
|
||||
$('#sg-t-code').click(function(e) {
|
||||
|
||||
e.preventDefault();
|
||||
|
||||
// make sure the annotations overlay is off
|
||||
$('#sg-t-annotations').removeClass('active');
|
||||
annotationsViewer.commentsActive = false;
|
||||
var targetOrigin = (window.location.protocol == "file:") ? "*" : window.location.protocol+"//"+window.location.host;
|
||||
document.getElementById('sg-viewport').contentWindow.postMessage({ "commentToggle": "off" },targetOrigin);
|
||||
annotationsViewer.slideComment(999);
|
||||
|
||||
codeViewer.toggleCode();
|
||||
codeViewer.codeContainerInit();
|
||||
|
||||
});
|
||||
|
||||
},
|
||||
|
||||
toggleCode: function() {
|
||||
|
||||
var targetOrigin = (window.location.protocol == "file:") ? "*" : window.location.protocol+"//"+window.location.host;
|
||||
$('#sg-t-code').toggleClass('active');
|
||||
|
||||
if (!codeViewer.codeActive) {
|
||||
|
||||
codeViewer.codeActive = true;
|
||||
document.getElementById('sg-viewport').contentWindow.postMessage({ "codeToggle": "on" },targetOrigin);
|
||||
|
||||
} else {
|
||||
|
||||
codeViewer.codeActive = false;
|
||||
document.getElementById('sg-viewport').contentWindow.postMessage({ "codeToggle": "off" },targetOrigin);
|
||||
codeViewer.slideCode(999);
|
||||
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
codeContainerInit: function() {
|
||||
|
||||
if (document.getElementById("sg-code-container") == undefined) {
|
||||
$('<div id="sg-code-container" style="display: none;"></div>').html('<a href="#" id="sg-code-close-btn">Close</a><div id="sg-code-lineage" style="display: none;"><h2>Lineage</h2><p>This pattern contains the following patterns: <span id="sg-code-lineage-fill"></span></p></div><div id="sg-code-html"><h2>HTML</h2><pre><code id="sg-code-html-fill" class="language-markup"></code></pre></div><div id="sg-code-css" style="display: none;"><h2>CSS</h2><pre><code id="sg-code-css-fill" class="language-css"></code></pre></div>').appendTo('body').css('bottom',-$(document).outerHeight());
|
||||
}
|
||||
|
||||
if (codeViewer.sw < codeViewer.breakpoint) {
|
||||
$('#sg-code-container').hide();
|
||||
} else {
|
||||
$('#sg-code-container').show();
|
||||
}
|
||||
|
||||
$('body').delegate('#sg-code-close-btn','click',function(e) {
|
||||
codeViewer.slideCode($('#sg-code-container').outerHeight());
|
||||
return false;
|
||||
});
|
||||
|
||||
},
|
||||
|
||||
slideCode: function(pos) {
|
||||
|
||||
$('#sg-code-container').show();
|
||||
|
||||
if (codeViewer.sw > codeViewer.breakpoint) {
|
||||
$('#sg-code-container').css('bottom',-pos);
|
||||
} else {
|
||||
var offset = $('#sg-code-container').offset().top;
|
||||
$('html,body').animate({scrollTop: offset}, 500);
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
updateCode: function(lineage,html,css) {
|
||||
|
||||
// draw lineage
|
||||
if (lineage != null) {
|
||||
$("#sg-code-lineage").css("display","block");
|
||||
var i = 0;
|
||||
var lineageList = "";
|
||||
for (pattern in lineage) {
|
||||
lineageList += (i == 0) ? "" : ", ";
|
||||
lineageList += "<a href='#'>"+lineage[pattern]+"</a>";
|
||||
i++;
|
||||
}
|
||||
$("#sg-code-lineage-fill").html(lineageList);
|
||||
}
|
||||
|
||||
// draw html
|
||||
$("#sg-code-html-fill").text(html);
|
||||
Prism.highlightElement(document.getElementById("sg-code-html-fill"));
|
||||
|
||||
// draw CSS
|
||||
if (css.indexOf("{{ patternCSS }}") == -1) {
|
||||
$("#sg-code-css").css("display","block");
|
||||
$("#sg-code-css-fill").text(css);
|
||||
Prism.highlightElement(document.getElementById("sg-code-css-fill"));
|
||||
}
|
||||
|
||||
codeViewer.slideCode(0);
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* toggle the comment pop-up based on a user clicking on the pattern
|
||||
* based on the great MDN docs at https://developer.mozilla.org/en-US/docs/Web/API/window.postMessage
|
||||
* @param {Object} event info
|
||||
*/
|
||||
receiveIframeMessage: function(event) {
|
||||
|
||||
// does the origin sending the message match the current host? if not dev/null the request
|
||||
if ((window.location.protocol != "file:") && (event.origin !== window.location.protocol+"//"+window.location.host)) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (event.data.codeOverlay != undefined) {
|
||||
if (event.data.codeOverlay == "on") {
|
||||
|
||||
codeViewer.updateCode(event.data.lineage,event.data.html,event.data.css);
|
||||
|
||||
} else {
|
||||
|
||||
codeViewer.slideCode($('#sg-code-container').outerHeight());
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
$(document).ready(function() { codeViewer.onReady(); });
|
||||
window.addEventListener("message", codeViewer.receiveIframeMessage, false);
|
||||
|
||||
// make sure if a new pattern or view-all is loaded that comments are turned on as appropriate
|
||||
$('#sg-viewport').load(function() {
|
||||
if (codeViewer.codeActive) {
|
||||
var targetOrigin = (window.location.protocol == "file:") ? "*" : window.location.protocol+"//"+window.location.host;
|
||||
document.getElementById('sg-viewport').contentWindow.postMessage({ "codeToggle": "on" },targetOrigin);
|
||||
}
|
||||
});
|
||||
Loading…
x
Reference in New Issue
Block a user