[Swift-commit] r7110 - in SwiftApps/tryswift: . img img/basic

davidk at ci.uchicago.edu davidk at ci.uchicago.edu
Sun Sep 29 01:09:33 CDT 2013


Author: davidk
Date: 2013-09-29 01:09:25 -0500 (Sun, 29 Sep 2013)
New Revision: 7110

Added:
   SwiftApps/tryswift/img/
   SwiftApps/tryswift/img/basic/
   SwiftApps/tryswift/img/basic/x.png
Modified:
   SwiftApps/tryswift/index.php
   SwiftApps/tryswift/tryswift.css
   SwiftApps/tryswift/tryswift.php
Log:
Various usability improvements


Added: SwiftApps/tryswift/img/basic/x.png
===================================================================
(Binary files differ)


Property changes on: SwiftApps/tryswift/img/basic/x.png
___________________________________________________________________
Added: svn:mime-type
   + application/octet-stream

Modified: SwiftApps/tryswift/index.php
===================================================================
--- SwiftApps/tryswift/index.php	2013-09-25 18:34:26 UTC (rev 7109)
+++ SwiftApps/tryswift/index.php	2013-09-29 06:09:25 UTC (rev 7110)
@@ -1,99 +1,132 @@
-<html>
-   <link rel="stylesheet" type="text/css" href="tryswift.css">
+<!DOCTYPE html>
+<html lang="en">
    <head>
       <title>Try Swift</title>
+      <link href="tryswift.css" rel="stylesheet" media="screen">
    </head>
 
    <body>
-      <div id="header">
-      <hr>
-      Try Swift
-      <hr>
-      </div>
+      <div id="maincontainer">
+         <div id="contentwrapper">
+            <div id="contentcolumn">
 
-      <div id="wrap">
-      <div id="wrapHeader">
-         <br>
-         Enter your Swift code below
-      </div>
-      <form name="sourceForm" action="http://54.212.60.65:8080/tryswift.php" method="POST">
-         <div id="textAreaDiv">
-            <textarea id="source" name="source" spellcheck="false" wrap="physical"></textarea><br>
-         </div>
-         <div id="progsDiv">
-         <div id="progsDivText">
-            Example Programs<br><br>
-            <ul>
+               <div id="topsection">
+                  <h1>Try Swift</h1>
+               </div> <!-- topsection -->
 
-            <?php
-               $scriptFiles = array();
+               <!-- Editor window -->
+               <script src="js/ace/ace.js" type="text/javascript" charset="utf-8"></script>
+               <div id="editor">
+               <script>
+                  var editor = ace.edit("editor");
+                  editor.setTheme("ace/theme/solarized_dark");
+                  editor.getSession().setMode("ace/mode/text");
+                  editor.setShowPrintMargin(false);
+                  editor.setHighlightActiveLine(false);
+                  editor.setDisplayIndentGuides(false);
+               </script>
+               </div> <!-- editor -->
+            </div> <!-- contentcolumn -->
+         </div> <!-- contentwrapper -->
+            
+         <div id="buttonsDiv">
+            <button id="back">Back</button>
+            <button id="next">Next</button>
+         </div> <!-- buttonsDiv -->
 
-               $directory = opendir("scripts");
-               while($script = readdir($directory)) {
-                  if(substr($script, -6) == ".swift") {
-                     $scriptFiles[] = $script;
-                  }
-               }
-               closedir($directory);
+         <div id="leftcolumn">
+            <div id="infoDiv">
+               <iframe id="infoFrame"></iframe>
+            </div> <!-- infoDiv -->
+         </div> <!-- leftcolumn -->
 
-               sort($scriptFiles);
-               foreach($scriptFiles as $script) {
-                  echo "<li><input type=\"radio\" name=\"existingApplications\" value=\"scripts/$script\" onclick=\"addtext()\">$script\n";
-
-                  $html_filename="scripts/" . basename($script, ".swift") . ".html";
-                  if(file_exists($html_filename)) {
-                     echo "<a href=\"$html_filename\" target=\"_blank\">[info]</a>\n";
+         <div id="footer">
+            <iframe id="outFrame"></iframe>
+            <form id="sourceForm" action="http://54.212.60.65:8080/tryswift.php" method="POST" target="outFrame">
+               <textarea id="sourceText" name="source" spellcheck="false" wrap="off"></textarea>
+            </form>
+            <button id="submitButton">Execute</button>
+            <button id="resetButton">Reset</button>
+            <script>
+               var scriptCounter=0;
+               var scripts=[
+               <?php
+                  $scriptFiles = array();
+                  $directory = opendir("scripts");
+                  while($script = readdir($directory)) {
+                     if(substr($script, -6) == ".swift") {
+                        $scriptFiles[] = $script;
+                     }   
                   }   
+                  closedir($directory);
+                  sort($scriptFiles);
+                  foreach($scriptFiles as $script) {
+                     echo "\"scripts/$script\", ";
+                  }   
+               ?>  
+               ];
+            </script>
+         </div> <!-- footer -->
+      </div> <!-- maincontainer -->
 
-                  echo "</li>\n";    
-               }
-            ?>
-            </ul>
-         </div>
-         </div>
-         <div id="submitButton">
-            <input type="submit" name="submit" value="Submit" />
-         </div>
+      <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
+      <script src="js/simplemodal.1.4.4.min.js"></script>
+      <script type="text/javascript">
 
-      <div id="appsDiv">
-      <div id="appsDivText">
-         Available Applications<br><br>
-         <ul>
-         <?php
-            $file_handle = fopen("tc.data", "r");
-            while (!feof($file_handle)) {
-               $line_array = preg_split('/\s+/', fgets($file_handle));
-               if(isset($line_array[1])) {
-                  echo "<li>$line_array[1]</li>\n";
-               }   
-            }   
-            fclose($file_handle);
-         ?>  
-         </ul>
-      </div> 
+      function scale() {
+         var newHeight = $('#editor').height() + $('#footer').height();
+         var newWidth = $('#editor').width();
+         $('#leftcolumn').height(newHeight);
+         $('#infoFrame').height(newHeight);
+         $('#outFrame').height($(window).height() / 2);
+         $('#outFrame').width($(window).width() / 2);
+      }
 
-      <script type="text/javascript">
-         
-         function addtext() {
-            var filePath = "http://swiftlang.org/tryswift/" + getRadioValue();
-            var xmlhttp = new XMLHttpRequest();
-            xmlhttp.open("GET", filePath, false);
-            xmlhttp.send(null);
-            var fileContent = xmlhttp.responseText;
-            document.getElementById('source').value = fileContent;
-         }
-         
-         function getRadioValue() {
-            var l = sourceForm.existingApplications.length;
-            var radio_value;
-            for(var i=0; i<l; i++) {
-               if(sourceForm.existingApplications[i].checked) 
-                  radio_value = sourceForm.existingApplications[i].value;
-            }
-            return radio_value;
-         }
+      function updateScript() {
+         $.get(scripts[scriptCounter], null, function (data) {
+            editor.setValue(data);
+            editor.gotoLine(1);
+         }, "text");
+         $('#scriptCount').html( (scriptCounter+1) + " of " + scripts.length );
+         $('#infoFrame').attr('src', scripts[scriptCounter].replace(/\.swift$/g, ".html"));
+      }         
 
-      </script>
-      </div>
+      $(document).ready(function() {
+         scale();
+         $(window).resize(function() { scale(); }); 
+         updateScript();
+
+         $('#next').click(function() {
+           if((scriptCounter + 1) <= (scripts.length - 1)) {
+              scriptCounter++;
+              updateScript();
+           }
+        })
+
+        $('#back').click(function() {
+           if ((scriptCounter - 1) >= 0) {
+              scriptCounter=scriptCounter-1;
+              updateScript();
+           }
+        })
+  
+        $('#resetButton').click(function() {
+           updateScript();
+        })
+
+        $('#submitButton').click(function() {
+           $('#sourceText').val(editor.getSession().getValue());
+           if (!$("#sourceText").val()) { alert("Source text is empty!"); } 
+           else { 
+              $('#outFrame').modal({
+                 overlayClose : true,
+                 autoResize : true,
+                 autoPosition : true,
+              });
+              $('#sourceForm').submit(); 
+           }
+        })
+     })      
+     </script>
    </body>
 </html>

Modified: SwiftApps/tryswift/tryswift.css
===================================================================
--- SwiftApps/tryswift/tryswift.css	2013-09-25 18:34:26 UTC (rev 7109)
+++ SwiftApps/tryswift/tryswift.css	2013-09-29 06:09:25 UTC (rev 7110)
@@ -1,110 +1,165 @@
-html,body 
-{
-   margin:0;
+* {
+   margin: 0;
    padding:0;
-   width: 900px;
-   height: 600px;
-   margin-left: auto;
-   margin-right: auto;
+   overflow: hidden
+} 
+
+html, body {
+   height: 100%;
 }
 
-#header {
-font-family:courier-new,monospace;
-font-size:150%;
-color:#2c1f8e;
-vertical-align:sub;
+#topsection {
+   height: 50px; 
+   text-align: center;
+   background: black;
+   color: #B0B0B0;
 }
 
-#wrap {
-position: relative;
-width: 900px;
-height: 600px;
-border: 1px;
-border-style: solid;
+b {
+   font-size: 110%;
 }
 
-#textAreaDiv {
-position: absolute;
-left: 200px;
-right: 200px;
-top: 50px;
-bottom: 50px;
-height: 500px;
-width: 500px;
+em {
+   color: red;
 }
 
-#wrapHeader {
-position:absolute;
-top: 0px;
-left: 0px;
-width: 900px;
-height: 50px;
-background:#f6f6f6;
-text-align: center;
+#topsection h1 {
+   margin: 0px;
+   padding-top: 15px;
 }
 
-#progsDiv {
-position: absolute;
-left: 0px;
-top: 50px;
-background:#f6f6f6;
-height: 550px;
-width: 200px;
+#contentwrapper {
+   float: left;
+   width: 100%;
+   border: 0px;
 }
 
-#progsDivText {
-margin-left:10px;
-margin-right:10px;
-background:#f6f6f6;
+#contentcolumn {
+   margin-left: 350px; 
 }
 
-#appsDiv {
-position: absolute;
-right: 0px;
-top: 50px;
-background:#f6f6f6;
-height: 550px;
-width: 200px;
+#leftcolumn {
+   position: absolute;
+   width: 350px; 
+   left: 0px;
+   top: 50px;
+   bottom: 0px;
+   border: 0px;
+   margin: 0px;
+   padding: 0px;
+   clear: both;
 }
 
-#appsDivText {
-margin-left:10px;
-margin-right:10px;
-background:#f6f6f6;
+#buttonsDiv {
+   position: absolute;
+   width: 350px;
+   left: 0;
+   top: 0;
+   height: 50px;
+   background: #B0B0B0;
 }
 
 #submitButton {
-position: absolute;
-right: 200px;
-left: 200px;
-bottom: 0px;
-background:#f6f6f6;
-height: 50px;
-width: 500px;
+   float: left;
+   color: #FFF;
+   background: #2956B2;
+   height: 40px;
+   width: 100px;
+   margin-top: 5px;
+   margin-bottom: 5px;
+   margin-left: 20px;
+   bottom: 0px;
+   font-size: 100%;
+}   
+
+#resetButton {
+   float: left;
+   color: #FFF;
+   background: #2956B2;
+   height: 40px;
+   width: 100px;
+   margin-top: 5px;
+   margin-bottom: 5px;
+   margin-left: 20px;
+   bottom: 0px;
+   font-size: 100%;
+}   
+
+#footer a {
+   color: #FFFF80;
 }
 
-textarea {
-border-bottom:1px solid black;
-border-top:1px solid black;
-border-left:1px solid black;
-border-right:1px solid black;
-border-style: solid;
-border-width: thin;
-padding: 0;
-height: 500px;
-width: 500px;
+#editor {
+    position: absolute;
+    top: 50px;
+    left: 350px;
+    bottom: 50px;
+    right: 0px;
+    margin: 0px;
+    padding: 0px;
+    border: 0px;
 }
 
-ul {
-list-style-type:none;
-margin-top: 0;
-margin-left: 0;
-padding-left: 5px;
+#sourceForm {
+   display: none;
 }
 
-li {
-margin-left: 0;
-padding-left: 5px; 
-padding-bottom: 10px;
-text-align: left;
+#footer {
+   position: absolute;
+   height: 50px;
+   bottom: 0px;
+   left: 350px;
+   right: 0px;
+   background: #01313f; 
+   color: #fff;
+   text-align: center;
+   padding: 0px;
+   margin: 0px;
+   border-top: 1px solid white;
 }
+
+#infoFrame {
+   margin: 0px;
+   padding: 0px;
+   border: 0px;
+   width: 350px;
+}
+
+#back {
+   position: absolute;
+   height: 25px;
+   width: 50px;
+   top: 25%;
+   left: 90px;
+   font-size: 100%;
+}
+
+#scriptCount {
+   position: absolute;
+   line-height: 25px;
+   width: 50px;
+   left: 150px;
+   top: 25%;
+}
+
+#next {
+   position: absolute;
+   left: 200px;
+   height: 25px;
+   width: 50px;
+   top: 25%;
+   font-size: 100%;
+}
+
+#outFrame {
+   display: none;
+}
+
+#basic-modal-content {display:none;}
+#simplemodal-overlay {background-color:#000;}
+#simplemodal-container { width: 0px; height: 0px; color:#bbb; background-color:#fff; border:4px solid #444; padding:0px; overflow:hidden; position:relative; }
+#simplemodal-container .simplemodal-data {padding:8px;}
+#simplemodal-container code {background:#141414; border-left:3px solid #65B43D; color:#bbb; display:block; font-size:12px; margin-bottom:12px; padding:4px 6px 6px;}
+#simplemodal-container a {color:#ddd;}
+#simplemodal-container a.modalCloseImg {background:url(img/basic/x.png) no-repeat; width:25px; height:29px; display:inline; z-index:3200; position:absolute; top:0px; right:0px; cursor:pointer;}
+#simplemodal-container h3 {color:#84b8d9;}

Modified: SwiftApps/tryswift/tryswift.php
===================================================================
--- SwiftApps/tryswift/tryswift.php	2013-09-25 18:34:26 UTC (rev 7109)
+++ SwiftApps/tryswift/tryswift.php	2013-09-29 06:09:25 UTC (rev 7110)
@@ -1,10 +1,15 @@
 <link rel="stylesheet" type="text/css" href="tryswift-php.css">
-<html><head><title>Try Swift Results</title></head>
+<html><head></head>
 <body>
-<div id="header"><hr>Try Swift</hr></div>
-<table cellspacing="0" title="Swift Source Code">
+<h2>Executing.. please wait <img src="indicator.gif"></h2>
+<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
+<script>
+   $('body').css('cursor', 'wait');
+</script>
 
+
 <?PHP
+ob_end_flush();
 
 function copy_file($src, $dst) {
    if(!copy($src, $dst)) {
@@ -33,26 +38,13 @@
    die("Unable to write swift script");
 }
 
-ob_implicit_flush(true);
-
 $descriptorspec = array(
    0 => array("pipe", "r"),   // stdin is a pipe that the child will read from
    1 => array("pipe", "w"),   // stdout is a pipe that the child will write to
    2 => array("pipe", "w")    // stderr is a pipe that the child will write to
 );
 
-echo "<pre>";
 print "<table cellspacing=\"0\" title=\"Swift Results\">\n";
-print "<caption>Swift Source Code [<a href=\"$url/$unique/script.swift\" style='text-decoration: none;'>Download</a>]</caption>\n";
-
-$count=0;
-foreach(explode("\n", $_POST['source']) as $line) {
-        print "<tr style=\"background-color:#f6f6f6;\">" .
-              "<td style=\"text-align: center; width: 25px\">" . ++$count . "</td>" .
-              "<td style=\"text-align: left; border-left: 1px solid black; padding-left: 10px;\">" . htmlentities($line) . "</td></tr>\n";
-}
-print "</table>\n";
-print "<table cellspacing=\"0\" title=\"Swift Results\">\n";
 print "<caption>Swift Execution</caption>\n";
 print "<br>\n";
 
@@ -107,5 +99,15 @@
          $filehtml .
          "</table><br><br>\n";
 }
+?>
 
-?>
+
+<script>
+   $(document).ready(function() {
+      $('h2').html("Execution complete");
+      $('body').css('cursor', 'default');
+   })
+</script>
+</body>
+</html>
+




More information about the Swift-commit mailing list