编辑文件 - colorpicker.js

✏️ 正在编辑: colorpicker.js

路径: /usr/share/zabbix/js/colorpicker.js
提示: 您可以编辑任何文件（包括二进制文件），但请注意不当修改可能导致文件损坏。

/*
** Zabbix
** Copyright (C) 2001-2021 Zabbix SIA
**
** This program is free software; you can redistribute it and/or modify
** it under the terms of the GNU General Public License as published by
** the Free Software Foundation; either version 2 of the License, or
** (at your option) any later version.
**
** This program is distributed in the hope that it will be useful,
** but WITHOUT ANY WARRANTY; without even the implied warranty of
** MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
** GNU General Public License for more details.
**
** You should have received a copy of the GNU General Public License
** along with this program; if not, write to the Free Software
** Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
**/

// If colorpicker is located in dialog, use dialog as a frame.
			if (overlay.parents('.overlay-dialogue').length) {
				frame_dims.left = dialog.offset().left;
				frame_dims.top = dialog.offset().top;
				frame_dims.bottom = dialog.outerHeight() + frame_dims.top;
				frame_dims.right = dialog.outerWidth() + frame_dims.left;
			}

// Make sure that overlay is inside frame.
			if (top + overlay.outerHeight() + min_outline > frame_dims.bottom) {
				top = frame_dims.bottom - overlay.outerHeight() - min_outline;
			}

if (left + overlay.outerWidth() + min_outline > frame_dims.right) {
				left = frame_dims.right - overlay.outerWidth() - min_outline;
			}

return {
				top: top - frame_dims.top,
				left: left - frame_dims.left
			};
		},
		methods = {
			/**
			 * Initialization of colorpicker overlay.
			 *
			 * @param object         options
			 * @param array          options.palette   Array of arrays. Every nested array contains hex color for one
			 *                                         cell.
			 * @param string|object  options.appendTo  Target element where overlay should be appended.
			 * @param function       options.onUpdate  Callback function to execute once color has changed.
			 */
			init: function(options) {
				var close = $('<button type="button" class="overlay-close-btn" title="' + t('S_CLOSE') + '"/>')
					.click(methods.hide);
				options = $.extend(defaults, options || {});
				overlay = $('<div class="overlay-dialogue" id="color_picker"/>')
					.append(close)
					.append(
					$.map(options.palette, function(colors) {
						return $('<div class="color-picker"/>').append(
							$.map(colors, function(color) {
								return $('<div style="background: #%s" title="#%s"/>'.replace(/%s/g, color));
							})
						);
					})
					)
					.on('click', '.color-picker div', setColorHandler);

overlay.appendTo($(options.appendTo));

methods.hide();
			},
			/**
			 * Hide colorpicker overlay.
			 */
			hide: function() {
				overlay.css({
					'zIndex': 1000,
					'display': 'none',
					'left': '-' + (overlay.width() ? overlay.width() : 100) + 'px'
				});
				colorbox = null;
				input = null;
				removeFromOverlaysStack('color_picker');
			},
			/**
			 * Show colorpicker for specific element.
			 *
			 * @param string id       Id of input element which will be associated with opened colorpicker instance.
			 * @param object target   jQuery element (colorbox) which triggered show action.
			 */
			show: function(id, target) {
				input = $('#' + id);
				colorbox = $('#lbl_' + id);

if (input.is(':disabled,[readonly]')) {
					return;
				}

var pos = getOverlayPosition(id);

overlay.css({
					'left': pos.left + 'px',
					'top': pos.top + 'px',
					'display': 'block'
				});

addToOverlaysStack('color_picker', target, 'color_picker');

Overlay.prototype.recoverFocus.call({'$dialogue': overlay});
				Overlay.prototype.containFocus.call({'$dialogue': overlay});
			},
			/**
			 * Set color as background color value of colorbox and as value for input.
			 * Hides opened colorpicker overlay.
			 *
			 * @param string color    Desired hex color.
			 */
			set_color: function(color) {
				var color = $.trim(color).toUpperCase(),
					background = /[0-9A-F]{6}/.test(color) ? '#' + color : '';

colorbox.css({
					'color': background,
					'background': background,
				})
				.attr('title', background);

input.val(color);
			},
			/**
			 * Set desired color to input element and colorbox associated with input element.
			 *
			 * @param string id       Id of input element.
			 * @param string color    Hex color value.
			 */
			set_color_by_id: function(id, color) {
				colorbox = $('#lbl_' + id);
				input = $('#' + id);
				methods.set_color(color);
			}
		};

$.colorpicker = function(method) {
		if (methods[method]) {
			if (!overlay) {
				methods.init();
			}

return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
		}
		else if (typeof method === 'object' || !method) {
			return methods.init.apply(this, arguments);
		}
		else {
			$.error('Invalid method "' +  method + '".');
		}
	}

$.fn.colorpicker = function(options) {
		/**
		 * Initialize colorpicker overlay if it is not initialized.
		 */
		if (!overlay || !$('#color_picker').length) {
			methods.init(options);
		}

return this.each(function(_, element) {
			var id = $(element).attr('id'),
				callback = (options && 'onUpdate' in options) ? options.onUpdate : null;
			if ($('#lbl_' + id).length) {
				// Prevent multiple initialization on same element.
				return;
			}

$('<div/>').attr({
				'id': 'lbl_' + id,
				'title': element.value ? '#' + element.value : ''
			}).click(function(event) {
				/**
				 * Prefix 'lbl_' should be striped out of colorbox id attribute value to get id of associated
				 * input element.
				 */
				methods.show($(this).attr('id').substr(4), event);
			}).insertAfter(element);
			$(element).change(function() {
				/**
				 * Id attribute value of input element can be changed dynamically, for example when row with colorpicker
				 * is sorted in graph configuration form.
				 */
				methods.set_color_by_id($(element).attr('id'), this.value);
				callback && callback.call(element, this.value);
			});

methods.set_color_by_id(id, element.value);
		});
	}
})(jQuery);

← 返回文件管理器