本章講解編輯器的ui封裝文件editor\js\libs\ui.js,這個文件主要是對dom節點進行了封裝，dom的樣式的封裝，對dom的事件進行封裝。
//ui庫
var UI = {};
//element構造函數，所有ui的父類，共享父類的原型
//封裝了整個的ui
UI.Element = function ( dom ) {
this.dom = dom;
};
//原型
UI.Element.prototype = {
//添加子節點
add: function () {
for ( var i = 0; i < arguments.length; i ++ ) {
var argument = arguments[ i ];
if ( argument instanceof UI.Element ) {
//添加節點
this.dom.appendChild( argument.dom );
} else {
console.error( 'UI.Element:', argument, 'is not an instance of UI.Element.' );
}
}
return this;
},
//移除節點
remove: function () {
for ( var i = 0; i < arguments.length; i ++ ) {
var argument = arguments[ i ];
if ( argument instanceof UI.Element ) {
//刪除節點
this.dom.removeChild( argument.dom );
} else {
console.error( 'UI.Element:', argument, 'is not an instance of UI.Element.' );
}
}
return this;
},
//清空所有的子節點
clear: function () {
while ( this.dom.children.length ) {
//清空節點
this.dom.removeChild( this.dom.lastChild );
}
},
//設置dom的id
setId: function ( id ) {
//設置節點id
this.dom.id = id;
return this;
},
//設置dom的class
setClass: function ( name ) {
this.dom.className = name;
return this;
},
//設置樣式
setStyle: function ( style, array ) {
for ( var i = 0; i < array.length; i ++ ) {
//設置節點的樣式
this.dom.style[ style ] = array[ i ];
}
return this;
},
//設置禁用、啓用狀態
setDisabled: function ( value ) {
//節點的啓用和禁用
this.dom.disabled = value;
return this;
},
//設置div內容
setTextContent: function ( value ) {
//設值節點的文本
this.dom.textContent = value;
return this;
}
};
// properties
//定義ui所能改變的樣式
var properties = [ 'position', 'left', 'top', 'right', 'bottom', 'width', 'height', 'border', 'borderLeft',
'borderTop', 'borderRight', 'borderBottom', 'borderColor', 'display', 'overflow', 'margin', 'marginLeft', 'marginTop', 'marginRight', 'marginBottom', 'padding', 'paddingLeft', 'paddingTop', 'paddingRight', 'paddingBottom', 'color',
'background', 'backgroundColor', 'opacity', 'fontSize', 'fontWeight', 'textAlign', 'textDecoration', 'textTransform', 'cursor', 'zIndex' ];
properties.forEach( function ( property ) {
//setPosition
var method = 'set' + property.substr( 0, 1 ).toUpperCase() + property.substr( 1, property.length );
//原型中添加方法UI.Element.setPosition
//設置樣式
UI.Element.prototype[ method ] = function () {
//這個this應該是代表的element
this.setStyle( property, arguments );
return this;
};
} );
// events
//定義ui所能觸發的事件
var events = [ 'KeyUp', 'KeyDown', 'MouseOver', 'MouseOut', 'Click', 'DblClick', 'Change' ];
events.forEach( function ( event ) {
var method = 'on' + event;
//爲以上事件添加處理函數
UI.Element.prototype[ method ] = function ( callback ) {
//在dom中添加事件
//this指向UI.Element本身，callback.bind綁定callback中的this指向elememnt
this.dom.addEventListener( event.toLowerCase(), callback.bind( this ), false );
return this;
};
} );
// Span
UI.Span = function () {
UI.Element.call( this );
this.dom = document.createElement( 'span' );
return this;
};
//使用父類的原型構造自己的原型
UI.Span.prototype = Object.create( UI.Element.prototype );
//設置構造函數
UI.Span.prototype.constructor = UI.Span;
// Div
UI.Div = function () {
UI.Element.call( this );
this.dom = document.createElement( 'div' );
return this;
};
UI.Div.prototype = Object.create( UI.Element.prototype );
UI.Div.prototype.constructor = UI.Div;
// Row
//row構造函數
UI.Row = function () {
UI.Element.call( this );
//創建div，className爲'row'
var dom = document.createElement( 'div' );
dom.className = 'Row';
this.dom = dom;
return this;
};
UI.Row.prototype = Object.create( UI.Element.prototype );
UI.Row.prototype.constructor = UI.Row;
// Panel
//面板構造函數
UI.Panel = function () {
//繼承自element
UI.Element.call( this );
//創建一個節點，設置節點類型
var dom = document.createElement( 'div' );
dom.className = 'Panel';
//保存界節點
this.dom = dom;
//返回面板對象
return this;
};
UI.Panel.prototype = Object.create( UI.Element.prototype );
UI.Panel.prototype.constructor = UI.Panel;
// Text
//標籤
UI.Text = function ( text ) {
UI.Element.call( this );
var dom = document.createElement( 'span' );
dom.className = 'Text';
dom.style.cursor = 'default';
dom.style.display = 'inline-block';
dom.style.verticalAlign = 'middle';
this.dom = dom;
this.setValue( text );
return this;
};
UI.Text.prototype = Object.create( UI.Element.prototype );
UI.Text.prototype.constructor = UI.Text;
UI.Text.prototype.getValue = function () {
return this.dom.textContent;
};
UI.Text.prototype.setValue = function ( value ) {
if ( value !== undefined ) {
this.dom.textContent = value;
}
return this;
};
// Input
//輸入框
UI.Input = function ( text ) {
UI.Element.call( this );
var scope = this;
var dom = document.createElement( 'input' );
dom.className = 'Input';
dom.style.padding = '2px';
dom.style.border = '1px solid transparent';
dom.addEventListener( 'keydown', function ( event ) {
event.stopPropagation();
}, false );
this.dom = dom;
this.setValue( text );
return this;
};
UI.Input.prototype = Object.create( UI.Element.prototype );
UI.Input.prototype.constructor = UI.Input;
UI.Input.prototype.getValue = function () {
return this.dom.value;
};
UI.Input.prototype.setValue = function ( value ) {
this.dom.value = value;
return this;
};
// TextArea
//文本
UI.TextArea = function () {
UI.Element.call( this );
var scope = this;
var dom = document.createElement( 'textarea' );
dom.className = 'TextArea';
dom.style.padding = '2px';
dom.spellcheck = false;
dom.addEventListener( 'keydown', function ( event ) {
event.stopPropagation();
if ( event.keyCode === 9 ) {
event.preventDefault();
var cursor = dom.selectionStart;
dom.value = dom.value.substring( 0, cursor ) + '\t' + dom.value.substring( cursor );
dom.selectionStart = cursor + 1;
dom.selectionEnd = dom.selectionStart;
}
}, false );
this.dom = dom;
return this;
};
UI.TextArea.prototype = Object.create( UI.Element.prototype );
UI.TextArea.prototype.constructor = UI.TextArea;
UI.TextArea.prototype.getValue = function () {
return this.dom.value;
};
UI.TextArea.prototype.setValue = function ( value ) {
this.dom.value = value;
return this;
};
// Select
//下拉列表框
UI.Select = function () {
UI.Element.call( this );
var scope = this;
var dom = document.createElement( 'select' );
dom.className = 'Select';
dom.style.padding = '2px';
this.dom = dom;
return this;
};
UI.Select.prototype = Object.create( UI.Element.prototype );
UI.Select.prototype.constructor = UI.Select;
UI.Select.prototype.setMultiple = function ( boolean ) {
this.dom.multiple = boolean;
return this;
};
UI.Select.prototype.setOptions = function ( options ) {
var selected = this.dom.value;
while ( this.dom.children.length > 0 ) {
this.dom.removeChild( this.dom.firstChild );
}
for ( var key in options ) {
var option = document.createElement( 'option' );
option.value = key;
option.innerHTML = options[ key ];
this.dom.appendChild( option );
}
this.dom.value = selected;
return this;
};
UI.Select.prototype.getValue = function () {
return this.dom.value;
};
UI.Select.prototype.setValue = function ( value ) {
value = String( value );
if ( this.dom.value !== value ) {
this.dom.value = value;
}
return this;
};
// Checkbox
//複選框
UI.Checkbox = function ( boolean ) {
UI.Element.call( this );
var scope = this;
var dom = document.createElement( 'input' );
dom.className = 'Checkbox';
dom.type = 'checkbox';
this.dom = dom;
this.setValue( boolean );
return this;
};
UI.Checkbox.prototype = Object.create( UI.Element.prototype );
UI.Checkbox.prototype.constructor = UI.Checkbox;
UI.Checkbox.prototype.getValue = function () {
return this.dom.checked;
};
UI.Checkbox.prototype.setValue = function ( value ) {
if ( value !== undefined ) {
this.dom.checked = value;
}
return this;
};
// Color
//顏色編輯框
UI.Color = function () {
UI.Element.call( this );
var scope = this;
var dom = document.createElement( 'input' );
dom.className = 'Color';
dom.style.width = '64px';
dom.style.height = '17px';
dom.style.border = '0px';
dom.style.padding = '2px';
dom.style.backgroundColor = 'transparent';
try {
dom.type = 'color';
dom.value = '#ffffff';
} catch ( exception ) {}
this.dom = dom;
return this;
};
UI.Color.prototype = Object.create( UI.Element.prototype );
UI.Color.prototype.constructor = UI.Color;
UI.Color.prototype.getValue = function () {
return this.dom.value;
};
UI.Color.prototype.getHexValue = function () {
return parseInt( this.dom.value.substr( 1 ), 16 );
};
UI.Color.prototype.setValue = function ( value ) {
this.dom.value = value;
return this;
};
UI.Color.prototype.setHexValue = function ( hex ) {
this.dom.value = '#' + ( '000000' + hex.toString( 16 ) ).slice( - 6 );
return this;
};
// Number
// 數字編輯框
UI.Number = function ( number ) {
UI.Element.call( this );
var scope = this;
var dom = document.createElement( 'input' );
dom.className = 'Number';
dom.value = '0.00';
dom.addEventListener( 'keydown', function ( event ) {
event.stopPropagation();
if ( event.keyCode === 13 ) dom.blur();
}, false );
this.value = 0;
this.min = - Infinity;
this.max = Infinity;
this.precision = 2;
this.step = 1;
this.unit = '';
this.dom = dom;
this.setValue( number );
var changeEvent = document.createEvent( 'HTMLEvents' );
changeEvent.initEvent( 'change', true, true );
var distance = 0;
var onMouseDownValue = 0;
var pointer = [ 0, 0 ];
var prevPointer = [ 0, 0 ];
function onMouseDown( event ) {
event.preventDefault();
distance = 0;
onMouseDownValue = scope.value;
prevPointer = [ event.clientX, event.clientY ];
document.addEventListener( 'mousemove', onMouseMove, false );
document.addEventListener( 'mouseup', onMouseUp, false );
}
function onMouseMove( event ) {
var currentValue = scope.value;
pointer = [ event.clientX, event.clientY ];
distance += ( pointer[ 0 ] - prevPointer[ 0 ] ) - ( pointer[ 1 ] - prevPointer[ 1 ] );
var value = onMouseDownValue + ( distance / ( event.shiftKey ? 5 : 50 ) ) * scope.step;
value = Math.min( scope.max, Math.max( scope.min, value ) );
if ( currentValue !== value ) {
scope.setValue( value );
dom.dispatchEvent( changeEvent );
}
prevPointer = [ event.clientX, event.clientY ];
}
function onMouseUp( event ) {
document.removeEventListener( 'mousemove', onMouseMove, false );
document.removeEventListener( 'mouseup', onMouseUp, false );
if ( Math.abs( distance ) < 2 ) {
dom.focus();
dom.select();
}
}
function onChange( event ) {
scope.setValue( dom.value );
}
function onFocus( event ) {
dom.style.backgroundColor = '';
dom.style.cursor = '';
}
function onBlur( event ) {
dom.style.backgroundColor = 'transparent';
dom.style.cursor = 'col-resize';
}
onBlur();
dom.addEventListener( 'mousedown', onMouseDown, false );
dom.addEventListener( 'change', onChange, false );
dom.addEventListener( 'focus', onFocus, false );
dom.addEventListener( 'blur', onBlur, false );
return this;
};
UI.Number.prototype = Object.create( UI.Element.prototype );
UI.Number.prototype.constructor = UI.Number;
UI.Number.prototype.getValue = function () {
return this.value;
};
UI.Number.prototype.setValue = function ( value ) {
if ( value !== undefined ) {
value = parseFloat( value );
if ( value < this.min ) value = this.min;
if ( value > this.max ) value = this.max;
this.value = value;
this.dom.value = value.toFixed( this.precision );
if ( this.unit !== '' ) this.dom.value += ' ' + this.unit;
}
return this;
};
UI.Number.prototype.setPrecision = function ( precision ) {
this.precision = precision;
return this;
};
UI.Number.prototype.setStep = function ( step ) {
this.step = step;
return this;
};
UI.Number.prototype.setRange = function ( min, max ) {
this.min = min;
this.max = max;
return this;
};
UI.Number.prototype.setUnit = function ( unit ) {
this.unit = unit;
return this;
};
// Integer
//
UI.Integer = function ( number ) {
UI.Element.call( this );
var scope = this;
//創建一個輸入框
var dom = document.createElement( 'input' );
dom.className = 'Number';
dom.value = '0';
//鍵盤按下處理
dom.addEventListener( 'keydown', function ( event ) {
//該方法將停止事件的傳播,阻止它被分派到其他 Document 節點
event.stopPropagation();
}, false );
this.value = 0;
this.min = - Infinity;
this.max = Infinity;
this.step = 1;
this.dom = dom;
this.setValue( number );
var changeEvent = document.createEvent( 'HTMLEvents' );
changeEvent.initEvent( 'change', true, true );
var distance = 0;
var onMouseDownValue = 0;
var pointer = [ 0, 0 ];
var prevPointer = [ 0, 0 ];
function onMouseDown( event ) {
event.preventDefault();
distance = 0;
onMouseDownValue = scope.value;
prevPointer = [ event.clientX, event.clientY ];
document.addEventListener( 'mousemove', onMouseMove, false );
document.addEventListener( 'mouseup', onMouseUp, false );
}
function onMouseMove( event ) {
var currentValue = scope.value;
pointer = [ event.clientX, event.clientY ];
distance += ( pointer[ 0 ] - prevPointer[ 0 ] ) - ( pointer[ 1 ] - prevPointer[ 1 ] );
var value = onMouseDownValue + ( distance / ( event.shiftKey ? 5 : 50 ) ) * scope.step;
value = Math.min( scope.max, Math.max( scope.min, value ) ) | 0;
if ( currentValue !== value ) {
scope.setValue( value );
dom.dispatchEvent( changeEvent );
}
prevPointer = [ event.clientX, event.clientY ];
}
function onMouseUp( event ) {
document.removeEventListener( 'mousemove', onMouseMove, false );
document.removeEventListener( 'mouseup', onMouseUp, false );
if ( Math.abs( distance ) < 2 ) {
dom.focus();
dom.select();
}
}
//改變
function onChange( event ) {
scope.setValue( dom.value );
}
//焦點
function onFocus( event ) {
dom.style.backgroundColor = '';
dom.style.cursor = '';
}
//透明背景
function onBlur( event ) {
dom.style.backgroundColor = 'transparent';
dom.style.cursor = 'col-resize';
}
onBlur();
//整形編輯框添加事件處理
dom.addEventListener( 'mousedown', onMouseDown, false );
dom.addEventListener( 'change', onChange, false );
dom.addEventListener( 'focus', onFocus, false );
dom.addEventListener( 'blur', onBlur, false );
return this;
};
UI.Integer.prototype = Object.create( UI.Element.prototype );
UI.Integer.prototype.constructor = UI.Integer;
UI.Integer.prototype.getValue = function () {
return this.value;
};
UI.Integer.prototype.setValue = function ( value ) {
if ( value !== undefined ) {
value = parseInt( value );
this.value = value;
this.dom.value = value;
}
return this;
};
UI.Integer.prototype.setStep = function ( step ) {
this.step = parseInt( step );
return this;
};
UI.Integer.prototype.setRange = function ( min, max ) {
this.min = min;
this.max = max;
return this;
};
// Break
//換行標籤
UI.Break = function () {
UI.Element.call( this );
var dom = document.createElement( 'br' );
dom.className = 'Break';
this.dom = dom;
return this;
};
UI.Break.prototype = Object.create( UI.Element.prototype );
UI.Break.prototype.constructor = UI.Break;
// HorizontalRule
//水平分割符
UI.HorizontalRule = function () {
UI.Element.call( this );
var dom = document.createElement( 'hr' );
dom.className = 'HorizontalRule';
this.dom = dom;
return this;
};
UI.HorizontalRule.prototype = Object.create( UI.Element.prototype );
UI.HorizontalRule.prototype.constructor = UI.HorizontalRule;
// Button
//創建一個按鈕
UI.Button = function ( value ) {
UI.Element.call( this );
var dom = document.createElement( 'button' );
dom.className = 'Button';
this.dom = dom;
this.dom.textContent = value;
return this;
};
UI.Button.prototype = Object.create( UI.Element.prototype );
UI.Button.prototype.constructor = UI.Button;
//設置按鈕的文字
UI.Button.prototype.setLabel = function ( value ) {
this.dom.textContent = value;
return this;
};
// Modal
UI.Modal = function ( value ) {
var scope = this;
//創建標籤
var dom = document.createElement( 'div' );
dom.style.position = 'absolute'; //絕對位置
dom.style.width = '100%'; //寬度
dom.style.height = '100%'; //高度
dom.style.backgroundColor = 'rgba(0,0,0,0.5)'; //背景色
dom.style.display = 'none'; //是否顯示
dom.style.alignItems = 'center'; //對齊方式
dom.style.justifyContent = 'center'; //對齊方式
dom.addEventListener( 'click', function ( event ) { //點擊事件
scope.hide(); //隱藏
} );
this.dom = dom; //存儲dom
this.container = new UI.Panel(); //創建div
this.container.dom.style.width = '200px'; //設置寬度
this.container.dom.style.padding = '20px'; //設置高度
this.container.dom.style.backgroundColor = '#ffffff'; //設置背景色
this.container.dom.style.boxShadow = '0px 5px 10px rgba(0,0,0,0.5)'; //設置陰影
this.add( this.container ); //this.dom上添加子節點
return this;
};
//設置原型、構造函數
UI.Modal.prototype = Object.create( UI.Element.prototype );
UI.Modal.prototype.constructor = UI.Modal;
//添加顯示功能
UI.Modal.prototype.show = function ( content ) {
//清空面板、添加新的內容
this.container.clear();
this.container.add( content );
//顯示方式爲浮動？
this.dom.style.display = 'flex';
return this;
};
//設置隱藏
UI.Modal.prototype.hide = function () {
//隱藏
this.dom.style.display = 'none';
return this;
};