JSFiddle - React, Tailwind, and code Playground

by hekevintran

HTML

<script src="http://builds.emberjs.com/handlebars-1.0.0.js"></script>
<script src="http://builds.emberjs.com/tags/v1.1.2/ember.js"></script>
<script src="http://maps.googleapis.com/maps/api/js?libraries=places&sensor=false"></script>

<script type="text/x-handlebars" data-template-name="buttons">
<button {{action "openBox" }}>Open Box</button>
<button {{action "closeBox" }}>Close Box</button>
</script>

<script type="text/x-handlebars" data-template-name="lightbox">
<div style="
background-color: lightgray;
border: 2px solid #000000;"
>
    {{view map.view}}
</div>
</script>

JavaScript

App = Ember.Application.create({});

App.Map = Ember.Object.extend({
    controller: null,
    view: function () {
        var controller = this;
        return Ember.View.extend({
            controller: controller,
            map: null,
            installMap: function () {
                var mapOptions = {
                    // San Francisco
                    center: new google.maps.LatLng(37.773429,-122.424774),
                    zoom: 10,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                };
                map = new google.maps.Map(this.$()[0], mapOptions);
                this.set('map', map);
            },
            didInsertElement: function () {
                this.$().css({
                    'height': '350px',
                    'width': '350px'
                });
                this.installMap();
            },
            resize: function () {
                var that = this;
                setTimeout(function(){
                    google.maps.event.trigger(that.get('map'), 'resize');
                }, 1);
            },
            controllerIsVisibleChanged: function () {
                if (this.get('controller.controller.isVisible')) {
                    this.resize();
                }
            }.observes('controller.controller.isVisible')
        });
    }.property()
});

App.Lightbox = Ember.Object.extend({
    isVisible: false,
    open: function () {
        this.set('isVisible', true);
    },
    close: function () {
        this.set('isVisible', false);
    },
    view: function () {
        var controller = this;
        return Ember.View.extend({
            templateName: 'lightbox',
            controller: controller,
            isVisibleBinding: 'controller.isVisible'
        })
    }.property()
});

App.MapLightbox = App.Lightbox.extend({
    map: function () {
        var controller = this;
        return App.Map.create({
            controller: controller
        });
   ...