tmcgee/cmv-widgets

View on GitHub
widgets/QRCode.js

Summary

Maintainability
A
0 mins
Test Coverage
define([
    'dojo/_base/declare',

    'dijit/_WidgetBase',
    'dijit/_TemplatedMixin',
    'dijit/_WidgetsInTemplateMixin',

    'dojo/_base/lang',
    'dojo/_base/array',
    'dojo/_base/html',
    'dojo/topic',
    'dojo/aspect',
    'dojo/dom',
    'dojo/query',

    'esri/geometry/Point',

    'proj4js/proj4',

    'dojo/text!./QRCode/templates/QRCode.html',
    'dojo/i18n!./QRCode/nls/QRCode',

    './QRCode/qrcode.min',

    'dijit/form/RadioButton',
    'dijit/form/ToggleButton',

    'dojo/NodeList-traverse',

    'xstyle/css!./QRCode/css/QRCode.css'

], function (
    declare,

    _WidgetBase,
    _TemplatedMixin,
    _WidgetsInTemplateMixin,

    lang,
    array,
    html,
    topic,
    aspect,
    dom,
    query,

    Point,

    proj4,

    template,
    i18n
) {
    return declare([_WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin], {
        widgetsInTemplate: true,
        templateString: template,
        baseClass: 'cmvQRCodeMapWidget',

        i18n: i18n,

        mapClickMode: null,
        point: null,

        // set the Lat/Lng from the map's center point when the map's extent is updated
        useMapCenter: true,

        // in case this changes some day
        proj4BaseURL: 'https://epsg.io/',

        //  options are ESRI, EPSG and SR-ORG
        // See http://spatialreference.org/ for more information
        proj4Catalog: 'EPSG',

        // if desired, you can load a projection file from your server
        // instead of using one from spatialreference.org
        // i.e., http://server/projections/102642.js
        projCustomURL: null,

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

            this.own(topic.subscribe('mapClickMode/currentSet', lang.hitch(this, 'setMapClickMode')));

            if (this.parentWidget) {
                if (this.parentWidget.toggleable) {
                    this.own(aspect.after(this.parentWidget, 'toggle', lang.hitch(this, function () {
                        this.onLayoutChange(this.parentWidget.open);
                    })));
                }
            }

            var wkid = this.map.spatialReference.wkid;
            if (wkid === 102100) { // ESRI --> EPSG
                wkid = 3857;
            }
            var key = this.proj4Catalog + ':' + String(wkid);
            if (!proj4.defs[key]) {
                var url = this.proj4BaseURL + String(wkid) + '.js';
                require([url]);
            }

            this.qrCodeObj = new window.QRCode(this.qrCodeNode, {
                width: 128,
                height: 128
            });

            this.map.on('click', lang.hitch(this, 'onMapPoint'));
            if (this.useMapCenter) {
                this.map.on('extent-change', lang.hitch(this, 'onMapCenter'));
                if (this.map.extent) {
                    this.onMapCenter({
                        extent: this.map.extent
                    });
                }
            }
        },

        onMapPoint: function (evt) {
            if (this.mapClickMode === 'qr2go') {
                var mapPoint = evt.mapPoint;
                if (!mapPoint) {
                    return;
                }
                this.processPoint(mapPoint);
            }
        },

        onMapCenter: function (opts) {
            var extent = opts.extent;
            var centerPoint = extent.getCenter();
            this.processPoint(centerPoint);
        },

        onClose: function () {
            if (this.mapClickMode === 'qr2go') {
                this.connectMapClick();
            }
        },

        onLayoutChange: function (open) {
            if (!open) {
                this.onClose();
            }
        },

        placePoint: function () {
            if (this.QRCodeButtonDijit.get('checked')) {
                this.disconnectMapClick();
            } else {
                this.connectMapClick();
            }
        },

        processPoint: function (point) {
            this.point = this.convertCoordinates(point);
            this.generateQr();
        },

        generateQr: function () {
            this.qrCodeObj.clear(); // clear the code.
            if (!this.point || this.point.length !== 2) {
                return;
            }
            var x = this.point[0];
            var y = this.point[1];

            if (this.QRCodeGeoRadioDijit.get('checked')) {
                this.qrCodeObj.makeCode('geo://' + y + ',' + x);
            } else if (this.QRCodeAppleRadioDijit.get('checked')) {
                this.qrCodeObj.makeCode('maps://' + y + ',' + x);
            } else if (this.QRCodeTrek2ThereRadioDijit.get('checked')) {
                this.qrCodeObj.makeCode('arcgis-trek2there://?stop=' + y + ',' + x);
            } else if (this.QRCodeNavigatorRadioDijit.get('checked')) {
                this.qrCodeObj.makeCode('arcgis-navigator://?stop=' + y + ',' + x);
            }

        },

        convertCoordinates: function (mapPoint) {
            // convert the map point's coordinate system into lat/long
            var wkid = this.map.spatialReference.wkid;
            if (wkid === 102100) { // ESRI --> EPSG
                wkid = 3857;
            }
            var key = this.proj4Catalog + ':' + String(wkid);
            return proj4(proj4.defs[key]).inverse([mapPoint.x, mapPoint.y]);
        },

        disconnectMapClick: function () {
            this.QRCodeButtonDijit.set('checked', true);
            this.map.setMapCursor('crosshair');
            topic.publish('mapClickMode/setCurrent', 'qr2go');
        },

        connectMapClick: function () {
            this.QRCodeButtonDijit.set('checked', false);
            this.map.setMapCursor('auto');
            topic.publish('mapClickMode/setDefault');
        },


        setMapClickMode: function (mode) {
            this.mapClickMode = mode;
        }

    });
});