the_crop 0.0.1

data/app/assets/javascripts/the_crop/the_crop.js.coffee

@@ -0,0 +1,205 @@
+@TheCrop = do ->
+  # HELPERS
+  dec: (val) -> parseInt val, 10
+  json_to_str: (json = {}) -> JSON.stringify(json)
+  by_id: (id) -> document.getElementById(id)
+
+  # INIT
+  init: ->
+    @params = {}
+    do @init_open_btn
+    do @init_close_btn
+    do @init_submit
+    do @init_ajaxian_callback
+
+  init_open_btn: ->
+    $('.js_the_crop').on 'click', (e) =>
+      link    = $ e.target
+      params  = link.data()
+      @params = params if params
+
+      @show_canvas()
+      @create(params)
+      false
+
+  init_close_btn: ->
+    $('.js_the_crop_close').on 'click', =>
+      do @destroy
+      do @hide_canvas
+      false
+
+  init_submit: ->
+    $('.js_the_crop_submit').on 'click', =>
+      form = $('.js_crop_form')
+
+      x = $('#crop_x', form).val()
+      y = $('#crop_y', form).val()
+      w = $('#crop_w', form).val()
+      h = $('#crop_h', form).val()
+
+      if x is '0' && y is '0' && w is '0' && h is '0'
+        alert 'Please, select crop area'
+      else
+        $('.js_crop_form').submit()
+
+      false
+
+  init_ajaxian_callback: ->
+    $('.js_crop_form').on 'ajax:success', (e, data, status, xhr) =>
+      callback = null
+      fn_chain = @params.callbackHandler.split '.'
+
+      for fn in fn_chain
+        callback = if callback then callback[fn] else window[fn]
+
+      callback(data, @params) if callback
+
+  init_crop_form: ->
+    $('.js_crop_form').attr('action', @params.url)
+
+  init_jcrop: (context) =>
+    $('#js_jcrop_target').Jcrop
+      onChange: context.buildPreview
+      onSelect: context.buildPreview
+      setSelect: [0,0,100,100]
+      aspectRatio: context.get_aspect_ration()
+    , ->
+      context.api = @
+
+  # GETTERS
+  get_aspect_ration: ->
+    prev = $('.js_preview_image')
+    @dec(prev.css('width')) / @dec(prev.css('height'))
+
+  # SETTERS
+  set_crop_form_params: (c) ->
+    form     = $('.js_crop_form')
+    orig_img = $('#js_jcrop_target')
+
+    # Set img size for calc scale value
+    img_w = $('#crop_img_w', form)
+    img_w.val TheCrop.dec orig_img.css('width')
+
+    # Set crop params
+    x = $('#crop_x', form)
+    y = $('#crop_y', form)
+    w = $('#crop_w', form)
+    h = $('#crop_h', form)
+
+    x.val(c.x); y.val(c.y)
+    w.val(c.w); h.val(c.h)
+
+  set_preview_defaults: ->
+    $('.js_preview_image').css
+      width: 300
+      height: 300
+
+  set_preview_dimensions: ->
+    if prev_opt = @params?.preview
+      if prev_opt?.width && prev_opt?.height
+        $('.js_preview_image').css
+          width: prev_opt.width
+          height: prev_opt.height
+
+  set_holder_defaults: ->
+    if holder_opt = @params?.holder
+      if holder_opt?.width
+        $('.js_source_image').css
+          width: holder_opt.width
+
+  set_holder_image_same_dimentions: ->
+    holder  = $('.js_source_image')
+    src_img = $('#js_jcrop_target')
+
+    width = @dec holder.css 'width'
+    src_img.css { width: width }
+
+    src_img_height = @dec src_img.css 'height'
+    holder.css { height: src_img_height }
+
+  set_original_image_size_info: ->
+    w = @by_id('js_jcrop_target').width
+    h = @by_id('js_jcrop_target').height
+
+    $('.js_the_crop_src_size').html """
+      #{ w }x#{ h } (px)
+    """
+
+  set_croped_image_size_info: (w, h) ->
+    $('.js_the_crop_cropped_size').html """
+      #{ w }x#{ h } (px)
+    """
+
+  set_final_size_info: ->
+    if @params.finalSize
+      item = $('.js_the_crop_final_size')
+      item.html "#{ @params.finalSize } (px)"
+      item.parent().show()
+
+  set_canvas_dimensions: ->
+    do @set_preview_defaults
+    do @set_preview_dimensions
+
+    do @set_holder_defaults
+    do @set_holder_image_same_dimentions
+
+  # FUNCTIONS
+  create: ->
+    do @set_original_image_size_info
+    do @set_canvas_dimensions
+    do @set_final_size_info
+    do @init_crop_form
+    @init_jcrop @
+
+  destroy: ->
+    @api.destroy()
+
+  buildPreview: (coords) ->
+    preview_holder  = $('.js_preview_image')
+    original_img    = $('#js_jcrop_target')
+
+    preview_view_w = TheCrop.dec preview_holder.css('width')
+    preview_view_h = TheCrop.dec preview_holder.css('height')
+
+    original_view_w = TheCrop.dec original_img.css('width')
+    original_view_h = TheCrop.dec original_img.css('height')
+
+    orig_image_w = TheCrop.by_id('js_jcrop_target').width
+
+    # Calculate scale
+    scale = original_view_w / orig_image_w
+    sw = TheCrop.dec coords.w / scale
+    sh = TheCrop.dec coords.h / scale
+
+    # Set scaled sizes
+    TheCrop.set_croped_image_size_info(sw, sh)
+
+    # When crop-area not selected
+    if sw is 0 && sh is 0
+      TheCrop.set_crop_form_params({ x: 0, y: 0, w: 0, h: 0 })
+    else
+      TheCrop.set_crop_form_params(coords)
+
+    # Calculate values for preview
+    rx = preview_view_w / coords.w
+    ry = preview_view_h / coords.h
+
+    $('#js_preview').css
+      width:  "#{ Math.round(rx * original_view_w) }px"
+      height: "#{ Math.round(ry * original_view_h) }px"
+
+      marginLeft: "-#{ Math.round(rx * coords.x) }px"
+      marginTop:  "-#{ Math.round(ry * coords.y) }px"
+
+  # OTHERS
+  show_canvas: ->
+    canvas = $('.js_the_crop_canvas')
+
+    canvas.css
+      width:  $(document).width()
+      height: $(document).height()
+
+    canvas.fadeIn()
+
+  hide_canvas: ->
+    $('.js_the_crop_canvas').fadeOut()

data/app/assets/stylesheets/jcrop/jquery.Jcrop.css

@@ -0,0 +1,167 @@
+/* jquery.Jcrop.css v0.9.12 - MIT License */
+/*
+  The outer-most container in a typical Jcrop instance
+  If you are having difficulty with formatting related to styles
+  on a parent element, place any fixes here or in a like selector
+
+  You can also style this element if you want to add a border, etc
+  A better method for styling can be seen below with .jcrop-light
+  (Add a class to the holder and style elements for that extended class)
+*/
+.jcrop-holder {
+  direction: ltr;
+  text-align: left;
+  /* IE10 touch compatibility */
+  -ms-touch-action: none;
+}
+/* Selection Border */
+.jcrop-vline,
+.jcrop-hline {
+  background: #ffffff url("Jcrop.gif");
+  font-size: 0;
+  position: absolute;
+}
+.jcrop-vline {
+  height: 100%;
+  width: 1px !important;
+}
+.jcrop-vline.right {
+  right: 0;
+}
+.jcrop-hline {
+  height: 1px !important;
+  width: 100%;
+}
+.jcrop-hline.bottom {
+  bottom: 0;
+}
+/* Invisible click targets */
+.jcrop-tracker {
+  height: 100%;
+  width: 100%;
+  /* "turn off" link highlight */
+  -webkit-tap-highlight-color: transparent;
+  /* disable callout, image save panel */
+  -webkit-touch-callout: none;
+  /* disable cut copy paste */
+  -webkit-user-select: none;
+}
+/* Selection Handles */
+.jcrop-handle {
+  background-color: #333333;
+  border: 1px #eeeeee solid;
+  width: 7px;
+  height: 7px;
+  font-size: 1px;
+}
+.jcrop-handle.ord-n {
+  left: 50%;
+  margin-left: -4px;
+  margin-top: -4px;
+  top: 0;
+}
+.jcrop-handle.ord-s {
+  bottom: 0;
+  left: 50%;
+  margin-bottom: -4px;
+  margin-left: -4px;
+}
+.jcrop-handle.ord-e {
+  margin-right: -4px;
+  margin-top: -4px;
+  right: 0;
+  top: 50%;
+}
+.jcrop-handle.ord-w {
+  left: 0;
+  margin-left: -4px;
+  margin-top: -4px;
+  top: 50%;
+}
+.jcrop-handle.ord-nw {
+  left: 0;
+  margin-left: -4px;
+  margin-top: -4px;
+  top: 0;
+}
+.jcrop-handle.ord-ne {
+  margin-right: -4px;
+  margin-top: -4px;
+  right: 0;
+  top: 0;
+}
+.jcrop-handle.ord-se {
+  bottom: 0;
+  margin-bottom: -4px;
+  margin-right: -4px;
+  right: 0;
+}
+.jcrop-handle.ord-sw {
+  bottom: 0;
+  left: 0;
+  margin-bottom: -4px;
+  margin-left: -4px;
+}
+/* Dragbars */
+.jcrop-dragbar.ord-n,
+.jcrop-dragbar.ord-s {
+  height: 7px;
+  width: 100%;
+}
+.jcrop-dragbar.ord-e,
+.jcrop-dragbar.ord-w {
+  height: 100%;
+  width: 7px;
+}
+.jcrop-dragbar.ord-n {
+  margin-top: -4px;
+}
+.jcrop-dragbar.ord-s {
+  bottom: 0;
+  margin-bottom: -4px;
+}
+.jcrop-dragbar.ord-e {
+  margin-right: -4px;
+  right: 0;
+}
+.jcrop-dragbar.ord-w {
+  margin-left: -4px;
+}
+/* The "jcrop-light" class/extension */
+.jcrop-light .jcrop-vline,
+.jcrop-light .jcrop-hline {
+  background: #ffffff;
+  filter: alpha(opacity=70) !important;
+  opacity: .70!important;
+}
+.jcrop-light .jcrop-handle {
+  -moz-border-radius: 3px;
+  -webkit-border-radius: 3px;
+  background-color: #000000;
+  border-color: #ffffff;
+  border-radius: 3px;
+}
+/* The "jcrop-dark" class/extension */
+.jcrop-dark .jcrop-vline,
+.jcrop-dark .jcrop-hline {
+  background: #000000;
+  filter: alpha(opacity=70) !important;
+  opacity: 0.7 !important;
+}
+.jcrop-dark .jcrop-handle {
+  -moz-border-radius: 3px;
+  -webkit-border-radius: 3px;
+  background-color: #ffffff;
+  border-color: #000000;
+  border-radius: 3px;
+}
+/* Simple macro to turn off the antlines */
+.solid-line .jcrop-vline,
+.solid-line .jcrop-hline {
+  background: #ffffff;
+}
+/* Fix for twitter bootstrap et al. */
+.jcrop-holder img,
+img.jcrop-preview {
+  max-width: none;
+}

data/app/assets/stylesheets/the_crop/the_crop.css.scss

@@ -0,0 +1,70 @@
+.the_crop_canvas{
+  display: none;
+  position: absolute;
+  top: 0; left: 0;
+  width: 100%; height: 100%;
+  z-index: 100;
+
+  &:before{
+    content:' ';
+    display: block;
+    position: absolute;
+    top: 0; left: 0;
+    width: 100%; height: 100%;
+    background: black;
+    opacity: 0.92;
+    z-index: -1;
+  }
+
+  .header_block{
+    p{
+      color: gray;
+      font-size: 12px;
+      margin-bottom: 3px;
+      line-height: 120%;
+    }
+    span{ color: white; }
+    margin-bottom: 7px;
+  }
+
+  .the_crop_body{
+    width: 90%;
+    margin: auto;
+    margin-top: 5%;
+  }
+
+  .the_crop_close{
+    float: right;
+    color: white;
+  }
+
+  .images_block{
+    overflow: hidden; zoom: 1;
+    margin-bottom: 30px;
+  }
+
+  .source_image{
+    float: left;
+    margin-right: 30px;
+
+    border: 1px solid white;
+    background: gray;
+
+    width: 400px;
+    height: 300px;
+    overflow: hidden;
+    zoom:1;
+  }
+
+  .preview_image{
+    float: left;
+
+    border: 1px solid white;
+    background: gray;
+
+    width: 100px;
+    height: 100px;
+    overflow: hidden;
+    zoom:1;
+  }
+}

data/app/views/the_crop/_canvas.html.haml

@@ -0,0 +1,34 @@
+- content_for :the_crop do
+  .the_crop_canvas.js_the_crop_canvas
+    .the_crop_body
+      .header_block
+        = link_to "Close", '#', class: 'btn btn-info the_crop_close js_the_crop_close'
+
+        %p
+          Original image size:
+          %span.js_the_crop_src_size ?
+
+        %p
+          Cropped image size:
+          %span.js_the_crop_cropped_size ?
+
+        %p{ style: 'display:none' }
+          Image will be resized to:
+          %span.js_the_crop_final_size ?
+
+      .images_block
+        .source_image.js_source_image
+          %img#js_jcrop_target{ src: @post.main_image.url(:original) }
+
+        .preview_image.js_preview_image
+          %img#js_preview{ src: @post.main_image.url(:original) }
+
+      .actions
+        = link_to "Crop!", '#', class: 'btn btn-info js_the_crop_submit'
+
+      = form_tag '#', class: :js_crop_form, method: :patch, remote: true, style: 'display:none' do
+        = text_field_tag 'crop[img_w]'
+        = text_field_tag 'crop[x]'
+        = text_field_tag 'crop[y]'
+        = text_field_tag 'crop[w]'
+        = text_field_tag 'crop[h]'