I have been working on refining my custom widget and would like it to function similarly to that of the Jewelry Box theme in that there is a side panel that can be minimized and maximized by a small tab.
For whatever reason the map shifts and takes my panel with it separating it from the sidebar? How do I anchor my panel to my sidebar? This is a custom theme I created for my project.
define(['dojo/_base/declare',
'dijit/_TemplatedMixin',
'dojo/text!./Panel.html',
'dojo/topic',
'jimu/BaseWidgetPanel'
],
function(declare, _TemplatedMixin, template, topic, BaseWidgetPanel) {
return declare([BaseWidgetPanel, _TemplatedMixin], {
baseClass: 'jimu-panel jimu-border-panel',
templateString: template,
postCreate: function(){
this.inherited(arguments);
this.maxWidth = this.position.width;
console.log('max Width: ', this.maxWidth);
console.log('postCreate Panel');
console.log('left: ', this.position.left);
},
startup: function(){
this.inherited(arguments);
console.log('startup Panel');
},
onOpen: function(){
this.inherited(arguments);
console.log('onOpen');
},
setPosition: function(position){
this.inherited(arguments);
topic.publish('changeMapPosition', {left: this.position.left + this.position.width});
},
onMaximize: function() {
html.addClass(this.barNode, 'max');
html.removeClass(this.barNode, 'min');
this.position.left = 0;
this.setPosition(this.position);
this.inherited(arguments);
},
onMinimize: function() {
html.removeClass(this.barNode, 'max');
html.addClass(this.barNode, 'min');
//on minimize, we can't set width/height = 0 to minimize because we use border-box model
//and the content height/width can't be nagative
//go here for more information: http://dev.w3.org/csswg/css-ui/#box-sizing
this.position.left = 0 - this.position.width;
this.setPosition(this.position);
this.inherited(arguments);
},
_onBarClick: function() {
console.log('windowState', this.windowState);
if (this.windowState === 'maximized') {
this.panelManager.minimizePanel(this);
} else {
this.panelManager.maximizePanel(this);
}
}
});
});
HTML:
<div>
<div class="jimu-container" data-dojo-attach-point="containerNode">
</div>
<div class="bar" data-dojo-attach-point="barNode" data-dojo-attach-event="onclick:_onBarClick"></div>
</div>
CSS:
.jimu-border-panel{
overflow: visible;
}
.jimu-border-panel>.jimu-container{
width: 100%;
height: 100%;
position: relative;
}
.jimu-border-panel>.bar{
background-position: center center;
background-repeat: no-repeat;
cursor: pointer;
position: absolute;
top: 50%;
right: 0px;
width: 24px;
height: 60px;
}
.jimu-rtl .jimu-border-panel>.bar{
left: -24px;
right: auto;
-moz-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
-o-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-ms-filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2); /* for IE8 */
transform: rotate(180deg);
}
.jimu-border-panel>.bar.max{
background-image: url(images/close_default.png);
}
.jimu-border-panel>.bar.max:hover{
background-image: url(images/close_hover.png);
}
.jimu-border-panel>.bar.min{
background-image: url(images/open_default.png);
}
.jimu-border-panel>.bar.min:hover{
background-image: url(images/open_hover.png);
}
Any ideas would be very helpful.
Thanks!