///////////////////////////////////////////////////////////////////////////
|
// Copyright © 2014 - 2018 Esri. All Rights Reserved.
|
//
|
// Licensed under the Apache License Version 2.0 (the "License");
|
// you may not use this file except in compliance with the License.
|
// You may obtain a copy of the License at
|
//
|
// http://www.apache.org/licenses/LICENSE-2.0
|
//
|
// Unless required by applicable law or agreed to in writing, software
|
// distributed under the License is distributed on an "AS IS" BASIS,
|
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
// See the License for the specific language governing permissions and
|
// limitations under the License.
|
///////////////////////////////////////////////////////////////////////////
|
|
define(['dojo/_base/declare',
|
'dijit/_WidgetBase',
|
'dijit/_TemplatedMixin',
|
'dojo/_base/lang',
|
'dojo/_base/html',
|
'dojo/on',
|
'dojo/_base/Color',
|
'dijit/TooltipDialog',
|
'dijit/popup',
|
"jimu/dijit/ColorSelector"
|
],
|
function(declare, _WidgetBase, _TemplatedMixin, lang, html, on, Color, TooltipDialog,
|
dojoPopup, ColorSelector) {
|
return declare([_WidgetBase, _TemplatedMixin], {
|
baseClass: 'jimu-color-picker-btn',
|
declaredClass: 'jimu.dijit.ColorPickerButton',
|
templateString: '<div>' +
|
'<div class="color-node" data-dojo-attach-point="colorNode"></div>' +
|
'<div class="seperator"></div>' +
|
'<div class="action-node" data-dojo-attach-point="actionNode"></div>' +
|
'</div>',
|
_isTooltipDialogOpened: false,
|
|
//options:
|
color: null, //dojo.Color or hex string
|
showHex: true,
|
showHsv: true,
|
showRgb: true,
|
ensureMode: false,
|
|
//public methods:
|
//setColor
|
//getColor
|
//isPartOfPopup
|
|
//events:
|
//change
|
|
postMixInProperties: function() {
|
this.nls = window.jimuNls.common;
|
},
|
|
postCreate: function() {
|
this.inherited(arguments);
|
if (this.color) {
|
if (!(this.color instanceof Color)) {
|
this.color = new Color(this.color);
|
}
|
} else {
|
this.color = new Color('#ccc');
|
}
|
|
html.setStyle(this.colorNode, 'backgroundColor', this.color.toHex());
|
this.colorNode.title = this.color.toHex();
|
|
if (this.showLabel) {
|
this._changeLabel(this.color);
|
}
|
this._createTooltipDialog(this.domNode);
|
this._hideTooltipDialog();
|
|
this.own(on(this.colorNode, 'click', lang.hitch(this, this._onNodeClick)));
|
this.own(on(this.actionNode, 'click', lang.hitch(this, this._onNodeClick)));
|
|
this.own(on(document.body, 'click', lang.hitch(this, function(event) {
|
var target = event.target || event.srcElement;
|
if (!this.isPartOfPopup(target)) {
|
this._hideTooltipDialog();
|
}
|
})));
|
},
|
|
_onNodeClick: function(event) {
|
event.stopPropagation();
|
event.preventDefault();
|
|
if (this._isTooltipDialogOpened) {
|
this._hideTooltipDialog();
|
} else {
|
this._showTooltipDialog();
|
}
|
},
|
|
destroy: function() {
|
dojoPopup.close(this.tooltipDialog);
|
this.picker.destroy();
|
this.tooltipDialog.destroy();
|
this.inherited(arguments);
|
},
|
|
isPartOfPopup: function(target) {
|
var node = this.tooltipDialog.domNode;
|
var isInternal = target === node || html.isDescendant(target, node);
|
return isInternal;
|
},
|
|
hideTooltipDialog: function() {
|
this._hideTooltipDialog();
|
},
|
|
_showTooltipDialog: function() {
|
dojoPopup.open({
|
parent: this.getParent(),
|
popup: this.tooltipDialog,
|
around: this.domNode
|
});
|
this._isTooltipDialogOpened = true;
|
},
|
|
_hideTooltipDialog: function() {
|
dojoPopup.close(this.tooltipDialog);
|
this._isTooltipDialogOpened = false;
|
},
|
|
_createTooltipDialog: function() {
|
var ttdContent = html.create("div");
|
this.tooltipDialog = new TooltipDialog({
|
content: ttdContent
|
});
|
html.addClass(this.tooltipDialog.domNode, 'jimu-color-picker-dialog');
|
this.picker = new ColorSelector({
|
showHex: this.showHex,
|
showRgb: this.showRgb,
|
showHsv: this.showHsv,
|
value: this.color.toHex(),
|
onChange: lang.hitch(this, function(newHex) {
|
if (!this.ensureMode) {
|
var color = new Color(newHex);
|
this.setColor(color);
|
}
|
})
|
});
|
this.picker.placeAt(ttdContent);
|
this.picker.startup();
|
|
if (this.ensureMode) {
|
var cancel = html.create('div', {
|
'class': 'jimu-btn jimu-btn-vacation jimu-float-trailing jimu-leading-margin1',
|
'title': this.nls.cancel,
|
'innerHTML': this.nls.cancel
|
}, ttdContent);
|
this.own(on(cancel, 'click', lang.hitch(this, function() {
|
this._hideTooltipDialog();
|
})));
|
|
var ok = html.create('div', {
|
'class': 'jimu-btn jimu-float-trailing jimu-leading-margin1',
|
'title': this.nls.ok,
|
'innerHTML': this.nls.ok
|
}, ttdContent);
|
this.own(on(ok, 'click', lang.hitch(this, function() {
|
var c = this.picker.get('value');
|
this.setColor(new Color(c));
|
this._hideTooltipDialog();
|
})));
|
|
var apply = html.create('div', {
|
'class': 'jimu-btn jimu-float-trailing jimu-leading-margin1',
|
'title': this.nls.apply,
|
'innerHTML': this.nls.apply
|
}, ttdContent);
|
this.own(on(apply, 'click', lang.hitch(this, function() {
|
var c = this.picker.get('value');
|
this.setColor(new Color(c));
|
})));
|
}
|
},
|
|
setColor: function(newColor) {
|
if (!(newColor instanceof Color)) {
|
return;
|
}
|
var oldColor = this.color;
|
var oldHex = '';
|
if (oldColor) {
|
oldHex = oldColor.toHex();
|
}
|
var newHex = newColor.toHex();
|
this.color = newColor;
|
html.setStyle(this.colorNode, 'backgroundColor', newHex);
|
if (oldHex !== newHex) {
|
this.picker.set('value', newHex);
|
this.onChange(new Color(newHex));
|
}
|
},
|
|
getColor: function() {
|
return this.color;
|
},
|
|
onChange: function(newColor) {
|
/*jshint unused: false*/
|
}
|
});
|
});
|
