Forked from KarthikaRamachandran/components.z-dialog.js
Last active
July 4, 2016 07:42
-
-
Save sourvb/8bf5d948e32259df54a9b04376a5a587 to your computer and use it in GitHub Desktop.
New Twiddle
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import Ember from 'ember'; | |
| export default Ember.Component.extend({ | |
| tagName : 'div', | |
| classNames : ['zc-dialog'], | |
| attributeBindings : ['title','modal','closable','buttons',"open","name"], | |
| closable : true, | |
| didInsertElement : function(){ | |
| if(this.get("modal")){ | |
| this._createOverlay(); | |
| } | |
| if(this.get("open")){ | |
| this.send("open"); | |
| } | |
| }, | |
| // add a property observer | |
| propertyObserver : Ember.observer('open', function(){ | |
| this.send("open"); | |
| }), | |
| _createOverlay : function(){ | |
| this._overlay = $("<div class='zc-dialog-overlay'></div>").css("z-index",999999999); | |
| $("body").append(this._overlay); | |
| var base = this, | |
| documentHeight=$(document).height(), | |
| windowHeight = $(window).height(), | |
| documentWidth = $(document).width(), | |
| windowWidth = $(window).width(); | |
| if(documentHeight > windowHeight){ | |
| this._overlay.height(documentHeight); | |
| } | |
| if(documentWidth > windowWidth){ | |
| this._overlay.width(documentWidth); | |
| } | |
| this._overlay.attr("tabindex",1).on("keydown",function(event){ | |
| if(event.keyCode === "27"){ // escape key | |
| this.send("close",event); | |
| } | |
| }); | |
| }, | |
| actions : { | |
| open : function(){ | |
| if(this._overlay){ | |
| $(this.element).css("z-index",parseInt(this._overlay.css("z-index")+1)); | |
| } | |
| $(this.element).show(); | |
| this.onOpen(); | |
| }, | |
| close : function(){ | |
| if(this._overlay){ | |
| this._overlay.remove(); | |
| this._overlay = undefined; | |
| } | |
| $(this.element).hide(); | |
| } | |
| }, | |
| willDestroyElement : function(){ | |
| if(this._overlay){ | |
| this._overlay.remove(); | |
| this._overlay = undefined; | |
| } | |
| } | |
| }); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import Ember from 'ember'; | |
| export default Ember.Controller.extend({ | |
| appName: 'Ember Twiddle' | |
| }); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import Ember from 'ember'; | |
| export default Ember.Controller.extend({ | |
| showDlg1 : false, | |
| showDlg2 : false, | |
| showDlg3 : false, | |
| actions : { | |
| showModaless : function(){ | |
| this.toggleProperty("showDlg1"); | |
| }, | |
| showModal : function(){ | |
| this.toggleProperty("showDlg2"); | |
| }, | |
| saveAction : function(dialogName){ | |
| // want to trigger the open action of "save Dialog" without using any conditional statements like before. | |
| //var isVisible = $("div[name="+dialogName+"]").is(":visible"); | |
| //$("div[name="+dialogName+"]")[isVisible ? "hide" : "show"](); | |
| this.toggleProperty("showDlg3"); | |
| }, | |
| handleDialogOpen : function(dialogName) { | |
| if(dialogName === "dialog1"){ | |
| // perform some action. | |
| }else if(dialogName === "dialog2"){ | |
| // perform action on second dialog | |
| } else if(dialogName === "dialog3"){ | |
| alert(dialogName); | |
| // do something | |
| // Third dialog's dialog open will be not handled because it is not opened via "open" method. | |
| } | |
| } | |
| } | |
| }); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| body { | |
| margin: 12px 16px; | |
| font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; | |
| font-size: 12pt; | |
| } | |
| .z-button { | |
| display:inline-block; | |
| position:relative; | |
| text-decoration:none; | |
| text-align:center; | |
| overflow:visible; | |
| cursor:pointer; | |
| padding:5px 13px; | |
| margin-right:5px; | |
| border:1px solid transparent; | |
| background-color:#eaeaea; | |
| color:#181818; | |
| border-color:#eaeaea; | |
| border-bottom-color:#d9d9d9; | |
| -ms-box-sizing:border-box; | |
| -webkit-box-sizing:border-box; | |
| -moz-box-sizing:border-box; | |
| box-sizing:border-box; | |
| height:30px; | |
| line-height:1.4; | |
| background-color:#666; | |
| color:#fff; | |
| border-color:#666; | |
| border-bottom-color:#323232; | |
| width: 115px; | |
| z-index: 1001; | |
| } | |
| .z-button:focus{ | |
| outline : none; | |
| } | |
| body{ | |
| font-family: Lucida Grande, Segoe UI, Arial, Helvetica, sans-serif; | |
| font-size: 13px; | |
| } | |
| /* Dialog Component */ | |
| /*.zc-dialog *{ box-sizing:border-box;} Removed in order to avoid spinner structure breakage */ | |
| .zc-dialog, .zc-alert-dialog{ | |
| border:1px solid #d7d7d7; | |
| box-shadow:0px 4px 15px rgba(0, 0, 0, 0.1); | |
| background-color:#fff; | |
| width:300px; | |
| overflow:hidden; | |
| box-sizing:content-box; | |
| padding:0 30px; | |
| position:absolute; | |
| display: none; | |
| z-index: 1001; | |
| } | |
| .zc-draggable .zc-dialog-titlebar{ | |
| cursor:move; | |
| } | |
| /*----------- Header part -----------*/ | |
| .zc-dialog-titlebar { | |
| padding:28px 0 0 0; | |
| font-size:16px; | |
| color:#111; | |
| text-align:left; | |
| box-sizing:content-box; | |
| } | |
| .zc-dialog-img .zc-dialog-title, | |
| .zc-dialog-img .zc-dialog-msg{ | |
| display: block; | |
| margin-left:39px; | |
| line-height: 18px; | |
| margin-top:1px; | |
| text-align:left; | |
| } | |
| .zc-dialog-titlebar-close, | |
| .zc-dialog-titlebar-minimize{ | |
| float:right; | |
| height:16px; | |
| margin-right:-2px; | |
| } | |
| .zc-dialog-titlebar-minimize, | |
| .zc-dialog-titlebar-maximize{ | |
| margin-right:8px; | |
| } | |
| .zc-dialog-titlebar-close:hover, | |
| .zc-dialog-titlebar-minimize:hover{ | |
| background-color:#f0f0f0; | |
| } | |
| .zc-dialog-titlebar-close:focus, | |
| .zc-dialog-titlebar-minimize:focus{ | |
| background-color:#dadada; | |
| outline:none; | |
| } | |
| /*----------- Content part -----------*/ | |
| .zc-dialog-content { | |
| padding:28px 0 30px 0; | |
| color:#111; | |
| display:inline-block; | |
| width:100%; | |
| box-sizing:content-box; | |
| float:left; | |
| overflow: auto; | |
| position:relative; | |
| } | |
| .zc-helper-clearfix:after { | |
| content: "."; | |
| display: block; | |
| height: 0; | |
| clear: both; | |
| visibility: hidden; | |
| } | |
| /*----------- Bottom part -----------*/ | |
| .zc-dialog-buttonpane{ | |
| padding-bottom:30px; | |
| box-sizing:content-box; | |
| display:inline-block; | |
| width:100%; | |
| text-align:right; | |
| padding-top:30px; | |
| } | |
| .zc-dialog-buttonpane .zc-btn:last-child{ | |
| margin-right:0; | |
| } | |
| .zc-dialog-buttonset{ | |
| width: 100%; | |
| text-align: right; | |
| position: relative; | |
| } | |
| .zc-dialog .zc-btn{ | |
| min-width:74px; | |
| text-align:center; | |
| } | |
| .zc-dialog-titlebar + .zc-dialog-content + .zc-dialog-buttonpane, | |
| .zc-dialog-content + .zc-dialog-buttonpane{ | |
| padding-top:15px; /* Modified - 0 is replaced by 15px */ | |
| } | |
| .zc-dialog-overlay{ | |
| background-color: #aaaaaa; | |
| opacity: 0.30; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| z-index : 1000; | |
| } | |
| a{ | |
| text-decoration:none; | |
| color: black; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "version": "0.10.1", | |
| "EmberENV": { | |
| "FEATURES": {} | |
| }, | |
| "options": { | |
| "use_pods": false, | |
| "enable-testing": false | |
| }, | |
| "dependencies": { | |
| "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js", | |
| "ember": "2.6.0", | |
| "ember-data": "2.6.1", | |
| "ember-template-compiler": "2.6.0" | |
| }, | |
| "addons": {} | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment