redditor 0.1.0

data/app/assets/javascripts/redditor/fileapi/tmpl.js

@@ -0,0 +1,35 @@
+// Simple JavaScript Templating
+// John Resig - http://ejohn.org/ - MIT Licensed
+(function (){
+  var cache = {};
+
+  this.tmpl = function tmpl(str, data){
+    // Figure out if we're getting a template, or if we need to
+    // load the template - and be sure to cache the result.
+    var fn = !/\W/.test(str) ?
+        cache[str] = cache[str] ||
+            tmpl(document.getElementById(str).innerHTML) :
+
+      // Generate a reusable function that will serve as a template
+      // generator (and which will be cached).
+        new Function("obj",
+            "var p=[],print=function(){p.push.apply(p,arguments);};" +
+
+              // Introduce the data as local variables using with(){}
+                "with(obj){p.push('" +
+
+              // Convert the template into pure JavaScript
+                str
+                    .replace(/[\r\t\n]/g, " ")
+                    .split("<%").join("\t")
+                    .replace(/((^|%>)[^\t]*)'/g, "$1\r")
+                    .replace(/\t=(.*?)%>/g, "',$1,'")
+                    .split("\t").join("');")
+                    .split("%>").join("p.push('")
+                    .split("\r").join("\\'")
+                + "');}return p.join('');");
+
+    // Provide some basic currying to the user
+    return data ? fn(data) : fn;
+  };
+})();

data/app/assets/javascripts/redditor/fileapi/uploader.coffee

@@ -0,0 +1,139 @@
+window.FU =
+  config:
+    maxFileSizeMB: 10
+    messages:
+      error: "Ошибка"
+      done: "Загружено"
+    data: ->
+  icon:
+    image: "//cdn1.iconfinder.com/data/icons/humano2/32x32/apps/synfig_icon.png"
+
+  files: []
+  index: 0
+  active: false
+
+  add: (file) ->
+    FU.files.push file
+    if /^image/.test(file.type)
+      FileAPI.Image(file).preview(35).rotate("auto").get (err, img) ->
+        FU._getEl(file, ".js-left").addClass("b-file__left_border").html img  unless err
+
+  getFileById: (id) ->
+    i = FU.files.length
+    return FU.files[i]  if FileAPI.uid(FU.files[i]) is id  while i--
+
+  start: ->
+    FU._upload FU.files[FU.index]  if not FU.active and (FU.active = FU.files.length > FU.index)
+
+  abort: (id) ->
+    file = @getFileById(id)
+    file.xhr.abort()  if file.xhr
+
+  _getEl: (file, sel) ->
+    $el = $("#file-" + FileAPI.uid(file))
+    (if sel then $el.find(sel) else $el)
+
+  _upload: (file) ->
+    if file
+      FileAPI.upload(
+        url: FU.config.uploadUrl+"?authenticity_token=#{encodeURIComponent($("meta[name=\"csrf-token\"]").attr("content"))}"
+        data: FU.config.data()
+        dataType: "script"
+
+        files:
+          file: file
+
+        upload: ->
+          FU._getEl(file).addClass "b-file_upload"
+          FU._getEl(file, ".js-progress").css(opacity: 0).show().animate
+            opacity: 1
+          , 100
+
+        progress: (evt) ->
+          FU._getEl(file, ".js-bar").css "width", evt.loaded / evt.total * 100 + "%"
+
+        complete: (err, xhr) ->
+          setTimeout(xhr.responseText, 10)
+
+          state = (if err then "error" else "done")
+          FU._getEl(file).removeClass "b-file_upload"
+          FU._getEl(file, ".js-progress").animate
+            opacity: 0
+          , 200, ->
+            $(@).hide().closest("div.js-file").delay(1000).fadeOut 200, ->
+              $(@).remove()
+
+          FU._getEl(file, ".js-info").append ", <b class=\"b-file__" + state + "\">" + ((if err then (xhr.statusText or err) else FU.config.messages[state])) + "</b>"
+          FU.index++
+          FU.active = false
+          FU.start()
+      )
+
+  template: '<div id="file-<%=FileAPI.uid(file)%>" class="js-file b-file b-file_<%=file.type.split("/")[0]%>">
+              <div class="js-left b-file__left">
+                <img src="<%=icon[file.type.split("/")[0]]||icon.def%>" width="32" height="32" style="margin: 2px 0 0 3px"/>
+              </div>
+              <div class="b-file__right">
+                <div class="js-name b-file__name"><%=file.name%></div>
+                <div class="js-info b-file__info">Размер: <%=(file.size/FileAPI.KB).toFixed(2)%> KB</div>
+                <div class="js-progress b-file__bar" style="display: none">
+                  <div class="b-progress"><div class="js-bar b-progress__bar"></div></div>
+                </div>
+              </div>
+              <i class="js-abort b-file__abort" title="abort">&times;</i>
+            </div>'
+
+
+window.onFiles = (files, context) ->
+  $context = $(context)
+  if uploadUrl = $context.data("upload-url")
+    FU.config.uploadUrl = uploadUrl
+
+  if contentBlockId = $context.data("content-block-id")
+    FU.config.data = ->
+      REDDE.redditor.parameterizationForm $context.closest("dd")
+  else
+    FU.config.data = ->
+  
+  FileAPI.each files, (file) ->
+    if file.size >= FU.config.maxFileSizeMB * FileAPI.MB
+      alert "Sorrow.\nMax size #{FU.config.maxFileSizeMB}MB"
+    else if file.size is undefined
+      $("#oooops").show()
+      $("#buttons-panel").hide()
+    else
+      $("#preview").append tmpl(window.FU.template,
+        file: file
+        icon: FU.icon
+      )
+      FU.add file
+      FU.start()
+
+$ ->
+  unless FileAPI.support.cors or FileAPI.support.flash
+    $("<div />",
+      class: "alert"
+      html: "Увы, ваш браузер не поддерживает html5 и flash, поэтому смотреть тут нечего, а iframe не даёт всей красоты :]"
+    ).insertAfter "#page-header" # если загрузка не поддерживается, то выводим сообщение
+    $('#buttons-panel').hide()
+
+
+  if FileAPI.support.dnd
+    $('#drag-n-drop').show() #выводим текст с сообщение что работает dnd
+    $(document).dnd (over) ->
+      $('#drop-zone').toggleClass "active", over #Если кто-то перетащил файлы в браузер подсвечиваем область в которую их можно бросить
+      return
+    , ->
+    $('#drop-zone').dnd (over) ->
+      return
+    , (files) ->
+      onFiles files, this
+      return
+
+  $(document).on 'change', 'input[type="file"][name="files"]', (evt) ->
+    files = FileAPI.getFiles(evt)
+    onFiles(files, this)
+    FileAPI.reset(evt.currentTarget)
+    return
+
+  return

data/app/assets/javascripts/redditor/redditor.coffee

@@ -0,0 +1,148 @@
+window.REDDE = {redditor: {}}
+REDDE.redditor.sliderBlockImagesSortableParams =
+  scroll: false
+  dropOnEmpty: false
+  cursor: "crosshair"
+  opacity: 0.75
+  items: "li"
+  update: ->
+    self = $(@)
+    $.ajax
+      data: self.sortable('serialize') + '&authenticity_token=#{u(form_authenticity_token)}'
+      dataType: 'script'
+      url: self.data("sortable-url")
+    .done ->
+      # console.log 
+      return
+    .error ->
+      alert "Ошибка, данные не сохранены"
+
+REDDE.redditor.parameterizationForm = (box) ->
+  form = box.serializeForm()
+  formName = box.find("div.form-name").data("object-name")
+  firstProperty = formName.replace(/^(.*?)\[.*/,"$1")
+  nextProperties = formName.match(/\[(.*?)\]/g)
+  nextProperties = $.map nextProperties, (n)->
+    n.replace(/\[(.*)\]/,"$1")
+  params = form[firstProperty]
+  for i in nextProperties
+    params = params[i]
+  params = "content_block": params
+
+
+REDDE.redditor.setPositions = ->
+  $el = REDDE.redditor.$el
+  $el.find($el.sortable("option", "items")).each (i) ->
+    $(this).find("input.js-position").val i # временное решение с input type=number
+
+REDDE.redditor.sortList = ->
+  sortArray = $.map REDDE.redditor.$el.find("dd"), (n) ->
+    key = $(n).attr("class")
+    input = $(n).find("input[type=hidden][name='#{$(n).find("div.form-name").data("object-name")}[id]']")
+    value = input.val()
+    # console.log input, value
+    if value?
+      obj = {}
+      obj[key] =
+        index: value
+        position: $(n).index()      
+      obj
+    else
+      null
+
+  # console.log sortArray
+
+  if sortArray.length
+    $.ajax
+      type: "post"
+      # data: self.sortable('serialize') + '&authenticity_token=<%= u(form_authenticity_token) %>',
+      data: {sort: sortArray}
+      dataType: "script"
+      url: REDDE.redditor.$el.data("sort-url")
+    .done(REDDE.redditor.setPositions)
+  else
+    REDDE.redditor.setPositions()
+
+$ ->
+  REDDE.redditor.$el = $("dl.redditor").first()
+
+  $(".add_fields").click ->
+    time = new Date().getTime()
+    regexp = new RegExp($(this).data("id"), "g")
+    self = REDDE.redditor.$el.append($(this).data("fields").replace(regexp, time))
+    REDDE.redditor.setPositions()
+
+  REDDE.redditor.$el.sortable
+    dropOnEmpty: false
+    cursor: "crosshair"
+    opacity: 0.75
+    handle: ".handle"
+    axis: "y"
+    items: "dd"
+    scroll: false
+    update: REDDE.redditor.sortList
+    start: ->
+      # необходимо обновить, чтобы сортировака работала корректно, тк меняем высоту блоков
+      $(@).addClass("now-sortable").sortable( "refresh" )
+      return
+    stop: ->
+      $(@).removeClass("now-sortable")
+      return
+
+  .on "ajax:beforeSend", "a.update-data", (event, xhr, status) ->
+    box = $(@).closest "dd"
+    params = REDDE.redditor.parameterizationForm(box)
+    status.url += "?" + $.param(params)
+
+  $("ul.slider-block-images").sortable REDDE.redditor.sliderBlockImagesSortableParams
+
+  $('div.redditor-add-blocks').on "ajax:beforeSend", "a.new-block", (event, xhr, status) ->
+    status.url += "?" + $.param(content_block: {temp_id: new Date().getTime()}) # generate uniq id
+
+#! jquery-serializeForm - Make an object out of form elements - v1.1.1 - 2013-01-21
+#* https://github.com/danheberden/jquery-serializeForm
+#* Copyright (c) 2013 Dan Heberden; Licensed MIT 
+(($) ->
+  $.fn.serializeForm = ->
+    
+    # don't do anything if we didn't get any elements
+    return false  if @length < 1
+    data = {}
+    lookup = data #current reference of data
+    selector = ":input[type!=\"checkbox\"][type!=\"radio\"], input:checked"
+    parse = ->
+      
+      # data[a][b] becomes [ data, a, b ]
+      named = @name.replace(/\[([^\]]+)?\]/g, ",$1").split(",")
+      cap = named.length - 1
+      $el = $(this)
+      
+      # Ensure that only elements with valid `name` properties will be serialized
+      if named[0]
+        i = 0
+
+        while i < cap
+          
+          # move down the tree - create objects or array if necessary
+          lookup = lookup[named[i]] = lookup[named[i]] or ((if named[i + 1] is "" then [] else {}))
+          i++
+        
+        # at the end, push or assign the value
+        if lookup.length isnt `undefined`
+          lookup.push $el.val()
+        else
+          lookup[named[cap]] = $el.val()
+        
+        # assign the reference back to root
+        lookup = data
+
+    
+    # first, check for elements passed into this function
+    @filter(selector).each parse
+    
+    # then parse possible child elements
+    @find(selector).each parse
+    
+    # return data
+    data
+) jQuery

data/app/assets/stylesheets/redditor/application.css.scss

@@ -0,0 +1,47 @@
+/*
+ * This is a manifest file that'll be compiled into application.css, which will include all the files
+ * listed below.
+ *
+ * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
+ * or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path.
+ *
+ * You're free to add application-wide styles to this file and they'll appear at the top of the
+ * compiled file, but it's generally better to create a new file per style scope.
+ *
+ *= require redditor/redditor
+ */
+
+@import "compass";
+
+ html {
+  font: 12px "Lucida Grande", "Lucida Sans Unicode", helvetica, arial, verdana, sans-serif;
+ }
+
+ form.edit_article {
+  margin:0 10px;
+ }
+
+ .text-block-input {
+  width: 100%;
+  @include box-sizing(border-box);
+}
+
+input[type=submit] {
+  font-size: 2em;
+  padding: 0.25em 1.5em;
+  display: inline-block;
+  background:#ccc;
+  cursor: pointer;
+  @include background(linear-gradient(#fff, #ccc));
+  border-radius: 3px;
+  box-shadow: 1px 1px 2px #ccc;
+  border: 1px solid #999;
+  text-transform: lowercase;
+  outline: none;
+  &:hover {
+    @include background(linear-gradient(rgba(#fff, 0.8), rgba(#ccc, 0.8)));
+  }
+  &:active {
+    @include transform(translateY(1px));
+  }
+}

data/app/assets/stylesheets/redditor/fileapi/fileapi.css.scss

@@ -0,0 +1,174 @@
+@import "compass";
+
+#oooops {
+  // уведомления о том что ничего не поддерживается кроме фрейма
+  display: none;
+  border-radius: 4px;
+  padding: 10px;
+  margin: 10px 0; border: 2px solid #f60;
+}
+
+#buttons-panel {
+  font-size: 15px;
+  font-family: "Helvetica Neue";
+}
+
+.b-button {
+  display: inline-block;
+  *display: inline;
+  *zoom: 1;
+  position: relative;
+  overflow: hidden;
+  cursor: pointer;
+  padding: 4px 15px;
+  vertical-align: middle;
+  border: 1px solid #ccc;
+  border-radius: 3px;
+  background-color: #f5f5f5;
+  @include background(linear-gradient(top, #fff 0%, #f5f5f5 49%, #ececec 50%, #eee 100%));
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  user-select: none;
+  &:hover {
+    border-color: #fa0;
+    box-shadow: 0 0 2px #fa0;
+  };
+  .b-button__input {
+    cursor: pointer;
+    @include opacity(0);
+    top: -10px;
+    right: -40px;
+    font-size: 50px;
+    position: absolute;
+    padding: 50px;
+  }
+}
+
+
+
+
+#preview {
+  box-shadow: 0 1px 3px rgba(0,0,0,.4);
+  border-radius: 3px;
+}
+
+.b-file {
+  padding: 5px;
+  position: relative;
+  overflow: hidden;
+  border-radius: 3px;
+  background-color: #fcfcfc;
+  background: -webkit-linear-gradient(top, #fcfcfc 0%, #f6f6f6 100%);
+  background: -moz-linear-gradient(top, #fcfcfc 0%, #f6f6f6 100%);
+  background: -o-linear-gradient(top, #fcfcfc 0%, #f6f6f6 100%);
+  background: linear-gradient(to bottom, #fcfcfc 0%, #f6f6f6 100%);
+  clear: both;
+}
+  .b-file__left {
+    float: left;
+    margin: 1px 0 0 2px;
+    line-height: 0;
+  }
+    .b-file__left_border {
+      border: 2px solid #fff;
+      border-radius: 4px;
+    }
+
+  .b-file__right {
+    margin-left: 45px;
+  }
+
+  .b-file__name {
+    color: #36c;
+  }
+
+  .b-file__info {
+    color: #666;
+    position: relative;
+    font-size: 12px;
+    margin-top: 3px;
+  }
+
+  .b-file__bar {
+    padding-top: 4px;
+  }
+
+  .b-file__error {
+    color: #c00;
+  }
+  .b-file__done {
+    color: #458383;
+  }
+  .b-file__abort {
+    top: 10px;
+    right: 20px;
+    width: 15px;
+    height: 15px;
+    position: absolute;
+    color: #c00;
+    cursor: pointer;
+    font-size: 20px;
+    display: none;
+  }
+    .b-file_upload .b-file__abort { display: block; }
+
+.b-progress {
+  max-width: 200px;
+  clear: both;
+  height: 10px;
+  border: 2px solid #E2E4E2;
+  border-radius: 10px;
+  box-shadow: inset 0 1px 1px rgba(0,0,0,.2);
+  background-color: #d3d3d3;
+  position: relative;
+}
+  .b-progress__bar {
+    width: 0;
+    height: 10px;
+    border-radius: 10px;
+    background-color: #2D9DD7;
+    @include background(linear-gradient(top, #2D9DD7 0%, #1C81C7 100%));
+    -webkit-transition: width .5s ease-out;
+    -moz-transition: width .5s ease-out;
+    -ms-transition: width .5s ease-out;
+    transition: width .5s ease-out;
+  }
+
+.b-dropzone {
+  position: relative; margin-bottom: 10px;
+  &.active {
+  }
+}
+
+.b-dropzone__bg, .b-dropzone__txt {
+  position: absolute;
+  .b-dropzone.active & {display: block;}
+}
+
+.b-dropzone__bg {
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 30000;
+  opacity: .2;
+  background:#EEDA7C;
+  .active & {
+    background-color: #2D9DD7;
+
+  }
+}
+
+.b-dropzone__txt {
+  color: rgb(168, 162, 94);
+  .active & {color: #1C81C7;}
+  font-size: 16px;
+  font-weight: bold;
+  text-align: center;
+  width: 500px;
+  top: 50%;
+  left: 50%;
+  margin: -50px 0 0 -250px;
+  z-index: 30001;
+  line-height: 100px;
+}