Merge pull request #554 from collective/generate_uid_javascript

Generate the tiles UUID in Javascript

CHANGES.rst

@@ -6,6 +6,9 @@ There's a frood who really knows where his towel is.
 1.0a12 (unreleased)
 ^^^^^^^^^^^^^^^^^^^
 
+- Generate tile ids client-side to fix an issue causing duplicated ids on tiles when using IE browsers or proxy caches (fixes `#526`_).
+  [frapell, rodfersou]
+
 - Add new feature to make content of new tiles searchable;
   now, besides the RichText tile, Basic and Embed tiles are searchable by default.
   Developer documentation was also updated with a new section explaining how to accomplish this.
@@ -694,6 +697,7 @@ There's a frood who really knows where his towel is.
 .. _`#494`: https://github.com/collective/collective.cover/issues/494
 .. _`#495`: https://github.com/collective/collective.cover/issues/495
 .. _`#504`: https://github.com/collective/collective.cover/issues/504
+.. _`#526`: https://github.com/collective/collective.cover/issues/526
 .. _`#530`: https://github.com/collective/collective.cover/issues/530
 .. _`#534`: https://github.com/collective/collective.cover/issues/534
 .. _`PloneFormGen`: https://pypi.python.org/pypi/Products.PloneFormGen

src/collective/cover/layout.py

@@ -8,7 +8,6 @@
 from five import grok
 from plone.registry.interfaces import IRegistry
 from plone.tiles.interfaces import ITileType
-from plone.uuid.interfaces import IUUIDGenerator
 from zope.browserpage.viewpagetemplatefile import ViewPageTemplateFile
 from zope.component import getUtility
 from zope.component import queryUtility
@@ -197,23 +196,6 @@ def get_tile_metadata(self, tile_name):
         return tile_metadata
 
 
-class UidGetter(grok.View):
-    """Return a random UUID as a 32-character hexadecimal string. As we're
-    using the generated UUID as class id, we need the first char not to be a
-    number; see: http://css-tricks.com/ids-cannot-start-with-a-number/
-    """
-    grok.context(ICover)
-    grok.name('uid_getter')
-    grok.require('zope2.View')
-
-    def render(self):
-        generator = getUtility(IUUIDGenerator)
-        uuid = generator()
-        while uuid[0].isdigit():
-            uuid = generator()
-        return uuid
-
-
 class GroupSelect(grok.View):
     grok.context(ICover)
     grok.name('group_select')

src/collective/cover/static/layout_edit.js

@@ -105,6 +105,49 @@
                 });
             },
 
+            /**
+             * Generate a random value to form a UUID; we use a
+             * fallback for browsers without crypto module mainly to
+             * deal with older versions of IE.
+             * See: http://caniuse.com/#search=crypto
+             **/
+            get_random_value: function(c) {
+              var r;
+              if (typeof crypto !== "undefined" && crypto !== null) {
+                r = crypto.getRandomValues(new Uint8Array(1))[0] % 16 | 0;
+              } else { // Fallback for older browsers
+                r = Math.random() * 16 | 0;
+              }
+              if (c !== 'x') {
+                r = r & 0x3 | 0x8;
+              }
+              return r.toString(16);
+            },
+
+            /**
+             * Generate an RFC 4122 version 4 compliant UUID.
+             * See: http://stackoverflow.com/a/2117523/2116850
+             **/
+            generate_uuid: function () {
+              return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(
+                /[xy]/g,
+                self.get_random_value
+              );
+            },
+
+            /**
+             * Generate tile id. As we're using the generated UUID as
+             * class id, we need the first char not to be a number.
+             * See: http://css-tricks.com/ids-cannot-start-with-a-number/
+             **/
+            generate_tile_id: function () {
+                var tile_id = self.generate_uuid();
+                while ($.isNumeric(tile_id[0])) {
+                  tile_id = self.generate_uuid();
+                }
+                return tile_id;
+            },
+
             /**
              * Row drop handler
              * available from outside the droppable definition
@@ -182,30 +225,25 @@
                         var is_configurable = ui.draggable.data('tile-configurable');
                         new_tile.attr("data-tile-type", tile_type);
 
-                        $.ajax({
-                            url: "@@uid_getter",
-                            success: function(info, la) {
-                                new_tile.attr("id", info);
-                                var url_config = "@@configure-tile/" + tile_type + "/" + info;
-
-                                var config_icon = $("<i/>").addClass("config-icon");
-                                var config_link = $("<a />").addClass("config-tile-link")
-                                    .attr('href',url_config)
-                                    .append(config_icon);
-                                var name_tag = $("<span />").addClass("tile-name")
-                                    .text(ui.draggable.data('tile-name'));
-                                if(is_configurable) {
-                                    new_tile.append(config_link);
-                                }
-                                new_tile.append(name_tag);
+                        var tile_id = self.generate_tile_id();
+                        new_tile.attr("id", tile_id);
+                        var url_config = "@@configure-tile/" + tile_type + "/" + tile_id;
+
+                        var config_icon = $("<i/>").addClass("config-icon");
+                        var config_link = $("<a />").addClass("config-tile-link")
+                            .attr('href',url_config)
+                            .append(config_icon);
+                        var name_tag = $("<span />").addClass("tile-name")
+                            .text(ui.draggable.data('tile-name'));
+                        if(is_configurable) {
+                            new_tile.append(config_link);
+                        }
+                        new_tile.append(name_tag);
 
-                                $(column_elem).append(new_tile);
-                                self.delete_manager(new_tile);
+                        $(column_elem).append(new_tile);
+                        self.delete_manager(new_tile);
 
-                                le.trigger('modified.layout');
-                                return false;
-                            }
-                        });
+                        le.trigger('modified.layout');
                     }
                 });