JavaScript library to help working with CSS Regions. Handles prefixes internally.
flow = Flow('flow-name')
Get the NamedFlow by name.
flow.fitWith('<div class="region">')
Make the flow fit by adding elements to the region chain
# SSL self signed localhost for rails start to finish, no red warnings. | |
# 1) Create your private key (any password will do, we remove it below) | |
$ openssl genrsa -des3 -out server.orig.key 2048 | |
# 2) Remove the password | |
$ openssl rsa -in server.orig.key -out server.key |
// addEventListener wrapper | |
// returns function for auto-unbinding | |
function on(elem, type, fn) { | |
elem.addEventListener(type, fn, false); | |
return function () { | |
off(elem, type, fn); | |
}; | |
} | |
// removeEventListener wrapper |
<script type="text/javascript"> | |
(function () { | |
"use strict"; | |
// once cached, the css file is stored on the client forever unless | |
// the URL below is changed. Any change will invalidate the cache | |
var css_href = './index_files/web-fonts.css'; | |
// a simple event handler wrapper | |
function on(el, ev, callback) { | |
if (el.addEventListener) { | |
el.addEventListener(ev, callback, false); |
/* | |
Mock-implementation of chrome.runtime messaging API | |
*/ | |
var Messager = (function (){ | |
var _listeners = []; | |
return { | |
onMessage: { | |
addListener: function(cb){ | |
_listeners.push(cb); |
function get(url){ | |
return new Promise(function(resolve, reject){ | |
// request strategies: ajax, jsonp | |
var types = ['json', 'jsonp']; | |
function call(){ | |
// try data type strategies one-by-one; mutates the array | |
var type = types.shift(); |
/* | |
Takes a CSS property name string and returns its DOM notation. | |
@example: shape-inside -> shapeInside | |
@example: -webkit-shape-inside -> webkitShapeInside | |
@param {String} str CSS property name, possibly hyphenated. | |
@return {String} | |
*/ | |
function getDOMCSSProperty(str){ |
// | |
// returns a list of all elements under the cursor | |
// | |
function elementsFromPoint(x,y) { | |
var elements = [], previousPointerEvents = [], current, i, d; | |
// get all elements via elementFromPoint, and remove them from hit-testing in order | |
while ((current = document.elementFromPoint(x,y)) && elements.indexOf(current)===-1 && current != null) { | |
// push the element and its current style |
CSS Regions are now enabled by default in a widely used browser - Safari on iOS 7. This makes it easier for developers to experiment and use the feature in their projects.
Perhaps this is a good time to share some of the lessons we learned at Adobe while using CSS Regions in demos. Take this article as a recommendation of good practices, not by any means a comprehensive list. CSS Regions is still an evolving feature.
(function(){ | |
// feather-weight Modernizr-like CSS feature check | |
['shape-inside','flow-into','shiny-new-feature'].forEach(function(property){ | |
// check if any variant exists, prefixed or not | |
var isCapable = ['-webkit-','-ms-','-moz-',''].some(function(prefix){ | |
return prefix + property in document.body.style | |
}) | |
property = isCapable ? property : 'no-' + property; |