###SHAPE.JS
Shape.js is a lightweight Javascript tool to create invisible shape around which content flows. It is inspired by CSS Exclusions (W3C draft). It features basic hyphenation, support for Hypher.js, all this without dependencies.
You can see a live demo here.
Version 0.1 alpha
Chrome : Supported
Firefox : Supported
Edge : Supported
IE 10+ : Supported
SHAPE.JS results on Edge/IE10+ are degrading a little.
You can access the SHAPE object using window.SHAPE
refreshOnResize : Boolean. Whether shapes should be refreshed on window resize. (default : true)
changeDefaultHyphenCharacter(string character)
Change all hyphen characters to character. The default character is U+002D (-).
window.SHAPE.changeDefaultHyphenCharacter("\u2010");forEach(function fn)
Call the function fn for each shape registered, with the SHAPEObject as this. If the function fn return a false value that is not undefined, the loop stops.
window.SHAPE.forEach(function(){
console.log(this.id);
});refreshAll(boolean force)
Refresh every shape. If force is set to true, the result should be perfect, but will take longer.
You should always set force to true.
window.SHAPE.refreshAll(true);removeAll( Optional HTMLElement element )
Remove every shape from the document and normalize element (or document.body)
window.SHAPE.removeAll(true);You can create a SHAPEObject Object using window.SHAPE(options).
height : Number. Height of the shape, in pixels.
hyphenation : Optional. Function. Function that will define hyphenation rules for the document. See the section relative to hyphenation for more information.
hyphenCharacter : Optional. String. Hyphen character. If not specified, the default hyphen character is used (See SHAPE.changeDefaultHyphenCharacter).
left : Number. Position of the shape relative to the left of the document, in pixels.
margin : Optional. Number. Margin of the shape, in pixels.
top : Number. Position of the shape relative to the top of the document, in pixels.
width : Number. Width of the shape, in pixels.
var myshape = window.SHAPE({
left : 25,
top: 25,
width: 50,
height : 50,
// Optional values are next
margin : 5,
hyphenation : window.SHAPE.HYPHENATION.NH_WORD
});id : String. Autogenerated ID of the shape.
shape : Object. Object with bottom, left, right and top properties.
applyToNodes(Misc **element1, **Misc **element2, ..., **Misc elementN)
Apply the shape to each node specified in the function arguments. Misc means each argument can be an Array, a HTMLElement, a TextNode or a NodeList.
var element = document.getElementById('element');
window.requestAnimationFrame(function(){
myshape.applyToNodes(
element,
element.nextSibling.querySelectorAll("p")
);
});window.requestAnimationFrame(function(){
myshape.applyToNodes(document.body);
});*You should use *window.requestAnimationFrame when calling this function because of its heavy use of ressources.
cleanMemory()
Cleans the internal memory of SHAPE.JS to reflect changes to the DOM. It allows SHAPEObject.refresh() to works as expected.
myshape.cleanMemory();You should call cleanMemory() every time you make yourself changes to the DOM that affects the invisible shape.
destroy()
Remove every references to the instance from window.shape.
myshape.destroy();refresh()
Refresh the shape for minor changes.
myshape.refresh();To force a full refresh, you should call SHAPE.refreshAll(true) or shape.applyToNodes this way :
myshape.remove()
.resetMemory()
.applyToNodes(elements);remove( Optional HTMLElement element,
Optional Boolean leaveAsIt)
Un-apply the shape from HTMLElement element (or from the document if non-specified) and then refresh other shapes that could be affected unless leaveAsIt is set to true.
myshape.remove(document.getElementById('my_element'));You can use this code to force a full refresh after you un-applied a shape from an element.
shape.remove(element, true);
SHAPE.refreshAll(true);SHAPE.JS comes with a basic support for hyphenation. You can use one of the very basic built-in hyphenation, include Hypher.js or use your own hyphenation function.
The hyphenation property of the option object of a SHAPEObject is a function that is called with two parameters : the word and the maximum offset.
The function must returns the offset of the character before which the word will be split and a hyphen inserted if necessary. If the returned offset is higher than the maximum offset, the maximum offset will be used instead.
Example :
var hyphenationFunction = function(word, maxoffset){
if(word == "prototype"){
if(maxoffset < 3){
return 0;
}
else if(maxoffset < 6){
return 3; // pro-totype
}
else{
return 6; // proto-type
}
}
else{
return 0;
}
}You can access built-in functions via window.SHAPE.HYPHENATION.
ANYWHERE
Cut the word anywhere and insert a hyphen if necessary.
This is a prot|otype.
---->
This is a prot-[ ]otype
HYPHER( HypherInstance hypherInstance)
Hyphenate the word using Hypher.js. Unlike others options, you must call SHAPE.HYPHENATION.HYPHER with an instance of Hypher as an argument.
var hypherinstance = new Hypher(Hypher.english);
var myshape = window.SHAPE({
left : 25,
top: 25,
width: 50,
height : 50,
hyphenation : window.SHAPE.HYPHENATION.HYPHER(hypherinstance)
});This is a prot|otype.
---->
This is a pro-[ ]totype
To use Hypher, you must use language patterns from Hyphenator.js. You have to modify the language pattern js file to only use the language object part.
NH_ANYWHERE
Default behavior. Cut the word anywhere and never insert hyphens.
This is a prot|otype.
---->
This is a prot[ ]otype
NH_WORD
Don't cut word and never insert hyphens.
This is a prot|otype.
---->
This is a [ ]prototype
SHAPE.JS is licensed under MIT License.