notification message

djangocms_admin_style/sass/components/_cms-update.scss

@@ -0,0 +1,18 @@
+.cms-update-message {
+    position: relative;
+    margin-bottom: 20px;
+    padding: 10px;
+    border: 1px solid $color-primary;
+    border-radius: 4px;
+    background-color: rgba($color-primary, 0.1);
+
+    .close {
+        position: absolute;
+        top: 0;
+        right: 0;
+        line-height: 20px;
+        text-align: center;
+        width: 20px;
+        height: 20px;
+    }
+}

djangocms_admin_style/sass/djangocms-admin.scss

@@ -30,6 +30,7 @@
 @import "components/footer";
 @import "components/shortcuts";
 @import "components/drag-and-drop";
+@import "components/cms-update";
 
 //##############################################################################
 // IMPORT MOBILE

djangocms_admin_style/static/djangocms_admin_style/js/base-admin.js

@@ -4,6 +4,7 @@ var initDragAndDropSupportForTreeBeard = require('./modules/drag-touch-support')
 var initUIFixes = require('./modules/ui-fixes');
 var initRelatedWidgetWrappers = require('./modules/related-widget-wrapper');
 var initToolbarDropdown = require('./modules/toolbar-dropdown');
+var initUpdateNotification = require('./modules/update-notification');
 
 // this attaches to global jQuery because
 // we need to touch punch the things like sortedm2m
@@ -18,4 +19,5 @@ $(function () {
     initUIFixes();
     initRelatedWidgetWrappers();
     initToolbarDropdown();
+    initUpdateNotification();
 });

djangocms_admin_style/static/djangocms_admin_style/js/modules/update-notification.js

@@ -0,0 +1,158 @@
+var $ = require('jquery');
+var Cookies = require('js-cookie');
+var RELEASES_URL = 'https://raw.githubusercontent.com/vxsx/djangocms-test-versions/master/latest.json';
+var COOKIE_EXPIRATION = 365; // ~1 year
+
+/**
+ * @function getLatestVersionData
+ * @private
+ * @returns {$.Deferred}
+ */
+function getLatestVersionData() {
+    return $.ajax({
+        url: RELEASES_URL
+    });
+}
+
+/**
+ * @function cmpVersion
+ * @param {String} a
+ * @param {String} b
+ * @returns {Number}
+ */
+function cmpVersion(a, b) {
+    var i;
+    var cmp;
+    var len;
+    var re = /(\.0)+[^\.]*$/;
+
+    a = (a + '').replace(re, '').split('.'); // eslint-disable-line no-param-reassign
+    b = (b + '').replace(re, '').split('.'); // eslint-disable-line no-param-reassign
+    len = Math.min(a.length, b.length);
+    for (i = 0; i < len; i++) {
+        cmp = parseInt(a[i], 10) - parseInt(b[i], 10);
+
+        if (cmp !== 0) {
+            return cmp;
+        }
+    }
+
+    return a.length - b.length;
+}
+
+/**
+ * @function gtVersion
+ * @param {String} a
+ * @param {String} b
+ * @returns {Boolean} true if a > b or a === b but a is a dev/rc version
+ */
+function gtVersion(a, b) {
+    var cmp = cmpVersion(a, b);
+
+    if (cmp > 0) {
+        return true;
+    } else if (cmp === 0) {
+        if (b.match(/[^\.\d]+/)) {
+            return true;
+        }
+        return false;
+    }
+
+    return false;
+}
+
+/**
+ * @function injectMessage
+ * @param {Object} versionObject
+ * @param {String} versionObject.version
+ * @param {String} versionObject.url
+ * @param {String} checkType patch or minor/major
+ */
+function injectMessage(versionObject, checkType) {
+    var messageTmpl = $($('#cms-update-notification').html());
+
+    messageTmpl.find('.js-latest-version').text(versionObject.version);
+    messageTmpl.find('.js-release-notes-link').attr('href', versionObject.url);
+    messageTmpl.find('.close').on('click', function (e) {
+        e.preventDefault();
+
+        Cookies.set(
+            'cms_upgrade_notification_closed',
+            JSON.stringify({
+                version: versionObject.version,
+                type: checkType
+            }),
+            {
+                exprires: COOKIE_EXPIRATION
+            }
+        );
+        messageTmpl.slideUp('fast', function () {
+            messageTmpl.remove();
+        });
+    });
+
+    messageTmpl.prependTo('#content').slideDown('fast');
+}
+
+/**
+ * @function shouldShowMessage
+ * @private
+ * @param {Object} versionObj
+ * @param {String} versionObj.version
+ * @param {String} currentVersion
+ * @param {String} checkType
+ * @returns {Boolean}
+ */
+function shouldShowMessage(versionObj, currentVersion, checkType) {
+    var cookie = Cookies.get('cms_upgrade_notification_closed');
+
+    if (cookie) {
+        cookie = JSON.parse(cookie);
+    }
+
+    if (cookie && cookie.type === checkType && cookie.version === versionObj.version) {
+        return false;
+    }
+
+    return gtVersion(versionObj.version, currentVersion);
+}
+
+/**
+ * @function init
+ * @public
+ */
+function init() {
+    var metaVersion = $('meta[name="djangocms_version"]');
+
+    if (!metaVersion.length) {
+        return;
+    }
+
+    var currentVersion = metaVersion.attr('content');
+    var checkType = $('meta[name="djangocms_version_check_type"]').attr('content');
+
+    getLatestVersionData().done(function (response) {
+        if (typeof response === 'string') {
+            try {
+                // eslint-disable-next-line
+                response = JSON.parse(response);
+            } catch (e) { }
+        }
+
+        var versionObj = response.latest;
+
+        if (checkType === 'patch') {
+            response.patches.forEach(function (patch) {
+                if (patch.version.match(new RegExp('^' + currentVersion.replace(/\.[^\.]+$/, '')))) {
+                    versionObj = patch;
+                }
+            });
+        }
+
+        if (shouldShowMessage(versionObj, currentVersion, checkType)) {
+            injectMessage(versionObj, checkType);
+        }
+    });
+}
+
+module.exports = init;

djangocms_admin_style/templates/admin/inc/cms_upgrade_notification.html

@@ -1,2 +1,14 @@
-<meta name="djangocms_version" content="{{ cms_version }}" />
-<meta name="djangocms_version_check_type" content="{{ cms_version_check_type }}" />
+{% load i18n %}
+<meta name="djangocms_version" content="{{ cms_version }}">
+<meta name="djangocms_version_check_type" content="{{ cms_version_check_type }}">
+<script type="text/template" id="cms-update-notification">
+    <div class="cms-update-message" style="display: none;">
+        {% autoescape off %}
+            {% blocktrans with version='<strong>'|add:cms_version|add:'</strong>' latest='<strong class="js-latest-version"></strong>' release_link_before='<a class="js-release-notes-link" href="">' release_link_after='</a>' %}
+                There is a django CMS upgrade available. You are using: {{ version }}, new version is: {{ latest }}.
+                {{ release_link_before }}Read the release notes.{{ release_link_after }}
+            {% endblocktrans %}
+        {% endautoescape %}
+        <a href="#" class="close">&times;</a>
+    </div>
+</script>

gulpfile.js

@@ -48,6 +48,7 @@ var PROJECT_PATTERNS = {
         PROJECT_PATH.js + '/**/*.js',
         PROJECT_PATH.tests + '/**/*.js',
         '!' + PROJECT_PATH.js + '/**/jquery.*.js',
+        '!' + PROJECT_PATH.js + '/libs/**/*.js',
         '!' + PROJECT_PATH.js + '/dist/**/*.js',
         'gulpfile.js'
     ]

webpack.config.js

@@ -22,7 +22,8 @@ module.exports = function (opts) {
         resolve: {
             extensions: ['', '.js'],
             alias: {
-                jquery: PROJECT_PATH.js + '/libs/jquery.min.js'
+                'jquery': PROJECT_PATH.js + '/libs/jquery.min.js',
+                'js-cookie': PROJECT_PATH.js + '/libs/js.cookie-2.1.2.min.js'
             }
         },
         module: {