Add notification for old browsers

gulp/deps/deps.js

@@ -91,7 +91,7 @@ var deps = {
                 'DGCustomization/skin/{skin}/less/dg-customization.ie.less'
             ]
         },
-        deps: ['DGCore', 'DGLocale', 'DGRoundControl', 'DGProjectDetector']
+        deps: ['DGCore', 'DGLocale', 'DGRoundControl', 'DGProjectDetector', 'DGMuseum']
     },
 
     DGZoomControl: {
@@ -357,8 +357,17 @@ var deps = {
             all: ['DGRulerControl/skin/{skin}/less/dg-control-round.less']
         },
         deps: ['DGRuler', 'DGRoundControl']
-    }
+    },
 
+    DGMuseum: {
+        desc: 'Museum module',
+        src: [
+            'DGMuseum/src/DGMuseum.js'
+        ],
+        less: {
+            all: ['DGMuseum/skin/{skin}/less/dg-museum.less']
+        }
+    }
 };
 
 if (typeof module !== 'undefined' && module.exports) {

src/DGMuseum/skin/basic/less/dg-museum.less

@@ -0,0 +1,72 @@
+.dg-museum {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    z-index: 1500;
+    padding: 4px 5px 8px;
+    background: #333;
+    color: #fff;
+    opacity: .97;
+    text-align: center;
+}
+
+.dg-museum-browser {
+    position: relative;
+    top: 4px;
+    display: inline-block;
+    width: 16px;
+    height: 16px;
+    margin: 0 4px;
+    background: url('@{baseURL}/img/DGMuseum.jpg') left top no-repeat;
+}
+.dg-museum__chrome {
+    background-position: 0 0;
+
+    &:hover {
+        background-position: 0 -16px;
+        }
+    }
+.dg-museum__firefox {
+    background-position: -16px 0;
+
+    &:hover {
+        background-position: -16px -16px;
+        }
+    }
+.dg-museum__safari {
+    background-position: -32px 0;
+
+    &:hover {
+        background-position: -32px -16px;
+        }
+    }
+.dg-museum__opera {
+    width: 15px;
+    background-position: -48px 0;
+
+    &:hover {
+        background-position: -48px -16px;
+        }
+    }
+.dg-museum__ie {
+    width: 17px;
+    background-position: -63px 0;
+
+    &:hover {
+        background-position: -63px -16px;
+        }
+
+    }
+.dg-museum__close {
+    display: inline-block;
+    margin: 0 4px;
+    width: 9px;
+    height: 9px;
+    background: url('@{baseURL}/img/DGMuseum_close.gif') top left no-repeat;
+    cursor: pointer;
+
+    &:hover {
+        opacity: .6;
+        }
+    }

src/DGMuseum/src/DGMuseum.js

@@ -0,0 +1,102 @@
+var ie9 = (function() {
+    var div = document.createElement('div');
+    var all = div.getElementsByTagName('i');
+    div.innerHTML = '<!--[if IE 9]><i></i><![endif]-->';
+    return Boolean(all[0]);
+})();
+
+var safari51 = DG.Browser.safari && navigator.userAgent.indexOf('Version/5.1') !== -1;
+
+var wasPreviouslyDisabled = false;
+
+// Old Safari throws error when localStorage.getItem is called in private mode
+try {
+    wasPreviouslyDisabled = localStorage.getItem('DGMuseum') === 'false';
+} catch (err) {
+    // do nothing
+}
+
+DG.Map.mergeOptions({
+    museum: !wasPreviouslyDisabled && (DG.Browser.ielt9 || ie9 || DG.Browser.opera12 || safari51)
+});
+
+DG.Map.Museum = DG.Handler.extend({
+    statics: {
+        Dictionary: {
+            ar: {
+                wearesorry: 'لا نضمن لك تشغيل ثابت للتطبيق على متصفحك. حاول التحديث:'
+            },
+            cs: {
+                wearesorry: 'Nezaručujeme stabilní fungování aplikace ve Vašem prohlížeči. Zkuste provést aktualizaci:'
+            },
+            en: {
+                wearesorry: 'We do not guarantee stable operation of the application in your browser. Try updating:'
+            },
+            es: {
+                wearesorry: 'No garantizamos un funcionamiento estable de la aplicación en su buscador. Intente actualizarlo:'
+            },
+            it: {
+                wearesorry: 'Non garantiamo il funzionamento stabile dell\'applicazione nel tuo browser. Prova ad aggiornare:'
+            },
+            ru: {
+                wearesorry: 'Мы не гарантируем стабильную работу приложения в вашем браузере. Попробуйте обновиться:'
+            }
+        }
+    },
+
+    includes: [DG.Locale],
+
+    initialize: function(map) {
+        this._map = map;
+
+        this._element = document.createElement('div');
+        this._element.className = 'dg-museum';
+        this._element.innerHTML = '<span></span>' +
+            '<a class="dg-museum-browser dg-museum__chrome" target="_blank" href="https://www.google.com/chrome/"></a>' +
+            '<a class="dg-museum-browser dg-museum__firefox" target="_blank" href="https://www.mozilla.org/firefox/new/"></a>' +
+            '<a class="dg-museum-browser dg-museum__safari" target="_blank" href="https://support.apple.com/downloads/safari"></a>' +
+            '<a class="dg-museum-browser dg-museum__opera" target="_blank" href="https://www.opera.com/"></a>' +
+            '<a class="dg-museum-browser dg-museum__ie" target="_blank" href="https://windows.microsoft.com/internet-explorer/download-ie"></a>';
+
+        this._text = this._element.children[0];
+
+        this._closeButton = document.createElement('span');
+        this._closeButton.className = 'dg-museum__close';
+        this._element.appendChild(this._closeButton);
+
+        this._renderTranslation();
+    },
+
+    addHooks: function() {
+        this._map.getContainer().appendChild(this._element);
+        this._map.on('langchange', this._renderTranslation, this);
+        DG.DomEvent.on(this._closeButton, 'click', this._onCloseButtonClick, this);
+    },
+
+    removeHooks: function() {
+        this._map.getContainer().removeChild(this._element);
+        this._map.off('langchange', this._renderTranslation, this);
+        DG.DomEvent.off(this._closeButton, 'click', this._onCloseButtonClick, this);
+    },
+
+    _onCloseButtonClick: function(e) {
+        DG.DomEvent.stop(e);
+
+        // Old Safari throws error when localStorage.getItem is called in private mode
+        try {
+            localStorage.setItem('DGMuseum', 'false');
+        } catch (err) {
+            // do nothing
+        }
+
+        this.disable();
+    },
+
+    _renderTranslation: function() {
+        var lang = this._map.getLang();
+        this._text.innerHTML = this.t('wearesorry');
+        this._element.setAttribute('dir', lang === 'ar' ? 'rtl': 'ltr');
+    }
+});
+
+DG.Map.addInitHook('addHandler', 'museum', DG.Map.Museum);

src/doc/en/manual/map.md

@@ -195,6 +195,12 @@ Initialize the map on the "map" div with a given center and zoom:
                 <!-- TODO: translation -->
             </td>
         </tr>
+        <tr id="map-museum">
+            <td><code><b>museum</b></code></td>
+            <td><code>Boolean</code></td>
+            <td><code>true</code></td>
+            <td>Whether the message about unsupported browser will be displayed.</td>
+        </tr>
     </tbody>
 </table>
 

src/doc/ru/manual/map.md

@@ -198,6 +198,12 @@
                 масштабирования нет тайлов.
             </td>
         </tr>
+        <tr id="map-museum">
+            <td><code><b>museum</b></code></td>
+            <td><code>Boolean</code></td>
+            <td><code>true</code></td>
+            <td>Будет ли отображаться сообщение о том, что браузер не поддерживается.</td>
+        </tr>
     </tbody>
 </table>