Last active
June 27, 2016 14:18
-
-
Save KarthikaRamachandran/6d8c66b65913d7552211d2183aab09e4 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"); | |
| } | |
| }, | |
| _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, | |
| 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"](); | |
| }, | |
| handleDialogOpen : function(dialogName) { | |
| if(dialogName === "dialog1"){ | |
| // perform some action. | |
| }else if(dialogName === "dialog2"){ | |
| // perform action on second dialog | |
| } | |
| // 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