Maciej Fijalkowski avatar Maciej Fijalkowski committed 57717df

progress on cursor movement and general structure

Comments (0)

Files changed (6)

codeviewer/file.jinja

 <html>
 <head>
-   <script type="text/javascript" src="jquery.min.js"></script>
-   <script type="text/javascript" src="jquery.scrollTo-1.4.2-min.js"></script>
-   <script type="text/javascript" src="jquery.viewport.mini.js"></script>
-   <script type="text/javascript" src="x.js"></script>
+   <script type="text/javascript" src="js/jquery.min.js"></script>
+   <script type="text/javascript" src="js/jquery.scrollTo-1.4.2-min.js"></script>
+   <script type="text/javascript" src="js/jquery.viewport.mini.js"></script>
+   <script type="text/javascript" src="js/jquery.timer.js"></script>
+   <script type="text/javascript" src="js/files.js"></script>
+   <script type="text/javascript" src="js/libkeys.js"></script>
+   <script type="text/javascript" src="js/basic.js"></script>
    <link rel="stylesheet" href="pygments.css">
    <link rel="stylesheet" href="x.css">
 </head>
 <body>
-  <div class="main-source">
-  {{ source }}
+  <div id="main-source">
+  </div>
+  <div id="cursor-layer">
+    <span id="cursor"></span>
   </div>
   <div class="rightpan">
     <div id="container">

codeviewer/js/basic.js

 function EditorStatus()
 {
     var self = this;
-    self.position = 1;
-    self.MIN_POSITION = 100;
+    self.line_position = 0;
+    self.col_position = 0;
+    self.saved_col_position = 0;
 
-    self.move_relative = function(offset) {
+    self.MIN_LINE_POSITION = 100;
+
+    self.move_line_relative = function(offset) {
         offset = Math.round(offset);
-        var new_pos = self.position + offset;
-        if (new_pos <= 0) {
-            new_pos = 1;
-        } else if (new_pos >= self.last_no) {
+        var new_pos = self.line_position + offset;
+        if (new_pos < 0) {
+            new_pos = 0;
+        } else if (new_pos >= self.last_no - 1) {
             new_pos = self.last_no;
         }
-        if (self.position != new_pos) {
+        if (self.line_position != new_pos) {
             self.activate(new_pos);
         }
+        self._check_max_column(true);
+    };
+
+    self._check_max_column = function (moved_line) {
+        var max_co = self.columns[self.line_position].length;
+        if (self.col_position >= max_co) {
+            self.col_position = max_co;
+            if (moved_line)
+                self._update_cursor();
+        } else if (moved_line && self.col_position < self.saved_col_position) {
+            self.col_position = Math.min(max_co, self.saved_col_position);
+            self._update_cursor();
+        }
     };
 
+    self.move_column = function(offset) {
+        self.col_position += offset;
+        if (self.col_position <= 0) {
+            self.col_position = 0;
+        }
+        self._check_max_column(false);
+        self._update_cursor();
+        self.saved_col_position = self.col_position;
+    };
+
+    self._update_cursor = function() {
+        $("#cursor").css("left", (self.col_position * self.single_element_width) + self.start_left);
+        $("#cursor").toggle(true);
+    };
+
     self.move_page = function(offset) {
-        self.move_relative(offset * $(window).height() /
-                           self.single_element_height);
+        self.move_line_relative(offset * $(window).height() /
+                                self.single_element_height);
     };
 
     self.activate = function(no) {
             prev_elem.children().css("background-color", prev_style);
             prev_elem.toggleClass("active");
         }
-        var elem = $("#w-" + no);
+        var elem = $("#w-" + (no + 1));
+        $("#cursor").css("top", elem.position().top);
         var prev_style = elem.children().css("background-color");
-        self.position = no;
+        self.line_position = no;
         elem.children().css("background-color", "");
         elem.toggleClass('active');
         var pos = elem.position().top - document.body.scrollTop;
-        if (pos < self.MIN_POSITION) {
-            $.scrollTo("-=" + (self.MIN_POSITION - pos), 0.5);
+        if (pos < self.MIN_LINE_POSITION) {
+            $.scrollTo("-=" + (self.MIN_LINE_POSITION - pos), 0.5);
         }
-        if (pos > $(window).height() - self.MIN_POSITION) {
-            $.scrollTo("+=" + (pos - $(window).height() + self.MIN_POSITION), 0.5);
+        if (pos > $(window).height() - self.MIN_LINE_POSITION) {
+            $.scrollTo("+=" + (pos - $(window).height() +
+                               self.MIN_LINE_POSITION), 0.5);
         }
     };
 
-    self.initialize = function() {
+    self.initialize = function(columns) {
+        self.columns = columns;
         self.last_no = $(".wrapper").length;
         self.single_element_height = $("#w-1").height();
+        $("#w-1").append('<span id="tmp">a</span>');
+        self.single_element_width = $("#tmp").width();
+        $("#tmp").remove();
+        $("#cursor").css("height", self.single_element_height);
+        self.start_top = $("#w-1").position().top;
+        self.start_left = $("#w-1").position().left;
+        $("#cursor").css("top", self.start_top);
+        $("#cursor").css("left", self.start_left);
     };
 
 }
 editor_status = new EditorStatus();
 
 keyset = {};
-keyset["UP"] = function () { editor_status.move_relative(-1); };
-keyset["DOWN"] = function () { editor_status.move_relative(+1); };
+keyset["UP"] = function () { editor_status.move_line_relative(-1); };
+keyset["DOWN"] = function () { editor_status.move_line_relative(+1); };
 keyset["PAGE_UP"] = function () { editor_status.move_page(-1); };
 keyset["PAGE_DOWN"] = function () { editor_status.move_page(+1); };
+keyset["LEFT"] = function () { editor_status.move_column(-1); };
+keyset["RIGHT"] = function () { editor_status.move_column(+1); };
 
 $(document).ready(function ()
 {
     keys.bind_multiple(keyset);
-    editor_status.activate(1);
-    // find the last element
-    editor_status.initialize();
+    load_file("x", function(columns) {
+        editor_status.activate(0);
+        editor_status.initialize(columns);
+    });
 });
+
+$.timer(function() { $("#cursor").toggle(); }, 800, autostart=true);
+

codeviewer/js/libkeys.js

 function Keys() {
     var self = this;
 
-    self.DOWN = 40;
-    self.UP   = 38;
-    self.CTRL = 17;
-    self.PAGE_UP = 33;
+    self.LEFT      = 37;
+    self.UP        = 38;
+    self.RIGHT     = 39;
+    self.DOWN      = 40;
+    self.CTRL      = 17;
+    self.PAGE_UP   = 33;
     self.PAGE_DOWN = 34;
+    self.F = 70;
     self.L = 76;
+    self.ALT = 18;
     // mooooooore
 
     self.bindings = {};
+    self.bindings_ctrl = {};
+    self.bindings_alt = {};
 
     self.is_arrow = function(key) {
         return key == self.DOWN || key == self.UP;
     };
 
     self.ev_down = function(ev) {
-        var func = self.bindings[ev.keyCode];
+        var mapping;
+        if (self.ctrl_pressed) {
+            mapping = self.bindings_ctrl;
+        } else if (self.alt_pressed) {
+            mapping = self.bindings_alt;
+        } else {
+            mapping = self.bindings;
+        }
+        var func = mapping[ev.keyCode];
         if (func) {
             func();
             ev.preventDefault();
     };
 
     self.ev_up = function(ev) {
+        // special keys only for now
+        if (ev.keyCode == self.CTRL) {
+            self.ctrl_pressed = false;
+        } else if (ev.keyCode == self.ALT) {
+            self.alt_pressed = false;
+        }
     };
 
     self.ctrl_pressed = false;
     self.alt_pressed = false;
     
-    self.bind = function(key, func) {
-        self.bindings[key] = func;
+    self.bind = function(key, func, modifiers) {
+        if (modifiers == "ctrl") {
+            self.bindings_ctrl[key] = func;
+        } else if (modifiers == "alt") {
+            self.bindings_alt[key] = func;
+        } else {
+            self.bindings[key] = func;
+        }
     };
-
+    
     self.bind_multiple = function(mapping) {
         // bind multiple keys, mapping = key -> function
         for (var elem in mapping) {
             self.bind(self[elem], val);
         }
     };
+
+    // special key support
+    self.bind(self.CTRL, function() {
+        self.ctrl_pressed = true;
+    });
+    
+    self.bind(self.ALT, function() {
+        self.alt_pressed = true;
+    });
+              
 }
 keys = new Keys();
 
 }
 
 .active {
-    background-color: #AAEEEE;
+    background-color: #D5F5F5;
 }
 
-.main-source {
+#main-source {
     padding-right: 530px;
 }
 
+#cursor {
+    position: absolute;
+    top: 0px;
+    width: 6px;
+    left: 0px;
+    border-left: 2px solid black;
+}
+
 #main-code-browser {
     float: left;
 }

codeviewer/x.html

-<html>
-<head>
-   <script type="text/javascript" src="js/jquery.min.js"></script>
-   <script type="text/javascript" src="js/jquery.scrollTo-1.4.2-min.js"></script>
-   <script type="text/javascript" src="js/jquery.viewport.mini.js"></script>
-   <script type="text/javascript" src="js/libkeys.js"></script>
-   <script type="text/javascript" src="js/basic.js"></script>
-   <link rel="stylesheet" href="pygments.css">
-   <link rel="stylesheet" href="x.css">
-</head>
-<body>
-  <div class="main-source">
-  <div class="highlight"><pre><div id="w-1" class="wrapper"><span class="line" id="1"><span class="c"># based on a Java version:</span>
+<div class="highlight"><pre><div id="w-1" class="wrapper"><span class="line" id="1"><span class="c"># based on a Java version:</span>
 </span></div><div id="w-2" class="wrapper"><span class="line" id="2"><span class="c">#  Based on original version written in BCPL by Dr Martin Richards</span>
 </span></div><div id="w-3" class="wrapper"><span class="line" id="3"><span class="c">#  in 1981 at Cambridge University Computer Laboratory, England</span>
 </span></div><div id="w-4" class="wrapper"><span class="line" id="4"><span class="c">#  and a C++ version derived from a Smalltalk version written by</span>
 </span></div><div id="w-419" class="wrapper"><span class="line" id="419">    <span class="k">else</span><span class="p">:</span>
 </span></div><div id="w-420" class="wrapper"><span class="line" id="420">        <span class="n">main</span><span class="p">()</span>
 </span></div></pre></div>
-
-  </div>
-  <div class="rightpan">
-    <div id="container">
-    </div>
-  </div>
-</body>
-</html>

codeviewer/xdemo.py

 from pygments.lexers import PythonLexer
 from pygments.formatters import HtmlFormatter
 from jinja2 import Template
+import json
 
 class CustomHtmlFormatter(HtmlFormatter):
+    def __init__(self, codelines):
+        self.codelines = codelines
+        HtmlFormatter.__init__(self)
+    
     def wrap(self, source, outfile):
         total = 1
         for i, t in HtmlFormatter.wrap(self, source, outfile):
             else:
                 yield i, t
 
-code = open('/home/fijal/src/pypy/pypy/translator/goal/richards.py', 'r').read()
+FNAME = '/home/fijal/src/pypy/pypy/translator/goal/richards.py'
+code = open(FNAME, 'r').read()
 with open('pygments.css', 'w') as f:
     f.write(HtmlFormatter().get_style_defs('.highlight'))
-with open('x.html', 'w') as f:
-    source = highlight(code, PythonLexer(), CustomHtmlFormatter())
-    f.write(Template(open("file.jinja").read()).render(source=source))
+with open('main.html', 'w') as f:
+    f.write(Template(open("file.jinja").read()).render())
+with open("x.html", "w") as f:
+    source = highlight(code, PythonLexer(), CustomHtmlFormatter(code.splitlines()))
+    f.write(source)
+with open("x.json", "w") as f:
+    json.dump(code.splitlines(), f)
Tip: Filter by directory path e.g. /media app.js to search for public/media/app.js.
Tip: Use camelCasing e.g. ProjME to search for ProjectModifiedEvent.java.
Tip: Filter by extension type e.g. /repo .js to search for all .js files in the /repo directory.
Tip: Separate your search with spaces e.g. /ssh pom.xml to search for src/ssh/pom.xml.
Tip: Use ↑ and ↓ arrow keys to navigate and return to view the file.
Tip: You can also navigate files with Ctrl+j (next) and Ctrl+k (previous) and view the file with Ctrl+o.
Tip: You can also navigate files with Alt+j (next) and Alt+k (previous) and view the file with Alt+o.