rademade_admin 0.1.0 → 0.1.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 2c553d2b903554833df01e46b4d9ff33090f5062
-  data.tar.gz: 832c752bdb49ade91452d48906319fad6a08dd6c
+  metadata.gz: ac099ed3499fd7a5621251f91ca93e4b8a3e955b
+  data.tar.gz: 2825da23890de8701d5a6c0e5a911a5014ad49dd
 SHA512:
-  metadata.gz: 8e00bfe82dff650203c6f20a7e9c2fb74c12e96f33c7e97df581d140534325c39a89e871bd667fdcb8416648e8b7fd13ef2183e551f4c3c2238b0a3012457ff1
-  data.tar.gz: ec567ec3001e95ffe2546772c29c454d51af20be382bbfa58a8e00de54f44e47bdc7461b66654ade5bd8e09fa778db74e1a92835a030f3a075ad85624c320e7f
+  metadata.gz: 35fa13e49f08390a27fc4a406eb04d1ec90ba6863d86f817344aaacc7e9945a832a85bb18a57e566402ead9fa371e27d16e639c349ee716a1e526f9129f3dd17
+  data.tar.gz: 564df47bbc1bedc5a3cb7ba02f9dbce4303f85a8a09ea0e515a102f4de14da00c11d16e90345a5e21af999cc1c0eca5c0cc6ed195716f0d844d55701c8469afa

data/app/assets/javascripts/rademade_admin.coffee

@@ -10,6 +10,7 @@
 #= require jquery-ui/ui/slider
 #= require jquery-ui/ui/tabs
 #= require jquery-ui/ui/datepicker
+#= require jcrop/js/jquery.Jcrop
 #= require jquery-timepicker/dist/jquery-ui-timepicker-addon
 #= require jquery-timepicker/dist/jquery-ui-sliderAccess
 #= require jquery-fileupload/js/jquery.fileupload
@@ -20,6 +21,7 @@
 #= require jquery-validation/src/core
 #= require jquery-validation/src/ajax
 #= require jquery-validation/src/delegate
+#= require leaflet/dist/leaflet-src
 #= require moment/moment
 #= require turbolinks
 #= require select2

data/app/assets/javascripts/rademade_admin/app/common/cropper.coffee

@@ -0,0 +1,70 @@
+class @Cropper extends Backbone.View
+
+  horizontalAttributes : ['x', 'w']
+  verticalAttributes : ['y', 'h']
+
+  className : 'add_new_popup'
+
+  events :
+    'click' : 'check'
+    'click [data-crop]' : 'crop'
+    'click [data-close]' : 'close'
+
+  setOriginalDimensions : (originalDimensions) ->
+    @originalDimensions = originalDimensions
+
+  show : (imagePath) ->
+    @render(imagePath)
+    @initCrop()
+    @$el.show()
+
+  render : (imagePath) ->
+    @$el.html @_getHTML(imagePath : imagePath)
+
+  initCrop : () ->
+    @$cropAttributes = @$el.find('[data-crop-attribute]')
+    [originalWidth, originalHeight] = @originalDimensions
+    $image = @$el.find('.crop-image')
+    $image.on 'load', () =>
+      @horizontalRatio = originalWidth / $image.width()
+      @verticalRatio = originalHeight / $image.height()
+      $image.Jcrop
+        onSelect : @_updateCropAttributes
+
+  check : (e) ->
+    @closePopup() if $(e.target).closest('.crop').length is 0
+
+  crop : (e) ->
+    e.preventDefault()
+    @closePopup()
+    @trigger 'crop-image', @_getCropData()
+    false
+
+  close : (e) ->
+    e.preventDefault()
+    @closePopup()
+
+  closePopup : () ->
+    @$el.hide()
+
+  _getCropData : () ->
+    cropData = {}
+    @$cropAttributes.each () ->
+      $cropAttribute = $(this)
+      cropData[$cropAttribute.data('crop-attribute')] = $cropAttribute.val()
+    cropData
+
+  _updateCropAttributes : (attributes) =>
+    @_scaleAttributes(attributes)
+    @$cropAttributes.each () ->
+      $cropAttribute = $(this)
+      $cropAttribute.val(attributes[$cropAttribute.data('crop-attribute')])
+
+  _scaleAttributes : (attributes) ->
+    _.each @horizontalAttributes, (attribute) =>
+      attributes[attribute] *= @horizontalRatio
+    _.each @verticalAttributes, (attribute) =>
+      attributes[attribute] *= @verticalRatio
+
+  _getHTML : (data) ->
+    JST['rademade_admin/app/templates/crop'](data)

data/app/assets/javascripts/rademade_admin/app/common/lang-panel.coffee

@@ -3,4 +3,4 @@ initLangPanel = () ->
   $langPanel.tabs() if $langPanel.length > 0
 
 $ ->
-  $(document).on 'ready page:load init-lang-panel', initLangPanel
+  $(document).on 'ready page:load init-plugins', initLangPanel

data/app/assets/javascripts/rademade_admin/app/common/location.coffee.erb

@@ -0,0 +1,50 @@
+class @Location extends Backbone.View
+
+  initElements : () ->
+    @$map = @$el.find('.map')
+    @$latitude = @$el.find('[data-location-attribute="latitude"]')
+    @$longitude = @$el.find('[data-location-attribute="longitude"]')
+    @$zoom = @$el.find('[data-location-attribute="zoom"]')
+
+  initMap : () ->
+    @_initMap()
+    @_initLayer()
+    @_initMarker()
+
+  _initMap : () ->
+    @center = [@$latitude.val(), @$longitude.val()]
+    @map = L.map(@$map.attr('id')).setView(@center, @$zoom.val())
+    @map.on 'zoomend', (event) =>
+      @$zoom.val event.target.getZoom()
+
+  _initLayer : () ->
+    L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
+      attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
+    }).addTo(@map)
+
+  _initMarker : () ->
+    marker = new L.marker @center,
+      icon : L.icon
+        iconUrl : '<%= asset_path('rademade_admin/leaflet/marker-icon.png') %>'
+        shadowUrl : '<%= asset_path('rademade_admin/leaflet/marker-shadow.png') %>'
+      draggable : true
+    marker.on 'dragend', (event) =>
+      @_updateLatLng event.target.getLatLng()
+    marker.addTo(@map)
+
+  _updateLatLng : (latLng) ->
+    @$latitude.val latLng.lat
+    @$longitude.val latLng.lng
+
+  @init : ($el) ->
+    location = new this
+      el : $el
+    location.initElements()
+    location.initMap()
+
+  @initAll : () ->
+    $('.location').each () ->
+      Location.init $(this)
+
+$ ->
+  $(document).on('page:load ready init-plugins', Location.initAll)

data/app/assets/javascripts/rademade_admin/app/common/uploader.coffee

@@ -1,53 +1,89 @@
-initUploader = ->
+class @Uploader extends Backbone.View
 
-  window.bindFileUploader = ($el, $wrapper) ->
-    @$el = $el
-    @$wrapper = $wrapper
-    this
+  events :
+    'click [data-upload]' : 'upload'
+    'click [data-crop]' : 'crop'
 
-  bindFileUploader::submitFile = (e, $form) ->
-    @_setUploadProgress(0)
-    @_showUploader()
-    $form.submit().done =>
-      @_appendUploadResult.apply(this, arguments)
+  initialize : (options) ->
+    super
+    @$uploader = options.$uploader
+    @_initCropper()
+
+  initElements : () ->
+    @$progressWrapper = @$el.find('.upload-progress-wrapper')
+    @$cropButton = @$el.find('[data-crop]')
+    @$cropAttributes = @$el.find('[data-crop-attribute]')
 
-  bindFileUploader::uploadDone = () ->
-    @_hideUploader()
+  initFileUpload : () ->
+    @$uploader.fileupload
+      dataType : 'json'
+      url : @$uploader.data('url')
+      formData : @_getUploaderData()
+      add : @submitFile
+      done : => @$progressWrapper.hide()
+      error : => @$progressWrapper.hide()
+      progressall : @updateUploadProggress
 
-  bindFileUploader::uploadError = () ->
-    @_hideUploader()
+  upload : () ->
+    @$el.find('input.uploader-input-file').click()
 
-  bindFileUploader::updateUploadProggress = (e, data) ->
+  crop : () ->
+    imagePath = @$el.find('.form-input[type="hidden"]').val()
+    if imagePath
+      @cropper.setOriginalDimensions @$el.find('img').data('original-dimensions').split(',')
+      @cropper.show imagePath
+      @$el.append(@cropper.$el)
+
+  submitFile : (e, $form) =>
+    @_setUploadProgress(0)
+    @$progressWrapper.show()
+    $form.submit().done @appendUploadResult
+
+  updateUploadProggress : (e, data) =>
     progress = parseInt(data.loaded / data.total * 100, 10)
     @_setUploadProgress(progress)
 
-  bindFileUploader::_showUploader = ->
-    @$wrapper.find('.upload-progress-wrapper').show()
+  appendUploadResult : (result) =>
+    @$el
+      .find('.preview-wrapper').replaceWith(result.html).end()
+      .find('.form-input[type="hidden"]').val(result.file[@$uploader.data('column')].url)
+
+  _initCropper : () ->
+    @cropper = new Cropper()
+    @cropper.on 'crop-image', @_crop
 
-  bindFileUploader::_hideUploader = ->
-    @$wrapper.find('.upload-progress-wrapper').hide()
+  _crop : (cropData) =>
+    allData = @_getUploaderData()
+    allData.crop = cropData
+    $.ajax
+      type : 'post'
+      url : @$cropButton.data('url')
+      data : allData
+      dataType : 'json'
+      success : @appendUploadResult
 
-  bindFileUploader::_setUploadProgress = (progress) ->
-    @$wrapper.find('.upload-progress').width(progress + '%')
+  _getUploaderData : () ->
+    uploaderData = _.pick(@$uploader.data(), 'id', 'saved', 'model', 'column', 'uploader')
+    uploaderData.path = @$el.find('.form-input[type="hidden"]').val()
+    uploaderData
 
-  bindFileUploader::_appendUploadResult = (result)->
-    @$wrapper.find('.preview-wrapper').replaceWith(result.html)
-    @$wrapper.find('input[type="hidden"]').val(result.file[@$el.data('column')].url)
+  _setUploadProgress : (progress) =>
+    @$el.find('.upload-progress').width(progress + '%')
 
-  bindFileUploader::init = () ->
-    #todo url take from dom
-    @$el.fileupload
-      dataType : 'json'
-      url : @$el.data('url')
-      formData : _.pick(@$el.data(), 'id', 'saved', 'model', 'column', 'uploader')
-      add : => @submitFile.apply(this, arguments)
-      done : => @uploadDone.apply(this, arguments)
-      error : => @uploadError.apply(this, arguments)
-      progressall : => @updateUploadProggress.apply(this, arguments)
+  @init : ($uploader) ->
+    uploader = new this
+      el : $uploader.closest('.uploader-wrapper')
+      $uploader : $uploader
+    uploader.initElements()
+    uploader.initFileUpload()
+    uploader
 
-  $('.uploader-input-file').each (index, el) ->
-    $el = $(el)
-    (new bindFileUploader($el, $el.closest('.uploader-wrapper'))).init()
+  @initAll : () ->
+    $('.uploader-input-file').each (index, el) ->
+      $uploader = $(el)
+      unless $uploader.data('initialized')
+        Uploader.init $uploader
+        $uploader.data('initialized', true)
 
 $ ->
-  $(document).on('page:load ready init-uploader', initUploader)
+  $(document).on 'page:load ready init-plugins', Uploader.initAll

data/app/assets/javascripts/rademade_admin/app/form-popup/view.coffee

@@ -38,18 +38,11 @@ class @FormPopup.View extends Backbone.View
   _init : () ->
     $form = @$el.find 'form'
     if $form.length > 0
-      @_initPlugins()
+      $(document).trigger('init-plugins')
       @_initForm $form
     else
       @_bindButton()
 
-  _initPlugins : () ->
-    $(document)
-      .trigger('init-uploader')
-      .trigger('init-lang-panel')
-      .trigger('init-plugins') # todo move all custom inits to init-plugins
-    Select2Input.View.initAll @$el
-
   _initForm : ($form) ->
     Form.init $form
     $form.on 'ajax-submit-done', (e, response) =>

data/app/assets/javascripts/rademade_admin/app/select2/related/view.coffee

@@ -20,15 +20,11 @@ class @Select2Input.RelatedView extends Backbone.View
     false
 
   render : () ->
-    @$el.html @_getTemplateHtml()
+    @$el.html @_getHtml(@model.toJSON())
     return this
 
-  _getTemplateHtml : () ->
-    """
-      <span>#{@model.get('text')}</span>
-      <button data-edit="#{@model.get('edit_url')}">Edit</button>
-      <button data-remove>Delete</button>
-    """
+  _getHtml : (data) ->
+    JST['rademade_admin/app/templates/related-item'](data)
 
   @init : ($el) ->
     model = new Select2Input.RelatedModel

data/app/assets/javascripts/rademade_admin/app/select2/view.coffee

@@ -69,10 +69,12 @@ class @Select2Input.View extends Backbone.View
     view.initItem()
     view
 
-  @initAll : (within) ->
-    $('.input-holder:has(.select-wrapper)', within).each (index, select) =>
-      Select2Input.View.init $(select)
+  @initAll : () ->
+    $('.input-holder:has(.select-wrapper)').each (index, select) =>
+      $select = $(select)
+      unless $select.data('initialized')
+        Select2Input.View.init $select
+        $select.data('initialized', true)
 
 $ ->
-  $(document).on 'ready page:load', () ->
-    Select2Input.View.initAll()
+  $(document).on 'ready page:load init-plugins', Select2Input.View.initAll

data/app/assets/javascripts/rademade_admin/app/templates/crop.jst.ejs

@@ -0,0 +1,11 @@
+<div class="crop">
+    <img class="crop-image" src="<%= imagePath %>">
+    <div class="crop-actions">
+        <button class="btn blue-btn" data-crop>Crop</button>
+        <button class="btn red-btn" data-close>Discard</button>
+    </div>
+    <input type="hidden" data-crop-attribute="x"/>
+    <input type="hidden" data-crop-attribute="y"/>
+    <input type="hidden" data-crop-attribute="w"/>
+    <input type="hidden" data-crop-attribute="h"/>
+</div>

data/app/assets/javascripts/rademade_admin/app/templates/related-item.jst.ejs

@@ -0,0 +1,5 @@
+<span><%= text %></span><%
+if (edit_url) {
+    %><button data-edit="<%= edit_url %>"><%= I18n.t('rademade_admin.edit_related_item') %></button><%
+}
+%><button data-remove><%= I18n.t('rademade_admin.destroy') %></button>

data/app/assets/stylesheets/rademade_admin.sass.erb

@@ -7,6 +7,9 @@
  *= require jquery-ui/themes/base/datepicker
  *= require uniform/themes/default/css/uniform.default
  *= require jquery-timepicker/dist/jquery-ui-timepicker-addon
+ *= require jcrop/css/jquery.Jcrop
+ *= require leaflet/dist/leaflet
+ *= require edit
  */
 
 /******************/
@@ -22,6 +25,7 @@
 /******************/
 
 @import rademade_admin/mixins/clear
+@import rademade_admin/mixins/font_face
 @import rademade_admin/mixins/fonts
 /*@import rademade_admin/mixins/sprite*/
 @import rademade_admin/mixins/text-overflow
@@ -43,6 +47,7 @@
 @import rademade_admin/lib/uploader
 @import rademade_admin/lib/datepicker
 @import rademade_admin/lib/notifier
+@import rademade_admin/lib/jcrop
 
 /******************/
 /**     base     **/
@@ -71,6 +76,8 @@
 @import rademade_admin/blocks/form/select2
 @import rademade_admin/blocks/form/table
 @import rademade_admin/blocks/form/texarea
+@import rademade_admin/blocks/form/checkbox
+@import rademade_admin/blocks/form/map
 
 
 /******************/

data/app/assets/stylesheets/rademade_admin/blocks/buttons/main.sass

@@ -78,4 +78,52 @@
 .select-btn
     padding: 4px 12px
 
-.uploader-input-file
+.lang-btn
+    position: relative
+    display: inline-block
+    margin: 0
+    padding: 6px 12px
+    font-size: 13px
+    font-weight: 400
+    color: #fff
+    text-align: center
+    cursor: pointer
+    border: 1px solid #397bc1
+    background-color: #428bca
+    +border-radius(5px)
+    +user-select
+
+    a
+        width: auto !important
+        padding: 0 10px
+
+    &:hover
+        background-color: #3071a9
+        border-color: #285e8e
+
+    &.ui-state-active
+        border: 1px solid #abc993
+        background-color: #eaf7de
+        a
+            position: relative
+            color: #70ab3c !important
+            &:after,
+            &:before
+                top: 100%
+                left: 50%
+                border: solid transparent
+                content: " "
+                height: 0
+                width: 0
+                position: absolute
+                pointer-events: none
+            &:after
+                border-color: rgba(234, 247, 222, 0)
+                border-top-color: #eaf7de
+                border-width: 4px
+                margin-left: -4px
+            &:before
+                border-color: rgba(171, 201, 147, 0)
+                border-top-color: #abc993
+                border-width: 5px
+                margin-left: -5px