app/assets/javascripts/outpost/field_counter.js.coffee in outpost-cms-0.0.3 vs app/assets/javascripts/outpost/field_counter.js.coffee in outpost-cms-0.0.4
- old
+ new
@@ -5,19 +5,19 @@
el = $(field)
target = el.attr("data-target")
fuzziness = el.attr("data-fuzziness")
new outpost.FieldCounter(el, target: target, fuzziness: fuzziness)
-##
+##
# FieldCounter
# To turn a field into a field counter, add three attributes:
#
# class="field-counter"
# data-target="50" # Perfect length
# data-fuzziness="10" # Lee-way in either direction (inclusive)
#
-# Anything spanning the range of
+# Anything spanning the range of
#
# `(target - fuzziness) through (target + fuzziness)`
#
# (inclusive) will be considered "in-range". Everything else is
# "out of range". By default, this class will use the Twitter Bootstrap
@@ -30,64 +30,64 @@
inRangeClass: "alert alert-success"
outOfRangeClass: "alert alert-warning"
counterClass: "counter-notify"
counterWrapper: ".controls" # The element to which the counter will be prepended
counterStyle: "padding: 3px; margin: 0 0 2px 0;"
-
+
constructor: (@el, options={}) ->
@options = _.defaults options, @DefaultOptions
# Setup elements
@field = $("input, textarea", @el)
@counterEl = $("<div />", class: @options.counterClass, style: @options.counterStyle)
$(@options.counterWrapper, @el).prepend @counterEl
-
+
# Setup attributes
@count = 0
@target = parseInt(@options.target)
@fuzziness = parseInt(@options.fuzziness)
@rangeLow = @target - @fuzziness
@rangeHigh = @target + @fuzziness
-
+
@inRangeClass = @options.inRangeClass
@outOfRangeClass = @options.outOfRangeClass
-
+
# Register listeners
@field.on
keyup: (event) =>
@updateCount($(event.target).val().length)
-
+
@el.on
updateCounter: (event, count) =>
@updateText(count)
@updateColor(count)
# Set the count on initialize
@updateCount(@field.val().length)
-
+
#--------------
inRange: ->
@rangeLow <= @count and @count <= @rangeHigh
-
+
#--------------
-
+
updateCount: (length) ->
@count = length
@el.trigger "updateCounter", @count
-
+
#--------------
-
+
updateText: (count) ->
@counterEl.html("<strong>Optimal Length:</strong> #{count} of #{@target} (+/- #{@fuzziness})")
#--------------
-
+
updateColor: (count) ->
if @inRange()
@counterEl.removeClass(@outOfRangeClass)
@counterEl.addClass(@inRangeClass)
else
@counterEl.removeClass(@inRangeClass)
@counterEl.addClass(@outOfRangeClass)
-
-
+
+