Skip to content

Commit

Permalink
textarea with line number
Browse files Browse the repository at this point in the history
  • Loading branch information
@rickyleung
rickyleung committed Aug 17, 2015
1 parent fd140ec commit aec4689
Show file tree
Hide file tree
Showing 17 changed files with 571 additions and 27 deletions.
47 changes: 40 additions & 7 deletions dist/jquery.bizui.css
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
/**
* BizUI Framework
* @version v1.0.1
* @version v1.0.2
* @copyright 2015 Sogou, Inc.
* @link https://github.com/bizdevfe/biz-ui
*/
Expand All @@ -24,7 +24,8 @@
cursor: default
}
.biz-input,
.biz-textarea {
.biz-textarea,
.biz-textline textarea {
font-family: "Microsoft Yahei", Helvetica, Arial, sans-serif;
font-size: 14px;
padding: 5px;
Expand All @@ -38,10 +39,36 @@
height: 18px;
line-height: 18px
}
.biz-textarea {
.biz-textarea,
.biz-textline textarea {
line-height: 20px;
resize: none
}
.biz-textline textarea {
float: left;
border-left: 0;
border-top-left-radius: 0;
border-bottom-left-radius: 0
}
.biz-textline div {
float: left;
width: 15px;
padding: 5px;
border-top-left-radius: 2px;
border-bottom-left-radius: 2px;
position: relative;
overflow: hidden
}
.biz-textline pre {
font-family: Helvetica, Arial, sans-serif;
position: absolute;
margin: 0;
width: 15px;
font-size: 12px;
font-weight: bold;
text-align: center;
line-height: 20px
}
.biz-label {
font-family: "Microsoft Yahei", Helvetica, Arial, sans-serif;
font-size: 14px;
Expand Down Expand Up @@ -2306,17 +2333,20 @@ table.rc-table-resizing thead > th > a {
outline: none
}
.biz-input,
.biz-textarea {
.biz-textarea,
.biz-textline textarea {
color: #333;
border-color: #e2e2e2;
background-color: #fff
}
.biz-input-hover,
.biz-textarea-hover {
.biz-textarea-hover,
.biz-textline textarea.biz-textline-hover {
border-color: #ccc
}
.biz-input-disable,
.biz-textarea-disable {
.biz-textarea-disable,
.biz-textline textarea.biz-textline-disable {
background: #f1f1f1;
color: #b6b6b6
}
Expand Down Expand Up @@ -2428,11 +2458,13 @@ table.rc-table-resizing thead > th > a {
.biz-table-editor.error {
border-color: #ea6153
}
.biz-button {
.biz-button,
.biz-textline div {
background-color: #007aff;
}
.biz-input-focus,
.biz-textarea-focus,
.biz-textline textarea.biz-textline-focus,
.selectBox-dropdown:hover,
.selectBox-dropdown:focus,
.selectBox-dropdown-menu,
Expand Down Expand Up @@ -2522,6 +2554,7 @@ table.rc-table-resizing thead > th > a {
}
.biz-button,
.biz-button-dark,
.biz-textline pre,
.light-theme .current,
.biz-dialog-title,
.biz-panel-title,
Expand Down
245 changes: 241 additions & 4 deletions dist/jquery.bizui.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
/**
* BizUI Framework
* @version v1.0.1
* @version v1.0.2
* @copyright 2015 Sogou, Inc.
* @link https://github.com/bizdevfe/biz-ui
*/
Expand Down Expand Up @@ -735,7 +735,7 @@ define('ui/Textarea',['require'],function(require) {
/**
* Textarea constructor
*
* [See demo on JSFiddle](http://jsfiddle.net/bizdevfe/wus1a8wy/1/)
* [See demo on JSFiddle](http://jsfiddle.net/bizdevfe/wus1a8wy/2/)
* @constructor
* @param {HTMLElement|jQuery} textarea 目标元素
* @param {Object} [options] 参数
Expand Down Expand Up @@ -885,6 +885,237 @@ define('ui/Textarea',['require'],function(require) {
return Textarea;
});

/**
* @ignore
*/
define('ui/Textline',['require'],function(require) {
/**
* Textline constructor
*
* [See demo on JSFiddle](http://jsfiddle.net/bizdevfe/wus1a8wy/2/)
* @constructor
* @param {HTMLElement|jQuery} textline 目标元素
* @param {Object} [options] 参数
* @param {Boolean} [options.disabled] 是否禁用
*/
function Textline(textline, options) {
if (textline instanceof jQuery) {
if (textline.length > 0) {
textline = textline[0]; //只取第一个元素
} else {
return;
}
}

if (!isTextline(textline)) {
return;
}

/**
* @property {HTMLElement} main `textline`元素
*/
this.main = textline;

/**
* @property {jQuery} $main `textline`元素的$包装
*/
this.$main = $(this.main);

this.options = $.extend({}, options || {});
this.init(this.options);
}

var defaultClass = 'biz-textline',
disableClass = 'biz-textline-disable',
hoverClass = 'biz-textline-hover',
focusClass = 'biz-textline-focus';

Textline.prototype = {
/**
* 初始化
* @param {Object} [options] 参数
* @protected
*/
init: function(options) {
this.$main.addClass(defaultClass).html('<div><pre></pre></div><textarea></textarea>');

var w = Math.max(this.$main.width(), 200),
h = Math.max(this.$main.height(), 52);
this.$main.css({
width: w,
height: h
});
this.$line = this.$main.children('div').css({
height: h - 10
});
this.$lineNumber = this.$main.find('pre');
this.$textarea = this.$main.children('textarea').css({
width: w - 36,
height: h - 12
});

if (options.disabled) {
this.disable();
}

var self = this;
this.$textarea.on('mouseover.bizTextline', function(e) {
$(this).addClass(hoverClass);
}).on('mouseout.bizTextline', function(e) {
$(this).removeClass(hoverClass);
}).on('focus.bizTextline', function(e) {
$(this).addClass(focusClass);
}).on('blur.bizTextline', function(e) {
$(this).removeClass(focusClass);
}).on('keyup.bizTextline', function(e) {
self.renderLineNumber(e.target.scrollTop);
}).on('scroll.bizTextline', function(e) {
self.scrollLineNumber(e.target.scrollTop);
});

this.renderLineNumber(0);
},

/**
* 激活
*/
enable: function() {
this.$textarea[0].disabled = false;
this.$textarea.removeClass(disableClass);
},

/**
* 禁用
*/
disable: function() {
this.$textarea[0].disabled = true;
this.$textarea.addClass(disableClass);
},

/**
* 获取文本长度（去除回车）
* @return {Number} 文本长度
*/
length: function() {
return this.$textarea[0].value.replace(/\r?\n/g, '').length;
},

/**
* 获取/设置值
* @param {String} [value] 参数
* @return {String}
*/
val: function(value) {
if (undefined === value) { //get
return this.$textarea.val();
}
this.$textarea[0].value = value; //set
this.renderLineNumber(0);
},

/**
* 销毁
*/
destroy: function() {
this.$textarea.off('mouseover.bizTextline')
.off('mouseout.bizTextline')
.off('focus.bizTextline')
.off('blur.bizTextline')
.off('keyup.bizTextline')
.off('scroll.bizTextline');
this.$main.removeClass(defaultClass).empty();
},

/**
* 绘制行号
* @param {Number} scrollTop 滚动高度
* @protected
*/
renderLineNumber: function(scrollTop) {
var lineCount = this.$textarea.val().split('\n').length,
numbers = '1';
for (var i = 2; i <= lineCount; i++) {
numbers += '\n' + i;
}
this.$lineNumber.html(numbers);
this.scrollLineNumber(scrollTop);
},

/**
* 滚动行号
* @param {Number} scrollTop 滚动高度
* @protected
*/
scrollLineNumber: function(scrollTop) {
this.$lineNumber.css({
top: 5 - scrollTop
});
}
};

function isTextline(elem) {
return elem.nodeType === 1 && elem.tagName.toLowerCase() === 'div';
}

var dataKey = 'bizTextline';

$.extend($.fn, {
bizTextline: function(method, options) {
var textline;
switch (method) {
case 'enable':
this.each(function() {
textline = $(this).data(dataKey);
if (textline) {
textline.enable();
}
});
break;
case 'disable':
this.each(function() {
textline = $(this).data(dataKey);
if (textline) {
textline.disable();
}
});
break;
case 'val':
if (undefined === options) { //get
return $(this).data(dataKey).val();
}
this.each(function() { //set
textline = $(this).data(dataKey);
if (textline) {
textline.val(options);
}
});
break;
case 'destroy':
this.each(function() {
textline = $(this).data(dataKey);
if (textline) {
textline.destroy();
$(this).data(dataKey, null);
}
});
break;
case 'length':
return this.length !== 0 ? this.data(dataKey).length() : null;
default:
this.each(function() {
if (!$(this).data(dataKey) && isTextline(this)) {
$(this).data(dataKey, new Textline(this, method));
}
});
}

return this;
}
});

return Textline;
});

/**
* @ignore
*/
Expand Down Expand Up @@ -13081,7 +13312,7 @@ define('ui/Table',['require','dep/jquery.resizableColumns','dep/jquery.editablet
/**
* @ignore
*/
define('bizui',['require','ui/Button','ui/Input','ui/Textarea','ui/Radio','ui/Checkbox','ui/Select','ui/Dialog','ui/Panel','ui/Tooltip','ui/Tab','ui/Page','ui/Tree','ui/Calendar','ui/Table'],function(require) {
define('bizui',['require','ui/Button','ui/Input','ui/Textarea','ui/Textline','ui/Radio','ui/Checkbox','ui/Select','ui/Dialog','ui/Panel','ui/Tooltip','ui/Tab','ui/Page','ui/Tree','ui/Calendar','ui/Table'],function(require) {
/**
* 命名空间
* @class bizui
Expand All @@ -13092,7 +13323,7 @@ define('bizui',['require','ui/Button','ui/Input','ui/Textarea','ui/Radio','ui/Ch
/**
* @property {String} version 版本号
*/
bizui.version = '1.0.1';
bizui.version = '1.0.2';

var origin = window.bizui;

Expand Down Expand Up @@ -13124,6 +13355,12 @@ define('bizui',['require','ui/Button','ui/Input','ui/Textarea','ui/Radio','ui/Ch
*/
Textarea: require('ui/Textarea'),

/**
* {@link Textline} constructor
* @method Textline
*/
Textline: require('ui/Textline'),

/**
* {@link Radio} constructor
* @method Radio
Expand Down
2 changes: 1 addition & 1 deletion dist/jquery.bizui.min.css
View file

Large diffs are not rendered by default.

4 changes: 2 additions & 2 deletions dist/jquery.bizui.min.js
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "biz-ui",
"version": "1.0.1",
"version": "1.0.2",
"description": "A jQuery plugin for business UI components",
"keywords": ["jQuery plugin", "Button", "Input", "Textarea", "Radio", "Checkbox", "Select", "Dialog", "Panel", "Tooltip", "Tab", "Page", "Tree", "Calendar", "Table"],
"homepage": "http://bizdevfe.github.io/biz-ui",
Expand Down
Loading

0 comments on commit aec4689

Please sign in to comment.