Readable JS (alpha) An accessiblity plugin Readable.js looks to provide users with the ability to adjust the type as they need while providing developers a toolset to extend. note: This project is actively being developed. I will remove the (alpha) once everything is documented and cleaned up. Demo You can see Readable in action at www.readable-js.com/demo How do I use it? // Select a target to append widget var parent = document . querySelector ( '.make-readable' ) ; var elements = document . querySelectorAll ( '.make-readable p' ) ; // construct an instance of Readable, passing the element var readable = new Readable ( parent , elements , options ) ; // initialise readable . init ( ) ; Readble will work out of the box with its default settings. The following is only needed if you want to customize what is provided. Include Script < script src =" assets/js/readable.min.js " > </ script > How does it work? readable . options = { parent : '.message' , namespace : 'readable' , title : 'Change Typesetting' , defaultStyles : true , addRules : true , inputs : [ ] , elements : [ ] , templates : [ ] , } ; Options parent Set where the widget will be appended. namespace Set namespace for component, used to scaffold out component classes. title Set block title. defaultStyles True or false, enable basic styling. inputs Array, form elements to create. elements Array, elements to style. templates Array, form element will render using these templates. Type must match. Props id="${input.id}" Range Sliders inputs : [ { type : 'range' , css : 'font-size' , name : 'font-size' , update : function ( elements , v ) { elements . forEach ( function ( elem ) { elem . style . fontSize = v + 'px' ; } ) ; } , min : 14 , max : 36 , step : 1 , value : 24 , } , { type : 'range' , css : 'word-spacing' , name : 'word-spacing' , update : function ( elements , v ) { elements . forEach ( function ( elem ) { elem . style . wordSpacing = v + 'em' ; } ) ; } , min : 0 , max : 3 , step : 0.1 , value : 0 , } , { type : 'range' , css : 'letter-spacing' , name : 'letter-spacing' , update : function ( elements , v ) { elements . forEach ( function ( elem ) { elem . style . letterSpacing = v / 10 + 'em' ; } ) ; } , min : 0 , max : 3 , step : 0.1 , value : 0 , } , { type : 'range' , css : 'line-height' , name : 'line-height' , update : function ( elements , v ) { elements . forEach ( function ( elem ) { elem . style . lineHeight = v ; } ) ; } , min : 1 , max : 3 , step : 0.1 , value : 1.4 , } , ] , Base Properties type Used to match with template. css CSS class . name Name of form element. update Callback function. value Set initial value. Range Slider Properties min Set min value. max Set max value. step Set step value. Custom Properties Any property can be added to the input and accessed in the template through the input obj. Update Function Callback function that will fire on update. Elem refers to Readable.elem, document is available. update : function ( elements , v ) { elements . forEach ( function ( elem ) { elem . style . fontSize = v + 'px' ; } ) ; } , Templates templates : { range : function ( input ) { return `<label class=" ${ input . labelClass } " for=" ${ input . name } "> ${ input . label } <span> ${ input . value } </span></label> <input id=" ${ input . id } " name=" ${ input . name } " class=" ${ input . class } " type="range" min=" ${ input . min } " max=" ${ input . max } " step=" ${ input . step } " />` ; } , } , Styles .tools { position : absolute ; top : 0 ; right : -170 px ; z-index : 999 ; padding : 8 px ; margin : 8 px ; border : 2 px solid #dcdcdc ; border-radius : 3 px ; background-color : white ; & :hover { cursor : pointer ; } } .input-group { margin-top : 8 px ; margin-bottom : 8 px ; label { font-size : 12 px ; font-weight : bold ; } input [ type = ' radio ' ] { display : inline-block ; } input [ type = ' range ' ] { display : block ; } } Themes Style with css /* Wrapper */ . input-group { /* Your Styles */ } /* Convention */ .[ namespace ] -- [ element ] - [ name-acronym ] { /* Your Styles */ } /* Font size range slider example */ . readable--label-fs { /* Your Styles */ } . readable--range-fs { /* Your Styles */ } < div class =" input-group range " > < label class =" readable--label-fs " for =" font-size " > Font Size: < span > 24 </ span > </ label > < input id =" readable-range-fs " name =" font-size " class =" readable--range-fs " type =" range " min =" 14 " max =" 36 " step =" 1 " /> </ div > Built With Vanilla JS How can I contribute? Please read [CONTRIBUTING.md] for details on our code of conduct, and the process for submitting pull requests to us. (coming soon) Author Kyle Langford - www.kylelangford.com
