wtwui

WtW UI components gorillastyle

wtwui

Is a ui library with our most commonly used ui gadgets.

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.

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

There are multiple ways to include the library in your code:

This puts wtwui as a object on global namespace.

<html>
<head>
  <!-- jQuery is a hard dependency-->
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
  <!-- wtwui css-->
  <link href="wtwui/wtwui.css" media="screen" rel="stylesheet" type="text/css">
 
  <script src="wtwui/wtwui-min.js"></script> 
 
  <script>
    $(document).ready(function(){
      
      wtwui.dialog('this should work')
 
      // or 
 
      require('wtwui', function(wtwui){
        
        wtwui.dialog('this should allso work!')
 
      })
 
    })
  </script> 
 
</head>
<html>
<head>
  <!-- jQuery is a hard dependency-->
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
  <!-- wtwui css-->
  <link href="wtwui/wtwui.css" media="screen" rel="stylesheet" type="text/css">
 
  <!-- this method relies on requirejs -->
  <script src="wtwui/vendor/require.js"></script> 
 
  <script>
    require({
      packages: [
        {
          name: 'wtwui',
          location: 'path/to/wtwui'
        }
      ]
    }, 
    [
      'wtwui'
    ],
    function(wtwui) {
      
      wtwui.dialog('Packages is tha shiez')
 
    })
  </script> 
 
</head>

You can even require individual modules.

<script>
  require({
    packages: [
      {
        name: 'wtwui',
        location:: 'path/to/wtwui'
      }
    ]
  }, 
  [
    'wtwui/lib/Dialog',
    'wtwui/lib/Tip'
  ],
  function(DialogTip) {
    
    new Dialog({
      message: 'yaay'
    }).show()
 
    new Tip({
      content: 'tooltip on a dialog, whaaat?',
      target: '#target'
    })
 
  })
</script> 

Creating a dialog box can be done using one of two patterns. Dialog class instantiation or functional invocation.

var dialog = new wtwui.Dialog({
  title: 'Dialog yeeeeah',
  message: 'Its slick allright'
})
 
dialog.on('show', function() {
  console.log('the user was presented a dialog box');
})
 
dialog.show()
 
dialog.on('hide', function() {
  console.log('user closed the dialog');
})
 
new wtwui.Dialog({
  title: 'Dialog yeeeeah',
  message: 'Its slick allright'
})
.show()
.on('hide', function(){
  alert('alerts is so much better!')
})

This function created a new wtwui.Dialog instance and imediatly shows it.

wtwui.dialog('title', 'message')
wtwui.dialog('just a message')
wtwui.dialog({
  title: 'title text',
  message: 'using options like a boss'
})

Confirmation boxes are dialogs that gives the user two options: ok or cancel. You can pass most of the same parameters as with dialogs.

new wtwui.Confirmation({
  title: 'Remove user',
  message: 'Are you sure?',
  okfunction() {
    user.delete()
  },
  cancelfunction() {
    user.rollback()
  }
}).show()
 
// or 
 
var confirmation = new wtwui.Confirmation({
  title: 'Remove user',
  message: 'Are you sure?'
})
 
confirmation.ok(function() {
  user.delete()
})
 
confirmation.cancel(function() {
  user.rollBack()
})
 
confirmation.show()

By using the shorthand the confirmation is shown immediately, the function return an instance of wtwui.Confirmation

wtwui.confirm('Delete user', 'Are you sure', function(ok){
  if(ok)
    user.dete()
  else
    user.rollback()
})
 
// or 
 
wtwui.confirm('Are you sure you wwant to delete the user?', function(ok){
  if(ok)
    user.delete()
  else
    user.rollback()
})
 
wtwui.confirm('Delete user', 'are you sure')
  .ok(function(){
    user.delete()
  })
  .cancel(function(){
    user.rollback()
  })

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 = new wtwui.Overlay()
overlay.show()
 
// or 
 
new wtwui.Overlay({
  css: {
    background: 'red'
  }
}).show()

Overlay can be chained or passed as option into a dialog or confirmation box.

new wtwui.Dialog({
  title: 'Thats right',
  message: 'Dialog bitches'
})
.overlay()
.show()
 
new wtwui.Dialog({
  title: 'Something erroneous has happened',
  message: 'oh noes'
})
.overlay({
  css: {
    background: 'red'
  }
})
.show()
 
new wtwui.Dialog({
  title: 'lol',
  message: 'haha',
  overlay: true
}).show()
 
new wtwui.Dialog({
  title: 'Something erroneous has happened',
  message: 'oh noes',
  overlay: {
    css: {
      background: 'red'
    }
  }
}).show()
 
new wtwui.Overlay({
  content: 'it can take a string'
}).show()
 
new wtwui.Overlay({
  content: '<p> or html </p>'
}).show()
 
new wtwui.Overlay({
  content: $('<i> or even an jquery object </i>')
}).show()
 

Basic vanilla flavoured tooltip.

var tip = new wtwui.Tip({
  content: 'tooltip orama',
  target: '#tip-target'
})
 
tip.show()

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 = new wtwui.Tip({
  content: 'tooltip orama',
  target: '#tip-target'
})
 
tip.hover()
//or 
tip.hover('#another-target')

The shorthand creates a tooltip and show it imediatly, the function return the wtwui.Tip instance.

var tip = wtwui.tip('#tip-target', 'tooltip boii')
setTimeout(function(){
  tip.hide()
}, 1000)
 
//with hover 
wtwui.tip('#tip-target', 'tooltip boii').hover()
wtwui.tip('#tip-target', 'tooltip boii').hover('#another-target')

The style is heavily influenced by uikit by visionmedia/Tj.

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.