diff --git a/admin/data/menu.json b/admin/data/menu.json index 232b0064b687561876c9201493dc01bb1fca960f..3a20b6e414bc033779d9682016af1608292b8275 100644 --- a/admin/data/menu.json +++ b/admin/data/menu.json @@ -256,6 +256,13 @@ "type": 1, "openType": "_iframe", "href": "view/document/fullscreen.html" + }, + { + "id": 2048, + "title": "汽泡组件", + "type": 1, + "openType": "_iframe", + "href": "view/document/popover.html" } ] }] diff --git a/component/pear/css/module/fullscreen.css b/component/pear/css/module/fullscreen.css index c49058939706c580a8ebcff3c733a2dd948f9100..63f7775413c722efed1600a0cb236fd0e2302623 100644 --- a/component/pear/css/module/fullscreen.css +++ b/component/pear/css/module/fullscreen.css @@ -3,10 +3,20 @@ html:-moz-full-screen { } html:-webkit-full-screen { background: grey; + width: 100%; + height: 100%; } -html:fullscreen { +html:fullscreen{ background: grey; + width: 100% !important; + height: 100% !important; } + :not(:root):fullscreen::backdrop{ background:whitesmoke; +} + +.pear-full-screen { + width: 100% !important; + height: 100% !important; } \ No newline at end of file diff --git a/component/pear/css/module/layout.css b/component/pear/css/module/layout.css index beceeeac796210272a167ab1b5a512d29ebec6d8..9c4d082247860738a0b115c17b9798520bcec5e5 100644 --- a/component/pear/css/module/layout.css +++ b/component/pear/css/module/layout.css @@ -1,6 +1,7 @@ .pear-container { margin: 10px; background-color: whitesmoke; + width: calc(100vw - 20px); } body::-webkit-scrollbar { diff --git a/component/pear/css/module/popover.min.css b/component/pear/css/module/popover.min.css new file mode 100644 index 0000000000000000000000000000000000000000..453a50fad00258cd432ec6a0a58b3634c7335ffe --- /dev/null +++ b/component/pear/css/module/popover.min.css @@ -0,0 +1 @@ +.webui-popover-content{display:none}.webui-popover-rtl{direction:rtl;text-align:right}.webui-popover{position:absolute;top:0;left:0;z-index:9999;display:none;min-width:50px;min-height:32px;padding:1px;text-align:left;white-space:normal;background-color:#fff;background-clip:padding-box;border:1px solid #ccc;border:1px solid rgba(0,0,0,.2);border-radius:6px;-webkit-box-shadow:0 5px 10px rgba(0,0,0,.2);box-shadow:0 5px 10px rgba(0,0,0,.2)}.webui-popover.top,.webui-popover.top-left,.webui-popover.top-right{margin-top:-10px}.webui-popover.right,.webui-popover.right-top,.webui-popover.right-bottom{margin-left:10px}.webui-popover.bottom,.webui-popover.bottom-left,.webui-popover.bottom-right{margin-top:10px}.webui-popover.left,.webui-popover.left-top,.webui-popover.left-bottom{margin-left:-10px}.webui-popover.pop{-webkit-transform:scale(0.8);-o-transform:scale(0.8);transform:scale(0.8);-webkit-transition:transform .15s cubic-bezier(0.3,0,0,1.5);-o-transition:transform .15s cubic-bezier(0.3,0,0,1.5);transition:transform .15s cubic-bezier(0.3,0,0,1.5);opacity:0;filter:alpha(opacity=0)}.webui-popover.pop-out{-webkit-transition-property:"opacity,transform";-o-transition-property:"opacity,transform";transition-property:"opacity,transform";-webkit-transition:.15s linear;-o-transition:.15s linear;transition:.15s linear;opacity:0;filter:alpha(opacity=0)}.webui-popover.fade,.webui-popover.fade-out{-webkit-transition:opacity .15s linear;-o-transition:opacity .15s linear;transition:opacity .15s linear;opacity:0;filter:alpha(opacity=0)}.webui-popover.out{opacity:0;filter:alpha(opacity=0)}.webui-popover.in{-webkit-transform:none;-o-transform:none;transform:none;opacity:1;filter:alpha(opacity=100)}.webui-popover .webui-popover-content{padding:9px 14px;overflow:auto;display:block}.webui-popover .webui-popover-content>div:first-child{width:99%}.webui-popover-inner .close{font-family:arial;margin:8px 10px 0 0;float:right;font-size:16px;font-weight:700;line-height:16px;color:#000;text-shadow:0 1px 0 #fff;opacity:.2;filter:alpha(opacity=20);text-decoration:none}.webui-popover-inner .close:hover,.webui-popover-inner .close:focus{opacity:.5;filter:alpha(opacity=50)}.webui-popover-inner .close:after{content:"\00D7";width:.8em;height:.8em;padding:4px;position:relative}.webui-popover-title{padding:8px 14px;margin:0;font-size:14px;font-weight:700;line-height:18px;background-color:#fff;border-bottom:1px solid #f2f2f2;border-radius:5px 5px 0 0}.webui-popover-content{padding:9px 14px;overflow:auto;display:none}.webui-popover-inverse{background-color:#333;color:#eee}.webui-popover-inverse .webui-popover-title{background:#333;border-bottom:1px solid #3b3b3b;color:#eee}.webui-no-padding .webui-popover-content{padding:0}.webui-no-padding .list-group-item{border-right:none;border-left:none}.webui-no-padding .list-group-item:first-child{border-top:0}.webui-no-padding .list-group-item:last-child{border-bottom:0}.webui-popover>.webui-arrow,.webui-popover>.webui-arrow:after{position:absolute;display:block;width:0;height:0;border-color:transparent;border-style:solid}.webui-popover>.webui-arrow{border-width:11px}.webui-popover>.webui-arrow:after{border-width:10px;content:""}.webui-popover.top>.webui-arrow,.webui-popover.top-right>.webui-arrow,.webui-popover.top-left>.webui-arrow{bottom:-11px;left:50%;margin-left:-11px;border-top-color:#999;border-top-color:rgba(0,0,0,.25);border-bottom-width:0}.webui-popover.top>.webui-arrow:after,.webui-popover.top-right>.webui-arrow:after,.webui-popover.top-left>.webui-arrow:after{content:" ";bottom:1px;margin-left:-10px;border-top-color:#fff;border-bottom-width:0}.webui-popover.right>.webui-arrow,.webui-popover.right-top>.webui-arrow,.webui-popover.right-bottom>.webui-arrow{top:50%;left:-11px;margin-top:-11px;border-left-width:0;border-right-color:#999;border-right-color:rgba(0,0,0,.25)}.webui-popover.right>.webui-arrow:after,.webui-popover.right-top>.webui-arrow:after,.webui-popover.right-bottom>.webui-arrow:after{content:" ";left:1px;bottom:-10px;border-left-width:0;border-right-color:#fff}.webui-popover.bottom>.webui-arrow,.webui-popover.bottom-right>.webui-arrow,.webui-popover.bottom-left>.webui-arrow{top:-11px;left:50%;margin-left:-11px;border-bottom-color:#999;border-bottom-color:rgba(0,0,0,.25);border-top-width:0}.webui-popover.bottom>.webui-arrow:after,.webui-popover.bottom-right>.webui-arrow:after,.webui-popover.bottom-left>.webui-arrow:after{content:" ";top:1px;margin-left:-10px;border-bottom-color:#fff;border-top-width:0}.webui-popover.left>.webui-arrow,.webui-popover.left-top>.webui-arrow,.webui-popover.left-bottom>.webui-arrow{top:50%;right:-11px;margin-top:-11px;border-right-width:0;border-left-color:#999;border-left-color:rgba(0,0,0,.25)}.webui-popover.left>.webui-arrow:after,.webui-popover.left-top>.webui-arrow:after,.webui-popover.left-bottom>.webui-arrow:after{content:" ";right:1px;border-right-width:0;border-left-color:#fff;bottom:-10px}.webui-popover-inverse.top>.webui-arrow,.webui-popover-inverse.top-left>.webui-arrow,.webui-popover-inverse.top-right>.webui-arrow,.webui-popover-inverse.top>.webui-arrow:after,.webui-popover-inverse.top-left>.webui-arrow:after,.webui-popover-inverse.top-right>.webui-arrow:after{border-top-color:#333}.webui-popover-inverse.right>.webui-arrow,.webui-popover-inverse.right-top>.webui-arrow,.webui-popover-inverse.right-bottom>.webui-arrow,.webui-popover-inverse.right>.webui-arrow:after,.webui-popover-inverse.right-top>.webui-arrow:after,.webui-popover-inverse.right-bottom>.webui-arrow:after{border-right-color:#333}.webui-popover-inverse.bottom>.webui-arrow,.webui-popover-inverse.bottom-left>.webui-arrow,.webui-popover-inverse.bottom-right>.webui-arrow,.webui-popover-inverse.bottom>.webui-arrow:after,.webui-popover-inverse.bottom-left>.webui-arrow:after,.webui-popover-inverse.bottom-right>.webui-arrow:after{border-bottom-color:#333}.webui-popover-inverse.left>.webui-arrow,.webui-popover-inverse.left-top>.webui-arrow,.webui-popover-inverse.left-bottom>.webui-arrow,.webui-popover-inverse.left>.webui-arrow:after,.webui-popover-inverse.left-top>.webui-arrow:after,.webui-popover-inverse.left-bottom>.webui-arrow:after{border-left-color:#333}.webui-popover i.icon-refresh:before{content:""}.webui-popover i.icon-refresh{display:block;width:30px;height:30px;font-size:20px;top:50%;left:50%;position:absolute;margin-left:-15px;margin-right:-15px;background:url(../img/loading.gif) no-repeat}@-webkit-keyframes rotate{100%{-webkit-transform:rotate(360deg)}}@keyframes rotate{100%{transform:rotate(360deg)}}.webui-popover-backdrop{background-color:rgba(0,0,0,.65);width:100%;height:100%;position:fixed;top:0;left:0;z-index:9998}.webui-popover .dropdown-menu{display:block;position:relative;top:0;border:none;box-shadow:none;float:none} \ No newline at end of file diff --git a/component/pear/css/pear.css b/component/pear/css/pear.css index d3ed538416b9f49cdf2905b59cf84b925dbebe4b..c43e364a3a128bf83fce217e1e03f55e1fe6ebdc 100644 --- a/component/pear/css/pear.css +++ b/component/pear/css/pear.css @@ -26,4 +26,5 @@ @import url("module/card.css"); @import url("module/tab.css"); @import url("module/tag.css"); -@import url("module/fullscreen.css"); \ No newline at end of file +@import url("module/fullscreen.css"); +@import url("module/popover.min.css"); \ No newline at end of file diff --git a/component/pear/module/fullscreen.js b/component/pear/module/fullscreen.js index ebec40bf4e5b82c06d700454815a2b56fecce4b3..a0f3b4dd49b26a13546c64f1861efb3c2ff42c04 100644 --- a/component/pear/module/fullscreen.js +++ b/component/pear/module/fullscreen.js @@ -1,11 +1,18 @@ layui.define(['message', 'table', 'jquery', 'element', 'yaml', 'form', 'tab', 'menu', 'frame', 'theme', 'convert'], function(exports) { "use strict"; - var $ = layui.jquery; + var defer = $.Deferred(); var fullScreen = new function() { + this.func = null; + this.onFullchange = function(func){ + this.func = func; + var evts = ['fullscreenchange','webkitfullscreenchange','mozfullscreenchange','MSFullscreenChange']; + for(var i=0;i' + + '
' + + '
' + + '' + + '

' + + '

 

' + + '
' + + '', + backdrop: false, + dismissible: true, + onShow: null, + onHide: null, + abortXHR: true, + autoHide: false, + offsetTop: 0, + offsetLeft: 0, + iframeOptions: { + frameborder: '0', + allowtransparency: 'true', + id: '', + name: '', + scrolling: '', + onload: '', + height: '', + width: '' + }, + hideEmpty: false + }; + + var rtlClass = pluginClass + '-rtl'; + var _srcElements = []; + var backdrop = $('
'); + var _globalIdSeed = 0; + var _isBodyEventHandled = false; + var _offsetOut = -2000; // the value offset out of the screen + var $document = $(document); + + var toNumber = function (numeric, fallback) { + return isNaN(numeric) ? (fallback || 0) : Number(numeric); + }; + + var getPopFromElement = function ($element) { + return $element.data('plugin_' + pluginName); + }; + + var hideAllPop = function () { + var pop = null; + for (var i = 0; i < _srcElements.length; i++) { + pop = getPopFromElement(_srcElements[i]); + if (pop) { + pop.hide(true); + } + } + $document.trigger('hiddenAll.' + pluginType); + }; + + var hideOtherPops = function (currentPop) { + var pop = null; + for (var i = 0; i < _srcElements.length; i++) { + pop = getPopFromElement(_srcElements[i]); + if (pop && pop.id !== currentPop.id) { + pop.hide(true); + } + } + $document.trigger('hiddenAll.' + pluginType); + }; + + var isMobile = ('ontouchstart' in document.documentElement) && (/Mobi/.test(navigator.userAgent)); + + var pointerEventToXY = function (e) { + var out = { + x: 0, + y: 0 + }; + if (e.type === 'touchstart' || e.type === 'touchmove' || e.type === 'touchend' || e.type === 'touchcancel') { + var touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0]; + out.x = touch.pageX; + out.y = touch.pageY; + } else if (e.type === 'mousedown' || e.type === 'mouseup' || e.type === 'click') { + out.x = e.pageX; + out.y = e.pageY; + } + return out; + }; + + + // The actual plugin constructor + function WebuiPopover(element, options) { + this.$element = $(element); + if (options) { + if ($.type(options.delay) === 'string' || $.type(options.delay) === 'number') { + options.delay = { + show: options.delay, + hide: options.delay + }; // bc break fix + } + } + this.options = $.extend({}, defaults, options); + this._defaults = defaults; + this._name = pluginName; + this._targetclick = false; + this.init(); + _srcElements.push(this.$element); + return this; + + } + + WebuiPopover.prototype = { + //init webui popover + init: function () { + if (this.$element[0] instanceof document.constructor && !this.options.selector) { + throw new Error('`selector` option must be specified when initializing ' + this.type + ' on the window.document object!'); + } + + if (this.getTrigger() !== 'manual') { + //init the event handlers + if (isMobile) { + this.$element.off('touchend', this.options.selector).on('touchend', this.options.selector, $.proxy(this.toggle, this)); + } else if (this.getTrigger() === 'click') { + this.$element.off('click', this.options.selector).on('click', this.options.selector, $.proxy(this.toggle, this)); + } else if (this.getTrigger() === 'hover') { + this.$element + .off('mouseenter mouseleave click', this.options.selector) + .on('mouseenter', this.options.selector, $.proxy(this.mouseenterHandler, this)) + .on('mouseleave', this.options.selector, $.proxy(this.mouseleaveHandler, this)); + } + } + this._poped = false; + this._inited = true; + this._opened = false; + this._idSeed = _globalIdSeed; + this.id = pluginName + this._idSeed; + // normalize container + this.options.container = $(this.options.container || document.body).first(); + + if (this.options.backdrop) { + backdrop.appendTo(this.options.container).hide(); + } + _globalIdSeed++; + if (this.getTrigger() === 'sticky') { + this.show(); + } + + if (this.options.selector) { + this._options = $.extend({}, this.options, { + selector: '' + }); + } + + }, + /* api methods and actions */ + destroy: function () { + var index = -1; + + for (var i = 0; i < _srcElements.length; i++) { + if (_srcElements[i] === this.$element) { + index = i; + break; + } + } + + _srcElements.splice(index, 1); + + + this.hide(); + this.$element.data('plugin_' + pluginName, null); + if (this.getTrigger() === 'click') { + this.$element.off('click'); + } else if (this.getTrigger() === 'hover') { + this.$element.off('mouseenter mouseleave'); + } + if (this.$target) { + this.$target.remove(); + } + }, + getDelegateOptions: function () { + var options = {}; + + this._options && $.each(this._options, function (key, value) { + if (defaults[key] !== value) { + options[key] = value; + } + }); + return options; + }, + /* + param: force boolean value, if value is true then force hide the popover + param: event dom event, + */ + hide: function (force, event) { + + if (!force && this.getTrigger() === 'sticky') { + return; + } + if (!this._opened) { + return; + } + if (event) { + event.preventDefault(); + event.stopPropagation(); + } + + if (this.xhr && this.options.abortXHR === true) { + this.xhr.abort(); + this.xhr = null; + } + + + var e = $.Event('hide.' + pluginType); + this.$element.trigger(e, [this.$target]); + if (this.$target) { + this.$target.removeClass('in').addClass(this.getHideAnimation()); + var that = this; + setTimeout(function () { + that.$target.hide(); + if (!that.getCache()) { + that.$target.remove(); + //that.getTriggerElement.removeAttr('data-target'); + } + }, that.getHideDelay()); + } + if (this.options.backdrop) { + backdrop.hide(); + } + this._opened = false; + this.$element.trigger('hidden.' + pluginType, [this.$target]); + + if (this.options.onHide) { + this.options.onHide(this.$target); + } + + }, + resetAutoHide: function () { + var that = this; + var autoHide = that.getAutoHide(); + if (autoHide) { + if (that.autoHideHandler) { + clearTimeout(that.autoHideHandler); + } + that.autoHideHandler = setTimeout(function () { + that.hide(); + }, autoHide); + } + }, + delegate: function (eventTarget) { + var self = $(eventTarget).data('plugin_' + pluginName); + if (!self) { + self = new WebuiPopover(eventTarget, this.getDelegateOptions()); + $(eventTarget).data('plugin_' + pluginName, self); + } + return self; + }, + toggle: function (e) { + var self = this; + if (e) { + e.preventDefault(); + e.stopPropagation(); + if (this.options.selector) { + self = this.delegate(e.currentTarget); + } + } + self[self.getTarget().hasClass('in') ? 'hide' : 'show'](); + }, + hideAll: function () { + hideAllPop(); + }, + hideOthers: function () { + hideOtherPops(this); + }, + /*core method ,show popover */ + show: function () { + if (this._opened) { + return; + } + //removeAllTargets(); + var + $target = this.getTarget().removeClass().addClass(pluginClass).addClass(this._customTargetClass); + if (!this.options.multi) { + this.hideOthers(); + } + + // use cache by default, if not cache setted , reInit the contents + if (!this.getCache() || !this._poped || this.content === '') { + this.content = ''; + this.setTitle(this.getTitle()); + if (!this.options.closeable) { + $target.find('.close').off('click').remove(); + } + if (!this.isAsync()) { + this.setContent(this.getContent()); + } else { + this.setContentASync(this.options.content); + } + + if (this.canEmptyHide() && this.content === '') { + return; + } + $target.show(); + } + + this.displayContent(); + + if (this.options.onShow) { + this.options.onShow($target); + } + + this.bindBodyEvents(); + if (this.options.backdrop) { + backdrop.show(); + } + this._opened = true; + this.resetAutoHide(); + }, + displayContent: function () { + var + //element postion + elementPos = this.getElementPosition(), + //target postion + $target = this.getTarget().removeClass().addClass(pluginClass).addClass(this._customTargetClass), + //target content + $targetContent = this.getContentElement(), + //target Width + targetWidth = $target[0].offsetWidth, + //target Height + targetHeight = $target[0].offsetHeight, + //placement + placement = 'bottom', + e = $.Event('show.' + pluginType); + + if (this.canEmptyHide()) { + + var content = $targetContent.children().html(); + if (content !== null && content.trim().length === 0) { + return; + } + } + + //if (this.hasContent()){ + this.$element.trigger(e, [$target]); + //} + // support width as data attribute + var optWidth = this.$element.data('width') || this.options.width; + if (optWidth === '') { + optWidth = this._defaults.width; + } + + if (optWidth !== 'auto') { + $target.width(optWidth); + } + + // support height as data attribute + var optHeight = this.$element.data('height') || this.options.height; + if (optHeight === '') { + optHeight = this._defaults.height; + } + + if (optHeight !== 'auto') { + $targetContent.height(optHeight); + } + + if (this.options.style) { + this.$target.addClass(pluginClass + '-' + this.options.style); + } + + //check rtl + if (this.options.direction === 'rtl' && !$targetContent.hasClass(rtlClass)) { + $targetContent.addClass(rtlClass); + } + + //init the popover and insert into the document body + if (!this.options.arrow) { + $target.find('.webui-arrow').remove(); + } + $target.detach().css({ + top: _offsetOut, + left: _offsetOut, + display: 'block', + opacity:this.options.opacity || 1 + }); + + if (this.getAnimation()) { + $target.addClass(this.getAnimation()); + } + $target.appendTo(this.options.container); + + + placement = this.getPlacement(elementPos); + + //This line is just for compatible with knockout custom binding + this.$element.trigger('added.' + pluginType); + + this.initTargetEvents(); + + if (!this.options.padding) { + if (this.options.height !== 'auto') { + $targetContent.css('height', $targetContent.outerHeight()); + } + this.$target.addClass('webui-no-padding'); + } + + // add maxHeight and maxWidth support by limodou@gmail.com 2016/10/1 + if (this.options.maxHeight) { + $targetContent.css('maxHeight', this.options.maxHeight); + } + + if (this.options.maxWidth) { + $targetContent.css('maxWidth', this.options.maxWidth); + } + // end + + targetWidth = $target[0].offsetWidth; + targetHeight = $target[0].offsetHeight; + + var postionInfo = this.getTargetPositin(elementPos, placement, targetWidth, targetHeight); + + this.$target.css(postionInfo.position).addClass(placement).addClass('in'); + + if (this.options.type === 'iframe') { + var $iframe = $target.find('iframe'); + var iframeWidth = $target.width(); + var iframeHeight = $iframe.parent().height(); + + if (this.options.iframeOptions.width !== '' && this.options.iframeOptions.width !== 'auto') { + iframeWidth = this.options.iframeOptions.width; + } + + if (this.options.iframeOptions.height !== '' && this.options.iframeOptions.height !== 'auto') { + iframeHeight = this.options.iframeOptions.height; + } + + $iframe.width(iframeWidth).height(iframeHeight); + } + + if (!this.options.arrow) { + this.$target.css({ + 'margin': 0 + }); + } + if (this.options.arrow) { + var $arrow = this.$target.find('.webui-arrow'); + $arrow.removeAttr('style'); + + //prevent arrow change by content size + if (placement === 'left' || placement === 'right') { + $arrow.css({ + top: this.$target.height() / 2 + }); + } else if (placement === 'top' || placement === 'bottom') { + $arrow.css({ + left: this.$target.width() / 2 + }); + } + + if (postionInfo.arrowOffset) { + //hide the arrow if offset is negative + if (postionInfo.arrowOffset.left === -1 || postionInfo.arrowOffset.top === -1) { + $arrow.hide(); + } else { + $arrow.css(postionInfo.arrowOffset); + } + } + + } + this._poped = true; + this.$element.trigger('shown.' + pluginType, [this.$target]); + }, + + isTargetLoaded: function () { + return this.getTarget().find('i.glyphicon-refresh').length === 0; + }, + + /*getter setters */ + getTriggerElement: function () { + return this.$element; + }, + getTarget: function () { + if (!this.$target) { + var id = pluginName + this._idSeed; + this.$target = $(this.options.template) + .attr('id', id); + this._customTargetClass = this.$target.attr('class') !== pluginClass ? this.$target.attr('class') : null; + this.getTriggerElement().attr('data-target', id); + } + if (!this.$target.data('trigger-element')) { + this.$target.data('trigger-element', this.getTriggerElement()); + } + return this.$target; + }, + removeTarget: function () { + this.$target.remove(); + this.$target = null; + this.$contentElement = null; + }, + getTitleElement: function () { + return this.getTarget().find('.' + pluginClass + '-title'); + }, + getContentElement: function () { + if (!this.$contentElement) { + this.$contentElement = this.getTarget().find('.' + pluginClass + '-content'); + } + return this.$contentElement; + }, + getTitle: function () { + return this.$element.attr('data-title') || this.options.title || this.$element.attr('title'); + }, + getUrl: function () { + return this.$element.attr('data-url') || this.options.url; + }, + getAutoHide: function () { + return this.$element.attr('data-auto-hide') || this.options.autoHide; + }, + getOffsetTop: function () { + return toNumber(this.$element.attr('data-offset-top')) || this.options.offsetTop; + }, + getOffsetLeft: function () { + return toNumber(this.$element.attr('data-offset-left')) || this.options.offsetLeft; + }, + getCache: function () { + var dataAttr = this.$element.attr('data-cache'); + if (typeof (dataAttr) !== 'undefined') { + switch (dataAttr.toLowerCase()) { + case 'true': + case 'yes': + case '1': + return true; + case 'false': + case 'no': + case '0': + return false; + } + } + return this.options.cache; + }, + getTrigger: function () { + return this.$element.attr('data-trigger') || this.options.trigger; + }, + getDelayShow: function () { + var dataAttr = this.$element.attr('data-delay-show'); + if (typeof (dataAttr) !== 'undefined') { + return dataAttr; + } + return this.options.delay.show === 0 ? 0 : this.options.delay.show || 100; + }, + getHideDelay: function () { + var dataAttr = this.$element.attr('data-delay-hide'); + if (typeof (dataAttr) !== 'undefined') { + return dataAttr; + } + return this.options.delay.hide === 0 ? 0 : this.options.delay.hide || 100; + }, + getAnimation: function () { + var dataAttr = this.$element.attr('data-animation'); + return dataAttr || this.options.animation; + }, + getHideAnimation: function () { + var ani = this.getAnimation(); + return ani ? ani + '-out' : 'out'; + }, + setTitle: function (title) { + var $titleEl = this.getTitleElement(); + if (title) { + //check rtl + if (this.options.direction === 'rtl' && !$titleEl.hasClass(rtlClass)) { + $titleEl.addClass(rtlClass); + } + $titleEl.html(title); + } else { + $titleEl.remove(); + } + }, + hasContent: function () { + return this.getContent(); + }, + canEmptyHide: function () { + return this.options.hideEmpty && this.options.type === 'html'; + }, + getIframe: function () { + var $iframe = $('').attr('src', this.getUrl()); + var self = this; + $.each(this._defaults.iframeOptions, function (opt) { + if (typeof self.options.iframeOptions[opt] !== 'undefined') { + $iframe.attr(opt, self.options.iframeOptions[opt]); + } + }); + + return $iframe; + }, + getContent: function () { + if (this.getUrl()) { + switch (this.options.type) { + case 'iframe': + this.content = this.getIframe(); + break; + case 'html': + try { + this.content = $(this.getUrl()); + if (!this.content.is(':visible')) { + this.content.show(); + } + } catch (error) { + throw new Error('Unable to get popover content. Invalid selector specified.'); + } + break; + } + } else if (!this.content) { + var content = ''; + if ($.isFunction(this.options.content)) { + content = this.options.content.apply(this.$element[0], [this]); + } else { + content = this.options.content; + } + this.content = this.$element.attr('data-content') || content; + if (!this.content) { + var $next = this.$element.next(); + + if ($next && $next.hasClass(pluginClass + '-content')) { + this.content = $next; + } + } + } + return this.content; + }, + setContent: function (content) { + var $target = this.getTarget(); + var $ct = this.getContentElement(); + if (typeof content === 'string') { + $ct.html(content); + } else if (content instanceof $) { + $ct.html(''); + //Don't want to clone too many times. + if (!this.options.cache) { + content.clone(true, true).removeClass(pluginClass + '-content').appendTo($ct); + } else { + content.removeClass(pluginClass + '-content').appendTo($ct); + } + } + this.$target = $target; + }, + isAsync: function () { + return this.options.type === 'async'; + }, + setContentASync: function (content) { + var that = this; + if (this.xhr) { + return; + } + this.xhr = $.ajax({ + url: this.getUrl(), + type: this.options.async.type, + cache: this.getCache(), + beforeSend: function (xhr, settings) { + if (that.options.async.before) { + that.options.async.before(that, xhr, settings); + } + }, + success: function (data) { + that.bindBodyEvents(); + if (content && $.isFunction(content)) { + that.content = content.apply(that.$element[0], [data]); + } else { + that.content = data; + } + that.setContent(that.content); + var $targetContent = that.getContentElement(); + $targetContent.removeAttr('style'); + that.displayContent(); + if (that.options.async.success) { + that.options.async.success(that, data); + } + }, + complete: function () { + that.xhr = null; + }, + error: function (xhr, data) { + if (that.options.async.error) { + that.options.async.error(that, xhr, data); + } + } + }); + }, + + bindBodyEvents: function () { + if (_isBodyEventHandled) { + return; + } + if (this.options.dismissible && this.getTrigger() === 'click') { + if (isMobile) { + $document.off('touchstart.webui-popover').on('touchstart.webui-popover', $.proxy(this.bodyTouchStartHandler, this)); + } else { + $document.off('keyup.webui-popover').on('keyup.webui-popover', $.proxy(this.escapeHandler, this)); + $document.off('click.webui-popover').on('click.webui-popover', $.proxy(this.bodyClickHandler, this)); + } + } else if (this.getTrigger() === 'hover') { + $document.off('touchend.webui-popover') + .on('touchend.webui-popover', $.proxy(this.bodyClickHandler, this)); + } + }, + + /* event handlers */ + mouseenterHandler: function (e) { + var self = this; + + if (e && this.options.selector) { + self = this.delegate(e.currentTarget); + } + + if (self._timeout) { + clearTimeout(self._timeout); + } + self._enterTimeout = setTimeout(function () { + if (!self.getTarget().is(':visible')) { + self.show(); + } + }, this.getDelayShow()); + }, + mouseleaveHandler: function () { + var self = this; + clearTimeout(self._enterTimeout); + //key point, set the _timeout then use clearTimeout when mouse leave + self._timeout = setTimeout(function () { + self.hide(); + }, this.getHideDelay()); + }, + escapeHandler: function (e) { + if (e.keyCode === 27) { + this.hideAll(); + } + }, + bodyTouchStartHandler: function (e) { + var self = this; + var $eventEl = $(e.currentTarget); + $eventEl.on('touchend', function (e) { + self.bodyClickHandler(e); + $eventEl.off('touchend'); + }); + $eventEl.on('touchmove', function () { + $eventEl.off('touchend'); + }); + }, + bodyClickHandler: function (e) { + _isBodyEventHandled = true; + var canHide = true; + for (var i = 0; i < _srcElements.length; i++) { + var pop = getPopFromElement(_srcElements[i]); + if (pop && pop._opened) { + var offset = pop.getTarget().offset(); + var popX1 = offset.left; + var popY1 = offset.top; + var popX2 = offset.left + pop.getTarget().width(); + var popY2 = offset.top + pop.getTarget().height(); + var pt = pointerEventToXY(e); + var inPop = pt.x >= popX1 && pt.x <= popX2 && pt.y >= popY1 && pt.y <= popY2; + if (inPop) { + canHide = false; + break; + } + } + } + if (canHide) { + hideAllPop(); + } + }, + + /* + targetClickHandler: function() { + this._targetclick = true; + }, + */ + + //reset and init the target events; + initTargetEvents: function () { + if (this.getTrigger() === 'hover') { + this.$target + .off('mouseenter mouseleave') + .on('mouseenter', $.proxy(this.mouseenterHandler, this)) + .on('mouseleave', $.proxy(this.mouseleaveHandler, this)); + } + this.$target.find('.close').off('click').on('click', $.proxy(this.hide, this, true)); + //this.$target.off('click.webui-popover').on('click.webui-popover', $.proxy(this.targetClickHandler, this)); + }, + /* utils methods */ + //caculate placement of the popover + getPlacement: function (pos) { + var + placement, + container = this.options.container, + clientWidth = container.innerWidth(), + clientHeight = container.innerHeight(), + scrollTop = container.scrollTop(), + scrollLeft = container.scrollLeft(), + pageX = Math.max(0, pos.left - scrollLeft), + pageY = Math.max(0, pos.top - scrollTop); + //arrowSize = 20; + + //if placement equals auto，caculate the placement by element information; + if (typeof (this.options.placement) === 'function') { + placement = this.options.placement.call(this, this.getTarget()[0], this.$element[0]); + } else { + placement = this.$element.data('placement') || this.options.placement; + } + + var isH = placement === 'horizontal'; + var isV = placement === 'vertical'; + var detect = placement === 'auto' || isH || isV; + + if (detect) { + if (pageX < clientWidth / 3) { + if (pageY < clientHeight / 3) { + placement = isH ? 'right-bottom' : 'bottom-right'; + } else if (pageY < clientHeight * 2 / 3) { + if (isV) { + placement = pageY <= clientHeight / 2 ? 'bottom-right' : 'top-right'; + } else { + placement = 'right'; + } + } else { + placement = isH ? 'right-top' : 'top-right'; + } + //placement= pageY>targetHeight+arrowSize?'top-right':'bottom-right'; + } else if (pageX < clientWidth * 2 / 3) { + if (pageY < clientHeight / 3) { + if (isH) { + placement = pageX <= clientWidth / 2 ? 'right-bottom' : 'left-bottom'; + } else { + placement = 'bottom'; + } + } else if (pageY < clientHeight * 2 / 3) { + if (isH) { + placement = pageX <= clientWidth / 2 ? 'right' : 'left'; + } else { + placement = pageY <= clientHeight / 2 ? 'bottom' : 'top'; + } + } else { + if (isH) { + placement = pageX <= clientWidth / 2 ? 'right-top' : 'left-top'; + } else { + placement = 'top'; + } + } + } else { + //placement = pageY>targetHeight+arrowSize?'top-left':'bottom-left'; + if (pageY < clientHeight / 3) { + placement = isH ? 'left-bottom' : 'bottom-left'; + } else if (pageY < clientHeight * 2 / 3) { + if (isV) { + placement = pageY <= clientHeight / 2 ? 'bottom-left' : 'top-left'; + } else { + placement = 'left'; + } + } else { + placement = isH ? 'left-top' : 'top-left'; + } + } + } else if (placement === 'auto-top') { + if (pageX < clientWidth / 3) { + placement = 'top-right'; + } else if (pageX < clientWidth * 2 / 3) { + placement = 'top'; + } else { + placement = 'top-left'; + } + } else if (placement === 'auto-bottom') { + if (pageX < clientWidth / 3) { + placement = 'bottom-right'; + } else if (pageX < clientWidth * 2 / 3) { + placement = 'bottom'; + } else { + placement = 'bottom-left'; + } + } else if (placement === 'auto-left') { + if (pageY < clientHeight / 3) { + placement = 'left-top'; + } else if (pageY < clientHeight * 2 / 3) { + placement = 'left'; + } else { + placement = 'left-bottom'; + } + } else if (placement === 'auto-right') { + if (pageY < clientHeight / 3) { + placement = 'right-bottom'; + } else if (pageY < clientHeight * 2 / 3) { + placement = 'right'; + } else { + placement = 'right-top'; + } + } + return placement; + }, + getElementPosition: function () { + // If the container is the body or normal conatiner, just use $element.offset() + var elRect = this.$element[0].getBoundingClientRect(); + var container = this.options.container; + var cssPos = container.css('position'); + + if (container.is(document.body) || cssPos === 'static') { + return $.extend({}, this.$element.offset(), { + width: this.$element[0].offsetWidth || elRect.width, + height: this.$element[0].offsetHeight || elRect.height + }); + // Else fixed container need recalculate the position + } else if (cssPos === 'fixed') { + var containerRect = container[0].getBoundingClientRect(); + return { + top: elRect.top - containerRect.top + container.scrollTop(), + left: elRect.left - containerRect.left + container.scrollLeft(), + width: elRect.width, + height: elRect.height + }; + } else if (cssPos === 'relative') { + return { + top: this.$element.offset().top - container.offset().top, + left: this.$element.offset().left - container.offset().left, + width: this.$element[0].offsetWidth || elRect.width, + height: this.$element[0].offsetHeight || elRect.height + }; + } + }, + + getTargetPositin: function (elementPos, placement, targetWidth, targetHeight) { + var pos = elementPos, + container = this.options.container, + //clientWidth = container.innerWidth(), + //clientHeight = container.innerHeight(), + elementW = this.$element.outerWidth(), + elementH = this.$element.outerHeight(), + scrollTop = document.documentElement.scrollTop + container.scrollTop(), + scrollLeft = document.documentElement.scrollLeft + container.scrollLeft(), + position = {}, + arrowOffset = null, + arrowSize = this.options.arrow ? 20 : 0, + padding = 10, + fixedW = elementW < arrowSize + padding ? arrowSize : 0, + fixedH = elementH < arrowSize + padding ? arrowSize : 0, + refix = 0, + pageH = document.documentElement.clientHeight + scrollTop, + pageW = document.documentElement.clientWidth + scrollLeft; + + var validLeft = pos.left + pos.width / 2 - fixedW > 0; + var validRight = pos.left + pos.width / 2 + fixedW < pageW; + var validTop = pos.top + pos.height / 2 - fixedH > 0; + var validBottom = pos.top + pos.height / 2 + fixedH < pageH; + + + switch (placement) { + case 'bottom': + position = { + top: pos.top + pos.height, + left: pos.left + pos.width / 2 - targetWidth / 2 + }; + break; + case 'top': + position = { + top: pos.top - targetHeight, + left: pos.left + pos.width / 2 - targetWidth / 2 + }; + break; + case 'left': + position = { + top: pos.top + pos.height / 2 - targetHeight / 2, + left: pos.left - targetWidth + }; + break; + case 'right': + position = { + top: pos.top + pos.height / 2 - targetHeight / 2, + left: pos.left + pos.width + }; + break; + case 'top-right': + position = { + top: pos.top - targetHeight, + left: validLeft ? pos.left - fixedW : padding + }; + arrowOffset = { + left: validLeft ? Math.min(elementW, targetWidth) / 2 + fixedW : _offsetOut + }; + break; + case 'top-left': + refix = validRight ? fixedW : -padding; + position = { + top: pos.top - targetHeight, + left: pos.left - targetWidth + pos.width + refix + }; + arrowOffset = { + left: validRight ? targetWidth - Math.min(elementW, targetWidth) / 2 - fixedW : _offsetOut + }; + break; + case 'bottom-right': + position = { + top: pos.top + pos.height, + left: validLeft ? pos.left - fixedW : padding + }; + arrowOffset = { + left: validLeft ? Math.min(elementW, targetWidth) / 2 + fixedW : _offsetOut + }; + break; + case 'bottom-left': + refix = validRight ? fixedW : -padding; + position = { + top: pos.top + pos.height, + left: pos.left - targetWidth + pos.width + refix + }; + arrowOffset = { + left: validRight ? targetWidth - Math.min(elementW, targetWidth) / 2 - fixedW : _offsetOut + }; + break; + case 'right-top': + refix = validBottom ? fixedH : -padding; + position = { + top: pos.top - targetHeight + pos.height + refix, + left: pos.left + pos.width + }; + arrowOffset = { + top: validBottom ? targetHeight - Math.min(elementH, targetHeight) / 2 - fixedH : _offsetOut + }; + break; + case 'right-bottom': + position = { + top: validTop ? pos.top - fixedH : padding, + left: pos.left + pos.width + }; + arrowOffset = { + top: validTop ? Math.min(elementH, targetHeight) / 2 + fixedH : _offsetOut + }; + break; + case 'left-top': + refix = validBottom ? fixedH : -padding; + position = { + top: pos.top - targetHeight + pos.height + refix, + left: pos.left - targetWidth + }; + arrowOffset = { + top: validBottom ? targetHeight - Math.min(elementH, targetHeight) / 2 - fixedH : _offsetOut + }; + break; + case 'left-bottom': + position = { + top: validTop ? pos.top - fixedH : padding, + left: pos.left - targetWidth + }; + arrowOffset = { + top: validTop ? Math.min(elementH, targetHeight) / 2 + fixedH : _offsetOut + }; + break; + + } + position.top += this.getOffsetTop(); + position.left += this.getOffsetLeft(); + + return { + position: position, + arrowOffset: arrowOffset + }; + } + }; + $.fn[pluginName] = function (options, noInit) { + var results = []; + var $result = this.each(function () { + + var webuiPopover = $.data(this, 'plugin_' + pluginName); + if (!webuiPopover) { + if (!options) { + webuiPopover = new WebuiPopover(this, null); + } else if (typeof options === 'string') { + if (options !== 'destroy') { + if (!noInit) { + webuiPopover = new WebuiPopover(this, null); + results.push(webuiPopover[options]()); + } + } + } else if (typeof options === 'object') { + webuiPopover = new WebuiPopover(this, options); + } + $.data(this, 'plugin_' + pluginName, webuiPopover); + } else { + if (options === 'destroy') { + webuiPopover.destroy(); + } else if (typeof options === 'string') { + results.push(webuiPopover[options]()); + } + } + }); + return (results.length) ? results : $result; + }; + + //Global object exposes to window. + var webuiPopovers = (function () { + var _hideAll = function () { + hideAllPop(); + }; + var _create = function (selector, options) { + options = options || {}; + $(selector).webuiPopover(options); + }; + var _isCreated = function (selector) { + var created = true; + $(selector).each(function (i, item) { + created = created && $(item).data('plugin_' + pluginName) !== undefined; + }); + return created; + }; + var _show = function (selector, options) { + if (options) { + $(selector).webuiPopover(options).webuiPopover('show'); + } else { + $(selector).webuiPopover('show'); + } + }; + var _hide = function (selector) { + $(selector).webuiPopover('hide'); + }; + + var _setDefaultOptions = function (options) { + defaults = $.extend({}, defaults, options); + }; + + var _updateContent = function (selector, content) { + var pop = $(selector).data('plugin_' + pluginName); + if (pop) { + var cache = pop.getCache(); + pop.options.cache = false; + pop.options.content = content; + if (pop._opened) { + pop._opened = false; + pop.show(); + } else { + if (pop.isAsync()) { + pop.setContentASync(content); + } else { + pop.setContent(content); + } + } + pop.options.cache = cache; + } + }; + + var _updateContentAsync = function (selector, url) { + var pop = $(selector).data('plugin_' + pluginName); + if (pop) { + var cache = pop.getCache(); + var type = pop.options.type; + pop.options.cache = false; + pop.options.url = url; + + if (pop._opened) { + pop._opened = false; + pop.show(); + } else { + pop.options.type = 'async'; + pop.setContentASync(pop.content); + } + pop.options.cache = cache; + pop.options.type = type; + } + }; + + return { + show: _show, + hide: _hide, + create: _create, + isCreated: _isCreated, + hideAll: _hideAll, + updateContent: _updateContent, + updateContentAsync: _updateContentAsync, + setDefaultOptions: _setDefaultOptions + }; + })(); + window.WebuiPopovers = webuiPopovers; + exports("popover",WebuiPopovers); +}) + + + + diff --git a/component/pear/module/theme.js b/component/pear/module/theme.js index db66b5f22928794741a93696276171f7fe1ee2c8..8e99fea629c9de8a0d8a9a7a8410fb0a5c0961c8 100644 --- a/component/pear/module/theme.js +++ b/component/pear/module/theme.js @@ -7,8 +7,8 @@ layui.define(["jquery","layer"], function (exports) { theme.changeTheme = function (target, autoHead) { this.autoHead = autoHead; - const color = localStorage.getItem("theme-color-color"); - const second = localStorage.getItem("theme-color-second"); + var color = localStorage.getItem("theme-color-color"); + var second = localStorage.getItem("theme-color-second"); this.colorSet(color, second); if (target.frames.length == 0) return; for (var i = 0; i < target.frames.length; i++) { @@ -24,7 +24,7 @@ layui.define(["jquery","layer"], function (exports) { theme.colorSet = function(color, second) { - let style = ''; + var style = ''; style += '.light-theme .pear-nav-tree .layui-this a:hover,.light-theme .pear-nav-tree .layui-this,.light-theme .pear-nav-tree .layui-this a,.pear-nav-tree .layui-this a,.pear-nav-tree .layui-this{background-color: ' +color + '!important;}'; style += '.pear-admin .layui-logo .title{color:' + color + '!important;}'; style += '.pear-frame-title .dot,.pear-tab .layui-this .pear-tab-active{background-color: ' + color +'!important;}'; diff --git a/component/pear/module/watermark/watermark.js b/component/pear/module/watermark/watermark.js index 138591659da4fac1b933c342cd43ffb2574a0198..6c23455eaa9d30a32f61eabc0e747ccebd46fb91 100644 --- a/component/pear/module/watermark/watermark.js +++ b/component/pear/module/watermark/watermark.js @@ -1,14 +1,6 @@ /* global Watermark */ - -(function (root, factory) { - if (typeof define === 'function' && define.amd) { - define([], factory()); - } else if (typeof module === 'object' && module.exports) { - module.exports = factory(); - } else { - root['Watermark'] = factory(); - } -})(this, function () { +layui.define(['jquery', 'element'], function(exports) { + var $=layui.$; var _parentEle; var _wmContainer; var _wmObserver; @@ -228,9 +220,5 @@ this._container.parentNode.removeChild(this._container); }; } - return Watermark; -}); - -layui.define([], function(exports) { - exports('watermark', Watermark); -}); \ No newline at end of file + exports("watermark",Watermark); +}) \ No newline at end of file diff --git a/component/pear/pear.js b/component/pear/pear.js index a4d910fb66195c303034fc6adf14fb29add41ed2..3bf18afe3389ad36cfcea031fb966e937e251cbd 100644 --- a/component/pear/pear.js +++ b/component/pear/pear.js @@ -6,7 +6,7 @@ window.rootPath = (function (src) { })(); layui.config({ base: rootPath + "module/", - version: "3.9.10" + version: "3.9.14" }).extend({ admin: "admin", // 框架布局组件 menu: "menu", // 数据菜单组件 @@ -42,7 +42,8 @@ layui.config({ iconPicker: "iconPicker",// 图标选择 nprogress: "nprogress", // 进度过渡 watermark:"watermark/watermark", //水印 - fullscreen:"fullscreen" //全屏组件 + fullscreen:"fullscreen", //全屏组件 + popover:"popover/popover" //汽泡组件 }).use(['layer', 'theme'], function () { layui.theme.changeTheme(window, false); }); \ No newline at end of file diff --git a/view/document/fullscreen.html b/view/document/fullscreen.html index 3f6d1949d4cc98113cedba9f732a063c033b0d4e..927f755df14428a24244e5c5db2e64de9338add4 100644 --- a/view/document/fullscreen.html +++ b/view/document/fullscreen.html @@ -90,18 +90,26 @@ + 并 + + + + + + +
+
+
汽泡控制
+
+ + +
+
+
+
+
+
+

显示代码

+
+ 
+									layui.use(['popover', 'jquery', 'layer', 'code'], function() {
+									   var popover = layui.popover;
+                                        popover.show('#el1');
+                                        popover.hide('#el1'); //或 $('#el1').webuiPopover('hide');
+
+
+									})
+
+
+
+
+
+
+
+
+ 不同方式 +
+
+ + + +
+
+
+
+
+
+

显示代码

+
+ 
+									layui.use(['toast', 'jquery', 'layer', 'code'], function() {
+									    var popover = layui.popover;
+                                        popover.create('#el1',{title:' hello popover-manual',content:'这里显示内容',trigger:'manual',placement:'auto',
+                                            animation:'pop',
+                                            closeable:true,
+                                            delay: {
+                                                //show and hide delay time of the popover, works only when trigger is 'hover',the value can be number or object
+                                                show: null,
+                                                hide: 100
+                                            },
+                                            opacity:0.98,
+                                            type:'html',//content type, values:'html','iframe','async'
+                                        });
+
+									})
+
+
+
+
+
+
+
+
+ 隐藏 +
+
+ +
+
+
+
+
+
+

显示代码

+
+ 
+									layui.use(['popover', 'jquery', 'layer', 'code'], function() {
+									    var popover = layui.popover;
+									    popover.hideAll();
+									})
+
+
+
+
+
+ + + + + + + +