Fix direction icons for Firefox (and possibly Mac).

Fixes #540

public/js/lib/Browser.js

@@ -67,6 +67,7 @@ define([], function () {
             }()),
             cssAnimation: true,
             chromeframe: false,
+            selectOptionFont: !(uA.indexOf('FIREFOX') >= 0 || navigator.platform.toUpperCase().indexOf('MAC') >= 0),
         },
     };
 

public/js/module/photo/fields.js

@@ -33,15 +33,15 @@ define(['m/photo/status'], function () {
             aero: 'Аэро/Спутник',
         },
         dirIcons: {
-            n: '',
-            ne: '',
-            e: '',
-            se: '',
-            s: '',
-            sw: '',
-            w: '',
-            nw: '',
-            aero: '',
+            n: ['', '🡡'],
+            ne: ['', '🡥'],
+            e: ['', '🡢'],
+            se: ['', '🡦'],
+            s: ['', '🡣'],
+            sw: ['', '🡧'],
+            w: ['', '🡠'],
+            nw: ['', '🡤'],
+            aero: ['', '◎'],
         },
         dirValsArr: ['w', 'nw', 'n', 'ne', 'e', 'se', 's', 'sw', 'aero'],
         watersign: {

public/js/module/photo/photo.js

@@ -7,7 +7,7 @@
 /**
  * Модель страницы фотографии
  */
-define(['underscore', 'Utils', 'socket!', 'Params', 'knockout', 'knockout.mapping', 'm/_moduleCliche', 'globalVM', 'renderer', 'moment', 'noties', 'model/Photo', 'model/Region', 'model/storage', 'm/photo/fields', 'm/photo/status', 'text!tpl/photo/photo.pug', 'css!style/photo/photo', 'bs/ext/multiselect', 'jquery-plugins/imgareaselect'], function (_, Utils, socket, P, ko, koMapping, Cliche, globalVM, renderer, moment, noties, Photo, Region, storage, fields, statuses, pug) {
+define(['underscore', 'Utils', 'Browser', 'socket!', 'Params', 'knockout', 'knockout.mapping', 'm/_moduleCliche', 'globalVM', 'renderer', 'moment', 'noties', 'model/Photo', 'model/Region', 'model/storage', 'm/photo/fields', 'm/photo/status', 'text!tpl/photo/photo.pug', 'css!style/photo/photo', 'bs/ext/multiselect', 'jquery-plugins/imgareaselect'], function (_, Utils, Browser, socket, P, ko, koMapping, Cliche, globalVM, renderer, moment, noties, Photo, Region, storage, fields, statuses, pug) {
     const $window = $(window);
     const imgFailTpl = _.template('<div class="imgFail"><div class="failContent" style="${ style }">${ txt }</div></div>');
     const statusKeys = statuses.keys;
@@ -2230,10 +2230,17 @@ define(['underscore', 'Utils', 'socket!', 'Params', 'knockout', 'knockout.mappin
         setDirOptionHTML: function (option, item) {
             // Render option content as html to decode entitites.
             if (item !== undefined) {
+                const iconIndex = Browser.support.selectOptionFont ? 0 : 1;
+
                 ko.applyBindingsToNode(option, {
-                    html: fields.dirIcons[item] + '&nbsp;' + fields.dirVals[item],
+                    html: fields.dirIcons[item][iconIndex] + '&nbsp;' + fields.dirVals[item],
                 });
             }
         },
+        getDirIcon: function (dir) {
+            const iconIndex = Browser.support.selectOptionFont ? 0 : 1;
+
+            return fields.dirIcons[dir][iconIndex];
+        },
     });
 });

views/module/photo/photo.pug

@@ -291,7 +291,7 @@
         //ko if: p.dir && p.dir() && p.dir().length
         .info
             span.infoName(data-bind="html: fields.dir+':'")
-            span.direction-icon(data-bind="html: fields.dirIcons[p.dir()]")
+            span.direction-icon(data-bind="html: getDirIcon(p.dir())")
             |  
             span(data-bind="text: fields.dirVals[p.dir()]", style="text-transform: lowercase;")
         // /ko