createSmallContent: function () {
var doc = this.doc,
contentNode = $$.ele( doc, "div", {
className: PREFIX + "box-item-content"
}),
cls = PREFIX + "box-item-val",
tmpContent = this.options.item,
tmpNode = null;
if ( typeof tmpContent === "string" ) {
tmpContent = {
show: tmpContent,
val: tmpContent
};
}
tmpNode = $$.ele( doc, "div", {
className: cls
} );
tmpNode.innerHTML = '<img src="' + tmpContent.show + '">';
// 附加属性到项的根节点上
this.element.setAttribute( "data-value", tmpContent.val );
contentNode.appendChild( tmpNode );
return contentNode;
},
// 为重叠式box创建容器
function createOverlapContainer ( doc ) {
return $$.ele( doc, "div", {
className: PREFIX + "overlap-container"
} );
}
createIcon: function () {
if ( !this.options.icon ) {
return null;
}
var iconNode = $$.ele( this.doc, "div", {
className: PREFIX + "button-icon"
} );
if ( typeof this.options.icon === "string" ) {
iconNode.style.backgroundImage = "url(" + this.options.icon + ") no-repeat";
} else {
iconNode.style.background = getBackgroundStyle( this.options.icon );
}
if ( this.options.iconSize.w ) {
iconNode.style.width = this.options.iconSize.w + "px";
}
if ( this.options.iconSize.h ) {
iconNode.style.height = this.options.iconSize.h + "px";
}
return iconNode;
},
createPanel: function () {
return $$.ele( this.doc, "div", {
className: PREFIX + "area-panel"
} );
},
createGroupContainer: function () {
return $$.ele( this.doc, "div", {
className: PREFIX + "box-container"
} );
},
createButton: function () {
return $$.ele( this.doc, "div", {
className: PREFIX + "area-button"
} );
},
createMountPoint: function () {
return $$.ele( this.doc, "div", {
className: PREFIX + "button-mount-point"
} );
},
createMoveUpButton: function () {
return $$.ele( this.doc, "div", {
className: PREFIX + "moveup-button",
content: ""
} );
},
createItem: function () {
var itemNode = $$.ele( this.doc, "div", {
className: PREFIX + "box-item"
} );
return itemNode;
},
createGroup: function () {
var doc = this.doc,
itemGroup = [],
result = {
title: [],
items: []
},
groupNode = null,
groupTitle = null,
itemType = BOX_TYPE.DETACHED === this.options.type ? ITEM_TYPE.BIG : ITEM_TYPE.SMALL,
itemContainer = null;
groupNode = $$.ele( this.doc, "div", {
className: PREFIX + "box-group"
} );
itemContainer = groupNode.cloneNode( false );
itemContainer.className = PREFIX + "box-group-item-container";
kity.Utils.each( this.options.group, function ( group, i ) {
result.title.push( group.title || "" );
itemGroup = [];
kity.Utils.each( group.items, function ( item ) {
groupNode = groupNode.cloneNode( false );
itemContainer = itemContainer.cloneNode( false );
groupTitle = $$.ele( doc, "div", {
className: PREFIX + "box-group-title",
content: item.title
} );
groupNode.appendChild( groupTitle );
groupNode.appendChild( itemContainer );
kity.Utils.each( createItems( doc, item.content, itemType ), function ( boxItem ) {
boxItem.appendTo( itemContainer );
} );
itemGroup.push( groupNode );
} );
result.items.push( itemGroup );
} );
return result;
},
createLabel: function () {
var labelNode = $$.ele( this.doc, "div", {
className: PREFIX + "button-label",
content: this.options.label
} );
return labelNode;
},
createSign: function () {
if ( this.options.sign === false ) {
return null;
}
return $$.ele( this.doc, "div", {
className: PREFIX + "button-sign"
} );
},
createArea: function () {
var areaNode = $$.ele( this.doc, "div", {
className: PREFIX + "area"
});
if ( "width" in this.options ) {
areaNode.style.width = this.options.width + "px";
}
return areaNode;
},
createBox: function () {
var boxNode = $$.ele( this.doc, "div", {
className: PREFIX + "box"
} );
if ( "width" in this.options ) {
boxNode.style.width = this.options.width + "px";
}
return boxNode;
},
createButton: function () {
var buttonNode = $$.ele( this.doc, "div", {
className: PREFIX + "button"
} );
// 附加className
if ( this.options.className ) {
buttonNode.className += " " + PREFIX + this.options.className;
}
return buttonNode;
},
createSmallContent: function () {
var doc = this.doc,
contentNode = $$.ele( doc, "div", {
className: PREFIX + "box-item-content"
}),
cls = PREFIX + "box-item-val",
tmpContent = this.options,
tmpNode = null;
tmpNode = $$.ele( doc, "div", {
className: cls
} );
tmpNode.style.background = 'url( '+ tmpContent.img +' )';
tmpNode.style.backgroundPosition = -tmpContent.pos.x + 'px ' + -tmpContent.pos.y + 'px';
// 附加属性到项的根节点上
this.element.setAttribute( "data-value", tmpContent.key );
contentNode.appendChild( tmpNode );
return contentNode;
},
createBigContent: function () {
var doc = this.doc,
contentNode = $$.ele( doc, "div", {
className: PREFIX + "box-item-content"
}),
cls = PREFIX + "box-item-val",
tmpContent = this.options.item,
tmpNode = null,
styleStr = getStyleByData( tmpContent );
tmpNode = $$.ele( doc, "div", {
className: cls
} );
tmpNode.innerHTML = '<div class="'+ PREFIX +'item-image" style="'+ styleStr +'"></div>';
// 附加属性到项的根节点上
this.element.setAttribute( "data-value", tmpContent.val );
contentNode.appendChild( tmpNode );
return contentNode;
},
createLabel: function () {
var labelNode = null;
if ( !( "label" in this.options ) ) {
return;
}
labelNode = $$.ele( this.doc, "div", {
className: PREFIX + "box-item-label",
content: this.options.label
} );
return labelNode;
},
kity.Utils.each( group.items, function ( item ) {
groupNode = groupNode.cloneNode( false );
itemContainer = itemContainer.cloneNode( false );
groupTitle = $$.ele( doc, "div", {
className: PREFIX + "box-group-title",
content: item.title
} );
groupNode.appendChild( groupTitle );
groupNode.appendChild( itemContainer );
kity.Utils.each( createItems( doc, item.content, itemType ), function ( boxItem ) {
boxItem.appendTo( itemContainer );
} );
itemGroup.push( groupNode );
} );
createIcon: function () {
if ( !this.options.icon ) {
return null;
}
var iconNode = $$.ele( this.doc, "div", {
className: PREFIX + "button-icon"
} );
iconNode.style.backgroundImage = "url(" + this.options.icon + ")";
if ( this.options.iconSize.w ) {
iconNode.style.width = this.options.iconSize.w + "px";
}
if ( this.options.iconSize.h ) {
iconNode.style.height = this.options.iconSize.h + "px";
}
return iconNode;
},
createButtonContainer: function () {
return $$.ele( this.doc, "div", {
className: PREFIX + "area-button-container"
} );
},
createOverlapGroup: function ( itemGroup ) {
var classifyList = itemGroup.title,
_self = this,
overlapContainer = createOverlapContainer( this.doc),
overlapButtonObject = createOverlapButton( this.doc, {
fixOffset: this.options.fixOffset
} ),
overlapListObject = createOverlapList( this.doc, {
width: 150,
items: classifyList
} ),
wrapNode = $$.ele( this.doc, "div", {
className: PREFIX + "wrap-group"
} );
this.overlapButtonObject = overlapButtonObject;
// 组合选择组件
overlapButtonObject.mount( overlapListObject );
overlapButtonObject.initEvent();
overlapListObject.initEvent();
// 合并box的内容
kity.Utils.each( itemGroup.items, function ( itemArr, index ) {
var itemWrapNode = wrapNode.cloneNode( false );
kity.Utils.each( itemArr, function ( item ) {
itemWrapNode.appendChild( item );
} );
itemGroup.items[ index ] = itemWrapNode;
} );
this.itemPanels = itemGroup.items;
// 切换面板处理器
overlapListObject.setSelectHandler( function ( index, oldIndex ) {
_self.overlapIndex = index;
overlapButtonObject.setLabel( classifyList[index] );
overlapButtonObject.hideMount();
// 切换内容
itemGroup.items[ oldIndex ].style.display = "none";
itemGroup.items[ index ].style.display = "block";
if ( index !== oldIndex ) {
_self.updateSize();
}
_self.onchangeHandler( index );
} );
overlapContainer.appendChild( overlapButtonObject.getNode() );
kity.Utils.each( itemGroup.items, function ( group, index ) {
if ( index > 0 ) {
group.style.display = "none";
}
overlapContainer.appendChild( group );
} );
overlapListObject.select( 0 );
return [ overlapContainer ];
},