Takafumi Arakaki avatar Takafumi Arakaki committed e64bf7e

added navigation by arrow keys (left/right/up/down) for colorbox.
jquery.hotkeys.js is used to bind keyboard shortcut.

Comments (0)

Files changed (4)

neorg/static/neorg.js

-$(document).ready(function(){
-    $('.neorg-gene-image-link').colorbox({
-        transition: 'none',
-        speed: 0,
-        maxWidth: '100%',
-        maxHeight: '100%',
-    });
+function openFirstImageByColorBox() {
+    $.colorbox($.extend({}, neorgCBSetting, {
+        href: $('img.neorg-gene-image').first().attr('src')
+    }));
+}
+
+function neorgCBOpen(arrow) {
+    var otd, oa;
+    var ctd = $.colorbox.element().parent();
+    if (arrow == 'left') {
+        otd = ctd.prev();
+    } else if (arrow == 'right') {
+        otd = ctd.next();
+    } else {
+        var ctr = ctd.parent();
+        var idx = ctr.children().index(ctd[0]);
+        var otr;
+        if (idx == undefined) {
+            return;
+        }
+        if (arrow == 'up') {
+            otr = ctr.prev();
+        } else if (arrow == 'down') {
+            otr = ctr.next();
+        }
+        otd = otr.children().eq(idx);
+        // alert(idx + arrow + otd.text());
+    }
+    oa = otd.children('a.neorg-gene-image-link').first();
+    if (oa.length) {
+        oa.click();
+    }
+}
+
+function neorgCBOpenLeft() {
+    neorgCBOpen('left');
+}
+
+function neorgCBOpenRight() {
+    neorgCBOpen('right');
+}
+
+function neorgCBOpenUp() {
+    neorgCBOpen('up');
+}
+
+function neorgCBOpenDown() {
+    neorgCBOpen('down');
+}
+
+function bindKeydown(key, func) {
+    $(document).bind('keydown.neorg.' + key, key, func);
+}
+
+function unBindKeydown(key, func) {
+    $(document).unbind('keydown.neorg.' + key);
+}
+
+
+$(document).ready(function() {
+    $('.neorg-gene-image-link').colorbox(neorgCBSetting);
 });
+
+
+var neorgCBSetting = {
+    title: function() {
+        $(this).attr('title', $(this).prev('p').text());
+    },
+    transition: 'none',
+    speed: 0,
+    maxWidth: '100%',
+    maxHeight: '100%',
+    fixed: true,
+    onOpen: function() {
+        // alert('onOpen');
+        bindKeydown('left', neorgCBOpenLeft);
+        bindKeydown('right', neorgCBOpenRight);
+        bindKeydown('up', neorgCBOpenUp);
+        bindKeydown('down', neorgCBOpenDown);
+    },
+    onClosed: function() {
+        // alert('onClosed');
+        unBindKeydown('left');
+        unBindKeydown('right');
+        unBindKeydown('up');
+        unBindKeydown('down');
+    }
+};

neorg/templates/layout.html

           href="{{ url_for('static', filename='jslib/colorbox/colorbox.css') }}" />
     <script src="{{ url_for('static', filename='jslib/jquery-1.6.4.min.js') }}"></script>
     <script src="{{ url_for('static', filename='jslib/jquery.colorbox-min.js') }}"></script>
+    <script src="{{ url_for('static', filename='jslib/jquery.hotkeys.js') }}"></script>
     <script src="{{ url_for('static', filename='neorg.js') }}"></script>
   </head>
   <body{% if temp_path %} class="gene"{% endif %}>
                                 self.options.get('file'),
                                 'Comparing images of data found in: %s')
 
-        return [gene_table_from_grid_dict(grid_dict,
-                                          param,
-                                          conv,
-                                          title,
-                                          classes=['neorg-grid-images'],
-                                          )]
+        table = gene_table_from_grid_dict(
+            grid_dict,
+            param,
+            conv,
+            title,
+            classes=['neorg-grid-images'],
+            )
+        table['classes'].append('neorg-grid-images-outmost')
+        return [table]
 
 class ListPages(Directive):
     _dirc_name = 'list-pages'
     def run(self):
         from distutils.dir_util import mkpath, copy_tree
         from distutils.file_util import copy_file
+        from glob import glob
         tmpdir = os.path.join('build', 'jstmp')
         jsdir = os.path.join('neorg', 'static', 'jslib')
         colorboxdir = os.path.join(jsdir, 'colorbox')
         cbimgtmppath = os.path.join(
             tmpdir, 'colorbox', 'example5', 'images')
         cbimglibpath = os.path.join(colorboxdir, 'images')
+        hktmpglobptn = os.path.join(tmpdir, 'tzuryby-jquery.hotkeys*/')
 
         if os.path.exists(jsdir):
             shutil.rmtree(jsdir)
         mkpath(tmpdir)
         if os.path.exists(os.path.join(tmpdir, 'colorbox')):
             shutil.rmtree(os.path.join(tmpdir, 'colorbox'))
+        map(shutil.rmtree, glob(hktmpglobptn))
 
         self._saveurl(
              'http://code.jquery.com/jquery-1.6.4.min.js', jqtmppath)
         copy_file(cbcsstmppath, colorboxdir)
         copy_tree(cbimgtmppath, cbimglibpath)
 
+        self._saveurl_and_extract_zip(
+            'https://github.com/tzuryby/jquery.hotkeys/zipball/master',
+            os.path.join(tmpdir, 'tzuryby-jquery.hotkeys.zip'),
+            tmpdir)
+        hktmpdir = glob(hktmpglobptn)[0]
+        copy_file(os.path.join(hktmpdir, 'jquery.hotkeys.js'), jsdir)
+
 
 cmdclass = {
     'build': my_build,
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.