add photo upload and manager

Gemfile

@@ -28,6 +28,13 @@ gem "pygments.rb", '~> 0.2.4'
 
 # YAML 配置信息
 gem "settingslogic", "~> 2.0.6"
+
+# 上传组件
+gem 'carrierwave', '0.5.7'
+gem 'carrierwave-mongoid', '0.1.2', :require => 'carrierwave/mongoid'
+gem 'mini_magick','3.3'
+#gem 'carrierwave-upyun', '0.1.3'
+
 
 # 禁用 assets 日志
 gem 'quiet_assets', :git => 'git://github.com/AgilionApps/quiet_assets.git'

Gemfile.lock

@@ -56,6 +56,11 @@ GEM
     bson_ext (1.5.2)
       bson (= 1.5.2)
     builder (3.0.0)
+    carrierwave (0.5.7)
+      activesupport (~> 3.0)
+    carrierwave-mongoid (0.1.2)
+      carrierwave (>= 0.5.6)
+      mongoid (~> 2.1)
     coffee-rails (3.2.2)
       coffee-script (>= 2.2.0)
       railties (~> 3.2.0)
@@ -82,6 +87,8 @@ GEM
       mime-types (~> 1.16)
       treetop (~> 1.4.8)
     mime-types (1.19)
+    mini_magick (3.3)
+      subexec (~> 0.1.0)
     mongo (1.5.2)
       bson (= 1.5.2)
     mongo-rails-instrumentation (0.2.4)
@@ -142,6 +149,7 @@ GEM
       hike (~> 1.2)
       rack (~> 1.0)
       tilt (~> 1.1, != 1.3.0)
+    subexec (0.1.0)
     therubyracer (0.9.9)
       libv8 (~> 3.3.10)
     thor (0.14.6)
@@ -169,10 +177,13 @@ PLATFORMS
 DEPENDENCIES
   bootstrap-rails!
   bson_ext (= 1.5.2)
+  carrierwave (= 0.5.7)
+  carrierwave-mongoid (= 0.1.2)
   coffee-rails (~> 3.2.1)
   execjs
   hpricot (~> 0.8.5)
   jquery-rails
+  mini_magick (= 3.3)
   mongo-rails-instrumentation (= 0.2.4)
   mongoid (= 2.4.3)
   mongoid_auto_increment_id (= 0.4.0)

README.md

@@ -26,6 +26,7 @@ Iceylog is a semantic personal publishing platform with a focus on aesthetics, w
 
 
 
-
+###Mac OS X
+brew install ImageMagick
 
 

app/assets/javascripts/app.coffee

@@ -0,0 +1,41 @@
+#= require jquery
+#= require jquery_ujs
+#= require bootstrap
+#= require will_paginate
+#= require jquery.timeago
+#= require jquery.timeago.settings
+#= require jquery.hotkeys
+#= require jquery.chosen
+#= require jquery.autogrow-textarea
+#= require jquery.html5-fileupload
+#= require jquery-caret_pos
+#= require_self
+
+window.App =
+  loading : () ->
+    console.log "loading..."
+
+  # 警告信息显示, to 显示在那个dom前(可以用 css selector)
+  alert : (msg,to) ->
+    $(to).before("<div data-alert class='alert-message'><a class='close' href='#'>X</a>#{msg}</div>")
+
+  # 成功信息显示, to 显示在那个dom前(可以用 css selector)
+  notice : (msg,to) ->
+    $(to).before("<div data-alert class='alert-message success'><a class='close' href='#'>X</a>#{msg}</div>")
+
+  openUrl : (url) ->
+    window.open(url)
+
+
+
+
+
+
+$(document).ready ->
+ 	$("abbr.timeago").timeago()
+  $(".alert").alert()
+  $('.dropdown-toggle').dropdown()
+
+
+
+

app/assets/javascripts/cpanel/photos.js.coffee

@@ -0,0 +1,3 @@
+# Place all the behaviors and hooks related to the matching controller here.
+# All this logic will automatically be available in application.js.
+# You can use CoffeeScript in this file: http://jashkenas.github.com/coffee-script/

app/assets/javascripts/posts.js.coffee

@@ -1,3 +1,108 @@
-# Place all the behaviors and hooks related to the matching controller here.
-# All this logic will automatically be available in application.js.
-# You can use CoffeeScript in this file: http://jashkenas.github.com/coffee-script/
+
+# PostsController 下所有页面的 JS 功能
+window.Posts =
+  # 往话题编辑器里面插入图片代码
+  appendImageFromUpload : (srcs) ->
+    txtBox = $(".post_editor") 
+    caret_pos = txtBox.caretPos();
+    src_merged = ""
+    for src in srcs
+      src_merged = "![](#{src})\n"
+    source = txtBox.val()
+    before_text = source.slice(0, caret_pos)
+    txtBox.val(before_text + src_merged + source.slice(caret_pos+1, source.count))
+    txtBox.caretPos(caret_pos+src_merged.length)
+    txtBox.focus()
+
+  # 上传图片
+  initUploader : () ->
+    $("#post_add_image").bind "click", () ->
+      $("#post_upload_images").click()
+      return false
+
+    opts =
+      url : "/cpanel/photos"
+      type : "POST"
+      beforeSend : () ->
+        $("#post_add_image").hide()
+        $("#post_add_image").before("<span class='loading'>上传中...</span>")
+      success : (result, status, xhr) ->
+        $("#post_add_image").parent().find("span").remove()
+        $("#post_add_image").show()
+
+        Posts.appendImageFromUpload([result])
+
+    $("#post_upload_images").fileUpload opts
+    return false
+
+
+
+  preview: (body) ->
+    $("#preview").text "Loading..."
+    $.post "/cpanel/posts/preview",
+      "body": body,
+      (data) ->
+        $("#preview").html data.body
+      "json"
+
+  hookPreview: (switcher, textarea) ->
+    # put div#preview after textarea
+    preview_box = $(document.createElement("div")).attr "id", "preview"
+    preview_box.addClass("body")
+    $(textarea).after preview_box
+    preview_box.hide()
+
+    $(".edit a",switcher).click ->
+      $(".preview",switcher).removeClass("active")
+      $(this).parent().addClass("active")
+      $(preview_box).hide()
+      $(textarea).show()
+      false
+    $(".preview a",switcher).click ->
+      $(".edit",switcher).removeClass("active")
+      $(this).parent().addClass("active")
+      $(preview_box).show()
+      $(textarea).hide()
+      Posts.preview($(textarea).val())
+      false
+
+  initCloseWarning: (el, msg) ->
+    return false if el.length == 0
+    msg = "离开本页面将丢失未保存页面!" if !msg
+    $("input[type=submit]").click ->
+      $(window).unbind("beforeunload")
+    el.change ->
+      if el.val().length > 0
+        $(window).bind "beforeunload", (e) ->
+          if $.browser.msie
+            e.returnValue = msg
+          else
+            return msg
+      else
+        $(window).unbind("beforeunload")
+
+
+
+
+
+# pages ready
+$(document).ready ->
+  $("textarea").bind "keydown","ctrl+return",(el) ->
+    if $(el.target).val().trim().length > 0
+      $("#reply > form").submit()
+    return false
+
+  Posts.initCloseWarning($("textarea.closewarning"))
+  $("textarea").autogrow()
+  Posts.initUploader()
+
+  Posts.hookPreview($(".editor_toolbar"), $(".post_editor"))
+
+  $("body").bind "keydown", "m", (el) ->
+    $('#markdown_help_tip_modal').modal
+      keyboard : true
+      backdrop : true
+      show : true
+
+  # Focus title field in new-post page
+  $("body.posts-controller.new-action #post_title").focus()

app/assets/javascripts/will_paginate.js

@@ -0,0 +1,33 @@
+// Keyboard shortcuts for browsing pages of lists
+(function($) {
+    $(document).keydown(handleKey);
+    function handleKey(e) {
+        var left_arrow = 37;
+        var right_arrow = 39;
+        if (e.target.nodeName == 'BODY' || e.target.nodeName == 'HTML') {
+                if (!e.ctrlKey && !e.altKey && !e.shiftKey && !e.metaKey) {
+                    var code = e.which;
+                    if (code == left_arrow) {
+                        prevPage();
+                    }
+                    else if (code == right_arrow) {
+                        nextPage();
+                    }
+                }
+            }
+    }
+
+    function prevPage() {
+        var href = $('.pagination .previous_page a').attr('href');
+        if (href && href != document.location) {
+            document.location = href;
+        }
+    }
+
+    function nextPage() {
+        var href = $('.pagination .next_page a').attr('href');
+        if (href && href != document.location) {
+            document.location = href;
+        }
+    }
+})(jQuery);

app/assets/stylesheets/application.css

@@ -10,6 +10,7 @@
  *
  *= require bootstrap.min
  *= require style
+*= require_tree ./sprites/
  *= require_self
 */
 

app/assets/stylesheets/cpanel.scss

@@ -1,5 +1,6 @@
 /*
  *= require bootstrap
+*= require_tree ./sprites/
  *= require_self
  */
 body { color: #333; }
@@ -193,3 +194,61 @@ div.field .hint { font-size:12px; color:#999;}
   p { font-size:16px; }
 }
 
+#preview {
+  /* copied from twitter bootstrap */
+  margin-top:0px;
+  border: 1px solid #ccc;
+  padding:4px;
+  min-height:400px;
+  -webkit-border-radius: 3px;
+  -moz-border-radius: 3px;
+  border-radius: 3px;
+  #reply & {
+    width:578px;
+    margin-bottom:10px;
+    min-height:72px;
+  }
+}
+
+.help-block ul { margin-bottom:0; }
+.editor_toolbar {
+  position:relative;
+  margin-bottom:5px;
+  .icons { position:absolute; top:3px; right:0; }
+  .pills {
+    margin: 0;
+    list-style: none;
+    li { display:inline;}
+    a {
+      -moz-border-radius: 8px;
+      -webkit-border-radius: 8px;
+      border-radius: 8px;
+      padding:0 5px;
+      line-height:18px;
+      font-size:12px;
+      margin-right:6px;
+      text-shadow:0;
+      color:#444;
+      border:1px solid #fff;
+    }
+    a:hover {
+      background:#fff;
+      color:#00438A;
+      text-decoration: underline;
+      text-shadow:0;
+    }
+    .active {
+      a {
+        background:#fff;
+        border:1px solid #ddd;
+        color:#666;
+        text-shadow:0;
+      }
+      a:hover { text-decoration: none;}
+    }
+  }
+}
+
+
+
+#post_upload_images { position:absolute;bottom:0;right:0;width:0;height:0;overflow:hidden; }

app/assets/stylesheets/cpanel/photos.css.scss

@@ -0,0 +1,7 @@
+// Place all the styles related to the cpanel::photos controller here.
+// They will automatically be included in application.css.
+// You can use Sass (SCSS) here: http://sass-lang.com/
+
+
+
+