Merge branch 'image-search' into dev

ui/ribbon/idea/image.js

@@ -34,20 +34,221 @@ KityMinder.registerUI('image', function(minder) {
 
     var $dialogBody = $($imageDialog.getBodyElement());
 
+    // writed by yangxiaohu 2014-10-20
+    var tabs = new FUI.Tabs( {
+        buttons: [ " 插入图片", "图片搜索" ]
+    } );
+
     $dialogBody.html([
-        '<p><label>图片地址：</label><input type="url" class="image-url fui-widget fui-selectable" /></p>',
-        '<p><label>提示文本：</label><input type="text" class="image-title fui-widget fui-selectable" /></p>',
-        '<img class="image-preview" src="" style="max-height: 200px;" />'
+        '<div id="img_buttons"></div>',
+        '<div id="img_panels"></div>'
         ].join(''));
+    tabs.appendButtonTo( document.getElementById( 'img_buttons') );
+    tabs.appendPanelTo( document.getElementById( 'img_panels'));
+    tabs.getPanel(0).getContentElement().innerHTML =  ['<p><label>图片地址：</label><input type="url" class="image-url fui-widget fui-selectable" /></p>',
+        '<p><label>提示文本：</label><input type="text" class="image-title fui-widget fui-selectable" /></p>',
+        '<img class="image-preview" src="" style="max-height: 200px;" />'].join('');
+
+    tabs.getPanel(1).getContentElement().innerHTML =  ['<div class="searchBar"><input id="img_searchTxt" type="text" placeholder="请输入搜索关键词">',
+        '<input id="img_searchBtn" type="button" value="百度一下"></div>',
+        '<div id="img_searchList"><ul id="img_searchListUl"></ul></div>'
+        ].join('');
+
+    //the content below is from xujinquan's ueditor
+    /*搜索图片 */
+
+    $G = function ( id ) {
+        return document.getElementById( id )
+    };
+
+    function SearchImage() {
+        this.init();
+    }
+
+    SearchImage.prototype = {
+        lang: {
+             searchRemind : '请输入搜索关键词',
+             searchLoading : '图片加载中，请稍后……',
+             searchRetry : '抱歉，没有找到图片！请重试一次！',
+        },
+        data: {
+            imgUrl: '',
+            imgTitle: '',
+        },
+        init: function () {
+            this.initEvents();
+        },
+        initEvents: function(){
+            var _this = this;
+
+            /* 点击搜索按钮 */
+            $('#img_searchBtn').on('click', function(){
+                var key = $G('img_searchTxt').value;
+                if(key && key != _this.lang.searchRemind) {
+                    _this.getImageData();
+                }
+            });
+            /* 搜索框聚焦 */
+            $('#img_searchTxt').on('focus', function(){
+                var key = $G('img_searchTxt').value;
+                if(key && key == _this.lang.searchRemind) {
+                    $G('img_searchTxt').value = '';
+                }
+            });
+            /* 搜索框回车键搜索 */
+            $('#img_searchTxt').on('keydown', function(e){
+                var keyCode = e.keyCode || e.which;
+                if (keyCode == 13) {
+                    $G('img_searchBtn').click();
+                    return false;
+                }
+            });
+
+            /* 选中图片 */
+
+            $('#img_searchList').on('click', function(e){
+                var target = e.target || e.srcElement,
+                    li = target.parentNode.parentNode,
+                    curIndex = $(li).index();
+
+                _this.data.imgUrl = $(li).find('img').attr('src');
+                _this.data.imgTitle = $(li).find('a').attr('title');
+
+                if (li.tagName.toLowerCase() == 'li') {
+
+                    if ( ! $(li).hasClass('selected')) {
+                        $(li).siblings().removeClass('selected');
+                        $(li).addClass('selected');
+                    }
+
+                }
+            });
+        },
+        /* 改变图片大小 */
+        scale: function (img, w, h) {
+            var ow = img.width,
+                oh = img.height;
+
+            if (ow >= oh) {
+                img.width = w * ow / oh;
+                img.height = h;
+                img.style.marginLeft = '-' + parseInt((img.width - w) / 2) + 'px';
+            } else {
+                img.width = w;
+                img.height = h * oh / ow;
+                img.style.marginTop = '-' + parseInt((img.height - h) / 2) + 'px';
+            }
+        },
+        getImageData: function(){
+            var _this = this,
+                key = $G('img_searchTxt').value,
+                keepOriginName = '1';
+                url = "http://image.baidu.com/i?ct=201326592&cl=2&lm=-1&st=-1&tn=baiduimagejson&istype=2&rn=3200&fm=index&pv=&word=" + key + "&ie=utf-8&oe=utf-8&keeporiginname=" + keepOriginName + "&" + +new Date;
+
+            $G('img_searchListUl').innerHTML = _this.lang.searchLoading;
+            $.ajax({url : url,
+                    dataType: 'jsonp',
+                    scriptCharset: 'GB18030',
+                    success:function(json){
+                        var list = [];
+                        if(json && json.data) {
+                            for(var i = 0; i < json.data.length; i++) {
+                                if(json.data[i].objURL) {
+                                    list.push({
+                                        title: json.data[i].fromPageTitleEnc,
+                                        src: json.data[i].objURL,
+                                        url: json.data[i].fromURL
+                                    });
+                                }
+                            }
+                        }
+                        _this.setList(list);
+                    },
+                    error:function(){
+                        $G('img_searchListUl').innerHTML = _this.lang.searchRetry;
+                }
+            });
+        },
+        /* 添加图片到列表界面上 */
+        setList: function (list) {
+            var i, item, p, img, link, _this = this,
+                listUl = $G('img_searchListUl');
+
+            listUl.innerHTML = '';
+            if(list.length) {
+                for (i = 0; i < list.length; i++) {
+                    item = document.createElement('li');
+                    p = document.createElement('p');
+                    img = document.createElement('img');
+                    link = document.createElement('a');
+
+                    img.onload = function () {
+                        _this.scale(this, 113, 113);
+                    };
+                    img.width = 113;
+                    img.setAttribute('src', list[i].src);
+
+                    link.href = list[i].url;
+                    link.target = '_blank';
+                    link.title = list[i].title;
+                    link.innerHTML = list[i].title;
+
+                    p.appendChild(img);
+                    item.appendChild(p);
+                    item.appendChild(link);
+                    listUl.appendChild(item);
+
+                    img.onerror = function() {
+                        // $(this).parent('li').remove();
+                        $(this).parent().parent().remove();
+                    }
+                }
+            } else {
+                listUl.innerHTML = _this.lang.searchRetry;
+            }
+        },
+        getInsertList: function () {
+            var child,
+                src,
+                align = getAlign(),
+                list = [],
+                items = $G('img_searchListUl').children;
+            for(var i = 0; i < items.length; i++) {
+                child = items[i].firstChild && items[i].firstChild.firstChild;
+                if(child.tagName && child.tagName.toLowerCase() == 'img' && $(items[i]).hasClass('selected')) {
+                    src = child.src;
+                    list.push({
+                        src: src,
+                        _src: src,
+                        alt: src.substr(src.lastIndexOf('/') + 1),
+                        floatStyle: align
+                    });
+                }
+            }
+            return list;
+        }
+    };
+
+    var searchImage = new SearchImage();
+    // the end content writed by yangxiaohu
 
     var $url = $dialogBody.find('.image-url');
     var $title = $dialogBody.find('.image-title');
     var $preview = $dialogBody.find('.image-preview');
-    var $ok = $imageDialog.getButton(0);
     var $errorMsg = $('<span class="validate-error"></span>');
 
     $imageDialog.on('ok', function() {
+        var index = tabs.getSelectedIndex();
+
+        switch(index) {
+            case 0:
                 minder.execCommand('image', $url.val(), $title.val());
+                break;
+            case 1:
+                minder.execCommand('image', searchImage.data.imgUrl, searchImage.data.imgTitle);
+                break;
+        }
+
     });
 
     $imageDialog.on('open', function() {
@@ -62,11 +263,11 @@ KityMinder.registerUI('image', function(minder) {
         if (value) {
             $url.addClass('validate-error');
             $errorMsg.text('图片无法加载');
-            $ok.disable();
+            // $ok.disable();
         } else {
             $url.removeClass('validate-error');
             $errorMsg.text('');
-            $ok.enable();
+            // $imageDialog.enable();
         }
         return value;
     }
@@ -78,7 +279,7 @@ KityMinder.registerUI('image', function(minder) {
         if (/^https?\:\/\/(\w+\.)+\w+/.test(url)) {
             $preview.attr('src', url);
             error(false);
-            $ok.disable();
+            // $imageDialog.disable();
             $preview.addClass('loading');
         } else {
             error(true);

ui/theme/default/css/_image_dialog.less

+#img_panels {
+	top: -1px;
+	margin: 0 auto;
+	border: 1px solid #ccc;
+	width: 100%;
+	height: 240px;
+	position: relative;
+	clear: both;
+	z-index: 60;
+	padding-left: 5px;
+	padding-top: 20px;
+}
+
+#img_panels .fui-container {
+	width: 450px;
+}
+
+#img_panels .searchBar {
+	width: 100%;
+	height: 30px;
+	margin-bottom: 5px;
+	padding: 0px;
+}
+
+#img_searchTxt {
+	margin-left: 5px;
+	padding-left: 5px;
+	width: 300px;
+	height: 21px;
+	line-height: 21px;
+	padding: 3px 6px;
+	font-size: 14px;
+	color: #555;
+	border: 1px solid #ccc;
+	border-radius: 4px;
+	box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
+	transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
+	float: left;
+}
+
+#img_searchBtn {
+	color: white;
+	border-color: #285e8e;
+	background-color: #3b97d7;
+	display: inline-block;
+	margin: 0 5px;
+	padding: 4px 10px;
+	font-weight: 400;
+	text-align: center;
+	vertical-align: middle;
+	cursor: pointer;
+	border: 1px solid transparent;
+	white-space: nowrap;
+	font-size: 14px;
+	border-radius: 4px;
+	-webkit-user-select: none;
+	-moz-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+	vertical-align: top;
+	float: right;
+}
+
+#img_buttons {
+	height: 26px;
+	position: relative;
+	z-index: 70;
+}
+
+#img_buttons .fui-button {
+	padding: 0px 5px;
+	margin-right: 5px;
+	height: 24px;
+	border: 1px solid #ccc;
+	text-align: center;
+	line-height: 30px;
+	cursor: pointer;
+	background: #ccc;
+}
+
+#img_buttons .fui-button.fui-selected {
+	height: 26px;
+	background: #fff;
+}
+
+#img_searchList {
+	width: 100%;
+	height: 200px;
+	overflow: hidden;
+	clear: both;
+}
+#img_searchListUl {
+	margin: 0;
+	padding: 0;
+	list-style: none;
+	clear: both;
+	width: 100%;
+	height: 100%;
+	overflow-x: hidden;
+	overflow-y: auto;
+	zoom: 1;
+	position: relative;
+}
+
+#img_searchListUl li {
+	list-style: none;
+	float: left;
+	display: block;
+	width: 115px;
+	margin: 5px 10px 5px 20px;
+	padding: 0;
+	font-size: 12px;
+	box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
+	-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
+	-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
+	position: relative;
+	vertical-align: top;
+	text-align: center;
+	overflow: hidden;
+	cursor: pointer;
+	filter: alpha(Opacity=100);
+	-moz-opacity: 1;
+	opacity: 1;
+	border: 2px solid #eee;
+}
+
+#img_searchListUl li.selected {
+	opacity: 0.4;
+	border: 2px solid #00a0e9;
+}
+
+#img_searchListUl li p{
+	background-color: #eee;
+	margin: 0;
+	padding: 0;
+	position: relative;
+	width: 100%;
+	height: 115px;
+	overflow: hidden;
+}
+
+#img_searchListUl li a {
+	color: #999;
+	border-top: 1px solid #F2F2F2;
+	background: #FAFAFA;
+	text-align: center;
+	display: block;
+	padding: 0 5px;
+	width: 105px;
+	height: 32px;
+	line-height: 32px;
+	white-space: nowrap;
+	text-overflow: ellipsis;
+	text-decoration: none;
+	overflow: hidden;
+	word-break: break-all;
+}

ui/theme/default/css/default.all.css

@@ -3061,6 +3061,152 @@ ul.resource-list li {
   border-radius: 4px;
   margin: 3px;
 }
+#img_panels {
+  top: -1px;
+  margin: 0 auto;
+  border: 1px solid #ccc;
+  width: 100%;
+  height: 240px;
+  position: relative;
+  clear: both;
+  z-index: 60;
+  padding-left: 5px;
+  padding-top: 20px;
+}
+#img_panels .fui-container {
+  width: 450px;
+}
+#img_panels .searchBar {
+  width: 100%;
+  height: 30px;
+  margin-bottom: 5px;
+  padding: 0px;
+}
+#img_searchTxt {
+  margin-left: 5px;
+  padding-left: 5px;
+  width: 300px;
+  height: 21px;
+  line-height: 21px;
+  padding: 3px 6px;
+  font-size: 14px;
+  color: #555;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+  -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
+          transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
+  float: left;
+}
+#img_searchBtn {
+  color: white;
+  border-color: #285e8e;
+  background-color: #3b97d7;
+  display: inline-block;
+  margin: 0 5px;
+  padding: 4px 10px;
+  font-weight: 400;
+  text-align: center;
+  vertical-align: middle;
+  cursor: pointer;
+  border: 1px solid transparent;
+  white-space: nowrap;
+  font-size: 14px;
+  border-radius: 4px;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  vertical-align: top;
+  float: right;
+}
+#img_buttons {
+  height: 26px;
+  position: relative;
+  z-index: 70;
+}
+#img_buttons .fui-button {
+  padding: 0px 5px;
+  margin-right: 5px;
+  height: 24px;
+  border: 1px solid #ccc;
+  text-align: center;
+  line-height: 30px;
+  cursor: pointer;
+  background: #ccc;
+}
+#img_buttons .fui-button.fui-selected {
+  height: 26px;
+  background: #fff;
+}
+#img_searchList {
+  width: 100%;
+  height: 200px;
+  overflow: hidden;
+  clear: both;
+}
+#img_searchListUl {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  clear: both;
+  width: 100%;
+  height: 100%;
+  overflow-x: hidden;
+  overflow-y: auto;
+  zoom: 1;
+  position: relative;
+}
+#img_searchListUl li {
+  list-style: none;
+  float: left;
+  display: block;
+  width: 115px;
+  margin: 5px 10px 5px 20px;
+  padding: 0;
+  font-size: 12px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+  -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+  position: relative;
+  vertical-align: top;
+  text-align: center;
+  overflow: hidden;
+  cursor: pointer;
+  filter: alpha(opacity=100);
+  -moz-opacity: 1;
+  opacity: 1;
+  border: 2px solid #eee;
+}
+#img_searchListUl li.selected {
+  opacity: 0.4;
+  border: 2px solid #00a0e9;
+}
+#img_searchListUl li p {
+  background-color: #eee;
+  margin: 0;
+  padding: 0;
+  position: relative;
+  width: 100%;
+  height: 115px;
+  overflow: hidden;
+}
+#img_searchListUl li a {
+  color: #999;
+  border-top: 1px solid #F2F2F2;
+  background: #FAFAFA;
+  text-align: center;
+  display: block;
+  padding: 0 5px;
+  width: 105px;
+  height: 32px;
+  line-height: 32px;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  text-decoration: none;
+  overflow: hidden;
+  word-break: break-all;
+}
 #template-panel > .fui-panel-content > .fui-label-panel-content > .fui-drop-panel {
   width: 65px;
   height: 50px;

ui/theme/default/css/import.less

@@ -25,6 +25,7 @@
 @import "_progress_panel";
 @import "_resource_panel";
 @import "_attachment_panel";
+@import "_image_dialog";
 
 @import "_themepanel";
 @import "_fontpanel";