wtwui
Is a ui library with our most commonly used ui gadgets.
Dependencies
At the moment you need jquery
and requirejs
to use the project. There could be an option to build the project without requirejs if the need arises.
Build
To build the project you need to have node
and npm
installed.
Then run:
$ npm run-script build
The built files wtwui-min.js
and wtwui.css
will be located in the main wtwui folder.
wtwui/ |-- wtwui-min.js |-- wtwui.css
Including
There are multiple ways to include the library in your code:
Using the built and minifed files
This puts wtwui as a object on global namespace.
<!-- jQuery is a hard dependency--> <!-- wtwui css-->
Requiering as package with requirejs
<!-- jQuery is a hard dependency--> <!-- wtwui css--> <!-- this method relies on requirejs -->
You can even require individual modules.
wtwui.Dialog
Creating a dialog box can be done using one of two patterns. Dialog class instantiation or functional invocation.
Creating a Dialog instance
var dialog = title: 'Dialog yeeeeah' message: 'Its slick allright' dialog dialog dialog
Chaining
title: 'Dialog yeeeeah' message: 'Its slick allright'
dialog shorthand
This function created a new wtwui.Dialog instance and imediatly shows it.
wtwuiwtwuiwtwui
wtwui.Confirmation
Confirmation boxes are dialogs that gives the user two options: ok or cancel. You can pass most of the same parameters as with dialogs.
Creating a Confimation instance
title: 'Remove user' message: 'Are you sure?' { user } { user } // or var confirmation = title: 'Remove user' message: 'Are you sure?' confirmation confirmation confirmation
confirm shorthand
By using the shorthand the confirmation is shown immediately, the function return an instance of wtwui.Confirmation
wtwui // or wtwui wtwui
wtwui.Overlay
An overlay covers the whole of the user view with a transparent box that you can place some content in. It can allso be used with the dialog of confirmation classes.
var overlay = overlay // or css: background: 'red'
With dialog or confirmation
Overlay can be chained or passed as option into a dialog or confirmation box.
title: 'Thats right' message: 'Dialog bitches' title: 'Something erroneous has happened' message: 'oh noes' title: 'lol' message: 'haha' overlay: true title: 'Something erroneous has happened' message: 'oh noes' overlay: css: background: 'red'
Custom content
content: 'it can take a string' content: '<p> or html </p>' content:
wtwui.Tip
Basic vanilla flavoured tooltip.
var tip = content: 'tooltip orama' target: '#tip-target' tip
Hover
You can make the tooltip trigger on hover. The hover target defaults to the target assigned to tooltip. Or you can designate a custom target.
var tip = content: 'tooltip orama' target: '#tip-target' tip//ortip
Shorthand
The shorthand creates a tooltip and show it imediatly, the function return the wtwui.Tip instance.
var tip = wtwui //with hoverwtwuiwtwui
Credits
The style is heavily influenced by uikit by visionmedia/Tj.
License
wtwui uses the MIT license
Copyright (C) <2012> <WTW software AS>
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.