Merge pull request #126 from yishn/svg-on-the-fly

SVG on the fly
SabakiHQ · Sep 8, 2016 · be985ca · be985ca
2 parents 4f54401 + 47c0224
commit be985ca
Showing 1 changed file with 37 additions and 14 deletions.
diff --git a/view/index.view.js b/view/index.view.js
@@ -640,14 +640,14 @@ function prepareScrollbars() {
         if (!$('#gamechooser').hasClass('show')) return
 
         var width = $('#gamechooser .games-list').width() - 20
-        var $svgs = $('#gamechooser svg')
+        var $svgs = $('#gamechooser ol li svg')
 
-        if ($svgs.length == 0) return
+        if ($svgs.length == 0) $svgs = $('#gamechooser ol li')
 
-        var liwidth = $svgs.eq(0).width() + 12 + 20
+        var liwidth = $svgs.width() + 12 + 20
         var count = Math.floor(width / liwidth)
 
-        $('#gamechooser li').css('width', Math.floor(width / count) - 20)
+        $('#gamechooser ol li').css('width', Math.floor(width / count) - 20)
         $('#gamechooser .games-list').data('scrollbar').update()
     })
 }
@@ -1543,12 +1543,16 @@ function showGameChooser(restoreScrollbarPos) {
     if (restoreScrollbarPos == null)
         restoreScrollbarPos = true
 
-    var scrollbarPos = restoreScrollbarPos ? $('#gamechooser .gm-scroll-view').scrollTop() : 0
+    var $scrollContainer = $('#gamechooser .games-list')
+    if ($scrollContainer.hasClass('gm-scrollbar-container'))
+        $scrollContainer = $scrollContainer.find('.gm-scroll-view')
+
+    var scrollbarPos = restoreScrollbarPos ? $scrollContainer.scrollTop() : 0
 
     if (!restoreScrollbarPos || restoreScrollbarPos == 'top')
         scrollbarPos = 0
     else if (restoreScrollbarPos == 'bottom')
-        scrollbarPos = $('#gamechooser .gm-scroll-view').get(0).scrollHeight
+        scrollbarPos = $scrollContainer.get(0).scrollHeight
 
     closeDrawers()
 
@@ -1561,18 +1565,12 @@ function showGameChooser(restoreScrollbarPos) {
     for (var i = 0; i < trees.length; i++) {
         var tree = trees[i]
         var $li = $('<li/>')
-        var tp = gametree.navigate(tree, 0, 30)
-        if (!tp) tp = gametree.navigate(tree, 0, gametree.getCurrentHeight(tree) - 1)
-
-        var board = gametree.addBoard.apply(null, tp).nodes[tp[1]].board
-        var svg = board.getSvg(setting.get('gamechooser.thumbnail_size'))
         var node = tree.nodes[0]
 
         $('#gamechooser ol').eq(0).append($li.append(
             $('<div/>')
             .attr('draggable', 'true')
             .append($('<span/>'))
-            .append(svg)
             .append($('<span class="black"/>').text('Black'))
             .append($('<span class="white"/>').text('White'))
         ))
@@ -1640,9 +1638,34 @@ function showGameChooser(restoreScrollbarPos) {
         setGameIndex(newindex)
     })
 
+    // Load SVG images on the fly
+
+    var updateSVG = function() {
+        var listBounds = $('#gamechooser').get(0).getBoundingClientRect()
+
+        var updateElements = $('#gamechooser ol li').get().filter(function(el) {
+            var bounds = el.getBoundingClientRect()
+
+            return !$(el).find('svg').length
+                && bounds.top < listBounds.bottom
+                && bounds.top + $(el).height() > listBounds.top
+        })
+
+        updateElements.forEach(function(el) {
+            var tree = $(el).data('gametree')
+            var tp = gametree.navigate(tree, 0, 30)
+            if (!tp) tp = gametree.navigate(tree, 0, gametree.getCurrentHeight(tree) - 1)
+
+            var board = gametree.addBoard.apply(null, tp).nodes[tp[1]].board
+            var svg = board.getSvg(setting.get('gamechooser.thumbnail_size'))
+
+            $(svg).insertAfter($(el).find('span').eq(0))
+        })
+    }
+
     $('#gamechooser').addClass('show')
-    $(window).trigger('resize')
-    $('#gamechooser .gm-scroll-view').scrollTop(scrollbarPos)
+    $(window).on('resize', updateSVG).trigger('resize')
+    $scrollContainer.on('scroll', updateSVG).scrollTop(scrollbarPos)
 }
 
 function closeGameChooser() {