Skip to content

Instantly share code, notes, and snippets.

/component.css

Created July 16, 2013 01:22
Download ZIP

Revisions

  1. @invalid-email-address Anonymous created this gist Jul 16, 2013.
    4 changes: 4 additions & 0 deletions component.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,4 @@
    .mfiddle-Owner-overlay {
    border: 1px solid black;
    padding: 15px;
    }
    47 changes: 47 additions & 0 deletions component.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,47 @@
    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>MFiddle</title>
    <script type="text/montage-serialization">{
    "owner": {
    "properties": {
    "element": {"#": "component"}
    }
    },
    "overlay": {
    "prototype": "montage/ui/overlay.reel",
    "properties": {
    "element": {"#": "overlay"},
    "anchor": {"@": "textField"}
    }
    },
    "button": {
    "prototype": "digit/ui/button.reel",
    "properties": {
    "label": "Show Overlay",
    "element": {"#": "button"}
    },
    "listeners": [
    {
    "type": "action",
    "listener": {"@": "owner"}
    }
    ]
    },
    "textField": {
    "prototype": "digit/ui/text-field.reel",
    "properties": {
    "value": "Editable text",
    "element": {"#": "textField"}
    }
    }
    }</script></head>
    <body>
    <div data-montage-id="component">
    <button data-montage-id="button"></button>
    <div data-montage-id="overlay" class="mfiddle-Owner-overlay">Hello there</div>
    <input data-montage-id="textField" type="text">
    </div>
    </body>
    </html>
    9 changes: 9 additions & 0 deletions component.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,9 @@
    var Component = require("montage/ui/component").Component;

    exports.Owner = Component.specialize({
    handleButtonAction: {
    value: function() {
    this.templateObjects.overlay.show();
    }
    }
    });
    1 change: 1 addition & 0 deletions settings.json
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    {"version":1}