mirror of
https://github.com/pattern-lab/patternlab-php.git
synced 2025-01-17 06:08:23 +01:00
Viewport resizing manual mode
Keyup and keydown functionality. Can press and hold up and down arrows to fine tune the viewport size. On-the-fly px-to-em (and vice-versa) conversion Consolidated Dave's duplicate functions into the main behavior
This commit is contained in:
Brad Frost
parent
17cdfc383b
commit
264a972058
@ -380,7 +380,7 @@ html, body {
|
||||
font-family: "HelveticaNeue", "Helvetica", "Arial", sans-serif;
|
||||
font-size: 70%;
|
||||
font-weight: normal;
|
||||
padding: 1em; }
|
||||
padding: 1em 0; }
|
||||
.sg-head a {
|
||||
display: block;
|
||||
border-bottom: 1px solid #222222;
|
||||
|
||||
@ -540,12 +540,14 @@ html, body {
|
||||
font-family: $sg-font;
|
||||
font-size: $sg-font-size-sm;
|
||||
font-weight: normal;
|
||||
padding: $sg-pad;
|
||||
padding: $sg-pad 0;
|
||||
|
||||
a {
|
||||
display: block;
|
||||
border-bottom: 1px solid $sg-primary;
|
||||
color: #222;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
color: $sg-secondary;
|
||||
border-bottom-color: $sg-secondary;
|
||||
|
||||
@ -3,11 +3,13 @@
|
||||
sh = document.body.clientHeight, //Viewport Height
|
||||
minViewportWidth = 240, //Minimum Size for Viewport
|
||||
maxViewportWidth = 2600, //Maxiumum Size for Viewport
|
||||
viewportResizeHandleWidth = 14, //Width of the viewport drag-to-resize handle
|
||||
$sgViewport = $('#sg-viewport'), //Viewport element
|
||||
$viewToggle = $('#sg-t-toggle'), //Toggle
|
||||
$sizeToggle = $('#sg-size-toggle'),
|
||||
$tAnnotations = $('#sg-t-annotations'),
|
||||
$tSize = $('#sg-size'),
|
||||
$sizePx = $('.sg-size-px'), //Px size input element in toolbar
|
||||
$sizeEms = $('.sg-size-em'), //Em size input element in toolbar
|
||||
$bodySize = parseInt($('body').css('font-size')), //Body size of the document
|
||||
$vp = Object,
|
||||
$sgPattern = Object,
|
||||
discoID = false,
|
||||
@ -18,7 +20,15 @@
|
||||
$(w).resize(function(){ //Update dimensions on resize
|
||||
sw = document.body.clientWidth;
|
||||
sh = document.body.clientHeight;
|
||||
displayWidth();
|
||||
});
|
||||
|
||||
/* Pattern Lab accordion dropdown */
|
||||
$('.sg-acc-handle').on("click", function(e){
|
||||
var $this = $(this),
|
||||
$panel = $this.next('.sg-acc-panel');
|
||||
e.preventDefault();
|
||||
$this.toggleClass('active');
|
||||
$panel.toggleClass('active');
|
||||
});
|
||||
|
||||
$('.sg-nav-toggle').on("click", function(e){
|
||||
@ -35,7 +45,7 @@
|
||||
});
|
||||
|
||||
//Size Trigger
|
||||
$sizeToggle.on("click", function(e){
|
||||
$('#sg-size-toggle').on("click", function(e){
|
||||
e.preventDefault();
|
||||
$(this).parents('ul').toggleClass('active');
|
||||
});
|
||||
@ -53,15 +63,14 @@
|
||||
killDisco();
|
||||
killHay();
|
||||
|
||||
var val = $(this).attr('data-size'),
|
||||
bodySize = parseInt($('body').css('font-size'));
|
||||
var val = $(this).attr('data-size');
|
||||
|
||||
if (val.indexOf('px') > -1) {
|
||||
bodySize = 1;
|
||||
$bodySize = 1;
|
||||
}
|
||||
|
||||
val = val.replace(/[^\d.-]/g,'')
|
||||
sizeiframe(Math.floor(val*bodySize));
|
||||
sizeiframe(Math.floor(val*$bodySize));
|
||||
});
|
||||
|
||||
//Size View Events
|
||||
@ -99,7 +108,7 @@
|
||||
});
|
||||
|
||||
//Click Full Width Button
|
||||
$('#sg-size-full').on("click", function(e){
|
||||
$('#sg-size-full').on("click", function(e){ //Resets
|
||||
e.preventDefault();
|
||||
killDisco();
|
||||
killHay();
|
||||
@ -128,6 +137,17 @@
|
||||
}
|
||||
});
|
||||
|
||||
/* Disco Mode */
|
||||
function disco() {
|
||||
sizeiframe(getRandom(minViewportWidth,sw));
|
||||
}
|
||||
|
||||
function killDisco() {
|
||||
discoMode = false;
|
||||
clearInterval(discoID);
|
||||
discoID = false;
|
||||
}
|
||||
|
||||
//Stephen Hay Mode - "Start with the small screen first, then expand until it looks like shit. Time for a breakpoint!"
|
||||
$('#sg-size-hay').on("click", function(e){
|
||||
e.preventDefault();
|
||||
@ -137,50 +157,202 @@
|
||||
killHay();
|
||||
} else {
|
||||
hayMode = true;
|
||||
$('#sg-gen-container').removeClass("vp-animate").width(minViewportWidth+14);
|
||||
$('#sg-viewport').removeClass("vp-animate").width(minViewportWidth);
|
||||
$('#sg-gen-container').removeClass("vp-animate").width(minViewportWidth+viewportResizeHandleWidth);
|
||||
$sgViewport.removeClass("vp-animate").width(minViewportWidth);
|
||||
var timeoutID = window.setTimeout(function(){
|
||||
$('#sg-gen-container').addClass('hay-mode').width(maxViewportWidth+14);
|
||||
$('#sg-viewport').addClass('hay-mode').width(maxViewportWidth);
|
||||
$('#sg-gen-container').addClass('hay-mode').width(maxViewportWidth+viewportResizeHandleWidth);
|
||||
$sgViewport.addClass('hay-mode').width(maxViewportWidth);
|
||||
}, 200);
|
||||
}
|
||||
});
|
||||
|
||||
//Set Manual Pixel Contenteditable region
|
||||
$('.sg-size-px').on("keydown", function(e){
|
||||
var val = $(this).val();
|
||||
//Stop Hay! Mode
|
||||
function killHay() {
|
||||
var currentWidth = $sgViewport.width();
|
||||
hayMode = false;
|
||||
$sgViewport.removeClass('hay-mode');
|
||||
$('#sg-gen-container').removeClass('hay-mode');
|
||||
sizeiframe(Math.floor(currentWidth));
|
||||
}
|
||||
|
||||
if(e.keyCode == 13) { //If the Enter key is hit
|
||||
//Pixel input
|
||||
$sizePx.on('keydown', function(e){
|
||||
var val = Math.floor($(this).val());
|
||||
|
||||
if(e.keyCode == 38) { //If the up arrow key is hit
|
||||
val++;
|
||||
sizeiframe(val,false);
|
||||
} else if(e.keyCode == 40) { //If the down arrow key is hit
|
||||
val--;
|
||||
sizeiframe(val,false);
|
||||
} else if(e.keyCode == 13) { //If the Enter key is hit
|
||||
e.preventDefault();
|
||||
sizeiframe(Math.floor(val)); //Size Iframe to value of text box
|
||||
updateEmSizeReading(val);
|
||||
sizeiframe(val); //Size Iframe to value of text box
|
||||
$(this).blur();
|
||||
} else { //If any other character is entered
|
||||
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
//Set Manual
|
||||
$('.sg-size-em').on("keydown", function(e){
|
||||
var val = $(this).val();
|
||||
var bodySize = parseInt($('body').css('font-size'));
|
||||
$sizePx.on('keyup', function(e){
|
||||
var val = Math.floor($(this).val());
|
||||
updateSizeReading(val,'updateEmInput');
|
||||
});
|
||||
|
||||
//if(e.keyCode == 13) { //If the Enter key is hit
|
||||
//Em input
|
||||
$sizeEms.on('keydown', function(e){
|
||||
var val = parseFloat($(this).val());
|
||||
|
||||
if(e.keyCode == 38) { //If the up arrow key is hit
|
||||
val++;
|
||||
sizeiframe(Math.floor(val*$bodySize),false);
|
||||
} else if(e.keyCode == 40) { //If the down arrow key is hit
|
||||
val--;
|
||||
sizeiframe(Math.floor(val*$bodySize),false);
|
||||
} else if(e.keyCode == 13) { //If the Enter key is hit
|
||||
e.preventDefault();
|
||||
sizeiframe(Math.floor(val*bodySize)); //Size Iframe to value of text box
|
||||
updatePxSizeReading(val);
|
||||
//} else { //If any other character is entered
|
||||
//
|
||||
//}
|
||||
sizeiframe(Math.floor(val*$bodySize)); //Size Iframe to value of text box
|
||||
}
|
||||
});
|
||||
|
||||
$sizeEms.on('keyup', function(e){
|
||||
var val = parseFloat($(this).val());
|
||||
updateSizeReading(val,'em','updatePxInput');
|
||||
});
|
||||
|
||||
//Resize the viewport
|
||||
//'size' is the target size of the viewport
|
||||
//'animate' is a boolean for switching the CSS animation on or off. 'animate' is true by default, but can be set to false for things like nudging and dragging
|
||||
function sizeiframe(size,animate) {
|
||||
var theSize;
|
||||
|
||||
if(size>maxViewportWidth) { //If the entered size is larger than the max allowed viewport size, cap value at max vp size
|
||||
theSize = maxViewportWidth;
|
||||
} else if(size<minViewportWidth) { //If the entered size is less than the minimum allowed viewport size, cap value at min vp size
|
||||
theSize = minViewportWidth;
|
||||
} else {
|
||||
theSize = size;
|
||||
}
|
||||
|
||||
//Conditionally remove CSS animation class from viewport
|
||||
if(animate==false) {
|
||||
$('#sg-gen-container,#sg-viewport').removeClass("vp-animate"); //If aninate is set to false, remove animate class from viewport
|
||||
} else {
|
||||
$('#sg-gen-container,#sg-viewport').addClass("vp-animate");
|
||||
}
|
||||
|
||||
$('#sg-gen-container').width(theSize+viewportResizeHandleWidth); //Resize viewport wrapper to desired size + size of drag resize handler
|
||||
$sgViewport.width(theSize); //Resize viewport to desired size
|
||||
|
||||
updateSizeReading(theSize); //Update values in toolbar
|
||||
saveSize(theSize); //Save current viewport to cookie
|
||||
}
|
||||
|
||||
function saveSize(size) {
|
||||
if (!findValue('vpWidth')) {
|
||||
addValue("vpWidth",size);
|
||||
} else {
|
||||
updateValue("vpWidth",size);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//Update Pixel and Em inputs
|
||||
//'size' is the input number
|
||||
//'unit' is the type of unit: either px or em. Default is px. Accepted values are 'px' and 'em'
|
||||
//'target' is what inputs to update. Defaults to both
|
||||
function updateSizeReading(size,unit,target) {
|
||||
if(unit=='em') { //If size value is in em units
|
||||
emSize = size;
|
||||
pxSize = Math.floor(size*$bodySize);
|
||||
} else { //If value is px or absent
|
||||
pxSize = size;
|
||||
emSize = size/$bodySize;
|
||||
}
|
||||
|
||||
if (target == 'updatePxInput') {
|
||||
$sizePx.val(pxSize);
|
||||
console.log('pxSize='+pxSize)
|
||||
} else if (target == 'updateEmInput') {
|
||||
$sizeEms.val(emSize.toFixed(2));
|
||||
} else {
|
||||
$sizeEms.val(emSize.toFixed(2));
|
||||
$sizePx.val(pxSize);
|
||||
}
|
||||
}
|
||||
|
||||
/* Returns a random number between min and max */
|
||||
function getRandom (min, max) {
|
||||
return Math.random() * (max - min) + min;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
function updateViewportWidth(size) {
|
||||
|
||||
$("#sg-viewport").width(size);
|
||||
$("#sg-gen-container").width(Math.floor(size) + 14);
|
||||
|
||||
updateSizeReading(size);
|
||||
}
|
||||
|
||||
// handles widening the "viewport"
|
||||
// 1. on "mousedown" store the click location
|
||||
// 2. make a hidden div visible so that it can track mouse movements and make sure the pointer doesn't get lost in the iframe
|
||||
// 3. on "mousemove" calculate the math, save the results to a cookie, and update the viewport
|
||||
$('#sg-rightpull').mousedown(function(event) {
|
||||
|
||||
// capture default data
|
||||
var origClientX = event.clientX;
|
||||
var origViewportWidth = $sgViewport.width();
|
||||
|
||||
// show the cover
|
||||
$("#sg-cover").css("display","block");
|
||||
|
||||
// add the mouse move event and capture data. also update the viewport width
|
||||
$('#sg-cover').mousemove(function(event) {
|
||||
|
||||
viewportWidth = (origClientX > event.clientX) ? origViewportWidth - ((origClientX - event.clientX)*2) : origViewportWidth + ((event.clientX - origClientX)*2);
|
||||
|
||||
if (viewportWidth > minViewportWidth) {
|
||||
|
||||
if (!findValue('vpWidth')) {
|
||||
addValue("vpWidth",viewportWidth);
|
||||
} else {
|
||||
updateValue("vpWidth",viewportWidth);
|
||||
}
|
||||
|
||||
sizeiframe(viewportWidth,false);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// on "mouseup" we unbind the "mousemove" event and hide the cover again
|
||||
$('body').mouseup(function(event) {
|
||||
$('#sg-cover').unbind('mousemove');
|
||||
$('#sg-cover').css("display","none");
|
||||
});
|
||||
|
||||
// capture the viewport width that was loaded and modify it so it fits with the pull bar
|
||||
var origViewportWidth = $("#sg-viewport").width();
|
||||
$("#sg-gen-container").width(origViewportWidth);
|
||||
$("#sg-viewport").width(origViewportWidth - 14);
|
||||
|
||||
// pre-load the viewport width
|
||||
var vpWidth = 0;
|
||||
var trackViewportWidth = true; // can toggle this feature on & off
|
||||
if (trackViewportWidth && (vpWidth = findValue("vpWidth"))) {
|
||||
updateViewportWidth(vpWidth);
|
||||
}
|
||||
|
||||
//IFrame functionality
|
||||
|
||||
//Scripts to run after the page has loaded into the iframe
|
||||
$sgViewport.load(function (){
|
||||
var $sgSrc = $sgViewport.attr('src'),
|
||||
$vp = $sgViewport.contents(),
|
||||
$sgPattern = $vp.find('.sg-pattern');
|
||||
|
||||
|
||||
|
||||
//Clean View Trigger
|
||||
$('#sg-t-clean').on("click", function(e){
|
||||
@ -249,181 +421,5 @@
|
||||
});
|
||||
});
|
||||
|
||||
//Resize the viewport
|
||||
function sizeiframe(size) {
|
||||
var theSize;
|
||||
|
||||
if(size>maxViewportWidth) {
|
||||
theSize = maxViewportWidth;
|
||||
} else if(size<minViewportWidth) {
|
||||
theSize = minViewportWidth;
|
||||
} else {
|
||||
theSize = size;
|
||||
}
|
||||
|
||||
$('#sg-gen-container').addClass("vp-animate");
|
||||
$('#sg-viewport').addClass("vp-animate");
|
||||
$('#sg-gen-container').width(theSize+14);
|
||||
$('#sg-viewport').width(theSize);
|
||||
updateSizeReading(theSize);
|
||||
saveSize(theSize);
|
||||
}
|
||||
|
||||
function saveSize(size) {
|
||||
if (!findValue('vpWidth')) {
|
||||
addValue("vpWidth",size);
|
||||
} else {
|
||||
updateValue("vpWidth",size);
|
||||
}
|
||||
}
|
||||
|
||||
//Update Size Reading
|
||||
var $sizePx = $('.sg-size-px');
|
||||
var $sizeEms = $('.sg-size-em');
|
||||
var $bodySize = parseInt($('body').css('font-size'));
|
||||
|
||||
function displayWidth() {
|
||||
var vpWidth = $sgViewport.width() - 14;
|
||||
var emSize = vpWidth/$bodySize;
|
||||
$sizePx.val(vpWidth);
|
||||
$sizeEms.val(emSize.toFixed(2));
|
||||
}
|
||||
|
||||
displayWidth();
|
||||
|
||||
function updateSizeReading(size) {
|
||||
var theSize = Math.floor(size);
|
||||
var emSize = theSize/$bodySize;
|
||||
$sizePx.val(theSize);
|
||||
$sizeEms.val(emSize.toFixed(2));
|
||||
}
|
||||
|
||||
//Update Em Reading from Pixels
|
||||
function updateEmSizeReading(pxVal) {
|
||||
var emSize = pxVal/$bodySize;
|
||||
$sizeEms.val(emSize.toFixed(2));
|
||||
}
|
||||
|
||||
//Update Pixel Reading From Ems
|
||||
function updatePxSizeReading(emVal) {
|
||||
var pxSize = emVal*$bodySize;
|
||||
$sizePx.val(pxSize);
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* Disco Mode */
|
||||
function disco() {
|
||||
sizeiframe(getRandom(240,sw));
|
||||
}
|
||||
|
||||
function killDisco() {
|
||||
discoMode = false;
|
||||
clearInterval(discoID);
|
||||
discoID = false;
|
||||
}
|
||||
|
||||
function killHay() {
|
||||
var currentWidth = $('#sg-viewport').width();
|
||||
hayMode = false;
|
||||
$sgViewport.removeClass('hay-mode');
|
||||
$('#sg-gen-container').removeClass('hay-mode');
|
||||
sizeiframe(Math.floor(currentWidth));
|
||||
}
|
||||
|
||||
/* Returns a random number between min and max */
|
||||
function getRandom (min, max) {
|
||||
return Math.random() * (max - min) + min;
|
||||
}
|
||||
|
||||
/* Accordion */
|
||||
$('.sg-acc-handle').on("click", function(e){
|
||||
var $this = $(this),
|
||||
$panel = $this.next('.sg-acc-panel');
|
||||
e.preventDefault();
|
||||
$this.toggleClass('active');
|
||||
$panel.toggleClass('active');
|
||||
});
|
||||
|
||||
/* load iframe */
|
||||
function loadIframe(iframeName, url) {
|
||||
var $iframe = $('#' + iframeName);
|
||||
if ( $iframe.length ) {
|
||||
$iframe.attr('src',url);
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
}
|
||||
|
||||
})(this);
|
||||
|
||||
/************************
|
||||
* Dave's stuff... don't want to hack at the original styleguide too much
|
||||
************************/
|
||||
|
||||
// update the viewportWidth and note difference in the toolbar
|
||||
function updateViewportWidth(size) {
|
||||
|
||||
var sizePx = $('.sg-size-px');
|
||||
var sizeEms = $('.sg-size-em');
|
||||
var bodySize = parseInt($('body').css('font-size'));
|
||||
|
||||
$("#sg-viewport").width(size);
|
||||
$("#sg-gen-container").width(Math.floor(size) + 14);
|
||||
|
||||
var emSize = (Math.floor(size))/bodySize;
|
||||
sizePx.val(Math.floor(size));
|
||||
sizeEms.val(emSize.toFixed(2));
|
||||
}
|
||||
|
||||
// handles widening the "viewport"
|
||||
// 1. on "mousedown" store the click location
|
||||
// 2. make a hidden div visible so that it can track mouse movements and make sure the pointer doesn't get lost in the iframe
|
||||
// 3. on "mousemove" calculate the math, save the results to a cookie, and update the viewport
|
||||
$('#sg-rightpull').mousedown(function(event) {
|
||||
|
||||
$('#sg-gen-container').removeClass("vp-animate");
|
||||
$('#sg-viewport').removeClass("vp-animate");
|
||||
|
||||
// capture default data
|
||||
var origClientX = event.clientX;
|
||||
var origViewportWidth = $("#sg-viewport").width();
|
||||
|
||||
// show the cover
|
||||
$("#sg-cover").css("display","block");
|
||||
|
||||
// add the mouse move event and capture data. also update the viewport width
|
||||
$('#sg-cover').mousemove(function(event) {
|
||||
|
||||
viewportWidth = (origClientX > event.clientX) ? origViewportWidth - ((origClientX - event.clientX)*2) : origViewportWidth + ((event.clientX - origClientX)*2);
|
||||
|
||||
if (viewportWidth > 240) {
|
||||
|
||||
if (!findValue('vpWidth')) {
|
||||
addValue("vpWidth",viewportWidth);
|
||||
} else {
|
||||
updateValue("vpWidth",viewportWidth);
|
||||
}
|
||||
|
||||
updateViewportWidth(viewportWidth);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// on "mouseup" we unbind the "mousemove" event and hide the cover again
|
||||
$('body').mouseup(function(event) {
|
||||
$('#sg-cover').unbind('mousemove');
|
||||
$('#sg-cover').css("display","none");
|
||||
});
|
||||
|
||||
// capture the viewport width that was loaded and modify it so it fits with the pull bar
|
||||
var origViewportWidth = $("#sg-viewport").width();
|
||||
$("#sg-gen-container").width(origViewportWidth);
|
||||
$("#sg-viewport").width(origViewportWidth - 14);
|
||||
|
||||
// pre-load the viewport width
|
||||
var vpWidth = 0;
|
||||
var trackViewportWidth = true; // can toggle this feature on & off
|
||||
if (trackViewportWidth && (vpWidth = findValue("vpWidth"))) {
|
||||
updateViewportWidth(vpWidth);
|
||||
}
|
||||
|
||||
@ -12,7 +12,12 @@
|
||||
</ul>
|
||||
</li>
|
||||
<li class="sg-size">
|
||||
<div class="sg-current-size"><form id="sg-form">Size <input type="text" class="sg-input sg-size-px" value="320">px / <input type="text" class="sg-input sg-size-em" value="20">em</form></div>
|
||||
<div class="sg-current-size">
|
||||
<form id="sg-form">
|
||||
Size <input type="text" class="sg-input sg-size-px" value="320">px /
|
||||
<input type="text" class="sg-input sg-size-em" value="20">em
|
||||
</form><!--end #sg-form-->
|
||||
</div><!--end #sg-current-size-->
|
||||
<ul class="sg-acc-panel sg-size-options">
|
||||
<li class="sg-quarter"><a href="#" id="sg-size-s">S</a></li>
|
||||
<li class="sg-quarter"><a href="#" id="sg-size-m">M</a></li>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user