Notebook to test Polymer element resizing in Jupyter's Dashboard view

polymer-resize.ipynb

{
 "cells": [
  {
   "cell_type": "code",
   "execution_count": 1,
   "metadata": {
    "collapsed": false,
    "urth": {
     "dashboard": {
      "hidden": true
     }
    }
   },
   "outputs": [
    {
     "data": {
      "text/html": [
       "<script src=\"./static/urth_components/webcomponentsjs/webcomponents-lite.min.js\"></script>\n",
       "<link rel=\"import\" href=\"./static/urth_components/iron-resizable-behavior/iron-resizable-behavior.html\"\n",
       "  is=\"urth-core-import\" package=\"PolymerElements/iron-resizable-behavior\">\n",
       "\n",
       "<dom-module id=\"x-puck\">\n",
       "\n",
       "  <style>\n",
       "    :host {\n",
       "      display: inline-block;\n",
       "      border: 3px solid lightblue;\n",
       "    }\n",
       "  </style>\n",
       "\n",
       "  <template>\n",
       "\n",
       "    <b>I'm a resize-aware, thirdifying puck at (<span>{{x}}</span> x <span>{{y}}</span>).</b>\n",
       "\n",
       "  </template>\n",
       "\n",
       "  <script>\n",
       "    HTMLImports.whenReady(function () {\n",
       "      Polymer({\n",
       "        is: 'x-puck',\n",
       "        behaviors: [\n",
       "          Polymer.IronResizableBehavior\n",
       "        ],\n",
       "        properties: {\n",
       "          x: {\n",
       "            type: Number,\n",
       "            value: 0\n",
       "          },\n",
       "          y: {\n",
       "            type: Number,\n",
       "            value: 0\n",
       "          }\n",
       "        },\n",
       "        listeners: {\n",
       "          'iron-resize': '_onIronResize'\n",
       "        },\n",
       "        attached: function() {\n",
       "          //this.async(this.notifyResize, 1);\n",
       "        },\n",
       "        get parent() {\n",
       "          if (this.parentNode.nodeType === Node.DOCUMENT_FRAGMENT_NODE) {\n",
       "            return this.parentNode.host;\n",
       "          }\n",
       "          return this.parentNode;\n",
       "        },\n",
       "        _onIronResize: function() {\n",
       "          var x = this.x = Math.floor(this.parent.offsetWidth / 3);\n",
       "          var y = this.y = Math.floor(this.parent.offsetHeight / 3);\n",
       "          this.translate3d(x + 'px', y + 'px', 0);\n",
       "        }\n",
       "      });\n",
       "    });\n",
       "  </script>\n",
       "\n",
       "</dom-module>"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "%%html\n",
    "<script src=\"./static/urth_components/webcomponentsjs/webcomponents-lite.min.js\"></script>\n",
    "<link rel=\"import\" href=\"./static/urth_components/iron-resizable-behavior/iron-resizable-behavior.html\"\n",
    "  is=\"urth-core-import\" package=\"PolymerElements/iron-resizable-behavior\">\n",
    "\n",
    "<dom-module id=\"x-puck\">\n",
    "\n",
    "  <style>\n",
    "    :host {\n",
    "      display: inline-block;\n",
    "      border: 3px solid lightblue;\n",
    "    }\n",
    "  </style>\n",
    "\n",
    "  <template>\n",
    "\n",
    "    <b>I'm a resize-aware, thirdifying puck at (<span>{{x}}</span> x <span>{{y}}</span>).</b>\n",
    "\n",
    "  </template>\n",
    "\n",
    "  <script>\n",
    "    HTMLImports.whenReady(function () {\n",
    "      Polymer({\n",
    "        is: 'x-puck',\n",
    "        behaviors: [\n",
    "          Polymer.IronResizableBehavior\n",
    "        ],\n",
    "        properties: {\n",
    "          x: {\n",
    "            type: Number,\n",
    "            value: 0\n",
    "          },\n",
    "          y: {\n",
    "            type: Number,\n",
    "            value: 0\n",
    "          }\n",
    "        },\n",
    "        listeners: {\n",
    "          'iron-resize': '_onIronResize'\n",
    "        },\n",
    "        attached: function() {\n",
    "          //this.async(this.notifyResize, 1);\n",
    "        },\n",
    "        get parent() {\n",
    "          if (this.parentNode.nodeType === Node.DOCUMENT_FRAGMENT_NODE) {\n",
    "            return this.parentNode.host;\n",
    "          }\n",
    "          return this.parentNode;\n",
    "        },\n",
    "        _onIronResize: function() {\n",
    "          var x = this.x = Math.floor(this.parent.offsetWidth / 3);\n",
    "          var y = this.y = Math.floor(this.parent.offsetHeight / 3);\n",
    "          this.translate3d(x + 'px', y + 'px', 0);\n",
    "        }\n",
    "      });\n",
    "    });\n",
    "  </script>\n",
    "\n",
    "</dom-module>"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 2,
   "metadata": {
    "collapsed": false,
    "urth": {
     "dashboard": {
      "hidden": true
     }
    }
   },
   "outputs": [
    {
     "data": {
      "text/html": [
       "<x-puck></x-puck>"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "%%html\n",
    "<x-puck></x-puck>"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": true,
    "urth": {
     "dashboard": {
      "hidden": true
     }
    }
   },
   "outputs": [],
   "source": []
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 3",
   "language": "python",
   "name": "python3"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 3
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython3",
   "version": "3.4.3"
  },
  "urth": {
   "dashboard": {
    "cellMargin": 10,
    "defaultCellHeight": 20,
    "maxColumns": 12
   }
  }
 },
 "nbformat": 4,
 "nbformat_minor": 0
}