README.md in opal-bootbox-0.1.1 vs README.md in opal-bootbox-0.1.2

- old
+ new

@@ -40,60 +40,156 @@ # app/application.rb require 'opal' require 'opal-bootbox' ``` -> You need to bring your own `bootbox.js` or `bootbox.min.js` and bootstrap files. ->> http://bootboxjs.com/download/ ->> http://getbootstrap.com/getting-started/#download -> and put the files in `app/` or whichever directory you are compiling assets from. +You need to bring your own `bootbox.js` or `bootbox.min.js` and bootstrap files +* http://bootboxjs.com/download/ +* http://getbootstrap.com/getting-started/#download + +and put the files in `app/` or whichever directory you are compiling assets from. + +The Opal/Ruby interface is largely consistent with the Javascript interface. + +See http://bootboxjs.com/documentation.html for Javascript library documentation. + +Where a method expects a single callback substitute a block for the JS function. + +The value for a `callback:` keyword argument should be a Ruby proc. + +Keyword arguments should preserve the JS camelcase (e.g. className:). + ### Examples ``` $bootbox.alert('Hello world!') do puts 'hello world acknowledged' end +``` -$bootbox.alert(title: 'Alert dialog', message: 'Hello world!') do - puts 'hello world acknowledged' -end +``` +$bootbox.alert( + size: 'small', + title: 'Alert', + message: 'Hello world!', + callback: -> {puts 'hello world acknowledged'} +) +``` +``` $bootbox.confirm('Are you sure?') do |result| puts "user is #{result ? 'sure' : 'unsure'}" end +``` -$bootbox.confirm(title: 'Confirmation dialog', message: Are you sure?') do |result| - puts "user is #{result ? 'sure' : 'unsure'}" +``` +$bootbox.confirm( + size: 'small', + title: 'Confirmation', + message: 'Are you sure?' + callback: ->(result) { + puts "user is #{result ? 'sure' : 'unsure'}" + } end +``` +``` $bootbox.prompt('What is your name?') do |result| if result puts "user's name is '#{result}'" else puts "prompt dismissed" end end +``` -$bootbox.prompt(title: 'Prompt dialog', message: 'What is your name?', value: 'default name') do |result| - if result - puts "user's name is '#{result}'" - else - puts "prompt dismissed" - end -end +``` +$bootbox.prompt( + size: 'small', + title: 'Prompt', + message: 'What is your name?', + value: 'default name'), + callback: ->(result) { + if result + puts "user's name is '#{result}'" + else + puts "prompt dismissed" + } +) +``` ``` +$bootbox.dialog( + # required + message: "I am a custom dialog", + + # optional - adds a header to the dialog and places this text in an h4 + title: "Custom title", + # optional - allows the user to dismiss the dialog by hitting ESC + # which will call this proc + onEscape: -> { puts 'user press escape' }, + + # optional - whether the dialog should be shown immediately + show: true, + + # optional - whether the dialog should be have a backdrop or not + backdrop: true, + + # optional - whether to show a close button (default true) + closeButton: true, + + # optional - whether to animate (default true) + animate: true, + + # optional - an additional CSS class to apply to the Bootstrap dialog wrapper + className: "my-modal", + + # optional - a hash of buttons to be shown in the dialog's footer + buttons: { + + success: { + # optional - the button label + label: "Success!", + + # optional - an additional CSS class to apply to the button + className: "btn-success", + + # optional - call proc when button is clicked + callback: -> { puts 'success!' } + }, + + "Danger!": { + # no label is provided so the key is used as the button label + + # optional - an additional CSS class to apply to the button + className: "btn-danger", + + callback: -> { puts 'danger!' } + }, + + # if the only value supplied is a callback proc, + # the key is used as the button label and all + # other options are defaulted + + "Warning!": -> { puts 'warning!} + } +) +``` + + `$bootbox` is a global variable. `Opal::Bootbox` may be substituted. Strings (text) provided as arguments to bootbox methods may be HTML format. +All methods are executed asynchronously, hence the use of callback blocks and procs. + ## To do -* Implement Bootbox custom dialog options. * Documentation * Testing +* snake case keywords ? ## Getting involved To contribute to this project, follow the steps below.