Customizable JS settings

4 files changed, 24 insertions, 2 deletions

diff --git a/CONFIG.md b/CONFIG.md
index 0da8af9..436b6a4 100644
--- a/CONFIG.md
+++ b/CONFIG.md
@@ -22,6 +22,10 @@ Konfiguracja składa się, po kolei, z:
    + `"refresh"` - parametr odświeżania strony drabinki: `0` = wyłączone, liczba naturalna = interwał odświeżania, w sekundach
    + `"width"` i `"height"` - wymiary (w pikselach) miejsca rezerwowanego dla każdego meczu w widoku drabinki (`"width"` bezpośrednio wpływa na rozmieszczanie kolumn, wewnątrz każdej z kolumn mecze rozmieszczane są równomiernie, w zależnie od ich liczby)
    + `"margin"` - odstęp między w/w miejscem (minimalny - jak widać, w przypadku mniejszej liczby meczów w fazie, odstępy się dopasują)
+ - sekcji `"canvas"`: ustawień rysowania linii
+   + `"winner_h_offset"`, `"winner_v_offset"` - marginesy (poziomy i pionowy) rysowania linii zwycięzców (odpowiednio: pionowych i poziomych, względem środka obszaru)
+   + `"loser_h_offset"`, `"loser_v_offset"` - analogiczne marginesy rysowania linii przegranych
+   + `"winner_colour"`, `"loser_colour"` - kolory linii zwycięzców i przegranych
  - sekcji `"database"`, zawierającej ustawienia połączenia bazy danych
  - sekcji `"goniec"`, zawierającej ustawienia Gońca (`"enabled"` przyjmuje wartości `0`/`1`)
 
diff --git a/playoff.js b/playoff.js
index 3e01e97..1763d59 100644
--- a/playoff.js
+++ b/playoff.js
@@ -16,6 +16,17 @@ var playoff = {
         ctx.stroke();
     },
 
+    loadSettings: function(canvas, defaults) {
+        for (var setting in defaults) {
+            var attr = 'data-' + setting.replace(/_/g, '-');
+            var attr_value = canvas.getAttribute(attr);
+            if (attr_value) {
+                defaults[setting] = attr_value;
+            }
+        }
+        return defaults;
+    },
+
     run: function() {
         var boxes = document.getElementsByClassName('playoff_matchbox');
         var lines = {
@@ -37,6 +48,7 @@ var playoff = {
             }
         }
         var canvas = document.getElementById('playoff_canvas');
+        this.settings = this.loadSettings(canvas, this.settings);
         var ctx = canvas.getContext('2d');
         for (var type in lines) {
             ctx.strokeStyle = this.settings[type + '_colour'];
diff --git a/playoff.py b/playoff.py
index 70f4925..36cfb35 100644
--- a/playoff.py
+++ b/playoff.py
@@ -96,7 +96,13 @@ def get_match_grid(grid, matches, width, height):
                 )
             row_no += 1
         col_no += 1
-    return p_temp.MATCH_GRID % (width, height, width, height, grid_boxes)
+    canvas_settings = []
+    if 'canvas' in settings:
+        for setting, value in settings['canvas'].iteritems():
+            canvas_settings.append(
+                'data-%s="%s"' % (setting.replace('_', '-'), str(value))
+            )
+    return p_temp.MATCH_GRID % (width, height, width, height, ' '.join(canvas_settings), grid_boxes)
 
 def get_leaderboard_table(leaderboard):
     if len([t for t in leaderboard if t is not None]) == 0:
diff --git a/playoff/template.py b/playoff/template.py
index 8648a67..8713ab9 100644
--- a/playoff/template.py
+++ b/playoff/template.py
@@ -31,7 +31,7 @@ MATCH_RUNNING = '''
 
 MATCH_GRID = '''
 <div style="position: relative; width: %dpx; height: %dpx; margin: 10px">
-<canvas width="%d" height="%d" id="playoff_canvas"></canvas>
+<canvas width="%d" height="%d" id="playoff_canvas" %s></canvas>
 %s
 <script src="sklady/playoff.js" type="text/javascript"></script>
 </div>