Merge pull request mycolorway#218 from mycolorway/lc-alt

add set image alt option
java02014 · Mar 31, 2015 · 6cc5c32 · 6cc5c32
2 parents 32feeca + b59ff24
commit 6cc5c32
Show file tree

Hide file tree

Showing 6 changed files with 74 additions and 5 deletions.
diff --git a/lib/simditor.js b/lib/simditor.js
@@ -2361,6 +2361,7 @@ Simditor.i18n = {
     'uploadError': '上传出错了',
     'imageUrl': '图片地址',
     'imageSize': '图片尺寸',
+    'imageAlt': '图片描述',
     'restoreImageSize': '还原图片尺寸',
     'uploading': '正在上传',
     'indent': '向右缩进',
@@ -4226,11 +4227,12 @@ ImagePopover = (function(superClass) {
 
   ImagePopover.prototype.render = function() {
     var tpl;
-    tpl = "<div class=\"link-settings\">\n  <div class=\"settings-field\">\n    <label>" + (this._t('imageUrl')) + "</label>\n    <input class=\"image-src\" type=\"text\" tabindex=\"1\" />\n    <a class=\"btn-upload\" href=\"javascript:;\" title=\"" + (this._t('uploadImage')) + "\" tabindex=\"-1\">\n      <span class=\"simditor-icon simditor-icon-upload\"></span>\n    </a>\n  </div>\n  <div class=\"settings-field\">\n    <label>" + (this._t('imageSize')) + "</label>\n    <input class=\"image-size\" id=\"image-width\" type=\"text\" tabindex=\"2\" />\n    <span class=\"times\">×</span>\n    <input class=\"image-size\" id=\"image-height\" type=\"text\" tabindex=\"3\" />\n    <a class=\"btn-restore\" href=\"javascript:;\" title=\"" + (this._t('restoreImageSize')) + "\" tabindex=\"-1\">\n      <span class=\"simditor-icon simditor-icon-undo\"></span>\n    </a>\n  </div>\n</div>";
+    tpl = "<div class=\"link-settings\">\n  <div class=\"settings-field\">\n    <label>" + (this._t('imageUrl')) + "</label>\n    <input class=\"image-src\" type=\"text\" tabindex=\"1\" />\n    <a class=\"btn-upload\" href=\"javascript:;\" title=\"" + (this._t('uploadImage')) + "\" tabindex=\"-1\">\n      <span class=\"simditor-icon simditor-icon-upload\"></span>\n    </a>\n  </div>\n  <div class='settings-field'>\n    <label>" + (this._t('imageAlt')) + "</label>\n    <input class=\"image-alt\" id=\"image-alt\" type=\"text\" tabindex=\"1\" />\n  </div>\n  <div class=\"settings-field\">\n    <label>" + (this._t('imageSize')) + "</label>\n    <input class=\"image-size\" id=\"image-width\" type=\"text\" tabindex=\"2\" />\n    <span class=\"times\">×</span>\n    <input class=\"image-size\" id=\"image-height\" type=\"text\" tabindex=\"3\" />\n    <a class=\"btn-restore\" href=\"javascript:;\" title=\"" + (this._t('restoreImageSize')) + "\" tabindex=\"-1\">\n      <span class=\"simditor-icon simditor-icon-undo\"></span>\n    </a>\n  </div>\n</div>";
     this.el.addClass('image-popover').append(tpl);
     this.srcEl = this.el.find('.image-src');
     this.widthEl = this.el.find('#image-width');
     this.heightEl = this.el.find('#image-height');
+    this.altEl = this.el.find('#image-alt');
     this.srcEl.on('keydown', (function(_this) {
       return function(e) {
         if (!(e.which === 13 && !_this.target.hasClass('uploading'))) {
@@ -4281,6 +4283,25 @@ ImagePopover = (function(superClass) {
         }
       };
     })(this));
+    this.altEl.on('keydown', (function(_this) {
+      return function(e) {
+        if (e.which === 13) {
+          e.preventDefault();
+          _this.button.editor.body.focus();
+          _this.button.editor.selection.setRangeAfter(_this.target);
+          return _this.hide();
+        }
+      };
+    })(this));
+    this.altEl.on('keyup', (function(_this) {
+      return function(e) {
+        if (e.which === 13 || e.which === 27 || e.which === 9) {
+          return;
+        }
+        _this.alt = _this.altEl.val();
+        return _this.target.attr('alt', _this.alt);
+      };
+    })(this));
     this.el.find('.btn-restore').on('click', (function(_this) {
       return function(e) {
         _this._restoreImg();
@@ -4408,12 +4429,14 @@ ImagePopover = (function(superClass) {
     $img = this.target;
     this.width = $img.width();
     this.height = $img.height();
+    this.alt = $img.attr('alt');
     if ($img.hasClass('uploading')) {
       return this.srcEl.val(this._t('uploading')).prop('disabled', true);
     } else {
       this.srcEl.val($img.attr('src')).prop('disabled', false);
       this.widthEl.val(this.width);
-      return this.heightEl.val(this.height);
+      this.heightEl.val(this.height);
+      return this.altEl.val(this.alt);
     }
   };
 

diff --git a/site/assets/scripts/simditor.js b/site/assets/scripts/simditor.js
@@ -2361,6 +2361,7 @@ Simditor.i18n = {
     'uploadError': '上传出错了',
     'imageUrl': '图片地址',
     'imageSize': '图片尺寸',
+    'imageAlt': '图片描述',
     'restoreImageSize': '还原图片尺寸',
     'uploading': '正在上传',
     'indent': '向右缩进',
@@ -4226,11 +4227,12 @@ ImagePopover = (function(superClass) {
 
   ImagePopover.prototype.render = function() {
     var tpl;
-    tpl = "<div class=\"link-settings\">\n  <div class=\"settings-field\">\n    <label>" + (this._t('imageUrl')) + "</label>\n    <input class=\"image-src\" type=\"text\" tabindex=\"1\" />\n    <a class=\"btn-upload\" href=\"javascript:;\" title=\"" + (this._t('uploadImage')) + "\" tabindex=\"-1\">\n      <span class=\"simditor-icon simditor-icon-upload\"></span>\n    </a>\n  </div>\n  <div class=\"settings-field\">\n    <label>" + (this._t('imageSize')) + "</label>\n    <input class=\"image-size\" id=\"image-width\" type=\"text\" tabindex=\"2\" />\n    <span class=\"times\">×</span>\n    <input class=\"image-size\" id=\"image-height\" type=\"text\" tabindex=\"3\" />\n    <a class=\"btn-restore\" href=\"javascript:;\" title=\"" + (this._t('restoreImageSize')) + "\" tabindex=\"-1\">\n      <span class=\"simditor-icon simditor-icon-undo\"></span>\n    </a>\n  </div>\n</div>";
+    tpl = "<div class=\"link-settings\">\n  <div class=\"settings-field\">\n    <label>" + (this._t('imageUrl')) + "</label>\n    <input class=\"image-src\" type=\"text\" tabindex=\"1\" />\n    <a class=\"btn-upload\" href=\"javascript:;\" title=\"" + (this._t('uploadImage')) + "\" tabindex=\"-1\">\n      <span class=\"simditor-icon simditor-icon-upload\"></span>\n    </a>\n  </div>\n  <div class='settings-field'>\n    <label>" + (this._t('imageAlt')) + "</label>\n    <input class=\"image-alt\" id=\"image-alt\" type=\"text\" tabindex=\"1\" />\n  </div>\n  <div class=\"settings-field\">\n    <label>" + (this._t('imageSize')) + "</label>\n    <input class=\"image-size\" id=\"image-width\" type=\"text\" tabindex=\"2\" />\n    <span class=\"times\">×</span>\n    <input class=\"image-size\" id=\"image-height\" type=\"text\" tabindex=\"3\" />\n    <a class=\"btn-restore\" href=\"javascript:;\" title=\"" + (this._t('restoreImageSize')) + "\" tabindex=\"-1\">\n      <span class=\"simditor-icon simditor-icon-undo\"></span>\n    </a>\n  </div>\n</div>";
     this.el.addClass('image-popover').append(tpl);
     this.srcEl = this.el.find('.image-src');
     this.widthEl = this.el.find('#image-width');
     this.heightEl = this.el.find('#image-height');
+    this.altEl = this.el.find('#image-alt');
     this.srcEl.on('keydown', (function(_this) {
       return function(e) {
         if (!(e.which === 13 && !_this.target.hasClass('uploading'))) {
@@ -4281,6 +4283,25 @@ ImagePopover = (function(superClass) {
         }
       };
     })(this));
+    this.altEl.on('keydown', (function(_this) {
+      return function(e) {
+        if (e.which === 13) {
+          e.preventDefault();
+          _this.button.editor.body.focus();
+          _this.button.editor.selection.setRangeAfter(_this.target);
+          return _this.hide();
+        }
+      };
+    })(this));
+    this.altEl.on('keyup', (function(_this) {
+      return function(e) {
+        if (e.which === 13 || e.which === 27 || e.which === 9) {
+          return;
+        }
+        _this.alt = _this.altEl.val();
+        return _this.target.attr('alt', _this.alt);
+      };
+    })(this));
     this.el.find('.btn-restore').on('click', (function(_this) {
       return function(e) {
         _this._restoreImg();
@@ -4408,12 +4429,14 @@ ImagePopover = (function(superClass) {
     $img = this.target;
     this.width = $img.width();
     this.height = $img.height();
+    this.alt = $img.attr('alt');
     if ($img.hasClass('uploading')) {
       return this.srcEl.val(this._t('uploading')).prop('disabled', true);
     } else {
       this.srcEl.val($img.attr('src')).prop('disabled', false);
       this.widthEl.val(this.width);
-      return this.heightEl.val(this.height);
+      this.heightEl.val(this.height);
+      return this.altEl.val(this.alt);
     }
   };
 

diff --git a/site/assets/scripts/uploader.js b/site/assets/scripts/uploader.js
@@ -259,8 +259,10 @@ uploader = function(opts) {
   return new Uploader(opts);
 };
 
+
 return uploader;
 
+
 }));
 
 
diff --git a/src/buttons/image.coffee b/src/buttons/image.coffee
@@ -344,6 +344,10 @@ class ImagePopover extends Popover
             <span class="simditor-icon simditor-icon-upload"></span>
           </a>
         </div>
+        <div class='settings-field'>
+          <label>#{ @_t 'imageAlt' }</label>
+          <input class="image-alt" id="image-alt" type="text" tabindex="1" />
+        </div>
         <div class="settings-field">
           <label>#{ @_t 'imageSize' }</label>
           <input class="image-size" id="image-width" type="text" tabindex="2" />
@@ -360,6 +364,7 @@ class ImagePopover extends Popover
     @srcEl = @el.find '.image-src'
     @widthEl = @el.find '#image-width'
     @heightEl = @el.find '#image-height'
+    @altEl = @el.find '#image-alt'
 
     @srcEl.on 'keydown', (e) =>
       return unless e.which == 13 and !@target.hasClass('uploading')
@@ -395,6 +400,19 @@ class ImagePopover extends Popover
       else if e.which == 9
         @el.data('popover').refresh()
 
+    @altEl.on 'keydown', (e) =>
+      if e.which == 13
+        e.preventDefault()
+
+        @button.editor.body.focus()
+        @button.editor.selection.setRangeAfter @target
+        @hide()
+
+    @altEl.on 'keyup', (e) =>
+      return if e.which == 13 or e.which == 27 or e.which == 9
+      @alt = @altEl.val()
+      @target.attr 'alt', @alt
+
     @el.find('.btn-restore').on 'click', (e) =>
       @_restoreImg()
       @el.data('popover').refresh()
@@ -485,6 +503,7 @@ class ImagePopover extends Popover
     $img = @target
     @width = $img.width()
     @height = $img.height()
+    @alt = $img.attr 'alt'
 
     if $img.hasClass 'uploading'
       @srcEl.val @_t('uploading')
@@ -494,6 +513,7 @@ class ImagePopover extends Popover
         .prop 'disabled', false
       @widthEl.val @width
       @heightEl.val @height
+      @altEl.val @alt
 
 
 Simditor.Toolbar.addButton ImageButton
diff --git a/src/i18n.coffee b/src/i18n.coffee
@@ -13,6 +13,7 @@ Simditor.i18n =
     'uploadError': '上传出错了'
     'imageUrl': '图片地址'
     'imageSize': '图片尺寸'
+    'imageAlt': '图片描述'
     'restoreImageSize': '还原图片尺寸'
     'uploading': '正在上传'
     'indent': '向右缩进'

diff --git a/styles/simditor.css b/styles/simditor.css
@@ -1,7 +1,7 @@
 /*!
 * Simditor v2.1.5
 * http://simditor.tower.im/
-* 2015-18-03
+* 2015-29-03
 */
 @font-face {
   font-family: 'Simditor';
-Original file line number
+Diff line change
@@ Expand Up / @@ -259,8 +259,10 @@ uploader = function(opts) { @@
       return new Uploader(opts);
     };
     return uploader;
     }));