unpoly-rails 0.30.1 → 0.31.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 1e53ab2c1cbdfe09b80e31d76371d5382ad40f70
-  data.tar.gz: 7ba79eb21d2494bf69b3bc222a4b7e89778671a1
+  metadata.gz: f141062c454db36ff9fa469178c4980587858770
+  data.tar.gz: cd9474a9ab62e41572b56f731822ef1483f8543a
 SHA512:
-  metadata.gz: 5789b11f34c69787dbf6fdd9fe9ed03d6c25c5c76fbf32b7028fcba36a6ecad14072c10d1cf5b4945d7edd104d11e581a302f6ca45b1c15baf4b5aa868c90691
-  data.tar.gz: 3d07d31ce7a01814badad2a7e16fbe4bbf283dc574a6b27818ea9a2ba5a6cff9b9fdcf6a9acfd19b6d505d12f8c84486ea12b7322fae39fa7000cb9af3492c1d
+  metadata.gz: 81d7cf8973a69e968ca7063cc058fbef25403027638d504c2b8fb3919b87e24ea11d1b0f7ca219c8a2a8ca340d13a8cd45474ecab50a6275d1fbae86c8d1def5
+  data.tar.gz: eadfbdd2d046e641e8a93462d2bfb8cdb274086afedff58aa21681d1641a4d501ebc26722195f4d068f7a717e8ec2777ebb316cfda911264775f6e0f57a2d8d1

data/CHANGELOG.md

@@ -10,9 +10,17 @@ Unreleased
 
 ### Compatible changes
 
+- Drawers are now a built-in modal flavor! Use the `[up-drawer]` attribute to open page fragements
+  in a modal drawer that slides in from the edge of the screen.
+
 
 ### Breaking changes
 
+- The [`up.modal.flavor`](/up.modal.flavor) function was deprecated. Set values on the
+  [`up.modal.flavors`](/up.modal.flavors) property instead.
+
+
+
 
 0.30.1
 ------

data/lib/assets/javascripts/unpoly/form.js.coffee

@@ -249,8 +249,6 @@ up.form = (($) ->
     delay = u.option($fields.attr('up-delay'), options.delay, config.observeDelay)
     delay = parseInt(delay)
 
-    console.debug("Observing with delay %o", delay)
-
     destructors = u.map $fields, (field) ->
       observeField($(field), delay, callback)
 

data/lib/assets/javascripts/unpoly/modal.js.coffee

@@ -116,6 +116,8 @@ up.modal = (($) ->
   @param {Boolean} [options.sticky=false]
     If set to `true`, the modal remains
     open even it changes the page in the background.
+  @param {String} [options.flavor='default']
+    The default [flavor](/up.modal.flavors).
   @stable
   ###
   config = u.config
@@ -135,21 +137,62 @@ up.modal = (($) ->
     closeLabel: '×'
     closable: true
     sticky: false
-    flavors: { default: {} }
-
-    template: (config) ->
+    flavor: 'default'
+    position: null
+    template: (options) ->
       """
       <div class="up-modal">
         <div class="up-modal-backdrop"></div>
         <div class="up-modal-viewport">
           <div class="up-modal-dialog">
             <div class="up-modal-content"></div>
-            <div class="up-modal-close" up-close>#{flavorDefault('closeLabel')}</div>
+            <div class="up-modal-close" up-close>#{options.closeLabel}</div>
           </div>
         </div>
       </div>
       """
 
+  ###*
+  Define modal variants with their own default configuration, CSS or HTML template.
+
+  \#\#\# Example
+
+  Unpoly's [`[up-drawer]`](/up-drawer) is implemented as a modal flavor:
+
+      up.modal.flavors.drawer = {
+        openAnimation: 'move-from-right',
+        closeAnimation: 'move-to-right'
+      }
+
+  Modals with that flavor will have a container with an `up-flavor` attribute:
+
+      <div class='up-modal' up-flavor='drawer'>
+        ...
+      </div>
+
+  We can target the `up-flavor` attribute to override the default dialog styles:
+
+      .up-modal[up-flavor='drawer'] {
+
+        .up-modal-dialog {
+          margin: 0;         // Remove margin so drawer starts at the screen edge
+          max-width: 350px;  // Set drawer size
+        }
+
+        .up-modal-content {
+          min-height: 100vh; // Stretch background to full window height
+        }
+      }
+
+  @property up.modal.flavors
+  @param {Object} flavors
+    An object where the keys are flavor names (e.g. `'drawer') and
+    the values are the respective default configurations.
+  @experimental
+  ###
+  flavors = u.openConfig
+    default: {}
+
   ###*
   Returns the source URL for the fragment displayed in the current modal overlay,
   or `undefined` if no modal is currently open.
@@ -178,6 +221,7 @@ up.modal = (($) ->
     url: null
     coveredUrl: null
     coveredTitle: null
+    position: null
     unshifters: []
 
   chain = new u.DivertibleChain()
@@ -188,13 +232,11 @@ up.modal = (($) ->
     state.reset()
     chain.reset()
     config.reset()
+    flavors.reset()
 
   templateHtml = ->
     template = flavorDefault('template')
-    if u.isFunction(template)
-      template(config)
-    else
-      template
+    u.evalOption(template, closeLabel: flavorDefault('closeLabel'))
 
   discardHistory = ->
     state.coveredTitle = null
@@ -203,6 +245,7 @@ up.modal = (($) ->
   createFrame = (target, options) ->
     $modal = $(templateHtml())
     $modal.attr('up-flavor', state.flavor)
+    $modal.attr('up-position', state.position) if u.isPresent(state.position)
     $dialog = $modal.find('.up-modal-dialog')
     $dialog.css('width', options.width) if u.isPresent(options.width)
     $dialog.css('max-width', options.maxWidth) if u.isPresent(options.maxWidth)
@@ -389,12 +432,16 @@ up.modal = (($) ->
     url = u.option(u.pluckKey(options, 'url'), $link.attr('up-href'), $link.attr('href'))
     html = u.option(u.pluckKey(options, 'html'))
     target = u.option(u.pluckKey(options, 'target'), $link.attr('up-modal'), 'body')
-    options.flavor = u.option(options.flavor, $link.attr('up-flavor'))
+    options.flavor = u.option(options.flavor, $link.attr('up-flavor'), config.flavor)
+    options.position = u.option(options.position, $link.attr('up-position'), flavorDefault('position', options.flavor))
+    options.position = u.evalOption(options.position, $link: $link)
     options.width = u.option(options.width, $link.attr('up-width'), flavorDefault('width', options.flavor))
     options.maxWidth = u.option(options.maxWidth, $link.attr('up-max-width'), flavorDefault('maxWidth', options.flavor))
     options.height = u.option(options.height, $link.attr('up-height'), flavorDefault('height'))
     options.animation = u.option(options.animation, $link.attr('up-animation'), flavorDefault('openAnimation', options.flavor))
+    options.animation = u.evalOption(options.animation, position: options.position)
     options.backdropAnimation = u.option(options.backdropAnimation, $link.attr('up-backdrop-animation'), flavorDefault('backdropOpenAnimation', options.flavor))
+    options.backdropAnimation = u.evalOption(options.backdropAnimation, position: options.position)
     options.sticky = u.option(options.sticky, u.castedAttr($link, 'up-sticky'), flavorDefault('sticky', options.flavor))
     options.closable = u.option(options.closable, u.castedAttr($link, 'up-closable'), flavorDefault('closable', options.flavor))
     options.confirm = u.option(options.confirm, $link.attr('up-confirm'))
@@ -414,6 +461,7 @@ up.modal = (($) ->
         state.flavor = options.flavor
         state.sticky = options.sticky
         state.closable = options.closable
+        state.position = options.position
         if options.history
           state.coveredUrl = up.browser.url()
           state.coveredTitle = document.title
@@ -473,7 +521,9 @@ up.modal = (($) ->
 
     options = u.options(options)
     viewportCloseAnimation = u.option(options.animation, flavorDefault('closeAnimation'))
+    viewportCloseAnimation = u.evalOption(viewportCloseAnimation, position: state.position)
     backdropCloseAnimation = u.option(options.backdropAnimation, flavorDefault('backdropCloseAnimation'))
+    backdropCloseAnimation = u.evalOption(backdropCloseAnimation, position: state.position)
     animateOptions = up.motion.animateOptions(options, duration: flavorDefault('closeDuration'), easing: flavorDefault('closeEasing'))
 
     destroyOptions = u.options(
@@ -502,6 +552,7 @@ up.modal = (($) ->
         state.flavor = null
         state.sticky = null
         state.closable = null
+        state.position = null
         up.emit('up:modal:closed', message: 'Modal closed')
 
       promise
@@ -557,42 +608,8 @@ up.modal = (($) ->
     $element = $(elementOrSelector)
     $element.closest('.up-modal').length > 0
 
-  ###*
-  Register a new modal variant with its own default configuration, CSS or HTML template.
-
-  \#\#\# Example
-
-  Let's implement a drawer that slides in from the right:
-
-      up.modal.flavor('drawer', {
-        openAnimation: 'move-from-right',
-        closeAnimation: 'move-to-right',
-        maxWidth: 400
-      }
-
-  Modals with that flavor will have a container `<div class='up-modal' up-flavor='drawer'>...</div>`.
-  We can target the `up-flavor` attribute override the default dialog styles:
-
-      .up-modal[up-flavor='drawer'] {
-
-        // Align drawer on the right
-        .up-modal-viewport { text-align: right; }
-
-        // Remove margin so the drawer starts at the screen edge
-        .up-modal-dialog { margin: 0; }
-
-        // Stretch drawer background to full window height
-        .up-modal-content { min-height: 100vh; }
-      }
-
-  @function up.modal.flavor
-  @param {String} name
-    The name of the new flavor.
-  @param {Object} [overrideConfig]
-    An object whose properties override the defaults in [`/up.modal.config`](/up.modal.config).
-  @experimental
-  ###
   flavor = (name, overrideConfig = {}) ->
+    up.log.warn 'The up.modal.flavor function is deprecated. Use the up.modal.flavors property instead.'
     u.extend(flavorOverrides(name), overrideConfig)
 
   ###*
@@ -604,7 +621,7 @@ up.modal = (($) ->
   @internal
   ###
   flavorOverrides = (flavor) ->
-    config.flavors[flavor] ||= {}
+    flavors[flavor] ||= {}
 
   ###*
   Returns the config option for the current flavor.
@@ -621,16 +638,18 @@ up.modal = (($) ->
   Clicking this link will load the destination via AJAX and open
   the given selector in a modal dialog.
 
-  Example:
+  \#\#\#\# Example
 
       <a href="/blogs" up-modal=".blog-list">Switch blog</a>
 
   Clicking would request the path `/blog` and select `.blog-list` from
-  the HTML response. Unpoly will dim the page with an overlay
+  the HTML response. Unpoly will dim the page
   and place the matching `.blog-list` tag will be placed in
   a modal dialog.
 
   @selector [up-modal]
+  @param {String} up-modal
+    The CSS selector that will be extracted from the response and displayed in a modal dialog.
   @param {String} [up-confirm]
     A message that will be displayed in a cancelable confirmation dialog
     before the modal is opened.
@@ -712,6 +731,65 @@ up.modal = (($) ->
       up.bus.consumeAction(event)
   )
 
+  ###*
+  Clicking this link will load the destination via AJAX and open
+  the given selector in a modal drawer that slides in from the edge of the screen.
+
+  You can configure drawers using the [`up.modal.flavors.drawer`](/up.modal.flavors.drawer) property.
+
+  \#\#\#\# Example
+
+      <a href="/blogs" up-drawer=".blog-list">Switch blog</a>
+
+  Clicking would request the path `/blog` and select `.blog-list` from
+  the HTML response. Unpoly will dim the page
+  and place the matching `.blog-list` tag will be placed in
+  a modal drawer.
+
+  @selector [up-drawer]
+  @param {String} up-drawer
+    The CSS selector to extract from the response and open in the drawer.
+  @param {String} [up-position='auto']
+    The side from which the drawer slides in.
+
+    Valid values are `'left'`, `'right'` and `'auto'`. If set to `'auto'`, the
+    drawer will slide in from left if the opening link is on the left half of the screen.
+    Otherwise it will slide in from the right.
+  @experimental
+  ###
+  up.macro '[up-drawer]', ($link) ->
+    target = $link.attr('up-drawer')
+    $link.attr
+      'up-modal': target
+      'up-flavor': 'drawer'
+
+  ###*
+  Sets default options for future drawers.
+
+  @property up.modal.flavors.drawer
+  @param {Object} config
+    Default options for future drawers.
+
+    See [`up.modal.config`] for available options.
+  @experimental
+  ###
+  flavors.drawer =
+    openAnimation: (options) ->
+      switch options.position
+        when 'left' then 'move-from-left'
+        when 'right' then 'move-from-right'
+    closeAnimation: (options) ->
+      switch options.position
+        when 'left' then 'move-to-left'
+        when 'right' then 'move-to-right'
+    position: (options) ->
+      if u.isPresent(options.$link)
+        u.horizontalScreenHalf(options.$link)
+      else
+        # In case the drawer was opened programmatically through `up.modal.open`,
+        # we might now know the link that was clicked on.
+        'left'
+
   # The framework is reset between tests
   up.on 'up:framework:reset', reset
 
@@ -723,8 +801,9 @@ up.modal = (($) ->
   url: -> state.url
   coveredUrl: -> state.coveredUrl
   config: config
+  flavors: flavors
   contains: contains
   isOpen: isOpen
-  flavor: flavor
+  flavor: flavor # deprecated
 
 )(jQuery)

data/lib/assets/javascripts/unpoly/motion.js.coffee

@@ -165,7 +165,7 @@ up.motion = (($) ->
     $element = $(elementOrSelector)
     finish($element)
     options = animateOptions(options)
-    if animation == 'none' || animation == false
+    if animation == 'none' || animation == false || u.isMissing(animation)
       none()
     else if u.isFunction(animation)
       assertIsDeferred(animation($element, options), animation)

data/lib/assets/javascripts/unpoly/popup.js.coffee

@@ -373,6 +373,9 @@ up.popup = (($) ->
       <a href="/settings" up-popup=".options" up-sticky>Settings</a>
 
   @selector [up-popup]
+  @param {String} up-popup
+    The CSS selector that will be extracted from the response and
+    displayed in a popup overlay.
   @param [up-position]
     Defines where the popup is attached to the opening element.
 

data/lib/assets/javascripts/unpoly/util.js.coffee

@@ -1381,6 +1381,19 @@ up.util = (($) ->
 
     obj
 
+  ###*
+  If the given `value` is a function, calls the function with the given `args`.
+  Otherwise it just returns `value`.
+
+  @function up.util.evalOption
+  @internal
+  ###
+  evalOption = (value, args...) ->
+    if isFunction(value)
+      value(args...)
+    else
+      value
+
   ###*
   @function up.util.cache
   @param {Number|Function} [config.size]
@@ -1400,19 +1413,8 @@ up.util = (($) ->
 
     store = undefined
 
-    optionEvaluator = (name) ->
-      ->
-        value = config[name]
-        if isNumber(value)
-          value
-        else if isFunction(value)
-          value()
-        else
-          undefined
-
-    maxKeys = optionEvaluator('size')
-
-    expiryMillis = optionEvaluator('expiry')
+    maxKeys = -> evalOption(config.size)
+    expiryMillis = -> evalOption(config.expiry)
 
     normalizeStoreKey = (key) ->
       if config.key
@@ -1501,16 +1503,29 @@ up.util = (($) ->
 
   ###*
   @function up.util.config
+  @param {Object|Function} blueprint
+    Default configuration options.
+    Will be restored by calling `reset` on the returned object.
+  @return {Object}
+    An object with a `reset` function.
+  @internal
+  ###
+  config = (blueprint) ->
+    hash = openConfig(blueprint)
+    Object.preventExtensions(hash)
+    hash
+
+  ###*
+  @function up.util.openConfig
   @internal
   ###
-  config = (blueprint = {}) ->
+  openConfig = (blueprint = {}) ->
     hash = {}
     hash.reset = ->
       newOptions = blueprint
       newOptions = newOptions() if isFunction(newOptions)
       extend(hash, newOptions)
     hash.reset()
-    Object.preventExtensions(hash)
     hash
 
   ###*
@@ -1873,6 +1888,23 @@ up.util = (($) ->
     deferred.cancel = -> clearTimeout(timeout)
     deferred
 
+  ###*
+  Returns `'left'` if the center of the given element is in the left 50% of the screen.
+  Otherwise returns `'right'`.
+
+  @function up.util.horizontalScreenHalf
+  @internal
+  ###
+  horizontalScreenHalf = ($element) ->
+    elementDims = measure($element)
+    screenDims = clientSize()
+    elementMid = elementDims.left + 0.5 * elementDims.width
+    screenMid = 0.5 * screenDims.width
+    if elementMid < screenMid
+      'left'
+    else
+      'right'
+
   isDetached: isDetached
   requestDataAsArray: requestDataAsArray
   requestDataAsQuery: requestDataAsQuery
@@ -1965,6 +1997,7 @@ up.util = (($) ->
   scrollbarWidth: scrollbarWidth
   documentHasVerticalScrollbar: documentHasVerticalScrollbar
   config: config
+  openConfig: openConfig
   cache: cache
   unwrapElement: unwrapElement
   multiSelector: multiSelector
@@ -1983,6 +2016,8 @@ up.util = (($) ->
   sequence: sequence
   promiseTimer: promiseTimer
   previewable: previewable
+  evalOption: evalOption
+  horizontalScreenHalf: horizontalScreenHalf
 
 )($)
 

data/lib/assets/stylesheets/unpoly-bootstrap3/modal-ext.css.sass

@@ -2,3 +2,21 @@
   // Unpoly: Gives some default padding
   // BS: Expects content to set the padding
   padding: 0
+
+.up-modal[up-flavor='drawer']
+
+  .up-modal-content
+    // Bootstrap gives its modals round corners, which looks wrong with a
+    // drawer that sits at the end of the screen.
+    border-radius: 0
+
+    // Bootstrap gives its modals a border, which looks wrong
+    // when touching the edge of the screen.
+    border-top: none
+    border-bottom: none
+
+  &[up-position='left'] .up-modal-content
+    border-left: none
+
+  &[up-position='right'] .up-modal-content
+    border-right: none

data/lib/assets/stylesheets/unpoly/modal.css.sass

@@ -96,3 +96,16 @@ $close-font-size: 34px
   color: #666
   cursor: pointer
 
+.up-modal[up-flavor='drawer']
+  .up-modal-viewport
+    text-align: left
+  &[up-position='right'] .up-modal-viewport
+    text-align: right
+  .up-modal-dialog
+    margin: 0
+    max-width: 350px
+  .up-modal-content
+    min-height: 100vh
+    box-sizing: border-box // since we're setting min-height on an element with padding
+
+

data/lib/unpoly/rails/version.rb

@@ -4,6 +4,6 @@ module Unpoly
     # The current version of the unpoly-rails gem.
     # This version number is also used for releases of the Unpoly
     # frontend code.
-    VERSION = '0.30.1'
+    VERSION = '0.31.0'
   end
 end

data/spec_app/Gemfile

@@ -11,6 +11,7 @@ gem 'therubyracer', platforms: :ruby
 gem 'jquery-rails'
 gem 'unpoly-rails', path: '..'
 gem 'bower-rails'
+gem 'bootstrap-sass', '~> 3.3'
 
 # Jasmine spec runner won't boot with a more modern version of sprockets.
 # It crashes with an "asset not precompiled" error.

data/spec_app/Gemfile.lock

@@ -1,7 +1,7 @@
 PATH
   remote: ..
   specs:
-    unpoly-rails (0.30.0)
+    unpoly-rails (0.30.1)
       rails (>= 3)
 
 GEM
@@ -43,8 +43,13 @@ GEM
       thread_safe (~> 0.3, >= 0.3.4)
       tzinfo (~> 1.1)
     arel (6.0.3)
+    autoprefixer-rails (6.5.1.1)
+      execjs
     binding_of_caller (0.7.2)
       debug_inspector (>= 0.0.1)
+    bootstrap-sass (3.3.7)
+      autoprefixer-rails (>= 5.2.1)
+      sass (>= 3.3.4)
     bower-rails (0.9.2)
     builder (3.2.2)
     byebug (3.5.1)
@@ -195,6 +200,7 @@ PLATFORMS
   ruby
 
 DEPENDENCIES
+  bootstrap-sass (~> 3.3)
   bower-rails
   byebug
   coffee-rails (~> 4.1.0)

data/spec_app/app/assets/javascripts/bootstrap_manifest.coffee

@@ -0,0 +1,6 @@
+#= require bootstrap-sprockets
+
+# From the docs (https://github.com/twbs/bootstrap-sass):
+# bootstrap-sprockets and bootstrap should not both be included in application.js.
+# bootstrap-sprockets provides individual Bootstrap Javascript files (alert.js or dropdown.js, for example),
+# while bootstrap provides a concatenated file containing all Bootstrap Javascripts.

data/spec_app/app/assets/stylesheets/_helpers.sass

@@ -0,0 +1,5 @@
+=clear_after
+  &:after
+    content: ""
+    display: table
+    clear: both

data/spec_app/app/assets/stylesheets/bootstrap_manifest.sass

@@ -0,0 +1,2 @@
+@import bootstrap-sprockets
+@import bootstrap

data/spec_app/app/assets/stylesheets/integration_test.sass

@@ -1,5 +1,7 @@
 //= require unpoly
 
+@import helpers
+
 $block-spacing: 25px
 
 =block-spacing
@@ -14,6 +16,11 @@ body
 h1, h2, h3, h4, p
   +block-spacing
 
+a
+  color: #169
+  &:hover
+    color: #e81
+
 .page
   min-height: 3000px
 
@@ -32,6 +39,7 @@ h1, h2, h3, h4, p
 
 .example
   margin: 50px
+  +clear-after
 
 .area
   +block-spacing
@@ -44,13 +52,14 @@ h1, h2, h3, h4, p
   line-height: 50px
   padding-left: 25px
   padding-right: 25px
-  background-color: #e21
+  background-color: #37b
   color: white
   text-decoration: none
   &.up-current
-    background-color: #921
+    background-color: #e21
   &:hover
     background-color: #fa1
+    color: white
   &.up-active
     background-color: #ff0
 

data/spec_app/app/views/css_test/modal.erb

@@ -1,3 +1,13 @@
 <div class="example">
   <a class="button" href="/css_test/modal_contents" up-modal=".contents">Modal</a>
 </div>
+
+<div class="example">
+  <a class="button" href="/css_test/modal_contents" up-drawer=".contents" style="float: left">Drawer (auto)</a>
+  <a class="button" href="/css_test/modal_contents" up-drawer=".contents" style="float: right">Drawer (auto)</a>
+</div>
+
+<div class="example">
+  <a class="button" href="/css_test/modal_contents" up-drawer=".contents" up-position="left">Drawer (left)</a>
+  <a class="button" href="/css_test/modal_contents" up-drawer=".contents" up-position="right">Drawer (right)</a>
+</div>

data/spec_app/app/views/css_test/modal_contents.erb

@@ -1,5 +1,5 @@
 <div class="contents">
-  Line 1: Foo bar baz bam qux foo bar baz bam qux<br>
-  Line 2: Foo bar baz bam qux foo bar baz bam qux<br>
-  Line 3: Foo bar baz bam qux foo bar baz bam qux
+  <% (1..100).each do |i| %>
+    Line <%= i %>: Foo bar baz bam qux foo bar baz bam qux<br>
+  <% end %>
 </div>

data/spec_app/app/views/layouts/integration_test.erb

@@ -4,6 +4,12 @@
     <title>Integration test - Unpoly</title>
     <%= stylesheet_link_tag 'integration_test', media: 'all' %>
     <%= javascript_include_tag 'integration_test' %>
+    <% if params[:bootstrap] == '1' %>
+      <%= stylesheet_link_tag 'bootstrap_manifest', media: 'all' %>
+      <%= javascript_include_tag 'bootstrap_manifest' %>
+      <%= stylesheet_link_tag 'unpoly-bootstrap3', media: 'all' %>
+      <%= javascript_include_tag 'unpoly-bootstrap3' %>
+    <% end %>
     <%= csrf_meta_tags %>
   </head>
   <body>

data/spec_app/app/views/pages/start.erb

@@ -11,15 +11,24 @@
   <h2>Integration tests</h2>
 
   <ul>
-    <li><%= link_to 'Tooltip', '/css_test/tooltip' %></li>
+    <li>
+      <%= link_to 'Tooltip', '/css_test/tooltip' %>
+      (<%= link_to 'with Bootstrap', '/css_test/tooltip?bootstrap=1' %>)
+    </li>
   </ul>
 
   <ul>
-    <li><%= link_to 'Popup', '/css_test/popup' %></li>
+    <li>
+      <%= link_to 'Popup', '/css_test/popup' %>
+      (<%= link_to 'with Bootstrap', '/css_test/popup?bootstrap=1' %>)
+    </li>
   </ul>
 
   <ul>
-    <li><%= link_to 'Modal', '/css_test/modal' %></li>
+    <li>
+      <%= link_to 'Modal', '/css_test/modal' %>
+      (<%= link_to 'with Bootstrap', '/css_test/modal?bootstrap=1' %>)
+    </li>
   </ul>
 
   <ul>

data/spec_app/config/initializers/assets.rb

@@ -11,4 +11,8 @@ Rails.application.config.assets.version = '1.0'
 
 
 Rails.application.config.assets.precompile += %w( application.js application.css )
-Rails.application.config.assets.precompile += %w( jasmine_specs.js jasmine_specs.css integration_test.js integration_test.css )
+Rails.application.config.assets.precompile += %w( jasmine_specs.js jasmine_specs.css )
+Rails.application.config.assets.precompile += %w( integration_test.js integration_test.css )
+Rails.application.config.assets.precompile += %w( bootstrap_manifest.js bootstrap_manifest.css )
+Rails.application.config.assets.precompile += %w( unpoly-bootstrap3.js unpoly-bootstrap3.css )
+

data/spec_app/spec/javascripts/up/form_spec.js.coffee

@@ -100,7 +100,6 @@ describe 'up.form', ->
             it 'does not run multiple callbacks if a long-running callback has been blocking multiple subsequent callbacks'
 
             it "runs a callback in the same frame if the delay is 0", ->
-              console.debug('*** next example')
               $input = affix('input[value="old-value"]')
               callback = jasmine.createSpy('change callback')
               up.observe($input, { delay: 0 }, callback)

data/spec_app/spec/javascripts/up/link_spec.js.coffee

@@ -394,6 +394,30 @@ describe 'up.link', ->
                 expect($('.document .target')).toHaveText('new text from document link')
                 done()
 
+        describe 'with [up-fail-target] modifier', ->
+
+          beforeEach ->
+            affix('.success-target').text('old success text')
+            affix('.failure-target').text('old failure text')
+            @$link = affix('a[href="/path"][up-target=".success-target"][up-fail-target=".failure-target"]')
+
+          it 'uses the [up-fail-target] selector for a failed response', (done) ->
+            Trigger.clickSequence(@$link)
+            u.nextFrame =>
+              @respondWith('<div class="failure-target">new failure text</div>', status: 500)
+              u.nextFrame =>
+                expect($('.success-target')).toHaveText('old success text')
+                expect($('.failure-target')).toHaveText('new failure text')
+                done()
+
+          it 'uses the [up-target] selector for a successful response', (done) ->
+            Trigger.clickSequence(@$link)
+            u.nextFrame =>
+              @respondWith('<div class="success-target">new success text</div>', status: 200)
+              u.nextFrame =>
+                expect($('.success-target')).toHaveText('new success text')
+                expect($('.failure-target')).toHaveText('old failure text')
+                done()
 
         describe 'with [up-transition] modifier', ->
 

data/spec_app/spec/javascripts/up/modal_spec.js.coffee

@@ -225,7 +225,7 @@ describe 'up.modal', ->
           up.modal.config.openDuration = 20
           up.modal.config.closeAnimation = 'fade-out'
           up.modal.config.closeDuration = 20
-          up.modal.flavor 'drawer',
+          up.modal.flavor 'custom-drawer',
             openAnimation: 'move-from-right'
             closeAnimation: 'move-to-right'
 
@@ -252,7 +252,7 @@ describe 'up.modal', ->
             ]
 
 
-            up.modal.extract('.target', '<div class="target">response2</div>', flavor: 'drawer')
+            up.modal.extract('.target', '<div class="target">response2</div>', flavor: 'custom-drawer')
             expect(animations).toEqual [
               { animation: 'fade-in', text: 'response1' },
               { animation: 'fade-out', text: 'response1' },
@@ -266,7 +266,7 @@ describe 'up.modal', ->
                 { animation: 'move-from-right', text: 'response2' }
               ]
 
-              expect($('.up-modal').attr('up-flavor')).toEqual('drawer')
+              expect($('.up-modal').attr('up-flavor')).toEqual('custom-drawer')
 
               done()
 
@@ -293,10 +293,10 @@ describe 'up.modal', ->
               expect(up.modal.coveredUrl()).toBeMissing()
               done()
 
-    describe 'up.modal.flavor', ->
+    describe 'up.modal.flavors', ->
 
-      it 'registers a new modal variant with its own default configuration', ->
-        up.modal.flavor('variant', { maxWidth: 200 })
+      it 'allows to register new modal variants with its own default configuration', ->
+        up.modal.flavors.variant = { maxWidth: 200 }
         $link = affix('a[href="/path"][up-modal=".target"][up-flavor="variant"]')
         Trigger.click($link)
         @respondWith('<div class="target">new text</div>')
@@ -307,7 +307,7 @@ describe 'up.modal', ->
         expect($dialog.attr('style')).toContain('max-width: 200px')
 
       it 'does not change the configuration of non-flavored modals', ->
-        up.modal.flavor('variant', { maxWidth: 200 })
+        up.modal.flavors.variant = { maxWidth: 200 }
         $link = affix('a[href="/path"][up-modal=".target"]')
         Trigger.click($link)
         @respondWith('<div class="target">new text</div>')
@@ -417,6 +417,40 @@ describe 'up.modal', ->
           Trigger.click($link)
           expect(@lastRequest().method).toEqual 'POST'
 
+    describe '[up-drawer]', ->
+
+      beforeEach ->
+        up.motion.config.enabled = false
+
+      it 'slides in a drawer that covers the full height of the screen', (done) ->
+        $link = affix('a[href="/foo"][up-drawer=".target"]').text('label')
+        up.hello($link)
+        Trigger.clickSequence($link)
+        u.nextFrame =>
+          @respondWith '<div class="target">new text</div>'
+          expect(up.modal.isOpen()).toBe(true)
+          expect($('.up-modal').attr('up-flavor')).toEqual('drawer')
+          windowHeight = u.clientSize().height
+          modalHeight = $('.up-modal-content').outerHeight()
+          expect(modalHeight).toEqual(windowHeight)
+          expect($('.up-modal-content').offset()).toEqual(top: 0, left: 0)
+          done()
+
+      it 'puts the drawer on the right if the opening link sits in the right 50% of the screen', (done) ->
+        $link = affix('a[href="/foo"][up-drawer=".target"]').text('label')
+        $link.css
+          position: 'absolute'
+          right: '0'
+        up.hello($link)
+        Trigger.clickSequence($link)
+        u.nextFrame =>
+          @respondWith '<div class="target">new text</div>'
+          expect(up.modal.isOpen()).toBe(true)
+          windowWidth = u.clientSize().width
+          modalWidth = $('.up-modal-content').outerWidth()
+          scrollbarWidth = u.scrollbarWidth()
+          expect($('.up-modal-content').offset().left).toBeAround(windowWidth - modalWidth - scrollbarWidth, 1.0)
+          done()
 
     describe '[up-close]', ->
 

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: unpoly-rails
 version: !ruby/object:Gem::Version
-  version: 0.30.1
+  version: 0.31.0
 platform: ruby
 authors:
 - Henning Koch
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2016-10-05 00:00:00.000000000 Z
+date: 2016-10-25 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -139,8 +139,11 @@ files:
 - spec_app/Rakefile
 - spec_app/app/assets/images/.keep
 - spec_app/app/assets/images/grid.png
+- spec_app/app/assets/javascripts/bootstrap_manifest.coffee
 - spec_app/app/assets/javascripts/integration_test.coffee
 - spec_app/app/assets/javascripts/jasmine_specs.coffee
+- spec_app/app/assets/stylesheets/_helpers.sass
+- spec_app/app/assets/stylesheets/bootstrap_manifest.sass
 - spec_app/app/assets/stylesheets/integration_test.sass
 - spec_app/app/assets/stylesheets/jasmine_specs.sass
 - spec_app/app/controllers/application_controller.rb