Merge pull request #5553 from vxsx/bugfix/widgets-forwardport

Fixed a regression when standalone widgets wouldn't work

CHANGELOG.txt

@@ -8,6 +8,10 @@
 * Changed cache-busting implementation, it is now handled by a path change,
   not by GET parameter.
 * Added a possibility to copy pages in the Page Tree by drag'n'drop.
+* Fixed a bug where it wasn't possible to scroll the toolbar menu if scroll
+  started on the disabled menu item on small screens.
+* Fixed a regression when standalone CMS Widgets wouldn't work due to
+  non-existing JavaScript dependencies.
 
 
 === 3.3.2 (unreleased) ===

cms/forms/widgets.py

@@ -12,7 +12,7 @@
 from django.utils.safestring import mark_safe
 from django.utils.translation import ugettext as _
 
-from cms.utils.urlutils import admin_reverse
+from cms.utils.urlutils import admin_reverse, static_with_version
 from cms.forms.utils import get_site_choices, get_page_choices
 from cms.models import Page, PageUser
 
@@ -24,7 +24,7 @@ class PageSelectWidget(MultiWidget):
 
     class Media:
         js = (
-            'cms/js/widgets/forms.pageselectwidget.js',
+            static_with_version('cms/js/dist/bundle.forms.pageselectwidget.min.js'),
         )
 
     def __init__(self, site_choices=None, page_choices=None, attrs=None):
@@ -99,10 +99,12 @@ def render(self, name, value, attrs=None):
                 final_attrs = dict(final_attrs, id='%s_%s' % (id_, i))
             output.append(widget.render(name + '_%s' % i, widget_value, final_attrs))
         output.append(r'''<script type="text/javascript">
-            CMS.$(function () {
-                new CMS.PageSelectWidget({
-                    name: '%(name)s'
-                });
+            var CMS = window.CMS || {};
+
+            CMS.Widgets = CMS.Widgets || {};
+            CMS.Widgets._pageSelectWidgets = CMS.Widgets._pageSelectWidgets || [];
+            CMS.Widgets._pageSelectWidgets.push({
+                name: '%(name)s'
             });
         </script>''' % {
             'name': name
@@ -123,8 +125,7 @@ class Media:
             )
         }
         js = (
-            'cms/js/select2/select2.js',
-            'cms/js/widgets/forms.pagesmartlinkwidget.js',
+            static_with_version('cms/js/dist/bundle.forms.pagesmartlinkwidget.min.js'),
         )
 
     def __init__(self, attrs=None, ajax_view=None):
@@ -144,13 +145,15 @@ def render(self, name=None, value=None, attrs=None):
         id_ = final_attrs.get('id', None)
 
         output = [r'''<script type="text/javascript">
-            CMS.$(function () {
-                new CMS.PageSmartLinkWidget({
-                    id: '%(element_id)s',
-                    text: '%(placeholder_text)s',
-                    lang: '%(language_code)s',
-                    url: '%(ajax_url)s'
-                });
+            var CMS = window.CMS || {};
+
+            CMS.Widgets = CMS.Widgets || {};
+            CMS.Widgets._pageSmartLinkWidgets = CMS.Widgets._pageSmartLinkWidgets || [];
+            CMS.Widgets._pageSmartLinkWidgets.push({
+                id: '%(element_id)s',
+                text: '%(placeholder_text)s',
+                lang: '%(language_code)s',
+                url: '%(ajax_url)s'
             });
         </script>''' % {
             'element_id': id_,
@@ -191,7 +194,7 @@ class AppHookSelect(Select):
 
     class Media:
         js = (
-            'cms/js/widgets/forms.apphookselect.js',
+            static_with_version('cms/js/dist/bundle.forms.apphookselect.min.js'),
         )
 
     def __init__(self, attrs=None, choices=(), app_namespaces={}):
@@ -244,7 +247,7 @@ class ApplicationConfigSelect(Select):
 
     class Media:
         js = (
-            'cms/js/widgets/forms.apphookselect.js',
+            static_with_version('cms/js/dist/bundle.forms.apphookselect.min.js'),
         )
 
     def __init__(self, attrs=None, choices=(), app_configs={}):

cms/static/cms/js/admin.base.js

@@ -1,7 +1,6 @@
 // polyfills
 require('./polyfills/function.prototype.bind.js');
 require('./libs/pep');
-
 var CMS = require('./modules/cms.base');
 
 window.CMS = CMS;

cms/static/cms/js/modules/get-dist-path.js

@@ -0,0 +1,37 @@
+var getDistPath = function (scriptFileName) {
+    var fileNameReplaceRegExp = new RegExp(scriptFileName + '(\\?.*)?$', 'gi');
+
+    if (document.currentScript) {
+        return document.currentScript.src.replace(fileNameReplaceRegExp, '');
+    }
+    var scripts;
+    var scriptUrl;
+    var getSrc = function (listOfScripts, attr) {
+        var fileName;
+        var scriptPath;
+
+        for (var i = 0; i < listOfScripts.length; i++) {
+            scriptPath = null;
+            if (listOfScripts[i].getAttribute.length !== undefined) {
+                scriptPath = listOfScripts[i].getAttribute(attr, 2);
+            }
+            if (!scriptPath) {
+                continue; // eslint-disable-line
+            }
+            fileName = scriptPath;
+            fileName = fileName.split('?')[0].split('/').pop(); // get script filename
+            if (fileName === scriptFileName) {
+                return scriptPath;
+            }
+        }
+    };
+
+    scripts = document.getElementsByTagName('script');
+    scriptUrl = getSrc(scripts, 'src');
+    if (scriptUrl) {
+        return scriptUrl.replace(fileNameReplaceRegExp, '');
+    }
+    return '';
+};
+
+module.exports = getDistPath;

cms/static/cms/js/widgets/forms.apphookselect.js

@@ -2,15 +2,16 @@
  * Copyright https://github.com/divio/django-cms
  */
 
-// #############################################################################
-// NAMESPACES
-var CMS = window.CMS || {};
-var apphooks_configuration = window.apphooks_configuration || {};
+// this essentially makes sure that dynamically required bundles are loaded
+// from the same place
+// eslint-disable-next-line
+__webpack_public_path__ = require('../modules/get-dist-path')('bundle.forms.apphookselect.min.js');
 
 // #############################################################################
 // APP HOOK SELECT
-(function ($) {
-    'use strict';
+require.ensure([], function (require) {
+    var $ = require('jquery');
+    var apphooks_configuration = window.apphooks_configuration || {};
 
     // shorthand for jQuery(document).ready();
     $(function () {
@@ -91,4 +92,4 @@ var apphooks_configuration = window.apphooks_configuration || {};
         });
 
     });
-})(CMS.$);
+}, 'admin.widget');

cms/static/cms/js/widgets/forms.pageselectwidget.js

@@ -2,82 +2,86 @@
  * Copyright https://github.com/divio/django-cms
  */
 
-// #############################################################################
-// NAMESPACES
-/**
- * @module CMS
- */
-var CMS = window.CMS || {};
+// this essentially makes sure that dynamically required bundles are loaded
+// from the same place
+// eslint-disable-next-line
+__webpack_public_path__ = require('../modules/get-dist-path')('bundle.forms.pageselectwidget.min.js');
 
 // #############################################################################
 // PAGE SELECT WIDGET
 // cms/forms/widgets.py
-(function ($) {
-    'use strict';
+require.ensure([], function (require) {
+    var CMS = window.CMS || {};
+    var $ = require('jquery');
+    var Class = require('classjs');
+
+    /**
+     * Manages the selection of two select fields. The first field
+     * sets the "Site" and the second the "Pagetree".
+     *
+     * @class PageSelectWidget
+     * @namespace CMS
+     */
+    CMS.PageSelectWidget = new Class({
+
+        initialize: function initialize(options) {
+            this.options = $.extend(true, {}, this.options, options);
+            // load functionality
+            this._setup(options);
+        },
 
-    // shorthand for jQuery(document).ready();
-    $(function () {
         /**
-         * Manages the selection of two select fields. The first field
-         * sets the "Site" and the second the "Pagetree".
+         * Setup internal functions and events.
          *
-         * @class PageSelectWidget
-         * @namespace CMS
+         * @private
+         * @method _setup
+         * @param {Object} options
+         * @param {String} options.name
          */
-        CMS.PageSelectWidget = new CMS.Class({
+        _setup: function _setup(options) {
+            var group0 = $('#id_' + options.name + '_0');
+            var group1 = $('#id_' + options.name + '_1');
+            var group2 = $('#id_' + options.name + '_2');
+            var tmp;
 
-            initialize: function initialize(options) {
-                this.options = $.extend(true, {}, this.options, options);
-                // load functionality
-                this._setup(options);
-            },
+            // handles the change event on the first select "site"
+            // that controls the display of the second select "pagetree"
+            group0.on('change', function () {
+                tmp = $(this).children(':selected').text();
 
-            /**
-             * Setup internal functions and events.
-             *
-             * @private
-             * @method _setup
-             * @param {Object} options
-             * @param {String} options.name
-             */
-            _setup: function _setup(options) {
-                var group0 = $('#id_' + options.name + '_0');
-                var group1 = $('#id_' + options.name + '_1');
-                var group2 = $('#id_' + options.name + '_2');
-                var tmp;
+                group1.find('optgroup').remove();
+                group1.append(
+                    group2.find('optgroup[label="' + tmp + '"]').clone()
+                ).change();
 
-                // handles the change event on the first select "site"
-                // that controls the display of the second select "pagetree"
-                group0.on('change', function () {
-                    tmp = $(this).children(':selected').text();
+                // refresh second select
+                setTimeout(function () {
+                    group1.trigger('change');
+                }, 0);
+            }).trigger('change');
 
-                    group1.find('optgroup').remove();
-                    group1.append(
-                        group2.find('optgroup[label="' + tmp + '"]').clone()
-                    ).change();
+            // sets the correct value
+            group1.on('change', function () {
+                tmp = $(this).find('option:selected').val();
 
-                    // refresh second select
-                    setTimeout(function () {
-                        group1.trigger('change');
-                    }, 0);
-                }).trigger('change');
+                if (tmp) {
+                    group2.find('option').prop('selected', false);
+                    group2.find('option[value="' + tmp + '"]').prop('selected', true);
+                } else if (group2.length) {
+                    group2.find('option[value=""]').prop('selected', true);
+                }
+            });
 
-                // sets the correct value
-                group1.on('change', function () {
-                    tmp = $(this).find('option:selected').val();
+            // don't allow to add another page from in here
+            $('#add_id_' + options.name).hide();
+        }
+    });
 
-                    if (tmp) {
-                        group2.find('option').prop('selected', false);
-                        group2.find('option[value="' + tmp + '"]').prop('selected', true);
-                    } else if (group2.length) {
-                        group2.find('option[value=""]').prop('selected', true);
-                    }
-                });
 
-                // don't allow to add another page from in here
-                $('#add_id_' + options.name).hide();
-            }
+    // init
+    $(function () {
+        CMS.Widgets._pageSelectWidgets.forEach(function (widget) {
+            new CMS.PageSelectWidget(widget);
         });
-
     });
-})(CMS.$);
+}, 'admin.widget');