v4/en/vendors/dt/0.0.1/ui/dialog.js - echarts-website - Git at Google

 /**
  * @file Dialogs.
  * @author sushuang(sushuang@baidu.com)
  */
 define(function (require) {

     var $ = require('jquery');
     var lib = require('../lib');
     var config = require('../config');
     var WinPanel = require('./WinPanel');

     // Constant
     var TPL_TARGET = 'dialogPanel';
     var SELECTOR_CON = '.dtui-con';
     var CSS_BTN_PREFIX = 'dtui-dlg-btn-';
     var CSS_BTN_COMMON = 'dtui-btn';
     var CLOSE_BUTTON_VALUE = '';

     // instance hash
     var instances = {};

     /**
      * 使用方法1（自动有“确定”、“取消”按钮）：
      * dialog.confirm({
      *     content: '这是显示文字'
      *     encodeHTML: true, // 缺省是true，如果需要显示原生html，则设置为false
      *     onYes: function, // 可缺省
      *     onCancel: function,  // 可缺省
      *     textYes: '', // 缺省为"确定"
      *     textCancel: '' // 缺省为"取消"
      * });
      *
      * 使用方法2（只有“确定”按钮）：
      * dialog.alert({
      *     content: '这是显示文字'
      *     encodeHTML: true, // 缺省是true，如果需要显示原生html，则设置为false
      *     onYes: function, // 可缺省
      *     textYes: '' // 缺省为"确定"
      * });
      *
      * 使用方法3（有“是”、“否”、“取消”三个按钮）
      * dialog.ask({
      *     content: '这是显示文字'
      *     encodeHTML: true, // 缺省是true，如果需要显示原生html，则设置为false
      *     onYes: function, // 可缺省
      *     onNo: function, // 可缺省
      *     onCancel: function // 可缺省
      *     textYes: '', // 缺省为"是"
      *     textNo: '', // 缺省为"否"
      *     textCancel: '' // 缺省为"取消"
      * });
      *
      * 使用方法0（原生）：
      * dialog.create({
      *     key: 'myKey', // 自己定义，每个key对应一个Dialog实例
      *     buttons: [
      *         {value: 'save', text: '保存' },
      *         {value: 'nosave', text: '不保存' },
      *         {value: 'cancel', text: '取消' }
      *     ] // 其中value值会放在按钮的css上（以dtm-dlg-btn-为前缀），text值会被自动encodeHTML
      * });
      * dialog.open({
      *     key: 'myKey',
      *     content: '这是显示的文字',
      *     encodeHTML: true, // 缺省是true，如果需要显示原生html，则设置为false
      *     buttonHandler: function,
      *         第一个参数是 button的value。
      *         如果第一个参数为空字符串''，表示点击了右上角的“叉子”。
      *     buttonText: {// 改变button的text，如果需要的话
      *         btnValue: newText
      *     }
      * });
      *
      * 使用方法-1（预定义模板）：
      * 先创建实例（持久存在）：
      * dialog.create({
      *     key: 'myKey', // 自己定义，每个key对应一个Dialog实例
      *     tplTarget: 'someTplTarget', // 模板target名
      *     afterInit: function ($content) { ..在此进行dom事件绑定等逻辑.. }
      *     dialogType: 'alert' // 只能是 'confirm' 'alert' 'ask'
      * });
      * 再打开面板：
      * dialog.alert({
      *     key: 'myKey',
      *     afterShow: function ($content, options) { ..在此进行内容更新逻辑.. }
      *     onYes: function, // 可缺省
      *     textYes: '' // 缺省为"确定"
      * });
      * 'confirm' 和 'ask' 类同。
      *
      * 所有buttonHandler，如果返回false，则表示什么也不做，dialog不会关闭。
      *
      * 主动关闭dialog：
      *     dialog.close('confirm');
      *     dialog.close('alert');
      *     dialog.close('ask');
      */
     var dialog = {

         /**
          * @public
          * @param {Object} viewModel
          * @param {string} viewModel.key
          * @param {string=} viewModel.tplTarget
          * @param {string=} viewModel.dialogType 只能是'confirm' 'alert' 'ask'
          * @param {Function=} viewModel.afterInit function ($content) { ... }
          * @param {Array.<Object>=} viewModel.buttons
          */
         create: function (viewModel) {
             lib.assert(
                 viewModel.key && !instances[viewModel.key],
                 'Key "' + viewModel.key + '" has been taken, change a new key please.'
             );
             var vm = lib.assign({}, viewModel, null, ['tplTarget', 'dialogType']);
             vm.subTplTarget = viewModel.tplTarget;

             if (viewModel.dialogType) {
                 lib.assert(
                     btnStyles[viewModel.dialogType],
                     'can only be \'confirm\', \'alert\', \'ask\'.'
                 );
                 if (!vm.buttons) {
                     vm.buttons = btnStyles[viewModel.dialogType]();
                 }
             }

             instances[viewModel.key] = new Dialog(vm);
         },

         /**
          * @public
          * @param {Object} options
          * @param {string} options.key
          */
         open: function (options) {
             instances[options.key].open(options);
         },

         /**
          * @public
          * @param {string} key
          */
         close: function (key) {
             instances[key].close();
         },

         /**
          * @public
          */
         confirm: function (options) {
             var mapping = {
                 confirm: options.onYes,
                 cancel: options.onCancel
             };
             mapping[CLOSE_BUTTON_VALUE] = options.onCancel;

             var buttonText = {
                 confirm: options.textYes,
                 cancel: options.textCancel
             };
             var key = options.key != null ? options.key : 'confirm';

             doOpen(key, options, mapping, buttonText);
         },

         /**
          * @public
          */
         alert: function (options) {
             var mapping = {confirm: options.onYes};
             var buttonText = {confirm: options.textYes};
             var key = options.key != null ? options.key : 'alert';

             doOpen(key, options, mapping, buttonText);
         },

         /**
          * @public
          */
         ask: function (options) {
             var mapping = {
                 yes: options.onYes,
                 no: options.onNo,
                 cancel: options.onCancel
             };
             mapping[CLOSE_BUTTON_VALUE] = options.onCancel;

             var buttonText = {
                 yes: options.textYes,
                 no: options.textNo,
                 cancel: options.textCancel
             };
             var key = options.key != null ? options.key : 'ask';

             doOpen(key, options, mapping, buttonText);
         }

     };

     /**
      * @inner
      */
     function doOpen(key, options, mapping, buttonText) {
         dialog.open({
             key: key,
             content: options.content,
             encodeHTML: options.encodeHTML,
             afterShow: options.afterShow,
             buttonHandler: function (value, $subContent) {
                 var handler = mapping[value];
                 return handler ? handler.call(this, $subContent) : null;
             },
             buttonText: buttonText
         });
     }

     /**
      * @class
      * @extends wave/app/WinPanel
      */
     var Dialog = WinPanel.extend({

         _define: {
             tpl: require('tpl!./ui.tpl.html'),
             viewModel: function () {
                 return {
                     key: null,
                     buttons: [],
                     subTplTarget: null,
                     afterInit: null
                 };
             }
         },

         /**
          * @override
          */
         _afterShow: function ($content, options) {
             // 基本结构只初始化一次
             if (!this._contentInitialized) {
                 this._contentInitialized = true;
                 initContent.call(this, $content);
             }

             var $subContent = $content.find(SELECTOR_CON);

             // 填入信息内容
             if (options.content != null) {
                 $subContent[0].innerHTML = options.encodeHTML === false
                     ? options.content : lib.encodeHTML(options.content);
             }

             // btn的text更新，如果需要的话
             updateButtonText.call(this, options.buttonText);

             // 挂监听
             this._buttonHandler = options.buttonHandler;

             if (options.afterShow) {
                 options.afterShow.call(this, $subContent, options);
             }
         },

         /**
          * @override
          */
         _afterHide: function () {
             this._buttonHandler = null;
         }
     });

     /**
      * 初始化内容
      *
      * @inner
      */
     function initContent($content) {
         var viewModel = this._viewModel();
         var btnViewModels = viewModel.btnViewModels = [];
         var btns = viewModel.buttons || [];

         // 构造按钮的viewModel
         for (var i = 0, len = btns.length; i < len; i++) {
             btnViewModels.push({
                 text: lib.ob(btns[i].text),
                 css: [CSS_BTN_COMMON, CSS_BTN_PREFIX + btns[i].value]
             });
         }

         // 渲染
         this._renderTpl(TPL_TARGET, null, $content);
         var $subContent = $content.find(SELECTOR_CON);
         if (viewModel.subTplTarget) {
             this._renderTpl(viewModel.subTplTarget, null, $subContent);
         }
         this._constructSub($content);

         // 按钮的click事件
         for (var i = 0, len = btns.length; i < len; i++) {
             this._sub('btns.' + i).on(
                 'click',
                 $.proxy(clickHandler, this, btns[i].value)
             );
         }

         // 空字符串''表示点击了关闭按钮
         this._onCloseBtnClick = $.proxy(clickHandler, this, CLOSE_BUTTON_VALUE);

         if (viewModel.afterInit) {
             viewModel.afterInit($subContent);
         }

         function clickHandler(value) {
             if (!this._buttonHandler || this._buttonHandler(value, $subContent) !== false) {
                 this.close(); // 默认任何按钮click都会关闭Dialog
             }
         }
     }

     function updateButtonText(buttonText) {
         if (!buttonText) {
             return;
         }
         var btns = this._viewModel().buttons || [];
         for (var i = 0, len = btns.length; i < len; i++) {
             var txt = buttonText[btns[i].value];
             if (txt != null) {
                 this._sub('btns.' + i).viewModel('text')(txt);
             }
         }
     }

     var btnStyles = {
         confirm: function () {
             return [
                 {value: 'confirm', text: config('langDialogConfirm')},
                 {value: 'cancel', text: config('langDialogCancel')}
             ];
         },
         alert: function () {
             return [
                 {value: 'confirm', text: config('langDialogConfirm')}
             ];
         },
         ask: function () {
             return [
                 {value: 'yes', text: config('langDialogYes')},
                 {value: 'no', text: config('langDialogNo')},
                 {value: 'cancel', text: config('langDialogCancel')}
             ];
         }
     };

     // 初始化默认实例
     dialog.create({
         key: 'confirm',
         buttons: btnStyles.confirm()
     });

     dialog.create({
         key: 'alert',
         buttons: btnStyles.alert()
     });

     dialog.create({
         key: 'ask',
         buttons: btnStyles.ask()
     });

     return dialog;
 });
	/**
	* @file Dialogs.
	* @author sushuang(sushuang@baidu.com)
	*/
	define(function (require) {

	var $ = require('jquery');
	var lib = require('../lib');
	var config = require('../config');
	var WinPanel = require('./WinPanel');

	// Constant
	var TPL_TARGET = 'dialogPanel';
	var SELECTOR_CON = '.dtui-con';
	var CSS_BTN_PREFIX = 'dtui-dlg-btn-';
	var CSS_BTN_COMMON = 'dtui-btn';
	var CLOSE_BUTTON_VALUE = '';

	// instance hash
	var instances = {};

	/**
	* 使用方法1（自动有“确定”、“取消”按钮）：
	* dialog.confirm({
	* content: '这是显示文字'
	* encodeHTML: true, // 缺省是true，如果需要显示原生html，则设置为false
	* onYes: function, // 可缺省
	* onCancel: function, // 可缺省
	* textYes: '', // 缺省为"确定"
	* textCancel: '' // 缺省为"取消"
	* });
	*
	* 使用方法2（只有“确定”按钮）：
	* dialog.alert({
	* content: '这是显示文字'
	* encodeHTML: true, // 缺省是true，如果需要显示原生html，则设置为false
	* onYes: function, // 可缺省
	* textYes: '' // 缺省为"确定"
	* });
	*
	* 使用方法3（有“是”、“否”、“取消”三个按钮）
	* dialog.ask({
	* content: '这是显示文字'
	* encodeHTML: true, // 缺省是true，如果需要显示原生html，则设置为false
	* onYes: function, // 可缺省
	* onNo: function, // 可缺省
	* onCancel: function // 可缺省
	* textYes: '', // 缺省为"是"
	* textNo: '', // 缺省为"否"
	* textCancel: '' // 缺省为"取消"
	* });
	*
	* 使用方法0（原生）：
	* dialog.create({
	* key: 'myKey', // 自己定义，每个key对应一个Dialog实例
	* buttons: [
	* {value: 'save', text: '保存' },
	* {value: 'nosave', text: '不保存' },
	* {value: 'cancel', text: '取消' }
	* ] // 其中value值会放在按钮的css上（以dtm-dlg-btn-为前缀），text值会被自动encodeHTML
	* });
	* dialog.open({
	* key: 'myKey',
	* content: '这是显示的文字',
	* encodeHTML: true, // 缺省是true，如果需要显示原生html，则设置为false
	* buttonHandler: function,
	* 第一个参数是 button的value。
	* 如果第一个参数为空字符串''，表示点击了右上角的“叉子”。
	* buttonText: {// 改变button的text，如果需要的话
	* btnValue: newText
	* }
	* });
	*
	* 使用方法-1（预定义模板）：
	* 先创建实例（持久存在）：
	* dialog.create({
	* key: 'myKey', // 自己定义，每个key对应一个Dialog实例
	* tplTarget: 'someTplTarget', // 模板target名
	* afterInit: function ($content) { ..在此进行dom事件绑定等逻辑.. }
	* dialogType: 'alert' // 只能是 'confirm' 'alert' 'ask'
	* });
	* 再打开面板：
	* dialog.alert({
	* key: 'myKey',
	* afterShow: function ($content, options) { ..在此进行内容更新逻辑.. }
	* onYes: function, // 可缺省
	* textYes: '' // 缺省为"确定"
	* });
	* 'confirm' 和 'ask' 类同。
	*
	* 所有buttonHandler，如果返回false，则表示什么也不做，dialog不会关闭。
	*
	* 主动关闭dialog：
	* dialog.close('confirm');
	* dialog.close('alert');
	* dialog.close('ask');
	*/
	var dialog = {

	/**
	* @public
	* @param {Object} viewModel
	* @param {string} viewModel.key
	* @param {string=} viewModel.tplTarget
	* @param {string=} viewModel.dialogType 只能是'confirm' 'alert' 'ask'
	* @param {Function=} viewModel.afterInit function ($content) { ... }
	* @param {Array.<Object>=} viewModel.buttons
	*/
	create: function (viewModel) {
	lib.assert(
	viewModel.key && !instances[viewModel.key],
	'Key "' + viewModel.key + '" has been taken, change a new key please.'
	);
	var vm = lib.assign({}, viewModel, null, ['tplTarget', 'dialogType']);
	vm.subTplTarget = viewModel.tplTarget;

	if (viewModel.dialogType) {
	lib.assert(
	btnStyles[viewModel.dialogType],
	'can only be \'confirm\', \'alert\', \'ask\'.'
	);
	if (!vm.buttons) {
	vm.buttons = btnStyles[viewModel.dialogType]();
	}
	}

	instances[viewModel.key] = new Dialog(vm);
	},

	/**
	* @public
	* @param {Object} options
	* @param {string} options.key
	*/
	open: function (options) {
	instances[options.key].open(options);
	},

	/**
	* @public
	* @param {string} key
	*/
	close: function (key) {
	instances[key].close();
	},

	/**
	* @public
	*/
	confirm: function (options) {
	var mapping = {
	confirm: options.onYes,
	cancel: options.onCancel
	};
	mapping[CLOSE_BUTTON_VALUE] = options.onCancel;

	var buttonText = {
	confirm: options.textYes,
	cancel: options.textCancel
	};
	var key = options.key != null ? options.key : 'confirm';

	doOpen(key, options, mapping, buttonText);
	},

	/**
	* @public
	*/
	alert: function (options) {
	var mapping = {confirm: options.onYes};
	var buttonText = {confirm: options.textYes};
	var key = options.key != null ? options.key : 'alert';

	doOpen(key, options, mapping, buttonText);
	},

	/**
	* @public
	*/
	ask: function (options) {
	var mapping = {
	yes: options.onYes,
	no: options.onNo,
	cancel: options.onCancel
	};
	mapping[CLOSE_BUTTON_VALUE] = options.onCancel;

	var buttonText = {
	yes: options.textYes,
	no: options.textNo,
	cancel: options.textCancel
	};
	var key = options.key != null ? options.key : 'ask';

	doOpen(key, options, mapping, buttonText);
	}

	};

	/**
	* @inner
	*/
	function doOpen(key, options, mapping, buttonText) {
	dialog.open({
	key: key,
	content: options.content,
	encodeHTML: options.encodeHTML,
	afterShow: options.afterShow,
	buttonHandler: function (value, $subContent) {
	var handler = mapping[value];
	return handler ? handler.call(this, $subContent) : null;
	},
	buttonText: buttonText
	});
	}

	/**
	* @class
	* @extends wave/app/WinPanel
	*/
	var Dialog = WinPanel.extend({

	_define: {
	tpl: require('tpl!./ui.tpl.html'),
	viewModel: function () {
	return {
	key: null,
	buttons: [],
	subTplTarget: null,
	afterInit: null
	};
	}
	},

	/**
	* @override
	*/
	_afterShow: function ($content, options) {
	// 基本结构只初始化一次
	if (!this._contentInitialized) {
	this._contentInitialized = true;
	initContent.call(this, $content);
	}

	var $subContent = $content.find(SELECTOR_CON);

	// 填入信息内容
	if (options.content != null) {
	$subContent[0].innerHTML = options.encodeHTML === false
	? options.content : lib.encodeHTML(options.content);
	}

	// btn的text更新，如果需要的话
	updateButtonText.call(this, options.buttonText);

	// 挂监听
	this._buttonHandler = options.buttonHandler;

	if (options.afterShow) {
	options.afterShow.call(this, $subContent, options);
	}
	},

	/**
	* @override
	*/
	_afterHide: function () {
	this._buttonHandler = null;
	}
	});

	/**
	* 初始化内容
	*
	* @inner
	*/
	function initContent($content) {
	var viewModel = this._viewModel();
	var btnViewModels = viewModel.btnViewModels = [];
	var btns = viewModel.buttons \|\| [];

	// 构造按钮的viewModel
	for (var i = 0, len = btns.length; i < len; i++) {
	btnViewModels.push({
	text: lib.ob(btns[i].text),
	css: [CSS_BTN_COMMON, CSS_BTN_PREFIX + btns[i].value]
	});
	}

	// 渲染
	this._renderTpl(TPL_TARGET, null, $content);
	var $subContent = $content.find(SELECTOR_CON);
	if (viewModel.subTplTarget) {
	this._renderTpl(viewModel.subTplTarget, null, $subContent);
	}
	this._constructSub($content);

	// 按钮的click事件
	for (var i = 0, len = btns.length; i < len; i++) {
	this._sub('btns.' + i).on(
	'click',
	$.proxy(clickHandler, this, btns[i].value)
	);
	}

	// 空字符串''表示点击了关闭按钮
	this._onCloseBtnClick = $.proxy(clickHandler, this, CLOSE_BUTTON_VALUE);

	if (viewModel.afterInit) {
	viewModel.afterInit($subContent);
	}

	function clickHandler(value) {
	if (!this._buttonHandler \|\| this._buttonHandler(value, $subContent) !== false) {
	this.close(); // 默认任何按钮click都会关闭Dialog
	}
	}
	}

	function updateButtonText(buttonText) {
	if (!buttonText) {
	return;
	}
	var btns = this._viewModel().buttons \|\| [];
	for (var i = 0, len = btns.length; i < len; i++) {
	var txt = buttonText[btns[i].value];
	if (txt != null) {
	this._sub('btns.' + i).viewModel('text')(txt);
	}
	}
	}

	var btnStyles = {
	confirm: function () {
	return [
	{value: 'confirm', text: config('langDialogConfirm')},
	{value: 'cancel', text: config('langDialogCancel')}
	];
	},
	alert: function () {
	return [
	{value: 'confirm', text: config('langDialogConfirm')}
	];
	},
	ask: function () {
	return [
	{value: 'yes', text: config('langDialogYes')},
	{value: 'no', text: config('langDialogNo')},
	{value: 'cancel', text: config('langDialogCancel')}
	];
	}
	};

	// 初始化默认实例
	dialog.create({
	key: 'confirm',
	buttons: btnStyles.confirm()
	});

	dialog.create({
	key: 'alert',
	buttons: btnStyles.alert()
	});

	dialog.create({
	key: 'ask',
	buttons: btnStyles.ask()
	});

	return dialog;
	});