Skip to content

K
kityminder-core
Commit 2919feb5 authored by yangxiaohu2014's avatar yangxiaohu2014
Browse files
Options

add image search support

parent 4af5e63e
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 515 additions and 10 deletions
ui/ribbon/idea/image.js
View file @ 2919feb5
...@@ -34,20 +34,221 @@ KityMinder.registerUI('image', function(minder) { ...@@ -34,20 +34,221 @@ KityMinder.registerUI('image', function(minder) {
var $dialogBody = $($imageDialog.getBodyElement()); var $dialogBody = $($imageDialog.getBodyElement());
// writed by yangxiaohu 2014-10-20
var tabs = new FUI.Tabs( {
buttons: [ " 插入图片", "图片搜索" ]
} );
$dialogBody.html([ $dialogBody.html([
'<p><label>图片地址：</label><input type="url" class="image-url fui-widget fui-selectable" /></p>', '<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>', '<p><label>提示文本：</label><input type="text" class="image-title fui-widget fui-selectable" /></p>',
'<img class="image-preview" src="" style="max-height: 200px;" />' '<img class="image-preview" src="" style="max-height: 200px;" />'].join('');
].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 $url = $dialogBody.find('.image-url');
var $title = $dialogBody.find('.image-title'); var $title = $dialogBody.find('.image-title');
var $preview = $dialogBody.find('.image-preview'); var $preview = $dialogBody.find('.image-preview');
var $ok = $imageDialog.getButton(0);
var $errorMsg = $('<span class="validate-error"></span>'); var $errorMsg = $('<span class="validate-error"></span>');
$imageDialog.on('ok', function() { $imageDialog.on('ok', function() {
minder.execCommand('image', $url.val(), $title.val()); 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() { $imageDialog.on('open', function() {
...@@ -62,11 +263,11 @@ KityMinder.registerUI('image', function(minder) { ...@@ -62,11 +263,11 @@ KityMinder.registerUI('image', function(minder) {
if (value) { if (value) {
$url.addClass('validate-error'); $url.addClass('validate-error');
$errorMsg.text('图片无法加载'); $errorMsg.text('图片无法加载');
$ok.disable(); // $ok.disable();
} else { } else {
$url.removeClass('validate-error'); $url.removeClass('validate-error');
$errorMsg.text(''); $errorMsg.text('');
$ok.enable(); // $imageDialog.enable();
} }
return value; return value;
} }
...@@ -78,7 +279,7 @@ KityMinder.registerUI('image', function(minder) { ...@@ -78,7 +279,7 @@ KityMinder.registerUI('image', function(minder) {
if (/^https?\:\/\/(\w+\.)+\w+/.test(url)) { if (/^https?\:\/\/(\w+\.)+\w+/.test(url)) {
$preview.attr('src', url); $preview.attr('src', url);
error(false); error(false);
$ok.disable(); // $imageDialog.disable();
$preview.addClass('loading'); $preview.addClass('loading');
} else { } else {
error(true); error(true);
......
ui/theme/default/css/_image_dialog.less 0 → 100644
View file @ 2919feb5
#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/_kityminder.less
View file @ 2919feb5
...@@ -20,7 +20,7 @@ html, body { ...@@ -20,7 +20,7 @@ html, body {
overflow: hidden; overflow: hidden;
.dock; .dock;
position: fixed; position: fixed;
-webkit-user-select: none; -webkit-user-select: none;
-khtml-user-select: none; -khtml-user-select: none;
-moz-user-select: none; -moz-user-select: none;
......
ui/theme/default/css/default.all.css
View file @ 2919feb5
...@@ -2901,6 +2901,152 @@ ul.resource-list li { ...@@ -2901,6 +2901,152 @@ ul.resource-list li {
border-radius: 4px; border-radius: 4px;
margin: 3px; 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 { #template-panel > .fui-panel-content > .fui-label-panel-content > .fui-drop-panel {
width: 65px; width: 65px;
height: 50px; height: 50px;
......
ui/theme/default/css/default.all.css.map
View file @ 2919feb5
This diff is collapsed.
ui/theme/default/css/import.less
View file @ 2919feb5
...@@ -25,6 +25,7 @@ ...@@ -25,6 +25,7 @@
@import "_progress_panel"; @import "_progress_panel";
@import "_resource_panel"; @import "_resource_panel";
@import "_attachment_panel"; @import "_attachment_panel";
@import "_image_dialog";
@import "_themepanel"; @import "_themepanel";
@import "_fontpanel"; @import "_fontpanel";
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment