[Checkins] SVN: Sandbox/J1m/webframe/webframe. initial

Jim Fulton jim at zope.com
Sat Jan 29 17:00:28 EST 2011


Log message for revision 119998:
  initial

Changed:
  A   Sandbox/J1m/webframe/webframe.html
  A   Sandbox/J1m/webframe/webframe.js

-=-
Added: Sandbox/J1m/webframe/webframe.html
===================================================================
--- Sandbox/J1m/webframe/webframe.html	                        (rev 0)
+++ Sandbox/J1m/webframe/webframe.html	2011-01-29 22:00:27 UTC (rev 119998)
@@ -0,0 +1,101 @@
+<!doctype html>
+<head>
+  <link
+     rel="stylesheet" type="text/css"
+     href="http://ajax.googleapis.com/ajax/libs/dojo/1.5/dojo/resources/dojo.css"
+     >
+  <link
+     rel="stylesheet" type="text/css"
+     href="http://ajax.googleapis.com/ajax/libs/dojo/1.5/dijit/themes/tundra/tundra.css"
+     >
+
+  <style type='text/css'>
+    html, body { height: 100%; }
+    .frame-div {
+        position: fixed;
+        top: 2.5em;
+        left: 0em;
+        right: 0em;
+        bottom: 0em;
+    }
+    iframe { height: 100%; width: 100%; }
+    .url-area {
+        position: fixed;
+        top: .5em;
+        left: 14em;
+        right: 0em;
+        height: 1.5em;
+        display: inline;
+    }
+    .url-container {
+        position: absolute;
+        top: 0em;
+        left: 2.5em;
+        right: 5em;
+        bottom: 0em;
+    }
+    .url-buttons {
+        position: absolute;
+        top: -.3em;
+        right: .5em;
+    }
+    .intro {padding: 2em; }
+  </style>
+
+  <script type="text/javascript"
+          src="http://ajax.googleapis.com/ajax/libs/dojo/1.5/dojo/dojo.xd.js"
+          djConfig="parseOnLoad: true"
+          ></script>
+  <script type="text/javascript" src="webframe.js">
+  </script>
+
+</head>
+<body class="tundra">
+  <button dojoType="dijit.form.Button"
+          onClick="web_frame_application.back"
+          style="font-weight: bold;"
+          id="back" title="Back">&#x27f8;</button>
+  <button id="playtoggle"
+          dojoType="dijit.form.Button"
+          onClick="web_frame_application.toggle"
+          style="font-weight: bold;"
+          >&#x2016;</button>
+  <button dojoType="dijit.form.Button"
+          style="font-weight: bold;"
+          onClick="web_frame_application.forward"
+          id="forward" title="Forward">&#x27f9;</button>
+
+  <div dojoType="dijit.form.ComboButton">
+    <span>urls:</span>
+    <div id="url_menu" dojoType="dijit.Menu" id="url-menu"></div>
+  </div>
+  <div class="url-area">
+    URL:
+    <div class="url-container">
+      <input type="text" name="url" id="url" value=""
+             dojoType="dijit.form.ValidationTextBox"
+             regExp="\S+" invalidMessage="Invalid URL."
+             style="width: 100%;">
+    </div>
+    <div class="url-buttons">
+      <button dojoType="dijit.form.Button"
+              onClick="web_frame_application.add"
+              id="add" title="Add a URL">+</button>
+      <button dojoType="dijit.form.Button"
+              onClick="web_frame_application.remove"
+              id="remove" title="Remove a URL">-</button>
+    </div>
+  </div>
+  <div class="frame-div">
+    <iframe id="frame"></iframe>
+  </div>
+  <div class="intro">
+    <h1>Getting started</h1>
+    <p>To add urls to the player:</p>
+    <ul>
+      <li>Enter a URL into the URL field</li>
+      <li>Press enter to see the page.</li>
+      <li>Click the add (+) button.</li>
+    </ul>
+  </div>
+</body>


Property changes on: Sandbox/J1m/webframe/webframe.html
___________________________________________________________________
Added: svn:eol-style
   + native

Added: Sandbox/J1m/webframe/webframe.js
===================================================================
--- Sandbox/J1m/webframe/webframe.js	                        (rev 0)
+++ Sandbox/J1m/webframe/webframe.js	2011-01-29 22:00:27 UTC (rev 119998)
@@ -0,0 +1,176 @@
+dojo.require('dijit.form.Button');
+dojo.require('dijit.form.ValidationTextBox');
+dojo.require('dijit.form.ComboButton');
+dojo.require('dijit.Menu');
+dojo.require('dijit.MenuItem');
+
+var web_frame_application = {
+    playing: true,
+    urls: [],
+    menu_items: {},
+    index: 0,
+    key: 'web_frame_application' +
+        window.location.pathname + window.location.search,
+    play1: function (noinc) {
+        if (! noinc) {
+            web_frame_application.index += 1;
+        }
+        if ((noinc || web_frame_application.playing) &&
+            web_frame_application.urls.length
+           ) {
+            while (web_frame_application.index < 0) {
+                web_frame_application.index += (
+                    web_frame_application.urls.length);
+            }
+            dojo.byId('frame').src = web_frame_application.urls[
+                web_frame_application.index %
+                    web_frame_application.urls.length];
+        }
+    },
+    back: function () {
+        if (web_frame_application.playing) {
+            web_frame_application.toggle();
+        }
+        web_frame_application.index -= 1;
+        web_frame_application.play1(true);
+    },
+    forward: function () {
+        web_frame_application.index += 1;
+        web_frame_application.play1(true);
+    },
+    toggle: function () {
+        var toggle_button = dojo.byId('playtoggle');
+        if (web_frame_application.playing) {
+            web_frame_application.playing = false;
+            toggle_button.innerHTML = "\u25b6";
+            toggle_button.title = "Play";
+        }
+        else {
+            web_frame_application.playing = true;
+            toggle_button.innerHTML = "&nbsp;&#x2016;&nbsp;";
+            toggle_button.
+            toggle_button.title = "Stop";
+            web_frame_application.play1();
+        }
+    },
+    play_url: function (src) {
+        dojo.byId('frame').src = src;
+        web_frame_application.index = dojo.indexOf(
+            web_frame_application.urls, src);
+    },
+    enter: function (value) {
+        if (! (/^\w+:/.exec(value))) {
+            value = 'http://' + value;
+        }
+        dojo.byId('frame').src = value;
+        web_frame_application.update_controls();
+    },
+    add: function () {
+        dijit.byId('url').set('value', '');
+        var src = dojo.byId('frame').src, item;
+        if (src)
+        {
+            if (dojo.indexOf(web_frame_application.urls, src) >= 0) {
+                alert("Already in urls: "+src);
+            }
+            else {
+                web_frame_application.urls.push(src);
+                item = new dijit.MenuItem(
+                    {
+                        label: src,
+                        onClick: function () {
+                            web_frame_application.play_url(src);
+                        }
+                    }
+                );
+                dijit.byId("url_menu").addChild(item);
+                web_frame_application.menu_items[src] = item;
+                localStorage.setItem(
+                    web_frame_application.key,
+                    JSON.stringify(web_frame_application.urls));
+            }
+        }
+        else {
+            alert("You must be viewing a url.");
+        }
+        web_frame_application.update_controls();
+    },
+    remove: function () {
+        var index, src = dojo.byId('frame').src;
+        if (src)
+        {
+            index = dojo.indexOf(web_frame_application.urls, src);
+            if (index >= 0) {
+                web_frame_application.urls.splice(index, 1);
+                web_frame_application.menu_items[src].destroy();
+                delete web_frame_application.menu_items[src];
+                web_frame_application.play1(false);
+                localStorage.setItem(
+                    web_frame_application.key,
+                    JSON.stringify(web_frame_application.urls));
+            }
+            else {
+                alert("This isn't a saved url in the first place.");
+            }
+        }
+        else {
+            alert("You must be viewing a url.");
+        }
+        web_frame_application.update_controls();
+        dojo.byId('frame').src = '';
+    },
+    update_controls: function () {
+        var index, src = dojo.byId('frame').src;
+        if (src) {
+            index = dojo.indexOf(web_frame_application.urls, src);
+        }
+        dijit.byId('add').set('disabled', ! (src && index < 0));
+        dijit.byId('remove').set('disabled', ! (src && index >= 0));
+        dijit.byId('back').set('disabled',
+                              ! (web_frame_application.urls.length));
+        dijit.byId('forward').set('disabled',
+                                 ! (web_frame_application.urls.length));
+        dijit.byId('playtoggle').set('disabled',
+                                    ! (web_frame_application.urls.length));
+
+    }
+}
+
+dojo.addOnLoad(
+    function () {
+        var urls;
+        urls = localStorage.getItem(web_frame_application.key);
+        if (urls) {
+            urls = JSON.parse(urls);
+        }
+        else {
+            urls = [];
+        }
+        web_frame_application.urls = urls;
+        function player () {
+            web_frame_application.play1();
+            setTimeout(player, 60000);
+        }
+        player();
+        web_frame_application.update_controls();
+
+        dojo.connect(
+            dojo.byId('url'), 'onkeypress', function (e) {
+                if (e.keyCode == 13)
+                    web_frame_application.enter(dijit.byId('url').getValue());
+            });
+
+        dojo.forEach(
+            urls, function (src) {
+                var item = new dijit.MenuItem(
+                    {
+                        label: src,
+                        onClick: function () {
+                            web_frame_application.play_url(src);
+                        }
+                    }
+                );
+                dijit.byId("url_menu").addChild(item);
+                web_frame_application.menu_items[src] = item;
+            });
+    });


Property changes on: Sandbox/J1m/webframe/webframe.js
___________________________________________________________________
Added: svn:eol-style
   + native



More information about the checkins mailing list