Skip to content

Instantly share code, notes, and snippets.

@hussfelt

hussfelt/README.md

Last active September 28, 2024 14:51
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save hussfelt/a6fe71ebd7cce327df29 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save hussfelt/a6fe71ebd7cce327df29 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. hussfelt revised this gist May 27, 2015. 1 changed file with 3 additions and 3 deletions.
    6 changes: 3 additions & 3 deletions README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -7,11 +7,11 @@ IFrame plugin for dashing

    ## Installation

    Put the files `iframe.coffee`, `iframe.html` and `iframe.scss` in the `/widgets` directory
    Create the folder `iframe` in the `/widgets/` directory. Put the files `iframe.coffee`, `iframe.html` and `iframe.scss` in that folder.

    This can also be done by using the gist: https://gist.github.com/hussfelt/?
    This can also be done by using the gist: https://gist.github.com/hussfelt/a6fe71ebd7cce327df29

    dashing install ?
    dashing install a6fe71ebd7cce327df29

    ## Dashboard configuration

  2. hussfelt created this gist May 27, 2015.
    46 changes: 46 additions & 0 deletions README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,46 @@
    # dashing-iframe
    IFrame plugin for dashing

    ## Description

    [Dashing](http://shopify.github.com/dashing) widget to display an iframe with specified src

    ## Installation

    Put the files `iframe.coffee`, `iframe.html` and `iframe.scss` in the `/widgets` directory

    This can also be done by using the gist: https://gist.github.com/hussfelt/?

    dashing install ?

    ## Dashboard configuration

    Put the following in your dashboard.erb file to show the iframe:

    ```html
    <li data-row="1" data-col="1" data-sizex="1" data-sizey="1">
    <div data-id="iframeId1" data-view="Iframe"></div>
    </li>
    ```

    ## Updating the src

    ### Curl

    ```bash
    curl -d '{
    "auth_token": "YOUR_AUTH_TOKEN",
    "src": "http://example.com/"
    }' http://0.0.0.0:3030/widgets/iframeId1
    ```

    ### Inline

    ```html
    <li data-row="1" data-col="1" data-sizex="1" data-sizey="1">
    <div data-id="iframeId1" data-view="Iframe" data-src="http://example.com/"></div>
    </li>
    ```

    # License
    Distributed under the MIT license
    7 changes: 7 additions & 0 deletions iframe.coffee
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,7 @@
    class Dashing.Iframe extends Dashing.Widget

    ready: ->
    $(@node).find(".iframe").attr('src', @get('src'))

    onData: (data) ->
    $(@node).find(".iframe").attr('src', data.src)
    1 change: 1 addition & 0 deletions iframe.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    <iframe class="iframe" data-bind-src="src" scrolling="no"></iframe>
    29 changes: 29 additions & 0 deletions iframe.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,29 @@
    // ----------------------------------------------------------------------------
    // Sass declarations
    // ----------------------------------------------------------------------------
    $background-color: #FFF;

    $title-color: #333;
    $moreinfo-color: #333;

    $iframe-background: darken($background-color, 25%);

    // ----------------------------------------------------------------------------
    // Widget-iframe styles
    // ----------------------------------------------------------------------------
    .widget-iframe {

    background-color: $background-color;
    padding: 0 !important;
    margin: 0 !important;

    iframe {
    width: 100%;
    height: 100%;
    border: 0;
    padding: 0;
    margin: 0;
    overflow: hidden;
    }

    }