-
Notifications
You must be signed in to change notification settings - Fork 0
/
x-dialog.html
62 lines (47 loc) · 10.3 KB
/
x-dialog.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<!-- Import Polymer -->
<link rel="import" href="components/polymer/polymer.html">
<script src="components/jquery/dist/jquery.js"></script>
<script src="components/jenga/dist/jenga.js"></script>
<!-- Define your custom element -->
<polymer-element name="x-dialog" attributes="title draggable resizable" assetpath="components/src/">
<template>
<style>[role="dialog"] {
display: none;
}
[role="dialog"] {
width: 400px;
height: 200px;
position: absolute;
border: 1px solid #bbb;
border-radius: 5px;
font-family: "Trebuchet MS", "Helvetica", "Arial", "Verdana", "sans-serif";
}
[role="dialog"] h2 {
background: #bbb;
font-size: 16px;
font-weight: normal;
padding: 10px;
margin: 3px;
border-radius: 5px;
padding: 5px;
color: #333;
}
[role="dialog"] p {
margin: 0;
padding: 10px;
font-size: 12px;
color: #333;
}
[role="dialog"] .apache-chief-resize {
background: url(components/src/jquery-ui-icons.png) -64px -224px !important;
width: 16px !important;
height: 16px !important;
}
</style>
<div id="dialog" role="dialog">
<h2 id="title">{{title}}</h2>
<p id="content"><content></content></p>
</div>
</template>
</polymer-element>
<script>var Duvet=function(a,b,c){"use strict";function d(a){var c={width:"100%",height:"200px"},d={width:"200px",height:"150px",position:"absolute",top:0,left:0,visibility:"hidden",overflow:"hidden"},e=b("<div>test</div>").css(c),f=b("<div></div>").css(d).append(e),g=e[0],h=f[0];b(a||"body").append(h);var i=g.offsetWidth;f.css("overflow","scroll");var j=f[0].clientWidth;return f.remove(),i-j}function e(a){var c=b(a),e=b("body"),f=void 0===a.scrollWidth?e[0].scrollWidth:a.scrollWidth,g=void 0===a.scrollHeight?e[0].scrollHeight:a.scrollHeight,h=d();return{x:f>c.outerWidth()?h:0,y:g>c.outerHeight()?h:0}}function f(c){var d,e=c===a?{top:0,left:0}:b(c).position();if(c===a){var f=b(a).width(),g=b(a).height();d={right:f,left:0,top:0,bottom:g}}else d=c.getBoundingClientRect();return{width:d.right-d.left,height:d.bottom-d.top,top:e.top,bottom:e.top+(d.bottom-d.top),left:e.left,right:d.right}}function g(a,b){a.off("scroll.duvet").on("scroll.duvet",function(){b()}),a.off("resize.duvet").on("resize.duvet",function(){b()})}function h(c,d){var f={},i=b("BODY"===c.parentNode.tagName?a:c.parentNode),j=b(c),k=e("BODY"===c.parentNode.tagName?a:c.parentNode);switch(c.parentNode!==c.offsetParent&&(c.parentNode.style.position="relative"),d.align){case"TL":f.top=0,f.left=0;break;case"TR":f.top=0,f.right=0;break;case"BL":f.bottom=0,f.left=0;break;case"BR":f.bottom=0,f.right=0;break;case"BC":f.bottom=0,f.left=(i.outerWidth()-k.y-j.outerWidth())/2+i.scrollLeft();break;case"TC":f.top=0;break;case"M":f.left=(i.outerWidth()-k.y-j.outerWidth())/2+i.scrollLeft(),f.top=(i.outerHeight()-k.x-j.outerHeight())/2+i.scrollTop()}f.left=f.left>0?f.left:0,f.top=f.top>0?f.top:0,j.css(b.extend({position:"absolute",display:"block"},f)),d.fixed&&"M"===d.align&&!d.bound&&(d.bound=!0,g(i,function(){h(c,d)}))}function i(a){var c=b(a),d=parseInt(c.css("margin-top"),10),e=parseInt(c.css("margin-left"),10);return{top:isNaN(d)?0:d,left:isNaN(e)?0:e}}function j(a,d){var e=f(d.alignToEl),g={display:"block",visibility:"visible",position:"absolute"},h=b(a),j=i(d.alignToEl.parentNode);h.css({visibility:"hidden",display:"block","z-index":-1e3});var k=f(a);switch(d.alignToEl.parentNode!==d.alignToEl.offsetParent&&(d.alignToEl.parentNode.style.position="relative"),d.align){case"TL":g.top=e.top-k.height-j.top,g.left=e.left-j.left;break;case"TR":g.top=e.top-k.height-j.top,g.left=e.right-k.width-j.left;break;case"BL":g.top=e.bottom-j.top,g.left=e.left-j.left;break;case"BR":g.top=e.bottom-j.top,g.left=e.right-k.width-j.left;break;case"BC":g.top=e.bottom-j.top,g.left=(e.width-k.width)/2+e.left-j.left;break;case"TC":g.top=e.top-k.height-j.top,g.left=(e.width-k.width)/2+e.left-j.left;break;case"M":g.top=(e.height-k.height)/2+e.top-j.top,g.left=(e.width-k.width)/2+e.left-j.left}c.bringToFront(a,!0),h.css(g)}function k(a,c){return this.el=a,this.$el=b(a),this.setOptions(b.extend({},l,c)),this}var l=(d(),{alignToEl:null,align:"M",fixed:!0,offsets:{top:0,right:0,bottom:0,left:0}});return k.prototype.position=function(c){this.setOptions(c),this.options.alignToEl?(this.options.alignToEl="BODY"===this.options.alignToEl.tagName?b(a)[0]:this.options.alignToEl,j(this.el,this.options)):h(this.el,this.options)},k.prototype.setOptions=function(a){this.options=a?b.extend(this.options,a):this.options},k.prototype.destroy=function(){var a=b(this.el.parentNode);a.off("scroll.duvet"),a.off("resize.duvet"),this.el=null,this.$el=null,this.options=l},k}(window,jQuery,jenga),Shamen=function(a,b){"use strict";function c(a){for(var b=a.parentNode;"BODY"!==b.tagName;){if(-1!==b.nodeName.indexOf("fragment"))return!0;b=b.parentNode}return!1}function d(a){var c=b(a),d=parseInt(c.css("margin-top"),10),e=parseInt(c.css("margin-left"),10);return console.log(e,d),{top:isNaN(d)?0:d,left:isNaN(e)?0:e}}function e(a,c){return c?{left:a.offsetLeft,top:a.offsetTop}:b(a).offset()}function f(a,d){this.options=b.extend({},g,d);var e={cursor:this.options.cursor||"move"};this.isChildOfDocFragment=c(a),this.el=a,this.$el=b(a),this.$dragHandle=this.options.dragHandle?this.$el.find(this.options.dragHandle):this.$el,this.bind(),this.originalDragHandleCursor=this.$dragHandle.css("cursor"),this.$dragHandle.css(e)}var g={dragHandle:null};return f.prototype.bind=function(){var a=this.options.dragHandle||null,c=this,f=d(this.$el.parent()[0]);b("body").on("mouseup.shamen",function(){b(window).off("mousemove.shamen")}),this.$el.on("mousedown.shamen",a,function(a){var d={x:a.pageX,y:a.pageY};b(window).on("mousemove.shamen",function(a){var b=a.pageX-d.x,g=a.pageY-d.y,h=e(c.$el[0],c.isChildOfDocFragment);console.log(h),a.preventDefault(),c.$el.css({top:h.top+g-f.top,left:h.left+b-f.left,position:"absolute"}),d={x:a.pageX,y:a.pageY},console.log(h.top+g),console.log(d,{top:h.top+g-f.top,left:h.left+b-f.left,position:"absolute"})})})},f.prototype.destroy=function(){this.$el.off("mousedown.shamen"),this.$dragHandle.css({cursor:this.originalDragHandleCursor}),this.el=null,this.$el=null,this.$dragHandle=null,this.options=g},f}(window,jQuery),ApacheChief=function(a,b){"use strict";function c(a,b){var c={};for(var d in a)c[d]=b[d]||a[d];return c}function d(a,d){this.el=a,this.$el=b(a),this.options=b.extend({},f,d),c(this.options,d||{}),this.createResizeHandles(),this.bind()}var e={width:"10px",height:"10px",cursor:"se-resize",position:"absolute",display:"none","background-color":"#000"},f={handles:["BR"],handlesCss:{TM:b.extend({},e,{cursor:"n-resize",top:0,left:"50%"}),TR:b.extend({},e,{cursor:"ne-resize",top:0,right:0}),MR:b.extend({},e,{cursor:"e-resize",bottom:"50%",right:0}),BR:b.extend({},e,{bottom:0,right:0}),BM:b.extend({},e,{cursor:"s-resize",bottom:0,left:"50%"}),ML:b.extend({},e,{cursor:"w-resize",bottom:"50%",left:0}),BL:b.extend({},e,{cursor:"sw-resize",bottom:0,left:0}),TL:b.extend({},e,{cursor:"nw-resize"})}};return d.prototype.createResizeHandles=function(){for(var a,c=this.options.handlesCss,d=this.options.handles,e=0;e<d.length;e++)c[d[e]]&&this.$el.append(b('<div class="apache-chief-resize" data-handle="'+d[e]+'">').css(c[d[e]]));a=this.$el.find(".apache-chief-resize"),this.$el!==a.offsetParent()&&this.$el.css("position","relative"),a.css("display","block")},d.prototype.bind=function(){var a=this;b("body").on("mouseup.apache-chief",function(){b(window).off("mousemove.apache-chief")}),this.$el.find(".apache-chief-resize").on("mousedown.apache-chief",function(c){function d(a,b,c,d){var e={xDim:"BM"===d?0:b.pageX-c.x,yDim:"MR"===d?0:b.pageY-c.y,xPos:0,yPos:0};if(!a)return e;switch(d){case"TR":e.yPos=e.yDim,e.yDim=-e.yDim;break;case"TL":e.xPos=e.xDim,e.xDim=-e.xDim,e.yPos=e.yDim,e.yDim=-e.yDim;break;case"BL":e.xPos=e.xDim,e.xDim=-e.xDim;break;case"ML":e.xPos=e.xDim,e.xDim=-e.xDim,e.yDim=0;break;case"TM":e.yPos=e.yDim,e.yDim=-e.yDim,e.xDim=0}return e}var e=b(this),f=e.attr("data-handle"),g="BM"!==f&&"MR"!==f&&"BR"!==f,h={x:c.pageX,y:c.pageY};b(window).on("mousemove.apache-chief",function(b){var c,e=d(g,b,h,f);b.preventDefault(),a.$el.css({width:a.$el.width()+e.xDim,height:a.$el.height()+e.yDim}),g&&(c=a.$el.offset(),a.$el.css({top:c.top+e.yPos,left:c.left+e.xPos,position:"absolute"})),h={x:b.pageX,y:b.pageY}})})},d.prototype.destroy=function(){this.$el.off("mousedown.apache-chief"),this.$el.find(".apache-chief-resize").remove(),this.el=null,this.$el=null,this.options=f},d}(window,jQuery);!function(a,b){"use strict";function c(a){return this.init(a),this}var d=/^(\S+)\s*(.*)$/;c.prototype.defaults={},c.prototype.events={},c.prototype.init=function(a){return this.options=b.extend({},this.defaults,a),this.$el=b(a.$el),this.bind(),this},c.prototype.bind=function(){var a=this.options.events?c.result(this.options.events):null;if(!a)return this;this.unbind();for(var e in a){var f=a[e];if(b.isFunction(f)||(f=this[a[e]]),f){var g=e.match(d),h=g[1],i=g[2];f=b.proxy(f,this),i.length?this.$el.on(h,i,f):this.$el.on(h,f)}}},c.prototype.unbind=function(){return this.$el.off(),this},c.prototype.destroy=function(){this.unbind(),this.$el.remove()},c.result=function(a){return b.isFunction(a)?a():a},window.Component=window.Component||c}(window,jQuery),function(a,b,c,d,e,f){"use strict";function g(a){return a.$el=a.clone?b(a.$el).clone():b(a.$el),a.appendToEl&&b(a.appendToEl).append(a.$el),c.call(this,a),a.draggable&&(this.shamen=new e(this.$el[0],{dragHandle:"#title"})),a.resizable&&(this.apacheChief=new f(this.$el[0],{handles:["BR"]})),this.overlay=new Duvet(this.$el[0],{fixed:a.draggable?!1:!0,alignToEl:a.alignToEl}),this}g.prototype=new c({}),g.prototype.constructor=g,g.prototype.init=function(a){c.prototype.init.call(this,a),this.$el.css({position:"absolute"})},g.prototype.defaults={},g.prototype.events={},g.prototype.render=function(){},g.prototype.show=function(){this.overlay.position()},g.prototype.destroy=function(){this.overlay.destroy(),this.shamen&&this.shamen.destroy(),this.apacheChief&&this.apacheChief.destroy(),c.prototype.destroy.call(this)},g.prototype.hide=function(){},a.Dialog=a.Dialog||g}(window,jQuery,Component,jenga,Shamen,ApacheChief),Polymer("x-dialog",{attached:function(){this.dialog=new Dialog({$el:this.$.dialog,draggable:this.attributes.hasOwnProperty("draggable"),resizable:this.attributes.hasOwnProperty("resizable"),alignToEl:window,align:"M",hostQrySelector:this})},show:function(){this.dialog.show()}});</script>