Ben  McKernan
Jun 2, 2016
  5830
(6 votes)

Content reference list with page preview

I'm sure everyone has read Grzegorz Wiecheć awesome blog, and if you haven't then you should. I while back he blogged about adding previews to the content reference list (https://gregwiechec.com/2015/09/content-references-list-with-preview/) and the content area (https://gregwiechec.com/2016/03/updated-contentarea-with-images/). However it only supported previewing images, which I thought was under-selling the concept. So I'm going to one up him and add page and block preview support.

Image j2cWQXiw4B.gif

There is a library called rasterizeHTML.js (https://github.com/cburgmer/rasterizeHTML.js) which provides some nice methods for rendering an HTML document to a canvas element. My custom editor will use this to load the preview URL of a page or a block and render it to a canvas which is then displayed as a preview tooltip.

define([
    "dojo/_base/declare",
    "dojo/_base/lang",
    "dojo/on",
    "dojo/dom",
    "dojo/aspect",

    "dijit/popup",
    "dijit/TooltipDialog",

    "alloy/rasterize-html",

    "epi-cms/contentediting/editors/ContentReferenceListEditor"
], function (
    declare,
    lang,
    on,
    dom,
    aspect,

    popup,
    TooltipDialog,

    rasterizeHtml,

    ContentReferenceListEditor
) {

    return declare([ContentReferenceListEditor], {

        buildRendering: function () {
            this.inherited(arguments);

            var _this = this;
            aspect.around(this.list._list, "insertRow", function (originalInsertRow) {
                return function (object, parent, beforeNode, i, option) {
                    var row = originalInsertRow.apply(this, arguments);
                    if (object.hasTemplate) {
                        lang.hitch(_this, _this._createTooltip(row, object.previewUrl, !!object.downloadUrl));
                    }
                    return row;
                };
            });
        },

        _createTooltip: function (node, previewUrl, isImage) {
            var content;

            if (isImage) {
                content = document.createElement("img");
                content.src = previewUrl;
                content.setAttribute("style", "max-width: 500px;");
            } else {
                content = document.createElement("canvas");
                content.height = 600;
                content.width = 750;

                var context = content.getContext("2d");
                context.scale(0.75, 0.75);

                rasterizeHtml.drawURL(previewUrl, content, { height: 800, width: 1000 });
            }

            this.own(node.tooltip = new TooltipDialog({
                connectId: [node.id],
                content: content
            }));

            on(node, "mouseleave", function () {
                popup.close(node.tooltip);
            });

            on(node, "click", function () {
                popup.open({
                    popup: node.tooltip,
                    around: dom.byId(node.id),
                    orient: ["after-centered"]
                });
            });
        }
    });
});

This approach does not support CORS so the pages and blocks being rendered have to be from the same origin as the page running the script. Browser support is limited to Firefox, Chrome, Safari, and Edge.

The server side code to make your properties use this editor can be found on Grzegorz's blog post (https://gregwiechec.com/2015/09/content-references-list-with-preview/).

Jun 02, 2016

Comments

Jun 2, 2016 04:58 PM

Nice! :)

Jun 2, 2016 09:57 PM

Nice concept!

Eric
Eric Jun 3, 2016 11:02 PM

Part of the nex ui update perhaps ;)

Please login to comment.
Latest blogs
Update on .NET 8 support

With .NET 8 now in release candidate stage I want to share an update about our current thinking about .NET 8 support in Optimizely CMS and Customiz...

Magnus Rahl | Oct 3, 2023

Adding Block Specific JavaScript and CSS to the body and head of the page

A common requirement for CMS implementations includes the ability to embed third party content into a website as if it formed part of the website...

Mark Stott | Oct 3, 2023

Performance optimization – the hardcore series – part 1

Hi again every body. New day – new thing to write about. today we will talk about memory allocation, and effect it has on your website performance....

Quan Mai | Oct 3, 2023 | Syndicated blog

Next level content delivery with Optimizely Graph

Optimizely introduced a new product called Optimizely Graph earlier this year. We were one of the first partners to adopt this new service in a...

Ynze | Oct 2, 2023 | Syndicated blog

IDX21323 - RequireNonce is true, Nonce was null

We have multiple clients configured with Azure Active Directory (Microsoft Entra) for requiring authentication when accessing their website. The...

David Drouin-Prince | Oct 1, 2023 | Syndicated blog

Minimum Detectable Effect in Optimizely Web Experimentation

Understanding Minimum Detectable Effect Minimum Detectable Effect (MDE) is a core statistical calculation in Optimizely Web Experimentation. In...

Matthew Dunn | Oct 1, 2023 | Syndicated blog