sublime_video_layout 2.7.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA1:
+  metadata.gz: ac83f35320ad7b0b33475563e8c1961661c2d223
+  data.tar.gz: d7913d23129423bee488bb271b50f239a347f7e7
+SHA512:
+  metadata.gz: 025dbd6766741d5a9b8ca495d2c23993526fa857b0fa12582d82bcb5f5e1407e3e71a90fca9fb9bcb1f6844562a26270832001db1d6c651b00dfdcee6ec3025b
+  data.tar.gz: d2503ed03bc1758ad2b9ed013c96635732f2133909fa7d62a4f0de4262710a963ffba8d97b4f59c400510d476537b5c57315758775dbf8b92006471bed4393e6

data/MIT-LICENSE

@@ -0,0 +1,20 @@
+Copyright 2012 YOURNAME
+
+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.

data/README.md

@@ -0,0 +1,21 @@
+# SublimeVideoLayout
+
+This engine provides a common layout (HTML, CSS) and utility JavaScript classes for all SublimeVideo apps.
+
+### Deployement to http://gemfury.com/
+
+Update `VERSION` in `lib/sublime_video_layout/version.rb` to `X.Y.Z` and then run the following commands:
+
+``` bash
+> bundle install
+> rake build
+sublime_video_layout X.Y.Z built to pkg/sublime_video_layout-X.Y.Z.gem
+> bundle exec fury push pkg/sublime_video_layout-X.Y.Z.gem
+```
+
+### JS documentation
+
+To generate the JS docs, run `gem install codo && codo ./app/assets/javascripts`
+
+------------
+Copyright (c) 2010 - 2012 Jilion(r) - SublimeVideo and Jilion are registered trademarks

data/Rakefile

@@ -0,0 +1,29 @@
+#!/usr/bin/env rake
+begin
+  require 'bundler/setup'
+rescue LoadError
+  puts 'You must `gem install bundler` and `bundle install` to run rake tasks'
+end
+begin
+  require 'rdoc/task'
+rescue LoadError
+  require 'rdoc/rdoc'
+  require 'rake/rdoctask'
+  RDoc::Task = Rake::RDocTask
+end
+
+RDoc::Task.new(:rdoc) do |rdoc|
+  rdoc.rdoc_dir = 'rdoc'
+  rdoc.title    = 'SublimeVideoLayout'
+  rdoc.options << '--line-numbers'
+  rdoc.rdoc_files.include('README.rdoc')
+  rdoc.rdoc_files.include('lib/**/*.rb')
+end
+
+Bundler::GemHelper.install_tasks
+
+require 'rspec/core/rake_task'
+
+RSpec::Core::RakeTask.new(:spec)
+
+task :default => :spec

data/app/assets/fonts/SublimeIcons.svg

@@ -0,0 +1,34 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
+<svg xmlns="http://www.w3.org/2000/svg">
+<metadata>
+This is a custom SVG font generated by IcoMoon.
+<iconset grid="16"></iconset>
+</metadata>
+<defs>
+<font id="SublimeIcons" horiz-adv-x="512" >
+<font-face units-per-em="512" ascent="480" descent="-32" />
+<missing-glyph horiz-adv-x="512" />
+<glyph unicode="&#x5b;" d="M 260.352-40.667C 116.59-40.667,0.00,75.886,0.00,219.648C0.00,363.447, 116.59,480.00, 260.352,480.00
+	s 260.352-116.553, 260.352-260.352C 520.704,75.886, 404.151-40.667, 260.352-40.667z M 185.088,326.51l0.00-219.758 L 364.251,216.649L 185.088,326.51z"  />
+<glyph unicode="&#x21;" d="M 384.00-32.00 L 0.00,480.00 L 768.00,480.00 L 384.00-32.00 Z" horiz-adv-x="768"  />
+<glyph unicode="&#x22;" d="M 256.00,480.00C 114.618,480.00,0.00,365.382,0.00,224.00s 114.618-256.00, 256.00-256.00s 256.00,114.618, 256.00,256.00S 397.382,480.00, 256.00,480.00z
+	 M 114.292,332.451L 397.731,332.451 c 1.885,0.00, 3.677-0.349, 5.399-0.861l-105.449-90.275l-14.033-11.404L 256.00,207.407l-27.601,22.458l-14.01,11.38L 108.87,331.59
+	C 110.615,332.125, 112.407,332.451, 114.292,332.451z M 95.023,134.40L 95.023,313.181 c0.00,2.048, 0.419,4.003, 1.001,5.841l 105.10-89.949L 96.116,128.256
+	C 95.465,130.211, 95.023,132.259, 95.023,134.40z M 397.731,115.13L 114.292,115.13 c-1.792,0.00-3.514,0.326-5.19,0.791l 106.007,101.725L 256.00,184.39l 40.96,33.327
+	l 105.984-101.772C 401.245,115.456, 399.546,115.13, 397.731,115.13z M 417.001,134.40c0.00-2.164-0.442-4.212-1.094-6.167l-104.96,100.864l 105.053,89.903
+	c 0.582-1.839, 1.001-3.793, 1.001-5.841L 417.001,134.40 z"  />
+<glyph unicode="&#x23;" d="M 432.00,432.00L 192.00,192.00L 80.00,304.00L0.00,224.00L 192.00,32.00L 512.00,352.00 z"  />
+<glyph unicode="&#x24;" d="M 507.331,68.67c-0.002,0.002-0.004,0.004-0.006,0.005L 352.003,224.00l 155.322,155.325c 0.002,0.002, 0.004,0.003, 0.006,0.005
+		c 1.672,1.673, 2.881,3.627, 3.656,5.708c 2.123,5.688, 0.912,12.341-3.662,16.915L 433.952,475.326c-4.574,4.573-11.225,5.783-16.914,3.66
+		c-2.08-0.775-4.035-1.984-5.709-3.655c0.00-0.002-0.002-0.003-0.004-0.005L 256.001,320.00L 100.677,475.325
+		c-0.002,0.002-0.003,0.003-0.005,0.005c-1.673,1.671-3.627,2.88-5.707,3.655c-5.69,2.124-12.341,0.913-16.915-3.66L 4.676,401.951
+		c-4.574-4.574-5.784-11.226-3.661-16.914c 0.776-2.08, 1.985-4.036, 3.656-5.708c 0.002-0.001, 0.003-0.003, 0.005-0.005L 160.001,224.00
+		L 4.676,68.674c-0.001-0.002-0.003-0.003-0.004-0.005c-1.671-1.673-2.88-3.627-3.657-5.707c-2.124-5.688-0.913-12.341, 3.661-16.915
+		l 73.374-73.373c 4.575-4.574, 11.226-5.784, 16.915-3.661c 2.08,0.776, 4.035,1.985, 5.708,3.656c 0.001,0.002, 0.003,0.003, 0.005,0.005
+		l 155.324,155.325l 155.324-155.325c 0.002-0.001, 0.004-0.003, 0.006-0.004c 1.674-1.672, 3.627-2.881, 5.707-3.657
+		c 5.689-2.123, 12.342-0.913, 16.914,3.661l 73.373,73.374c 4.574,4.574, 5.785,11.227, 3.662,16.915
+		C 510.212,65.043, 509.003,66.997, 507.331,68.67z"  />
+<glyph unicode="&#x20;" horiz-adv-x="256" />
+<glyph class="hidden" unicode="&#xf000;" d="M0,480L 512 -32L0 -32 z" horiz-adv-x="0" />
+</font></defs></svg>

data/app/assets/javascripts/form/password_checker.js.coffee

@@ -0,0 +1,18 @@
+# This class provides a "current password checker" popup.
+#
+class SublimeVideo.Form.PasswordChecker
+  # Creates a new "current password checker" popup using {SublimeVideo.UI.Utils.openPopup}.
+  #
+  constructor: (@originForm) ->
+    passwordState = if @originForm.data('password-state') then " #{@originForm.data('password-state')}" else ''
+    passwordCheckerForm = $('<form>', id: 'password_checker_form', action: '/password/validate', method: 'post', 'data-remote': 'true')
+    passwordCheckerForm.html("<p class='desc'>Your#{passwordState} password is needed to perform this action:</p>" +
+    "<div class='entry password'>" +
+    "<label for='password_check' class='icon'>#{passwordState} Password</label>" +
+    "<input type='password' id='password_check' name='password' placeholder='Your#{passwordState} password' class='text' />" +
+    "<div class='actions'><input type='submit' class='blue_button' value='Done' /></div>" +
+    "<div class='spacer'></div>" +
+    "</div>")
+
+    SublimeVideo.UI.Utils.openPopup(id: 'password_checker', class: 'popup', form: @originForm, content: passwordCheckerForm)
+    $('#password_check').focus()

data/app/assets/javascripts/form/pseudo_placeholder.js.coffee

@@ -0,0 +1,91 @@
+# Manages pseudo-placeholders essentially for:
+#
+# - IE < 10
+# - Firefox < 4
+# - Safari < 4
+# - iOS/Safari < 4
+# - Opera Mini
+# - Android
+#
+# More info on compatibility here: http://caniuse.com/#search=placeholder
+#
+# What it does is setting the value of the field from its placeholder attribute
+# and adding a class to reproduce the placeholder style.
+#
+class SublimeVideo.Form.PseudoPlaceholder
+
+  # Construct a pseudo placeholder.
+  #
+  # @todo Clarify how this shit works
+  # @param [jQuery Element] field an input or a textarea DOM element
+  #
+  constructor: (@field) ->
+    this.fieldDidChange(@field)
+
+  # This is a public API method that updates `@field`, resets its value if needed
+  # before setuping the pseudo placeholder.
+  #
+  # @param [jQuery Element] field the new input field to which is applied the pseudo placeholder
+  #
+  fieldDidChange: (field) ->
+    @field = field
+    # Firefox set the value with the placeholder when reloading the page, so clear this shit!
+    if @field.val() is @field.attr('placeholder')
+      @field.val('')
+    this.setupPseudoPlaceholder()
+
+  #
+  # @private
+  #
+  # @param [String] value the new value for the 'value' attribute
+  #
+  setValueAndToggleClass: (value) ->
+    @field.val(value)
+    if value is ''
+      @field.removeClass('placeholder')
+    else
+      @field.addClass('placeholder')
+
+  # Copy 'placeholder' attribute to 'value' attribute if it's empty.
+  #
+  # @note If it's a password field this will also take care to initially
+  #   replace it with a regular text field (until it receives focus).
+  #
+  # @private
+  #
+  setupPseudoPlaceholder: =>
+    this.storeSelfReferenceAndObservers()
+
+    if @field.val() is ''
+      if @field.data('showPasswordObject') and @field.attr('type') is 'password'
+        @field.data('showPasswordObject').toggleField(type: 'text')
+      else
+        this.setValueAndToggleClass(@field.attr('placeholder'))
+
+  # This stores a reference to this object into `@field` and register observers on focus & blur.
+  #
+  # @private
+  #
+  storeSelfReferenceAndObservers: ->
+    @field.data('pseudoPlaceholderObject', this)
+    @field.on('focus', this.clearPseudoPlaceholder)
+    @field.on('blur',  this.setupPseudoPlaceholder)
+
+  # This method clear the value and class of the field if its value is equal to the placeholder.
+  #
+  # @note It automatically replaces the field with a password field if needed.
+  #
+  # @private
+  #
+  clearPseudoPlaceholder: =>
+    if @field.val() is @field.attr('placeholder')
+      this.setValueAndToggleClass('')
+
+      if @field.data('showPasswordObject')
+        showPasswordObject = @field.data('showPasswordObject')
+        @field.removeData() # ensure the #fieldDidChange callback won't be called
+        @field = showPasswordObject.toggleField()
+        this.storeSelfReferenceAndObservers() # since we have a new field
+
+        # refocus (the newly create field)
+        setTimeout((=> @field.focus()), 0) # msie hack

data/app/assets/javascripts/form/show_password.js.coffee

@@ -0,0 +1,91 @@
+# Manages the showing/hiding in clear text of the entered password
+#
+class SublimeVideo.Form.ShowPassword
+  constructor: (@field, @index) ->
+    @showPasswordCheckbox = $('<input />', type: 'checkbox', id: "show_password_#{@index}")
+
+    this.storeThisInData()
+    this.insertShowPasswordCheckbox()
+
+  #
+  # @private
+  #
+  storeThisInData: ->
+    @field.data('showPasswordObject', this) # so that the placeholderManager can eventually pick this up
+
+  #
+  # @private
+  #
+  insertShowPasswordCheckbox: ->
+    showPasswordWrap  = $('<div>', class: 'checkbox_wrap')
+    showPasswordLabel = $('<label />', for: "show_password_#{@index}").text('Show password')
+    showPasswordWrap.append(@showPasswordCheckbox).append(showPasswordLabel)
+
+    this.injectShowPasswordCheckboxInDom(showPasswordWrap)
+    this.attachEventHandlerToCheckbox()
+
+  #
+  # @private
+  #
+  attachEventHandlerToCheckbox: ->
+    @showPasswordCheckbox.on('click', this.togglePasswordVisibility)
+
+  #
+  # @private
+  #
+  injectShowPasswordCheckboxInDom: (showPasswordWrap) ->
+    errorMessage = @field.parent('form').find('.inline_errors').first()
+    if errorMessage.length
+      errorMessage.after(showPasswordWrap)
+    else
+      @field.after(showPasswordWrap)
+    @showPasswordCheckbox.checked = false # Firefox reload ;-)
+
+  #
+  # @private
+  #
+  showPassword: ->
+    @showPasswordCheckbox and @showPasswordCheckbox.prop('checked')
+
+  #
+  # @private
+  #
+  togglePasswordVisibility: (event) =>
+    this.toggleField()
+
+  #
+  # @private
+  #
+  # @param [Object] options allow customizing the generated field
+  # @option options [Boolean] type force the type of the generated field
+  #
+  toggleField: (options = {}) ->
+    fieldType = if options['type']?
+      options['type']
+    else if this.showPassword() then 'text' else 'password'
+
+    # We can't simply modify the type attribute of the field (from 'password' to 'text'), because IE doesn't support this
+    # cf: http://www.alistapart.com/articles/the-problem-with-passwords
+    newField = $('<input />',
+      id:          @field.attr 'id'
+      name:        @field.attr 'name'
+      value:       @field.val()
+      size:        @field.size()
+      placeholder: @field.attr 'placeholder'
+      required:    @field.attr 'required'
+      class:       @field.attr 'class'
+      type:        fieldType)
+
+    if @field.data 'pseudoPlaceholderObject'
+      pseudoPlaceholderObject = @field.data('pseudoPlaceholderObject')
+
+    @field.removeData() # Removes eventual observers and storage keys
+    @field.replaceWith newField
+    @field = newField
+    this.storeThisInData() # store this in the new field
+    pseudoPlaceholderObject.fieldDidChange(newField) if pseudoPlaceholderObject
+
+    if @field.attr('id') is 'user_password' and $('current_password_wrap').exists()
+      SublimeVideo.currentPasswordHandler.setupField(@field)
+
+    @field

data/app/assets/javascripts/form/submit_manager.js.coffee

@@ -0,0 +1,53 @@
+# SubmitManager manages several automation on form submit:
+#
+# - disabling of submit button
+# - asking for current password
+# - cleaning of pseudo-placeholders
+# - cleaning HTML5 errors that are not present anymore but there still are errors (on other fields)
+#
+class SublimeVideo.Form.SubmitManager
+  constructor: (@form) ->
+    this.setupOnSubmitObservers()
+    this.setupOnClickObservers()
+
+  setupOnSubmitObservers: ->
+    submitEvent = if Modernizr.hasEvent('submit') then 'submit' else 'emulated:submit'
+    @form.on submitEvent, (event) =>
+      if @form.data('remote') is 'true' or @form.hasClass('disableable')
+        this.disableSubmitButton()
+      this.resetPseudoPlaceholders()
+
+      if @form.data('password-protected') is 'true'
+        this.instanciatePasswordChecker(event)
+
+  setupOnClickObservers: ->
+    @form.find('input[type=submit]').each (index, input) =>
+      # when HTML5 form validation doesn't pass, the submit event is not fired
+      $(input).on 'click', (event) =>
+        @form.find('input,textarea').each (index, input) ->
+          $input = $(input)
+          if $input[0].validity
+            if $input[0].validity.valid
+              $input.removeClass('errors')
+              $input.siblings('.inline_errors').remove()
+            else
+              event.preventDefault()
+              $input.addClass('errors')
+
+  # Disable submit button for ajax forms to prevent double submissions (quickly click muliple times the form submit button)
+  #
+  # (PAY ATTENTION: this considers that the ajax call will re-render the entire form hence re-enabling the submit button.
+  #  If we'll have some ajax forms that won't reload themselves, the code below must be updated)
+  disableSubmitButton: ->
+    @form.find('input[type=submit], button[type=submit]').each ->
+      $(this).prop('disabled', true)
+
+  instanciatePasswordChecker: (event) ->
+    event.preventDefault()
+    SublimeVideo.Form.passwordChecker = new SublimeVideo.Form.PasswordChecker $(event.target)
+
+  # Reset pseudo-placeholders values (for browsers who don't support HTML5 placeholders)
+  #
+  resetPseudoPlaceholders: ->
+    @form.find('input.placeholder').each ->
+      $(this).val('')