11111000000

angular.module \app.services .factory \Colorpicker, [
  \$templateCache
  \$rootScope
  \$appScope
  \$compile
  \$timeout
  \$log
  ($templateCache, $rootScope, $appScope, $compile, $timeout, $log)->
    ->

11111000000

script(type='text/ng-template', id='colorpicker-template')
  .color-container.animation(draggable, ng-show='shown', ng-style='elStyle', ng-keydown='keyDown($event)')
    ul.color-palette(ng-show='palette')
      li(class='color-preview')
        .preview-box(ng-style='{backgroundColor: currentColor}', ng-click='select(currentColor)')
      li.pal-pre(ng-repeat='color in palette')
        .preview-box(ng-style='{backgroundColor: color}', ng-click='select(color)')
    .color-sat-val(ng-style='{backgroundColor : baseColor}')
      .color-sat
        .color-val(drag='satValDrag($event,drag)', ng-mousedown='satValMousedown($event)')

11111000000

angular.module \app.directives .directive \myrange, [
  \$compile
  \$timeout
  \$parse
  \$log
  ($compile, $timeout, $parse, $log)->
    restrict: \A
    require: \ngModel
    templateUrl: \myrange-template

11111000000

script(type='text/ng-template', id='myrange-template')
  .rangenum.myrange(ng-class="{ 'undefined' : item == null }")
    .range(ng-click='rangeClick($event)')
      .dragger(drag='draggerDrag( $event, drag )', dragstart='draggerDragStart( $event, drag )', dragend='draggerDragEnd( $event, drag )')
        .fly-value(ng-bind='text')
    input.i_bw2(ng-if="!noInput", ng-model   = 'text', ng-keyup = 'keyup( $event )' )

11111000000

angular.module \app.directives .directive \selector, [
  \$compile
  \$parse
  \$templateCache
  \$appScope
  \$timeout
  ($compile, $parse, $templateCache, $appScope, $timeout)->
    restrict: \A
    templateUrl: \selector-template
    replace: true

11111000000

angular.module \app.directives .directive \groupPadma, [
  \$templateCache
  \Lang
  \$log
  ($templateCache, Lang,$log)->
    restrict: \EA
    replace: yes
    transclude: no
    templateUrl: \group-padma-template
    priority: 10

11111000000

colorpickerContainerWidth = 192px
paletteColorSize = 24px

.color-container
  position fixed
  width colorpickerContainerWidth
  z-index 10000
  padding 5px
  background: #f9f9f9
  border 1px solid gray

11111000000

# -*- mode: livescript -*-
#
#  Log decorator
#  author: Peter
#
do ->

  module = angular.module \logDecorator, []
  module.config [
    \$provide

11111000000

window <<<<

  isGradient: -> (it |> /^\s*([a-z]+)\-gradient\(\s*(.*)\s*\)\s*$/gmi.exec)?[1] in <[ linear radial ]>

  toFixedOrInt: (precision, value)-->
    a={}
    power = 10 `Math.pow` (precision or 0)
    value = Math.round(value * power) / power
    rounded = value |> Math.round
    if rounded is value then value = rounded

11111000000

Sample of contenteditable with custom drag&drop behaviour

A Pen by Peter on CodePen.

License.