Skip to content

Commit

Permalink
Merge branch 'master' into ret
Browse files Browse the repository at this point in the history
  • Loading branch information
@joseph
joseph committed Feb 7, 2012
2 parents 92c77c9 + a85ff90 commit aae801b
Show file tree
Hide file tree
Showing 12 changed files with 820 additions and 3 deletions.
13 changes: 11 additions & 2 deletions src/core/events.js
View file
Expand Up @@ -38,6 +38,9 @@ Monocle.Events.deafen = function (elem, evtType, fn, useCapture) {
}


// Register a series of functions to listen for the start, move, end
// events of a mouse or touch interaction.
//
// 'fns' argument is an object like:
//
// {
Expand All @@ -49,6 +52,12 @@ Monocle.Events.deafen = function (elem, evtType, fn, useCapture) {
//
// All of the functions in this object are optional.
//
// Each function is passed the event, with additional generic info about the
// cursor/touch position:
//
// event.m.offsetX (& offsetY) -- relative to top-left of document
// event.m.registrantX (& registrantY) -- relative to top-left of elem
//
// 'options' argument:
//
// {
Expand Down Expand Up @@ -93,11 +102,11 @@ Monocle.Events.listenForContact = function (elem, fns, options) {
var r;
if (elem.getBoundingClientRect) {
var er = elem.getBoundingClientRect();
var dr = document.body.getBoundingClientRect();
var dr = document.documentElement.getBoundingClientRect();
r = { left: er.left - dr.left, top: er.top - dr.top };
} else {
r = { left: elem.offsetLeft, top: elem.offsetTop }
while (elem = elem.parentNode) {
while (elem = elem.offsetParent) {
if (elem.offsetLeft || elem.offsetTop) {
r.left += elem.offsetLeft;
r.top += elem.offsetTop;
Expand Down
44 changes: 44 additions & 0 deletions test/experimental/font-sizing/content.html
View file
@@ -0,0 +1,44 @@
<!DOCTYPE html>
<html>
<head>
<title>Content</title>
<style>
h3 {
font-size: 8px;
}
.medFont {
font-size: 10pt;
}
body.upsize {
font-size: 18pt;
}
</style>
</head>

<body>
<h3>I</h3>
<p style="font-size: 1.4em; color: #F0F;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Duis nec sapien libero.
</p>
<p>
<a
style="font: bold 0.8em Chalkboard, monospace"
href="javascript:(function() {document.body.className = 'upsize'})();"
>Change body font size using className.</a>
</p>
<p class="medFont">
Donec quis felis venenatis diam elementum pellentesque. Pellentesque ullamcorper, urna ac bibendum varius, odio est dictum purus, non euismod diam eros ac turpis. Sed vehicula semper nisi, id elementum orci semper accumsan. Morbi at neque id sapien eleifend hendrerit. Mauris interdum lectus vitae elit dapibus at viverra lorem semper. Nullam lacinia, lacus ut vulputate rutrum, erat purus vehicula libero, non varius felis felis sit amet sapien. Cras ornare nisi non nunc convallis rhoncus. In semper est eget diam imperdiet vitae dignissim justo lacinia. Morbi lorem arcu, feugiat non suscipit vitae, adipiscing ut tellus. Proin eget sem mi.
</p>
<p>
Aenean vitae elit augue. In blandit accumsan sem non aliquet. Quisque risus elit, pellentesque quis pharetra id, facilisis sit amet nibh. Aenean convallis tincidunt arcu quis posuere. Vivamus dictum facilisis felis eget vestibulum. Pellentesque lacinia lectus ac dolor lacinia eget commodo tellus mollis. In felis ante, ornare vitae fermentum vel, gravida sit amet sapien. Integer quis neque ut mi mollis rhoncus eget eget nisl. Nunc est elit, venenatis non lobortis in, interdum id orci. Phasellus malesuada, nibh non rutrum ornare, ligula risus viverra arcu, nec sagittis lectus est vel lorem. Aliquam et lectus id eros cursus scelerisque eu sed metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer pharetra dapibus euismod. Aliquam laoreet pharetra diam in aliquet. Vivamus leo ligula, bibendum sit amet sodales ac, ultrices volutpat orci. Mauris nec velit vel lectus lacinia tempus eget a massa.
</p>
<p>
Nullam faucibus, ante at ultrices tempor, nulla enim fringilla nunc, et vehicula risus tellus sit amet ipsum. Nullam ultrices imperdiet ligula, eget fermentum ante bibendum eu. Donec sollicitudin massa congue velit suscipit convallis. Quisque nec congue lacus. Etiam risus arcu, scelerisque et congue vitae, ullamcorper vitae felis. Etiam orci magna, viverra sit amet sodales at, sollicitudin eget dolor. Morbi congue diam sit amet magna fermentum vitae faucibus diam consequat. Phasellus et scelerisque lacus. Cras aliquam risus sed sem venenatis viverra. Nullam elit magna, vestibulum sed semper ut, tempus quis nisl. Pellentesque velit lectus, consequat vitae porttitor ac, adipiscing vel mi. Sed lobortis tincidunt dolor. Nulla placerat bibendum dui, pellentesque volutpat nisi tincidunt eu. Proin quis nulla nulla. Nullam interdum venenatis tempor. Nullam porta venenatis urna quis pharetra. Ut at purus id velit fermentum aliquam eget id justo. Sed vel urna ante. Suspendisse ligula dui, interdum quis venenatis vitae, egestas at turpis. Nulla eros elit, sollicitudin eu euismod vel, tincidunt non leo.
</p>
<p>
Nullam quis augue in erat dictum iaculis sed a tellus. Suspendisse tristique varius nisi, eget eleifend dolor commodo vestibulum. In auctor consequat venenatis. In bibendum tincidunt ipsum, ac faucibus tortor dapibus mollis. Vivamus a lorem metus, et aliquam turpis. Duis gravida pulvinar interdum. Morbi ut quam eros. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse nisl massa, interdum et elementum in, tincidunt id nisl. Nunc sodales risus et neque scelerisque porttitor. Etiam eget dui ipsum. Quisque vestibulum, quam sed adipiscing eleifend, arcu diam ornare leo, quis tincidunt nunc erat ultricies dui. Etiam libero tellus, adipiscing a volutpat sed, sagittis ac lorem. Integer sed erat nec nulla condimentum interdum. Integer mi metus, congue eget congue sed, accumsan at lectus. Nulla consequat venenatis odio sed tristique.
</p>

</body>
</html>
92 changes: 92 additions & 0 deletions test/experimental/font-sizing/index.html
View file
@@ -0,0 +1,92 @@
<!DOCTYPE html>
<html>
<head>
<title>Proportional Font-sizing test</title>
<link rel="stylesheet" type="text/css" href="../../tests.css" />
<style>
iframe#reader {
border: 1px solid #F0F;
margin: 20px 0;
overflow: auto;
}
</style>
<script src="test.js"></script>
</head>

<body class="narrow">

<a href="../../index.html" class="backToGuide">&larr; Back to Guide</a>
<h1>Proportional Font-sizing test</h1>

<p>
Select a font-scale:
<select id="sizeSelect">
<option value="">&mdash;</option>
<option value="0.1">10%</option>
<option value="0.5">50%</option>
<option value="0.8">80%</option>
<option value="1.0">100%</option>
<option value="1.1">110%</option>
<option value="1.3">130%</option>
<option value="1.6">160%</option>
<option value="2.0">200%</option>
<option value="2.5">250%</option>
<option value="4.0">400%</option>
<option value="8.0">800%</option>
</select>
</p>

<iframe
id="reader"
src="content.html"
width="330"
height="400"
frameborder="0"
></iframe>
<!--
src="../../showcase/02-dickens/components/2.html"
-->

<hr />

<p>
Proportional font-sizing is tricky for a few reasons.
Firstly, we need to scale against the original font-size (in pixels)
for each element, so we have to traverse the DOM tree twice &mdash;
once to find font-size information and once to apply it.
</p>
<p>
Then, once applied, the font-size is "fixed" &mdash; it will no longer
respond to changes in the parent. So class changes triggered by
scripts won't work as expected for font-sizing.
</p>

<p>
The approach taken here mitigates the amount of behavioural modification
as a result of font-size changes. Primarily, whenever the scale is
unset (by choosing &mdash;), all font-size changes are reversed so that
full inheritance can again cascade.
</p>

<p>
To see this:
</p>

<ol>
<li>
Set scale to 100% &rarr; no change
</li>
<li>
Click 'Change body font size...' link &rarr; no change
because font-sizes do not cascade
</li>
<li>
Set scale to &mdash; &rarr; substantial increase to size of first para
</li>
<li>
Set scale to 100% &rarr; no change because calculating off new baseline
</li>
</ol>

</body>
</html>
82 changes: 82 additions & 0 deletions test/experimental/font-sizing/test.js
View file
@@ -0,0 +1,82 @@
(function () {

var sweptElements = false;

function init() {
var frame = document.getElementById('reader');
var sel = document.getElementById('sizeSelect');
sel.addEventListener('change', function (evt) {
adjustFontSize(frame.contentDocument, sel.value);
});
}


function adjustFontSize(doc, scale) {
var elems = doc.getElementsByTagName('*');
if (scale) {
scale = parseFloat(scale);
if (!sweptElements) {
sweepElements(doc, elems);
}

// Iterate over each element, applying scale to the original
// font-size. If a proportional font sizing is already applied to
// the element, update existing cssText, otherwise append new cssText.
//
for (var j = 0, jj = elems.length; j < jj; ++j) {
var newFs = fsProperty(elems[j].pfsOriginal, scale);
if (elems[j].pfsApplied) {
replaceFontSizeInStyle(elems[j], newFs);
} else {
elems[j].style.cssText += newFs;
}
elems[j].pfsApplied = scale;
}
} else if (sweptElements) {
// Iterate over each element, removing proportional font-sizing flag
// and property from cssText.
for (var j = 0, jj = elems.length; j < jj; ++j) {
if (elems[j].pfsApplied) {
var oprop = elems[j].pfsOriginalProp;
var opropDec = oprop ? 'font-size: '+oprop+' ! important;' : '';
replaceFontSizeInStyle(elems[j], opropDec);
elems[j].pfsApplied = null;
}
}

// Establish new baselines in case classes have changed.
sweepElements(doc, elems);
}
}


function sweepElements(doc, elems) {
// Iterate over each element, looking at its font size and storing
// the original value against the element.
for (var i = 0, ii = elems.length; i < ii; ++i) {
var currStyle = doc.defaultView.getComputedStyle(elems[i], null);
var fs = parseFloat(currStyle.getPropertyValue('font-size'));
elems[i].pfsOriginal = fs;
elems[i].pfsOriginalProp = elems[i].style.fontSize;
}
sweptElements = true;
}


function fsProperty(orig, scale) {
return 'font-size: '+(orig*scale)+'px ! important;';
}


function replaceFontSizeInStyle(elem, newProp) {
var lastFs = /font-size:[^;]/
elem.style.cssText = elem.style.cssText.replace(lastFs, newProp);
}


window.onload = init;
window.onpageshow = function () {
document.getElementById('sizeSelect').value = '';
}

})();
113 changes: 113 additions & 0 deletions test/experimental/moz-element-flipper/index.html
View file
@@ -0,0 +1,113 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>-moz-element Flipper test</title>
<link rel="stylesheet" type="text/css" href="../../tests.css" />
<link rel="stylesheet" href="styles.css" />
<script src="script.js"></script>
</head>
<body class="narrow">

<a href="../../index.html" class="backToGuide">&larr; Back to Guide</a>
<h1><code>-moz-element</code> Flipper</h1>

<p>
Designed for recent versions of Firefox (11+?).
Click left half of page to go backward, right to go forward.
</p>

<hr class="softBreak" />

<div id="mode">
<div id="frame">
<section>
<div id="imp1" class="imposter"></div>
<div id="gate">
<div id="imp2" class="imposter"></div>
<div id="imp3" class="imposter"></div>
</div>
<div id="imp4" class="imposter"></div>
</section>
</div>
</div>

<hr />

<div class="colCntr">
<div id="origin" class="columns">
<p>
Lorem ipsum dolor.
</p>
<p>
The Mole had been working very hard all the morning, spring-cleaning his
little home. First with brooms, then with dusters; then on ladders and
steps and chairs, with a brush and a pail of whitewash; till he had dust
in his throat and eyes, and splashes of whitewash all over his black
fur, and an aching back and weary arms. Spring was moving in the air
above and in the earth below and around him, penetrating even his dark
and lowly little house with its spirit of divine discontent and longing.
It was small wonder, then, that he suddenly flung down his brush on the
floor, said 'Bother!' and 'O blow!' and also 'Hang spring-cleaning!'
and bolted out of the house without even waiting to put on his coat.
Something up above was calling him imperiously, and he made for
the steep little tunnel which answered in his case to the gaveled
carriage-drive owned by animals whose residences are nearer to the sun
and air. So he scraped and scratched and scrabbled and scrooged and
then he scrooged again and scrabbled and scratched and scraped, working
busily with his little paws and muttering to himself, 'Up we go! Up we
go!' till at last, pop! his snout came out into the sunlight, and he
found himself rolling in the warm grass of a great meadow.
</p>
<p>
'This is fine!' he said to himself. 'This is better than whitewashing!'
The sunshine struck hot on his fur, soft breezes caressed his heated
brow, and after the seclusion of the cellarage he had lived in so long
the carol of happy birds fell on his dulled hearing almost like a shout.
Jumping off all his four legs at once, in the joy of living and the
delight of spring without its cleaning, he pursued his way across the
meadow till he reached the hedge on the further side.
</p>
<p>
'Hold up!' said an elderly rabbit at the gap. 'Sixpence for the
privilege of passing by the private road!' He was bowled over in an
instant by the impatient and contemptuous Mole, who trotted along the
side of the hedge chaffing the other rabbits as they peeped hurriedly
from their holes to see what the row was about. 'Onion-sauce!
Onion-sauce!' he remarked jeeringly, and was gone before they could
think of a thoroughly satisfactory reply. Then they all started
grumbling at each other. 'How STUPID you are! Why didn't you tell
him——' 'Well, why didn't YOU say——' 'You might have reminded
him——' and so on, in the usual way; but, of course, it was then much
too late, as is always the case.
</p>
<p>
It all seemed too good to be true. Hither and thither through the
meadows he rambled busily, along the hedgerows, across the
copses, finding everywhere birds building, flowers budding, leaves
thrusting—everything happy, and progressive, and occupied. And instead
of having an uneasy conscience pricking him and whispering 'whitewash!'
he somehow could only feel how jolly it was to be the only idle dog
among all these busy citizens. After all, the best part of a holiday
is perhaps not so much to be resting yourself, as to see all the other
fellows busy working.
</p>
<p>
He thought his happiness was complete when, as he meandered aimlessly
along, suddenly he stood by the edge of a full-fed river. Never in
his life had he seen a river before—this sleek, sinuous, full-bodied
animal, chasing and chuckling, gripping things with a gurgle and
leaving them with a laugh, to fling itself on fresh playmates that shook
themselves free, and were caught and held again. All was a-shake and
a-shiver—glints and gleams and sparkles, rustle and swirl, chatter and
bubble. The Mole was bewitched, entranced, fascinated. By the side of
the river he trotted as one trots, when very small, by the side of a man
who holds one spell-bound by exciting stories; and when tired at
last, he sat on the bank, while the river still chattered on to him,
a babbling procession of the best stories in the world, sent from the
heart of the earth to be told at last to the insatiable sea.
</p>
</div>
</div>
</body>
</html>

0 comments on commit aae801b

Please sign in to comment.