@flourish/sdk 4.2.1 → 5.0.0

package/README.md

@@ -447,13 +447,26 @@ Builds the template and runs the SDK viewer in your web browser. If `dir_name` i
 
 While it’s running it watches the template directory for changes:
 * if you edit any static template files (`index.html`, `template.yml`, `data/*`, `static/*`) the SDK will refresh the page in the browser;
-* if you edit a file that is the source for a [build rule](#build-configuration), the SDK will run that build rule and then refresh the page.
+* if you edit a file that is the source for a [build rule](#build-configuration), the SDK will run that build rule and then refresh the page;
+* when the page has been refreshed, your previously applied settings in the same tab will be automatically restored (see below for more details).
 
 Options:
 * `--open` or `-o` Try to open the SDK in your web browser once the server is running. At present this only works on macOS.
 * `--port` Specify a particular port; defaults to [1685](https://en.wikipedia.org/wiki/Johann_Sebastian_Bach)
 * `--no-build` Skip the build process
 
+### Settings restore and reset
+
+Your previously applied settings in your SDK browser tab will be automatically restored by the SDK on each page refresh (from version `5.0.0`). 
+
+Template settings when using the SDK are therefore:
+
+- stored locally in your browser's session storage per window
+- are restored on page load before the template `draw` call
+- do not include restore of template state other than settings
+
+You can click the "Reset" button on the top right hand side of the SDK interface to refresh the tab and start from template default settings, or alternatively you can close and open a new SDK browser tab.
+
 ### Publish a template
 ```sh
 flourish publish [dir_name]

package/RELEASE_NOTES.md

@@ -1,3 +1,7 @@
+# 5.0.0
+* Add automatic SDK local settings restore on template reload
+* Upgrade node-fetch dependency to avoid annoying deprecation warning. #91
+
 # 4.2.1
 * Fix bug with OR conditions for imported module settings
 

package/common/embed/credit.d.ts

@@ -0,0 +1,5 @@
+export function createFlourishCredit(credit_url: any, query_string: any, public_url: any, credit_text: any): any;
+export function getLocalizedCreditTextAndUrl(lang: any, credit_key: any): {
+    credit_text: any;
+    credit_url: any;
+};

package/common/embed/credit.js

@@ -0,0 +1,47 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getLocalizedCreditTextAndUrl = exports.createFlourishCredit = void 0;
+const localizations_1 = __importDefault(require("./localizations"));
+function createFlourishCredit(credit_url, query_string, public_url, credit_text) {
+    credit_url = credit_url || "https://flourish.studio",
+        query_string = query_string || "?utm_source=api&utm_campaign=" + window.location.href,
+        public_url = public_url || "https://public.flourish.studio/",
+        credit_text = credit_text || "A Flourish data visualization";
+    var credit = document.createElement("div");
+    credit.setAttribute("class", "flourish-credit");
+    credit.setAttribute("style", "width:100%!important;margin:0 0 4px!important;text-align:right!important;font-family:Helvetica,sans-serif!important;color:#888!important;font-size:11px!important;font-weight:bold!important;font-style:normal!important;-webkit-font-smoothing:antialiased!important;box-shadow:none!important;");
+    var a = document.createElement("a");
+    a.setAttribute("href", credit_url + query_string);
+    a.setAttribute("target", "_top");
+    a.setAttribute("style", "display:inline-block!important;text-decoration:none!important;font:inherit!important;color:inherit!important;border:none!important;margin:0 5px!important;box-shadow:none!important;");
+    credit.appendChild(a);
+    var img = document.createElement("img");
+    img.setAttribute("alt", "Flourish logo");
+    img.setAttribute("src", public_url + "resources/bosh.svg");
+    img.setAttribute("style", "font:inherit!important;width:auto!important;height:12px!important;border:none!important;margin:0 2px 0!important;vertical-align:middle!important;display:inline-block!important;box-shadow:none!important;");
+    a.appendChild(img);
+    var span = document.createElement("span");
+    span.setAttribute("style", "font:inherit!important;color:#888!important;vertical-align:middle!important;display:inline-block!important;box-shadow:none!important;");
+    span.appendChild(document.createTextNode(credit_text));
+    a.appendChild(span);
+    return credit;
+}
+exports.createFlourishCredit = createFlourishCredit;
+function getLocalizedCreditTextAndUrl(lang, credit_key) {
+    var credit_text, credit_url;
+    lang = lang || "en", credit_key = credit_key || "";
+    credit_text = localizations_1.default[lang].credits[credit_key] || localizations_1.default.en.credits[credit_key] || localizations_1.default.en.credits.default;
+    if (typeof credit_text == "object") {
+        if (credit_text.url)
+            credit_url = credit_text.url;
+        credit_text = credit_text.text;
+    }
+    return {
+        credit_text: credit_text,
+        credit_url: credit_url
+    };
+}
+exports.getLocalizedCreditTextAndUrl = getLocalizedCreditTextAndUrl;

package/common/embed/customer_analytics.d.ts

@@ -0,0 +1,5 @@
+export function sendCustomerAnalyticsMessage(message: any): void;
+export function addAnalyticsListener(callback: any): void;
+export function removeAnalyticsListener(callback: any): void;
+export function dispatchAnalyticsEvent(message: any): void;
+export function initCustomerAnalytics(): void;

package/common/embed/customer_analytics.js

@@ -0,0 +1,114 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.initCustomerAnalytics = exports.dispatchAnalyticsEvent = exports.removeAnalyticsListener = exports.addAnalyticsListener = exports.sendCustomerAnalyticsMessage = void 0;
+// Embedded code - must work in IE
+var enabled = false;
+function getLocationData() {
+    var data = {};
+    if (window._Flourish_template_id) {
+        data.template_id = window._Flourish_template_id;
+    }
+    if (window.Flourish && window.Flourish.app && window.Flourish.app.loaded_template_id) {
+        data.template_id = window.Flourish.app.loaded_template_id;
+    }
+    if (window._Flourish_visualisation_id) {
+        data.visualisation_id = window._Flourish_visualisation_id;
+    }
+    if (window.Flourish && window.Flourish.app && window.Flourish.app.loaded_visualisation) {
+        data.visualisation_id = window.Flourish.app.loaded_visualisation.id;
+    }
+    if (window.Flourish && window.Flourish.app && window.Flourish.app.story) {
+        data.story_id = window.Flourish.app.story.id;
+        data.slide_count = window.Flourish.app.story.slides.length;
+    }
+    if (window.Flourish && window.Flourish.app && window.Flourish.app.current_slide) {
+        // One indexed
+        data.slide_index = window.Flourish.app.current_slide.index + 1;
+    }
+    return data;
+}
+function sendCustomerAnalyticsMessage(message) {
+    if (!enabled)
+        return;
+    if (window.top === window.self)
+        return;
+    var embedded_window = window;
+    if (embedded_window.location.pathname === "srcdoc")
+        embedded_window = embedded_window.parent;
+    var location_data = getLocationData();
+    var message_with_metadata = {
+        sender: "Flourish",
+        method: "customerAnalytics"
+    };
+    for (var key in location_data) {
+        if (location_data.hasOwnProperty(key)) {
+            message_with_metadata[key] = location_data[key];
+        }
+    }
+    for (var key in message) {
+        if (message.hasOwnProperty(key)) {
+            message_with_metadata[key] = message[key];
+        }
+    }
+    embedded_window.parent.postMessage(JSON.stringify(message_with_metadata), "*");
+}
+exports.sendCustomerAnalyticsMessage = sendCustomerAnalyticsMessage;
+function addAnalyticsListener(callback) {
+    if (typeof callback !== "function") {
+        throw new Error("Analytics callback is not a function");
+    }
+    window.Flourish._analytics_listeners.push(callback);
+}
+exports.addAnalyticsListener = addAnalyticsListener;
+function removeAnalyticsListener(callback) {
+    if (typeof callback !== "function") {
+        throw new Error("Analytics callback is not a function");
+    }
+    window.Flourish._analytics_listeners = window.Flourish._analytics_listeners.filter(function (listener) {
+        return callback !== listener;
+    });
+}
+exports.removeAnalyticsListener = removeAnalyticsListener;
+function dispatchAnalyticsEvent(message) {
+    // If the window.Flourish object hasn't been created by the customer, they
+    // can't be listening for analytics events
+    if (!window.Flourish)
+        return;
+    window.Flourish._analytics_listeners.forEach(function (listener) {
+        listener(message);
+    });
+}
+exports.dispatchAnalyticsEvent = dispatchAnalyticsEvent;
+function initCustomerAnalytics() {
+    enabled = true;
+    var events = [
+        {
+            event_name: "click",
+            action_name: "click",
+            use_capture: true
+        },
+        {
+            event_name: "keydown",
+            action_name: "key_down",
+            use_capture: true
+        },
+        {
+            event_name: "mouseenter",
+            action_name: "mouse_enter",
+            use_capture: false
+        },
+        {
+            event_name: "mouseleave",
+            action_name: "mouse_leave",
+            use_capture: false
+        }
+    ];
+    events.forEach(function (event) {
+        document.body.addEventListener(event.event_name, function () {
+            sendCustomerAnalyticsMessage({
+                action: event.action_name
+            });
+        }, event.use_capture);
+    });
+}
+exports.initCustomerAnalytics = initCustomerAnalytics;

package/common/embed/embedding.d.ts

@@ -0,0 +1,25 @@
+export default initEmbedding;
+declare function initEmbedding(): {
+    createEmbedIframe: typeof createEmbedIframe;
+    isFixedHeight: typeof isFixedHeight;
+    getHeightForBreakpoint: typeof getHeightForBreakpoint;
+    startEventListeners: typeof startEventListeners;
+    notifyParentWindow: typeof notifyParentWindow;
+    initScrolly: typeof initScrolly;
+    createScrolly: typeof createScrolly;
+    isSafari: typeof isSafari;
+    initCustomerAnalytics: typeof initCustomerAnalytics;
+    addAnalyticsListener: typeof addAnalyticsListener;
+    sendCustomerAnalyticsMessage: typeof sendCustomerAnalyticsMessage;
+};
+declare function createEmbedIframe(embed_url: any, container: any, width: any, height: any, play_on_load: any): any;
+declare function isFixedHeight(): any;
+declare function getHeightForBreakpoint(width: any): 650 | 575 | 400;
+declare function startEventListeners(callback: any, allowed_methods: any, embed_domain: any): void;
+declare function notifyParentWindow(height: any, opts: any): void;
+declare function initScrolly(opts: any): void;
+declare function createScrolly(iframe: any, captions: any): void;
+declare function isSafari(): boolean;
+import { initCustomerAnalytics } from "./customer_analytics";
+import { addAnalyticsListener } from "./customer_analytics";
+import { sendCustomerAnalyticsMessage } from "./customer_analytics";