Defiant VHS.ipynb

{
 "cells": [
  {
   "cell_type": "code",
   "execution_count": 1,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "data": {
      "text/html": [
       "<script src=\"https://cdn.rawgit.com/hbi99/defiant.js/master/dist/defiant.min.js\"></script>"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "%%html\n",
    "<script src=\"https://cdn.rawgit.com/hbi99/defiant.js/master/dist/defiant.min.js\"></script>"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 2,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": [
    "%reload_ext jademagic"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 3,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "data": {
      "application/javascript": [
       "\n",
       "            require(\n",
       "                [\n",
       "                    \"notebook/js/codecell\",\n",
       "                    \"codemirror/mode/jade/jade\"\n",
       "                ],\n",
       "                function(cc){\n",
       "                    cc.CodeCell.options_default.highlight_modes.magic_jade = {\n",
       "                        reg: [\"^%%jade\"]\n",
       "                    }\n",
       "                }\n",
       "            );\n",
       "            "
      ],
      "text/plain": [
       "<IPython.core.display.Javascript object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "text/html": [
       "\n",
       "<script type=\"defiant/xsl-template\">\n",
       "  <xsl:template name=\"movie_template\">\n",
       "    <xsl:for-each select=\"//movie\">\n",
       "      <div class=\"vhs\">\n",
       "        <h4>\n",
       "          <xsl:value-of select=\"./title\"></xsl:value-of>\n",
       "        </h4>\n",
       "      </div>\n",
       "    </xsl:for-each>\n",
       "  </xsl:template>\n",
       "</script>"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "execution_count": 3,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "%%jade\n",
    "script(type=\"defiant/xsl-template\")\n",
    "  xsl:template(name=\"movie_template\")\n",
    "    xsl:for-each(select=\"//movie\")\n",
    "      .vhs\n",
    "        h4\n",
    "          xsl:value-of(select=\"./title\")"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 6,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "data": {
      "application/javascript": [
       "Defiant.gatherTemplates();\n",
       "\n",
       "var data = {\n",
       "        \"movie\": [\n",
       "            {\"title\": \"The Usual Suspects\"},\n",
       "            {\"title\": \"Pulp Fiction\"},\n",
       "            {\"title\": \"Independence Day\"}\n",
       "        ]\n",
       "    },\n",
       "    html = Defiant.render('movie_template', data);\n",
       "\n",
       "element.html(html);"
      ],
      "text/plain": [
       "<IPython.core.display.Javascript object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "%%javascript\n",
    "Defiant.gatherTemplates();\n",
    "\n",
    "var data = {\n",
    "        \"movie\": [\n",
    "            {\"title\": \"The Usual Suspects\"},\n",
    "            {\"title\": \"Pulp Fiction\"},\n",
    "            {\"title\": \"Independence Day\"}\n",
    "        ]\n",
    "    },\n",
    "    html = Defiant.render('movie_template', data);\n",
    "\n",
    "element.html(html);"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 7,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "data": {
      "text/html": [
       "<style>\n",
       "@import url(https://fonts.googleapis.com/css?family=Gloria+Hallelujah);\n",
       ".vhs {\n",
       "    background-image: url(https://upload.wikimedia.org/wikipedia/commons/6/67/VHS-cassette.jpg);\n",
       "    background-size: contain;\n",
       "    width: 300px;\n",
       "    height: 200px;\n",
       "    color: rgba(255,255,255,0.9);\n",
       "    font-family: 'Gloria Hallelujah', cursive;\n",
       "    text-align: center;\n",
       "    padding: 75px 100px 0 100px;\n",
       "    float: left;\n",
       "    margin: 10px;\n",
       "}\n",
       "</style>"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "%%html\n",
    "<style>\n",
    "@import url(https://fonts.googleapis.com/css?family=Gloria+Hallelujah);\n",
    ".vhs {\n",
    "    background-image: url(https://upload.wikimedia.org/wikipedia/commons/6/67/VHS-cassette.jpg);\n",
    "    background-size: contain;\n",
    "    width: 300px;\n",
    "    height: 200px;\n",
    "    color: rgba(255,255,255,0.9);\n",
    "    font-family: 'Gloria Hallelujah', cursive;\n",
    "    text-align: center;\n",
    "    padding: 75px 100px 0 100px;\n",
    "    float: left;\n",
    "    margin: 10px;\n",
    "}\n",
    "</style>"
   ]
  }
 ],
 "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.11"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 0
}