Retour à la documentation
/**
* @class spw.widgets.SpwTestWidget
*/
define(["dojo/_base/declare","spw/api/SpwBaseWidget", "dojo/dom-construct",
"dojo/dom-style", "dijit/layout/ContentPane", "dijit/layout/AccordionContainer",
"dojo/query", "dojo/on", "dojo/_base/lang"],
function(declare, SpwBaseWidget, domConstruct, domStyle, ContentPane, Accordion,
query, on, lang){
return declare("spw.widgets.SpwTestWidget", [SpwBaseWidget], /** @lends spw.widgets.SpwEmptyWidget.prototype */{
open:false,
width:300,
minWidth:200,
pinned: false,
content: null,
title: null,
_resizeActive: false,
/**
* @constructs
* @param config
*/
constructor: function (config) {
},
postMixInProperties: function (config) {
this.inherited(arguments);
},
buildRendering: function (config) {
this.inherited(arguments);
domStyle.set(this.domNode, {
top: '25px',
right: this.open ? '0' : -this.width + 'px',
bottom: '25px',
backgroundColor: 'white',
width: this.width + 'px',
transition: 'right 1s',
zIndex: 1
});
this.acc = new Accordion({ style: "height: 100%; overflow-y: auto" }, domConstruct.create('div',{}, this.domNode));
this.cPane = new ContentPane({title:'toto', content:'foo'});
this.acc.addChild(this.cPane);
this._resizerDiv = domConstruct.create('div', {style:'position: absolute;top: 0;bottom: 0;width: 5px;cursor:e-resize'}, this.domNode);
on(document, 'mousedown', lang.hitch(this, function(e){
if((e.target || e.srcElement) === this._resizerDiv) this.set('_resizeActive', true);
}));
on(document, 'mouseup', lang.hitch(this, function(e){
this.set('_resizeActive', false);
}));
on(document, 'mousemove', lang.hitch(this, function(e){
if(this._resizeActive){
var newWidth = (!this.minWidth || this.minWidth < (screen.width - e.clientX)) ? (screen.width - e.clientX) : this.minWidth;
domStyle.set(this.domNode, 'width', newWidth + 'px');
this.width = newWidth;
if (window.getSelection) {
if (window.getSelection().empty) { // Chrome
window.getSelection().empty();
} else if (window.getSelection().removeAllRanges) { // Firefox
window.getSelection().removeAllRanges();
}
} else if (document.selection) { // IE?
document.selection.empty();
}
this.resize();
}
}));
this._togglerDiv = domConstruct.create('div', {innerHTML: (this.open ? '>' : '<')}, this.domNode);
domStyle.set(this._togglerDiv, {
position: 'absolute',
top: '48%',
left: '-20px',
padding: '5px',
background: 'white',
border: 'solid #759dc0',
borderWidth: '2px 0 2px 2px',
borderRadius: '11px 0 0 11px',
fontWeight: 'bolder',
color: '#759DC8',
fontSize: '1.7em',
cursor: 'pointer'
});
on(this.domNode, 'mouseenter', lang.hitch(this, function(){
if(!this.pinned) this.set('open', true);
}));
on(this.domNode, 'mouseleave', lang.hitch(this, function(){
if(!this.pinned) this.set('open', false);
}));
},
_setPinnedAttr: function(value) {
this.pinned = value;
//pin //data:image/gif;base64,R0lGODlhEAAQAKEBAAAAAP///8zHuv///yH5BAEKAAMALAAAAAAQABAAAAIfnI+py80AoRtACOnqBVPj5nGZ9S3ROVHpIa7tCsdTAQA7
//unpin //data:image/gif;base64,R0lGODlhEAAQAJEAAAAAAP///8zHuv///yH5BAEAAAMALAAAAAAQABAAAAIdnI+py+2PADygWsmA2BtHy3XNZY2kp6DTyrauUwAAOw==
domStyle.set(this._pinBtn, {
backgroundImage: (value ? 'url(data:image/gif;base64,R0lGODlhEAAQAKEBAAAAAP///8zHuv///yH5BAEKAAMALAAAAAAQABAAAAIfnI+py80AoRtACOnqBVPj5nGZ9S3ROVHpIa7tCsdTAQA7)':'url(data:image/gif;base64,R0lGODlhEAAQAJEAAAAAAP///8zHuv///yH5BAEAAAMALAAAAAAQABAAAAIdnI+py+2PADygWsmA2BtHy3XNZY2kp6DTyrauUwAAOw==)')
});
},
postCreate: function() {
this.inherited(arguments);
this.acc.startup();
query(".dijitAccordionChildWrapper", this.acc.domNode).forEach(function(node){domStyle.set(node, {margin:'0 -1px 2px 2px'});});
on(this._togglerDiv, 'click', lang.hitch(this, function(){
this.set('open', !this.open);
}));
this._pinBtn = domConstruct.create('div', {innerHTML: ' '}, this.cPane._buttonWidget.titleNode, 'last');
domStyle.set(this._pinBtn, {
width:'16px',
height:'16px',
'float':'right',
cursor:'pointer'
});
on(this._pinBtn, 'click', lang.hitch(this, function(){
this.set('pinned', !this.pinned);
}));
this.set('pinned', this.pinned);
},
resize: function() {
this.acc.resize();
},
startup: function() {
this.inherited(arguments);
},
onActivate: function(){
this.inherited(arguments);
},
onDeactivate: function(){
this.inherited(arguments);
},
destroy: function() {
this.inherited(arguments);
},
_setOpenAttr: function(value){
this.open = value;
domStyle.set(this.domNode, {
right: (value ? '0' : -this.width + 'px')
});
this._togglerDiv.innerHTML = (value ? '>' : '<');
},
_set_resizeActiveAttr: function(value) {
this._resizeActive = value;
domStyle.set(this._resizerDiv, {backgroundColor:value ? '#abd6ff':'transparent'});
}
});
});