profile-pane/lib/QRCodeCard.js

A SolidOS compatible pane to display a personal profile page

"use strict";
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
    return cooked;
};
var __assign = (this && this.__assign) || function () {
    __assign = Object.assign || function(t) {
        for (var s, i = 1, n = arguments.length; i < n; i++) {
            s = arguments[i];
            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
                t[p] = s[p];
        }
        return t;
    };
    return __assign.apply(this, arguments);
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.QRCodeCard = void 0;
// A card in my profile to show yu a QRCode of my webid
//
var lit_html_1 = require("lit-html");
var baseStyles_1 = require("./baseStyles");
var style_map_js_1 = require("lit-html/directives/style-map.js");
var solid_ui_1 = require("solid-ui");
var styles = {
    image: (0, style_map_js_1.styleMap)((0, baseStyles_1.fullWidth)()),
    intro: (0, style_map_js_1.styleMap)(__assign(__assign({}, (0, baseStyles_1.textGray)()), (0, baseStyles_1.textCenter)())),
    card: (0, style_map_js_1.styleMap)({}),
    info: (0, style_map_js_1.styleMap)(__assign(__assign({}, (0, baseStyles_1.paddingSmall)()), (0, baseStyles_1.textLeft)())),
};
var QRCodeCard = function (profileBasics, subject) {
    var nameStyle = (0, style_map_js_1.styleMap)(__assign(__assign({}, (0, baseStyles_1.heading)()), { 
        // "text-decoration": "underline",
        color: profileBasics.highlightColor }));
    var qrCodeCanvasStyle = 'width: 80%; margin:auto;';
    var highlightColor = profileBasics.highlightColor || '#000000';
    var backgroundColor = profileBasics.backgroundColor || '#ffffff';
    // console.log(`@@ qrcodes colours highlightColor ${highlightColor}, backgroundColor ${backgroundColor}`)
    var name = solid_ui_1.utils.label(subject);
    var BEGIN = 'BEGIN:VCARD\r\n';
    var END = 'END:VCARD\r\n';
    var FN = 'FN:' + name + '\r\n';
    var URL = 'URL:' + subject.uri + 'r\n';
    var VERSIONV = 'VERSION:4.0\r\n';
    // find out how to import values from presenter.ts
    // once those values are imported, make sure any user input aligns
    var vCard = BEGIN + FN + URL + END + VERSIONV;
    // console.log(`@@ qrcodes colours highlightColor ${highlightColor}, backgroundColor ${backgroundColor}`)
    return (0, lit_html_1.html)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  <div>\n    <div style=", ">\n      <h3 style=", ">", "</h3>\n      <div class=\"QRCode\" style=\"", "\" data-value=\"", "\" highlightColor=\"", "\" backgroundColor=\"", "\"></div>\n    </div>\n  </div>\n  "], ["\n  <div>\n    <div style=", ">\n      <h3 style=", ">", "</h3>\n      <div class=\"QRCode\" style=\"", "\" data-value=\"", "\" highlightColor=\"", "\" backgroundColor=\"", "\"></div>\n    </div>\n  </div>\n  "])), styles.card, nameStyle, profileBasics.name, qrCodeCanvasStyle, vCard, highlightColor, backgroundColor);
};
exports.QRCodeCard = QRCodeCard;
var templateObject_1;
//# sourceMappingURL=QRCodeCard.js.map