Authored by 张丽霞

dialog文件移到公用部分

  1 +/*
  2 + * @Description: dialog
  3 + * @Time: 2015/11/18
  4 + * @author: chenglong.wang
  5 + */
  6 +
  7 +var $ = require('yoho-jquery'),
  8 + Handlebars = require('yoho-handlebars'),
  9 + Hammer = require('yoho-hammer');
  10 +
  11 +var $dialogWrapper,
  12 + dialogTpl,
  13 + dialogTemplate;
  14 +
  15 +function getInstance() {
  16 + if (dialogTpl === undefined) {
  17 + dialogTpl = '<div id="dialog-wrapper" class="dialog-wrapper">' +
  18 + '<div class="dialog-box">' +
  19 + '{{# hasHeader}}' +
  20 + '{{/ hasHeader}}' +
  21 + '<div class="dialog-content">{{dialogText}}</div>' +
  22 + '{{# hasFooter}}' +
  23 + '<div class="dialog-footer">' +
  24 + '{{# leftBtnText}}' +
  25 + '<span class="dialog-left-btn tap-hightlight">{{.}}</span>' +
  26 + '{{/ leftBtnText}}' +
  27 + '{{# rightBtnText}}' +
  28 + '<span class="dialog-right-btn tap-hightlight">{{.}}</span>' +
  29 + '{{/ rightBtnText}}' +
  30 + '</div>' +
  31 + '{{/ hasFooter}}' +
  32 + '</div>' +
  33 + '</div>';
  34 +
  35 + dialogTemplate = Handlebars.compile(dialogTpl);
  36 + }
  37 + return dialogTemplate;
  38 +}
  39 +
  40 +// fullWithBtn是供详情页获取限购码使用的特殊参数
  41 +exports.showDialog = function(data, callback, callbackForLeft, fullWithBtn) {
  42 +
  43 + var dialogStr = dialogTemplate(data),
  44 + $dialogBox,
  45 + defaultHideDuraton,
  46 + dialogWrapperHammer;
  47 +
  48 + dialogTemplate = getInstance();
  49 + $('.dialog-wrapper').remove();
  50 +
  51 + $('body').append($(dialogStr));
  52 +
  53 + $dialogBox = $('.dialog-box');
  54 + $dialogWrapper = $('.dialog-wrapper');
  55 +
  56 +
  57 + dialogWrapperHammer = new Hammer(document.getElementById('dialog-wrapper'));
  58 +
  59 + // 显示
  60 + if (data.fast) {
  61 + $dialogWrapper.css({
  62 + display: 'block'
  63 + });
  64 + } else {
  65 + $dialogWrapper.fadeIn();
  66 + }
  67 +
  68 + if (fullWithBtn) {
  69 + $('.dialog-wrapper .dialog-footer > span').css('width', '100%');
  70 + $('.dialog-wrapper .dialog-content').css({
  71 + 'padding-left': '1.85rem',
  72 + 'padding-right': '1.85rem'
  73 + });
  74 + $dialogWrapper.css('z-index', '10');
  75 + }
  76 +
  77 + $dialogBox.css({
  78 + top: '50%',
  79 + marginTop: -($dialogBox.height() / 2)
  80 + });
  81 +
  82 + // 隐藏
  83 + if (data.autoHide) {
  84 + defaultHideDuraton = 1000;
  85 + if (data.autoHide > 1) {
  86 + defaultHideDuraton = data.autoHide;
  87 + }
  88 + setTimeout(function() {
  89 + $dialogWrapper.fadeOut();
  90 + }, defaultHideDuraton);
  91 + }
  92 +
  93 + // 禁止在dialog上可以上下滚动
  94 + $dialogWrapper.on('touchmove', function() {
  95 + return false;
  96 + });
  97 +
  98 + dialogWrapperHammer.on('tap', function(event) {
  99 +
  100 + if ($(event.target).hasClass('dialog-left-btn')) {
  101 + if (typeof callbackForLeft === 'function') {
  102 + callbackForLeft();
  103 + }
  104 + $dialogWrapper.fadeOut();
  105 + } else if ($(event.target).hasClass('dialog-right-btn')) {
  106 + callback;
  107 + }
  108 +
  109 + // 防止出现点透问题
  110 + event.preventDefault();
  111 + event.srcEvent.stopPropagation();
  112 + });
  113 +};
  114 +
  115 +exports.hideDialog = function() {
  116 + $('.dialog-wrapper').remove();
  117 +};