nifty-dialog 1.0.1

data/lib/nifty/dialog/version.rb

@@ -0,0 +1,5 @@
+module Nifty
+  module Dialog
+    VERSION = '1.0.1'
+  end
+end

data/lib/nifty/dialog.rb

@@ -0,0 +1,10 @@
+require 'nifty/dialog/version'
+
+module Nifty
+  module Dialog
+    module Rails
+      class Engine < ::Rails::Engine
+      end
+    end
+  end
+end

data/vendor/assets/javascripts/nifty/dialog.coffee

@@ -0,0 +1,141 @@
+window.Nifty ||= {}
+window.Nifty.Dialog =
+  
+  # The numerical ID to start showing dialogs from
+  startingID: 1
+  
+  # A callback reference which is run on content set if set.
+  onSetContent: null
+  
+  # Stores all behaviors
+  behaviors: {}
+      
+  # Open a new dialog which will accept a number of possible options.
+  #
+  #   id         => the ID to assign to this dialog (prefixed with 'niftyDialog-' )
+  #
+  #   url        => open a dialog containing the HTML at the given URL. When
+  #                 displaying using a URL, the dialog will open immediately
+  #                 and containing a spinner until the data is loaded.
+  #
+  #   html       => a string of HTML which contains the HTML which should be
+  #                 displayed in the dialog.
+  #
+  #   afterLoad  => a callback to execute after the dialog has been loaded.
+  #
+  #   width      => the width of the dialog (in px, defaults to CSS-provided)
+  #
+  #   offset     => specifies a vertical offset (in px)
+  #
+  #   class      => the CSS class to assign to this dialog
+  #
+  #   behavior   => the name of a behavior set to be invoked on dialog open/close.
+  #                 Behaviors can be setup using the Nifty.Dialog.addBehavior method.
+  #
+  open: (options={})->
+    # set a dialog ID for this dialog
+    dialogsOpen = $('div.niftyDialog').length
+    dialogID = if dialogsOpen == 0 then this.startingID else (dialogsOpen * 10) + this.startingID
+    
+    # create a template and assign the ID
+    dialogTemplate = $("<div class='niftyDialog #{options.class}' id='niftyDialog-#{options.id}'></div>")
+    dialogTemplate.data('dialogID', dialogID)
+    
+    # insert the dialog into the page
+    insertedDialog = dialogTemplate.appendTo($('body'))
+    insertedDialog.css('z-index', 2000 + dialogID)
+    
+    # set the content on the dialog
+    insertedDialog.data('options', options)
+    
+    overlayClass = ''
+    overlayClass = 'invisible' if dialogID > 1
+    theOverlay = $("<div class='niftyOverlay #{overlayClass}'></div>").insertBefore(insertedDialog).css('z-index', 2000 + dialogID - 1)
+    theOverlay.fadeIn('fast')
+    
+    # if we have a width, set the width for the dialog
+    if options.width?
+      insertedDialog.css('width', "#{options.width}px")
+      insertedDialog.css('margin-left', "-#{options.width / 2}px")
+    
+    if options.offset?
+      insertedDialog.css('margin-top', "#{options.offset}px")
+    
+    # Set the closing action for the inserted dialog to close dialog 
+    # and fade out the appropriate overlay
+    insertedDialog.data 'closeAction', =>
+      options.onClose.call(null, insertedDialog, options) if options.onClose?
+      if options.behavior? && behavior = this.behaviors[options.behavior]
+        behavior.onClose.call(null, insertedDialog, options) if behavior.onClose?
+      insertedDialog.fadeOut 'fast', -> insertedDialog.remove()
+      theOverlay.fadeOut 'fast', -> theOverlay.remove()
+
+    # Set that clicking on the dialog's overlay will close the dialog
+    theOverlay.on 'click', -> insertedDialog.data('closeAction').call()
+    
+    # load in the content
+    if options.url?
+      # if loading from a URL, do this
+      insertedDialog.addClass 'ajax'
+      insertedDialog.addClass 'loading'
+      $.ajax
+        url: options.url
+        success: (data)=> this.displayDialog(insertedDialog, data)
+    
+    else if options.html?
+      this.displayDialog(insertedDialog, options.html)
+    
+    else
+      # anything else won't work
+      console.log "Dialog could not be displayed. Invalid options passed."
+      console.log options
+      return false
+  
+  # Add a behaviour callback which will be executed
+  addBehavior: (options)->
+    if options.name?
+      this.behaviors[options.name] = options
+      true
+    else
+      console.log "Must pass a 'name' option to the addBehavior method."
+      false
+    
+  # Complete the opening of a dialog with the given HTML
+  displayDialog: (dialog, content)->
+    dialog.html(content)
+    dialog.fadeIn('fast')
+    dialog.removeClass 'loading'
+    options = dialog.data('options')
+    if options.behavior? && behavior = this.behaviors[options.behavior]
+      behavior.onLoad.call(null, dialog, options) if behavior.onLoad?
+    options.afterLoad.call(null, dialog) if options.afterLoad?
+    this.onSetContent(null, dialog) if this.onSetContent?
+
+  # This method will replace the contents of the nearest dialog (or the one with the
+  # given ID if one is given).
+  setContent: (content, id = null)->
+    dialog = if id == null then $('div.niftyDialog:last') else $("div.niftyDialog#dialog-#{id}")
+    if dialog.length
+      dialog.html(content)
+      options = dialog.data('options')
+      if options.behavior? && behavior = this.behaviors[options.behavior]
+        behavior.onSetContent.call(null, dialog, options) if behavior.onSetContent?
+      this.onSetContent(null, dialog) if this.onSetContent?
+  
+  # Create a new overlay
+  createOverlay: (options)->
+    overlay = $("<div class='niftyOverlay invisible'></div>")
+    overlay.insertBefore(options.behind)
+    overlay.css("z-index", options.behind.css('z-index') - 1)
+    overlay.on 'click', ->
+      options.close.call(overlay)
+      overlay.fadeOut 'fast', ->
+        overlay.remove()
+    overlay.fadeIn('fast')
+    
+  # Closes the top dialgo in the dialog stack
+  closeTopDialog: ->
+    if $('div.niftyDialog').length
+      $('div.niftyDialog:last').data('closeAction').call()
+    
+  

data/vendor/assets/stylesheets/nifty/dialog.scss

@@ -0,0 +1,45 @@
+//
+// Overlay
+//
+div.niftyOverlay {
+  position:fixed;
+  background:rgba(0,0,0,0.5);
+  top:0;
+  left:0;
+  width:100%;
+  height:4000px;
+  display:none;
+  z-index:50;
+}
+
+//
+// An invisible verison of the overlay
+//
+div.niftyOverlay.invisible {
+  background:transparent;
+}
+
+//
+// Dialog
+//
+div.niftyDialog {
+  display:none;
+  position:fixed;
+  top:50%;
+  top:100px;
+  left:50%;
+  margin-left:-250px;
+  width:500px;
+  background:#fff;
+  box-shadow:0 0 70px rgb(0,0,0);
+  h2 {
+    background:#333333;
+    color:#fff;
+    padding:10px 15px;
+    font-weight:600;
+    background-repeat:no-repeat;
+    background-position:95% 17px;
+    background-size:16px;
+    font-size:0.9em;
+  }
+}

metadata

@@ -0,0 +1,49 @@
+--- !ruby/object:Gem::Specification
+name: nifty-dialog
+version: !ruby/object:Gem::Version
+  version: 1.0.1
+  prerelease: 
+platform: ruby
+authors:
+- Adam Cooke
+autorequire: 
+bindir: bin
+cert_chain: []
+date: 2013-10-22 00:00:00.000000000 Z
+dependencies: []
+description: A javascript library for working with dialogs
+email:
+- adam@niftyware.io
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- lib/nifty/dialog/version.rb
+- lib/nifty/dialog.rb
+- vendor/assets/javascripts/nifty/dialog.coffee
+- vendor/assets/stylesheets/nifty/dialog.scss
+homepage: https://github.com/niftyware/dialog
+licenses: []
+post_install_message: 
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  none: false
+  requirements:
+  - - ! '>='
+    - !ruby/object:Gem::Version
+      version: '0'
+required_rubygems_version: !ruby/object:Gem::Requirement
+  none: false
+  requirements:
+  - - ! '>='
+    - !ruby/object:Gem::Version
+      version: '0'
+requirements: []
+rubyforge_project: 
+rubygems_version: 1.8.23
+signing_key: 
+specification_version: 3
+summary: A javascript library for working with dialogs
+test_files: []