Skip to content

Use shared jQuery references instead of repeately querying DOM #101

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: develop
Choose a base branch
from
Open

Use shared jQuery references instead of repeately querying DOM #101

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
a878ea9
Use shared references to .pl-js-iframe and .pl-js-vp-iframe-container…
Oct 30, 2017
5216b75
Use shared references to .pl-js-viewport-cover instead of querying th…
Oct 30, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
50 changes: 26 additions & 24 deletions src/js/styleguide.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,9 @@
}

var viewportResizeHandleWidth = 14, //Width of the viewport drag-to-resize handle
$sgIframeContainer = $('.pl-js-vp-iframe-container'), //Outer container for viewport
$sgIframe = $('.pl-js-iframe'), //Viewport element
$sgViewportCover = $('.pl-js-viewport-cover'), //Viewport cover element
$sizePx = $('#pl-size-px'), //Px size input element in toolbar
$sizeEms = $('#pl-size-em'), //Em size input element in toolbar
$bodySize = (config.ishFontSize !== undefined) ? parseInt(config.ishFontSize) : parseInt($('body').css('font-size')), //Body size of the document
Expand Down Expand Up @@ -206,18 +208,18 @@
var currentWidth = $sgIframe.width();
hayMode = false;
$sgIframe.removeClass('hay-mode');
$('.pl-js-vp-iframe-container').removeClass('hay-mode');
$sgIframeContainer.removeClass('hay-mode');
sizeiframe(Math.floor(currentWidth));
}

// start Hay! mode
function startHay() {
hayMode = true;
$('.pl-js-vp-iframe-container').removeClass("vp-animate").width(minViewportWidth + viewportResizeHandleWidth);
$sgIframeContainer.removeClass("vp-animate").width(minViewportWidth + viewportResizeHandleWidth);
$sgIframe.removeClass("vp-animate").width(minViewportWidth);

var timeoutID = window.setTimeout(function () {
$('.pl-js-vp-iframe-container').addClass('hay-mode').width(maxViewportWidth + viewportResizeHandleWidth);
$sgIframeContainer.addClass('hay-mode').width(maxViewportWidth + viewportResizeHandleWidth);
$sgIframe.addClass('hay-mode').width(maxViewportWidth);

setInterval(function () {
Expand Down Expand Up @@ -302,32 +304,32 @@

//Conditionally remove CSS animation class from viewport
if (animate === false) {
$('.pl-js-vp-iframe-container, .pl-js-iframe').removeClass("vp-animate"); //If aninate is set to false, remove animate class from viewport
$sgIframe.add($sgIframeContainer).removeClass("vp-animate"); //If aninate is set to false, remove animate class from viewport
} else {
$('.pl-js-vp-iframe-container, .pl-js-iframe').addClass("vp-animate");
$sgIframe.add($sgIframeContainer).addClass("vp-animate");
}

$('.pl-js-vp-iframe-container').width(theSize + viewportResizeHandleWidth); //Resize viewport wrapper to desired size + size of drag resize handler
$sgIframeContainer.width(theSize + viewportResizeHandleWidth); //Resize viewport wrapper to desired size + size of drag resize handler
$sgIframe.width(theSize); //Resize viewport to desired size

var targetOrigin = (window.location.protocol === "file:") ? "*" : window.location.protocol + "//" + window.location.host;
var obj = JSON.stringify({
"event": "patternLab.resize",
"resize": "true"
});
document.querySelector('.pl-js-iframe').contentWindow.postMessage(obj, targetOrigin);
$sgIframe.get(0).contentWindow.postMessage(obj, targetOrigin);

updateSizeReading(theSize); //Update values in toolbar
saveSize(theSize); //Save current viewport to cookie
}

$(".pl-js-vp-iframe-container").on('transitionend webkitTransitionEnd', function (e) {
$sgIframeContainer.on('transitionend webkitTransitionEnd', function (e) {
var targetOrigin = (window.location.protocol === "file:") ? "*" : window.location.protocol + "//" + window.location.host;
var obj = JSON.stringify({
"event": "patternLab.resize",
"resize": "true"
});
document.querySelector('.pl-js-iframe').contentWindow.postMessage(obj, targetOrigin);
$sgIframe.get(0).contentWindow.postMessage(obj, targetOrigin);
});

function saveSize(size) {
Expand Down Expand Up @@ -371,13 +373,13 @@

//Update The viewport size
function updateViewportWidth(size) {
$(".pl-js-iframe").width(size);
$(".pl-js-vp-iframe-container").width(size * 1 + 14);
$sgIframe.width(size);
$sgIframeContainer.width(size * 1 + 14);

updateSizeReading(size);
}

$('.pl-js-vp-iframe-container').on('touchstart', function (event) {});
$sgIframeContainer.on('touchstart', function (event) {});

// handles widening the "viewport"
// 1. on "mousedown" store the click location
Expand All @@ -392,10 +394,10 @@
fullMode = false;

// show the cover
$(".pl-js-viewport-cover").css("display", "block");
$sgViewportCover.css("display", "block");

// add the mouse move event and capture data. also update the viewport width
$('.pl-js-viewport-cover').mousemove(function (event) {
$sgViewportCover.mousemove(function (event) {
var viewportWidth;

viewportWidth = origViewportWidth + 2 * (event.clientX - origClientX);
Expand All @@ -418,14 +420,14 @@

// on "mouseup" we unbind the "mousemove" event and hide the cover again
$('body').mouseup(function () {
$('.pl-js-viewport-cover').unbind('mousemove');
$('.pl-js-viewport-cover').css("display", "none");
$sgViewportCover.unbind('mousemove');
$sgViewportCover.css("display", "none");
});


// capture the viewport width that was loaded and modify it so it fits with the pull bar
var origViewportWidth = $(".pl-js-iframe").width();
$(".pl-js-vp-iframe-container").width(origViewportWidth);
var origViewportWidth = $sgIframe.width();
$sgIframeContainer.width(origViewportWidth);

var testWidth = screen.width;
if (window.orientation !== undefined) {
Expand All @@ -434,9 +436,9 @@
if (($(window).width() == testWidth) && ('ontouchstart' in document.documentElement) && ($(window).width() <= 1024)) {
$(".pl-js-resize-container").width(0);
} else {
$(".pl-js-iframe").width(origViewportWidth - 14);
$sgIframe.width(origViewportWidth - 14);
}
updateSizeReading($(".pl-js-iframe").width());
updateSizeReading($sgIframe.width());

// get the request vars
var oGetVars = urlHandler.getRequestVars();
Expand Down Expand Up @@ -482,7 +484,7 @@
}

urlHandler.skipBack = true;
document.querySelector('.pl-js-iframe').contentWindow.location.replace(iFramePath);
$sgIframe.get(0).contentWindow.location.replace(iFramePath);

// Close all dropdowns and navigation
function closePanels() {
Expand All @@ -499,7 +501,7 @@
"event": "patternLab.updatePath",
"path": urlHandler.getFileName($(this).attr("data-patternpartial"))
});
document.querySelector('.pl-js-iframe').contentWindow.postMessage(obj, urlHandler.targetOrigin);
$sgIframe.get(0).contentWindow.postMessage(obj, urlHandler.targetOrigin);
closePanels();
});

Expand All @@ -513,8 +515,8 @@
var origOrientation = window.orientation;
window.addEventListener("orientationchange", function () {
if (window.orientation != origOrientation) {
$(".pl-js-vp-iframe-container").width($(window).width());
$(".pl-js-iframe").width($(window).width());
$sgIframeContainer.width($(window).width());
$sgIframe.width($(window).width());
updateSizeReading($(window).width());
origOrientation = window.orientation;
}
Expand Down