avatar in notification and desktop client support. help wip

CHANGELOG.md

@@ -1,6 +1,17 @@
 # InfinityOne Changelog
 
-## 1.0.0.beta8 (2018-03-xx)
+## 1.0.0.beta9 (2018-03-28)
+
+### Enhancements
+
+* Added local help framework with couple help pages (WIP)
+* Use Message poster avatar in desktop notifications
+* Added server_settings public API for use by desktop clients
+
+
+### Bug Fixes
+
+## 1.0.0.beta8 (2018-03-26)
 
 ### Enhancements
 

assets/brunch-config.js

@@ -9,6 +9,7 @@ exports.config = {
       joinTo: {
        "js/app.js": /^(js|..\/deps|node_modules)/,
        "js/landing.js": /^(landing_js|..\/deps|node_modules)/,
+       "js/help.js": /^(help_js|..\/deps|node_modules)/,
        "js/adapter.js": ["vendor/adapter.js"],
        "js/textarea-autogrow.js": ["vendor/textarea-autogrow.js"]
        // "js/vendor.js": /^(web\/static\/vendor)|(deps)/
@@ -35,6 +36,7 @@ exports.config = {
 
         ],
         "css/channel_settings.css": ["scss/channel_settings.scss"],
+        "css/help.css": ["scss/help.scss", "scss/components.scss"],
         "css/toastr.css": ["css/toastr.css"],
         "css/emojipicker.css": ["vendor/emojiPicker.css"]
         // "css/toastr.css": ["web/static/scss/toastr.scss"]
@@ -59,7 +61,7 @@ exports.config = {
   // Phoenix paths configuration
   paths: {
     // Dependencies and current project directories to watch
-    watched: ["static", "fonts", "css", "js", "vendor", "scss", "../plugins/one_admin/priv/static"],
+    watched: ["static", "fonts", "css", "js", "help_js", "vendor", "scss", "../plugins/one_admin/priv/static"],
     // Where to compile files to
     public: "../priv/static"
   },
@@ -88,7 +90,8 @@ exports.config = {
 
   modules: {
     autoRequire: {
-      "js/app.js": ["js/app"]
+      "js/app.js": ["js/app"],
+      "js/help.js": ["help_js/help"]
     }
   },
 

assets/help_js/header.js

@@ -0,0 +1,16 @@
+$(function () {
+    $('.portico-header a .logout').on('click', function () {
+        $('#logout_form').submit();
+        return false;
+    });
+
+    $("body").click(function (e) {
+        var $this = $(e.target);
+
+        if ($this.closest(".dropdown .dropdown-pill").length > 0 && !$(".dropdown").hasClass("show")) {
+            $(".dropdown").addClass("show");
+        } else if (!$this.is(".dropdown ul") && $this.closest(".dropdown ul").length === 0) {
+            $(".dropdown").removeClass("show");
+        }
+    });
+});

assets/help_js/help.js

@@ -0,0 +1,197 @@
+import PerfectScrollbar from 'perfect-scrollbar';
+
+function registerCodeSection($codeSection) {
+    const $li = $codeSection.find("ul.nav li");
+    const $blocks = $codeSection.find(".blocks div");
+
+    $li.click(function () {
+        const language = this.dataset.language;
+
+        $li.removeClass("active");
+        $li.filter("[data-language="+language+"]").addClass("active");
+
+        $blocks.removeClass("active");
+        $blocks.filter("[data-language="+language+"]").addClass("active");
+    });
+
+    $li.eq(0).click();
+}
+
+function highlight_current_article() {
+    $('.help .sidebar a').removeClass('highlighted');
+    var path = window.location.href.match(/\/(help|api)\/.*/);
+
+    if (!path) {
+        return;
+    }
+console.log('path', path, path[0]);
+    var article = $('.help .sidebar a[href="' + path[0] + '"]');
+    article.addClass('highlighted');
+}
+
+function adjust_mac_shortcuts() {
+    var keys_map = new Map([
+        ['Backspace', 'Delete'],
+        ['Enter', 'Return'],
+        ['Home', 'Fn + ⇽'],
+        ['End', 'Fn + ⇾'],
+        ['PgUp', 'Fn + ↑'],
+        ['PgDn', 'Fn + ↓'],
+    ]);
+
+    $(".markdown .content code").each(function () {
+        var text = $(this).text();
+
+        if (!keys_map.has(text)) {
+            return;
+        }
+
+        var key_string = keys_map.get(text);
+        var keys = key_string.match(/[^\s\+]+/g);
+
+        _.each(keys, function (key) {
+            key_string = key_string.replace(key, '<code>' + key + '</code>');
+        });
+
+        $(this).replaceWith(key_string);
+    });
+}
+
+function render_code_sections() {
+    $(".code-section").each(function () {
+        registerCodeSection($(this));
+    });
+
+    highlight_current_article();
+
+    if (/Mac/i.test(navigator.userAgent)) {
+        adjust_mac_shortcuts();
+    }
+}
+
+function scrollToHash(container) {
+    var hash = window.location.hash;
+    if (hash !== '') {
+        container.scrollTop = $(hash).position().top - $('.markdown .content').position().top;
+    } else {
+        container.scrollTop = 0;
+    }
+}
+
+(function () {
+    var html_map = {};
+    var loading = {
+        name: null,
+    };
+
+    var fetch_page = function (path, callback) {
+        $.get(path, function (res) {
+            var $html = $(res).find(".markdown .content");
+            $html.find(".back-to-home").remove();
+
+            callback($html.html().trim());
+            render_code_sections();
+        });
+    };
+
+    var markdownPS = new PerfectScrollbar($(".markdown")[0], {
+        suppressScrollX: true,
+        useKeyboard: false,
+        wheelSpeed: 0.68,
+        scrollingThreshold: 50,
+    });
+
+    new PerfectScrollbar($(".sidebar")[0], {
+        suppressScrollX: true,
+        useKeyboard: false,
+        wheelSpeed: 0.68,
+        scrollingThreshold: 50,
+    });
+
+    $(".sidebar.slide h2").click(function (e) {
+        var $next = $(e.target).next();
+
+        if ($next.is("ul")) {
+            $next.slideToggle("fast", "swing", function () {
+                markdownPS.update();
+            });
+        }
+    });
+
+    $(".sidebar a").click(function (e) {
+        var path = $(this).attr("href");
+        var path_dir = path.split('/')[1];
+        var current_dir = window.location.pathname.split('/')[1];
+
+        // Do not block redirecting to external URLs
+        if (path_dir !== current_dir) {
+            return;
+        }
+
+        var container = $(".markdown")[0];
+
+        if (loading.name === path) {
+            return;
+        }
+
+        history.pushState({}, "", path);
+
+        if (html_map[path]) {
+            $(".markdown .content").html(html_map[path]);
+            markdownPS.update();
+            render_code_sections();
+            scrollToHash(container);
+        } else {
+            loading.name = path;
+
+            fetch_page(path, function (res) {
+                html_map[path] = res;
+                $(".markdown .content").html(html_map[path]);
+                loading.name = null;
+                markdownPS.update();
+                scrollToHash(container);
+            });
+        }
+
+        $(".sidebar").removeClass("show");
+
+        e.preventDefault();
+    });
+
+    // Show Guides user docs in sidebar by default
+    $('.help .sidebar h2#guides + ul').css('display', 'block');
+
+    // Remove ID attributes from sidebar links so they don't conflict with index page anchor links
+    $('.help .sidebar h1, .help .sidebar h2, .help .sidebar h3').removeAttr('id');
+
+    // Scroll to anchor link when clicked
+    $('.markdown .content h1, .markdown .content h2, .markdown .content h3').on('click', function () {
+        window.location.href = window.location.href.replace(/#.*/, '') + '#' + $(this).attr("id");
+    });
+
+    window.onresize = function () {
+        markdownPS.update();
+    };
+
+    window.addEventListener("popstate", function () {
+        var path = window.location.pathname;
+        $(".markdown .content").html(html_map[path]);
+    });
+
+    $(".hamburger").click(function () {
+        $(".sidebar").toggleClass("show");
+    });
+
+    $(".markdown").click(function () {
+        if ($(".sidebar.show").length) {
+            $(".sidebar.show").toggleClass("show");
+        }
+    });
+
+    render_code_sections();
+
+    // Finally, make sure if we loaded a window with a hash, we scroll
+    // to the right place.
+    var container = $(".markdown")[0];
+    scrollToHash(container);
+}());

assets/js/notifier.js

@@ -21,7 +21,14 @@ class Notifier {
     this.useNewNotification = this.supportsNewNofification();
   }
 
+  audioEnabled() {
+    return true;
+  }
+
   desktop(title, body, opts = {}) {
+    // this will fail sometimes because it much be an absolute path on native
+    // clients. However, it should not be used anymore since we pass the users
+    // url.
     var icon = '/images/notification_logo.png';
 
     if (opts.icon) {
@@ -31,6 +38,7 @@ class Notifier {
     var notification = this.newNotification(title, {
       body: body,
       icon: icon,
+      subtitle: opts.subtitle
     });
 
     if (opts.duration) {
@@ -58,21 +66,27 @@ class Notifier {
 
   audio(sound) {
     if (debug) { console.log('notify_audio', sound) }
-    $('audio#' + sound)[0].play()
+    if (this.audioEnabled()) {
+      $('audio#' + sound)[0].play()
+    }
   }
 
   supportsNewNofification() {
     if (!window.Notification || !Notification.requestPermission)
       return false;
 
-    try {
-      new Notification('');
-    } catch (e) {
-      if (e.name == 'TypeError')
-        return false;
-    }
-    return true;
+    // try {
+    //   new Notification('');
+    // } catch (e) {
+    //   if (e.name == 'TypeError')
+    //     return false;
+    // }
+    return isConstructor(Notification);
   }
 }
 
+function isConstructor(obj) {
+  return !!obj.prototype && !!obj.prototype.constructor.name;
+}
+
 export default Notifier

assets/js/one_chat.js

@@ -79,6 +79,7 @@ window.OneChat = {
   loads: [],
   connects: [],
   socket: false,
+  notificationsEnabled: true,
   Presence: require('phoenix').Presence,
   on_load: function(f) {
     this.loads.push(f)

assets/package.json

@@ -11,6 +11,7 @@
     "highlight.js": "~9.12.0",
     "jquery": "^3.2.1",
     "moment": "^2.17.1",
+    "perfect-scrollbar": "^1.3.0",
     "phoenix": "file:../deps/phoenix",
     "phoenix_html": "file:../deps/phoenix_html",
     "sweetalert": "^1.1.3",