ivy/notebooks/iframes.ipynb

{
 "cells": [
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": false,
    "scrolled": false
   },
   "outputs": [],
   "source": [
    "%%javascript\n",
    "//element.width(300);\n",
    "//element.height(300);\n",
    "window._iframe = $('<iframe />', {\n",
    "    id: 'myframetry2',\n",
    "    //width: '100%',\n",
    "    //height: '100%',\n",
    "    src: 'http://localhost:8888/nbextensions/ivy/lib/try3.html',\n",
    "}).appendTo(element);\n",
    "window._iframe.load(function() {\n",
    "    console.log(\"iframe loaded\");    \n",
    "    window._iframe[0].contentWindow._do_when_ready(function () {\n",
    "        console.log(\"doing...\");\n",
    "        window._div = _iframe[0].contentWindow.$(\"#try3div\");\n",
    "        window._cy = _iframe[0].contentWindow._cy;\n",
    "        window._div.width(400);\n",
    "        window._div.height(500);        \n",
    "        window._cy.resize();\n",
    "        window._div.css('background-color', 'pink');\n",
    "        window._cy = window._iframe[0].contentWindow._cy;\n",
    "        window._cy.add(JSON.parse(JSON.stringify(_client_server.elements)));\n",
    "        //window._cy.style(_client_server.style);\n",
    "        window._cy.layout();    \n",
    "        _cy.elements().qtip({\n",
    "            content: {\n",
    "                button: true,\n",
    "                text: \"hello\",\n",
    "            },\n",
    "            position: {\n",
    "                my: 'top center',\n",
    "                at: 'bottom center'\n",
    "            },\n",
    "            style: {\n",
    "                classes: 'qtip-bootstrap',\n",
    "                tip: {\n",
    "                    width: 16,\n",
    "                    height: 8,\n",
    "                },\n",
    "            },\n",
    "        });\n",
    "    });\n",
    "});\n",
    "/*\n",
    "element.dialog({\n",
    "    \"title\" : \"title\",\n",
    "}).dialogExtend({\n",
    "    \"closable\" : true,\n",
    "    \"maximizable\" : true,\n",
    "    \"minimizable\" : true,\n",
    "    \"collapsable\" : true,\n",
    "    \"dblclick\" : \"collapse\",\n",
    "    \"titlebar\" : false,\n",
    "    \"minimizeLocation\" : \"left\",\n",
    "});\n",
    "*/"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": false
   },
   "outputs": [],
   "source": [
    "%%javascript\n",
    "    var ivy_lib_path = \"http://localhost:8888/nbextensions/ivy/lib/\";\n",
    "\n",
    "    require.config({\n",
    "        paths: {\n",
    "            \"jquery-dialogextend\": ivy_lib_path + \"jquery-dialogextend-2.0.4/jquery.dialogextend\",\n",
    "        },\n",
    "    });\n",
    "require([\"jquery-dialogextend\"], function () {\n",
    "   console.log(\"jquery-dialogextend loaded\"); \n",
    "});"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": false
   },
   "outputs": [],
   "source": [
    "%%javascript\n",
    "window._client_server = {\n",
    "    \"elements\": [\n",
    "\n",
    "\t{'data': {'id': 'n0', 'name': 'client'}, 'classes': 'at_least_one', 'group': 'nodes'} ,\n",
    "\t{'data': {'id': 'n1', 'name': '(server+s)'}, 'classes': 'summary', 'group': 'nodes'} ,\n",
    "\t{'data': {'id': 'n2', 'name': '(server-s)'}, 'classes': 'exactly_one', 'group': 'nodes'} ,\n",
    "\t{'data': {'source': 'n0', 'id': 'e0', 'name': 'c', 'target': 'n1'}, 'classes': 'none_to_none', 'group': 'edges'} ,\n",
    "\t{'data': {'source': 'n0', 'id': 'e1', 'name': 'c', 'target': 'n2'}, 'classes': 'injective', 'group': 'edges'} ,\n",
    "\n",
    "    ],\n",
    "\n",
    "    \"style\": [\n",
    "\t{\n",
    "\t    \"selector\": \"node\",\n",
    "\t    \"style\": {\n",
    "\t\t\"content\": \"data(name)\",\n",
    "\t\t\"text-wrap\": \"wrap\",\n",
    "\t\t//\"font-family\": \"helvetica\",\n",
    "\t\t//\"font-size\": \"14px\",\n",
    "\t\t\"text-outline-width\": \"3px\",\n",
    "\t\t\"text-outline-color\": \"#888\",\n",
    "\t\t\"text-valign\": \"center\",\n",
    "\t\t\"color\": \"#fff\",\n",
    "\t\t\"width\": \"50\",\n",
    "\t\t\"height\": \"50\",\n",
    "\t\t\"border-color\": \"#000\",\n",
    "\t\t//\"shape\": \"octagon\",\n",
    "\t\t\"background-color\": \"#888\",\n",
    "\t    },\n",
    "\t},\n",
    "\t{\n",
    "\t    \"selector\": \":selected\",\n",
    "\t    \"style\": {\n",
    "\t\t\"background-color\": \"#000\",\n",
    "\t\t\"border-color\": \"#fff\",\n",
    "\t\t\"line-color\": \"#000\",\n",
    "\t\t\"target-arrow-color\": \"#000\",\n",
    "\t\t\"text-outline-color\": \"#000\"\n",
    "\t    },\n",
    "\t},\n",
    "\t{\n",
    "\t    \"selector\": \"edge\",\n",
    "\t    \"style\": {\n",
    "\t\t\"content\": \"data(name)\",\n",
    "\t\t\"width\": \"4px\",\n",
    "\t\t\"target-arrow-shape\": \"triangle\",\n",
    "\t\t\"mid-target-arrow-shape\": \"triangle\",\n",
    "\t    },\n",
    "\t},\n",
    "\n",
    "\t{\n",
    "\t    \"selector\": \"node.summary\",\n",
    "\t    \"style\": {\n",
    "\t\t\"border-width\": \"0px\",\n",
    "\t    },\n",
    "\t},\n",
    "\n",
    "\t{\n",
    "\t    \"selector\": \"node.exactly_one\",\n",
    "\t    \"style\": {\n",
    "\t\t\"border-width\": \"4px\",\n",
    "\t\t\"border-style\": \"solid\",\n",
    "\t    },\n",
    "\t},\n",
    "\n",
    "\t{\n",
    "\t    \"selector\": \"node.at_least_one\",\n",
    "\t    \"style\": {\n",
    "\t\t\"border-width\": \"8px\",\n",
    "\t\t\"border-style\": \"double\",\n",
    "\t    },\n",
    "\t},\n",
    "\n",
    "\t{\n",
    "\t    \"selector\": \"edge.none_to_none\",\n",
    "\t    \"style\": {\n",
    "\t\t\"width\": \"4px\",\n",
    "\t\t//\"target-arrow-shape\": \"triangle\"\n",
    "\t\t\"line-style\": \"dashed\",\n",
    "\t\t\"target-arrow-shape\": \"tee\",\n",
    "\t\t\"target-arrow-color\": \"#000\",\n",
    "\t    },\n",
    "\t},\n",
    "\n",
    "\t{\n",
    "\t    \"selector\": \"edge.injective\",\n",
    "\t    \"style\": {\n",
    "\t\t\"width\": \"4px\",\n",
    "\t\t\"target-arrow-shape\": \"triangle-backcurve\",\n",
    "\t\t\"target-arrow-color\": \"#000\",\n",
    "\t    },\n",
    "\t},\n",
    "\n",
    "\n",
    "\t{\n",
    "\t    \"selector\": \".foo\",\n",
    "\t    \"style\": {\n",
    "\t\t\"border-width\": \"4px\",\n",
    "\t\t\"border-color\": \"red\"\n",
    "\t    },\n",
    "\t},\n",
    "    ],\n",
    "\n",
    "}\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": []
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 2",
   "language": "python",
   "name": "python2"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 2
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython2",
   "version": "2.7.6"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 0
}