Fix #1672 BackgroundSwitcher review

docma-config.json

@@ -147,6 +147,7 @@
           "jsapi": "web/client/jsapi/MapStore2.js",
             "plugins": [
                 "web/client/plugins/index.jsdoc",
+                "web/client/plugins/BackgroundSelector.jsx",
                 "web/client/plugins/BackgroundSwitcher.jsx",
                 "web/client/plugins/DrawerMenu.jsx",
                 "web/client/plugins/GlobeViewSwitcher.jsx",

web/client/components/background/BackgroundSelector.jsx

@@ -0,0 +1,201 @@
+/*
+ * Copyright 2017, GeoSolutions Sas.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+const React = require('react');
+const assign = require('object-assign');
+const {isEmpty} = require('lodash');
+
+const PreviewButton = require('./PreviewButton');
+const PreviewList = require('./PreviewList');
+const PreviewIcon = require('./PreviewIcon');
+
+const HYBRID = require('./images/mapthumbs/HYBRID.jpg');
+const ROADMAP = require('./images/mapthumbs/ROADMAP.jpg');
+const TERRAIN = require('./images/mapthumbs/TERRAIN.jpg');
+const Aerial = require('./images/mapthumbs/Aerial.jpg');
+const mapnik = require('./images/mapthumbs/mapnik.jpg');
+const mapquestOsm = require('./images/mapthumbs/mapquest-osm.jpg');
+const empty = require('./images/mapthumbs/none.jpg');
+const unknown = require('./images/mapthumbs/dafault.jpg');
+const Night2012 = require('./images/mapthumbs/NASA_NIGHT.jpg');
+const AerialWithLabels = require('./images/mapthumbs/AerialWithLabels.jpg');
+const OpenTopoMap = require('./images/mapthumbs/OpenTopoMap.jpg');
+
+const thumbs = {
+    google: {
+        HYBRID,
+        ROADMAP,
+        TERRAIN
+    },
+    bing: {
+        Aerial,
+        AerialWithLabels
+    },
+    osm: {
+        mapnik
+    },
+    mapquest: {
+        osm: mapquestOsm
+    },
+    ol: {
+        "undefined": empty
+    },
+    nasagibs: {
+        Night2012
+    },
+    OpenTopoMap: {
+        OpenTopoMap
+    },
+    unknown
+};
+
+require('./css/background.css');
+
+const BackgroundSelector = React.createClass({
+    propTypes: {
+        drawerWidth: React.PropTypes.number,
+        start: React.PropTypes.number,
+        bottom: React.PropTypes.number,
+        isMobile: React.PropTypes.bool,
+        enabled: React.PropTypes.bool,
+        drawerEnabled: React.PropTypes.bool,
+        layers: React.PropTypes.array,
+        currentLayer: React.PropTypes.object,
+        tempLayer: React.PropTypes.object,
+        size: React.PropTypes.object,
+        desktop: React.PropTypes.object,
+        mobile: React.PropTypes.object,
+        onToggle: React.PropTypes.func,
+        propertiesChangeHandler: React.PropTypes.func,
+        setControlProperty: React.PropTypes.func
+    },
+    getDefaultProps() {
+        return {
+            drawerWidth: 0,
+            start: 0,
+            bottom: 0,
+            isMobile: false,
+            enabled: false,
+            drawerEnabled: false,
+            layers: [],
+            currentLayer: {},
+            tempLayer: {},
+            size: {width: 0, height: 0},
+            desktop: {},
+            mobile: {},
+            onToggle: () => {},
+            propertiesChangeHandler: () => {},
+            setControlProperty: () => {}
+        };
+    },
+    componentWillUnmount() {
+        this.props.setControlProperty('backgroundSelector', 'currentLayer', {});
+        this.props.setControlProperty('backgroundSelector', 'tempLayer', {});
+        this.props.setControlProperty('backgroundSelector', 'start', 0);
+    },
+    componentWillUpdate(nextProps) {
+        if (this.props.size.width !== nextProps.size.width
+        || this.props.size.height !== nextProps.size.height
+        || this.props.drawerEnabled !== nextProps.drawerEnabled) {
+            this.props.setControlProperty('backgroundSelector', 'start', 0);
+        }
+    },
+    getThumb(layer) {
+        return thumbs[layer.source] && thumbs[layer.source][layer.name] || layer.thumbURL || thumbs.unknown;
+    },
+    getLayer() {
+        const tempLyr = isEmpty(this.props.tempLayer) ? this.props.layers.filter((layer) => { return layer.visibility === true; })[0] : this.props.tempLayer;
+        const currentLyr = isEmpty(this.props.currentLayer) ? this.props.layers.filter((layer) => { return layer.visibility === true; })[0] : this.props.currentLayer;
+        return this.props.enabled ? tempLyr : currentLyr;
+    },
+    getIcons(side, frame, margin, vertical) {
+        return this.props.enabled ? this.props.layers.map((layer, idx) => {
+            let thumb = this.getThumb(layer);
+            return <PreviewIcon vertical={vertical} key={idx} src={thumb} currentLayer={this.props.currentLayer} margin={margin} side={side} frame={frame} layer={layer} onClose={this.props.onToggle} onToggle={this.props.propertiesChangeHandler} setLayer={this.props.setControlProperty}/>;
+        }) : [];
+    },
+    getDimensions(side, frame, margin, left, size, iconsLength) {
+        const openPreviewSize = (side + frame * 2 + margin * 2) + (side + frame * 2 + margin) * iconsLength + left;
+        const minSize = (size / 2) - (side + frame * 2 + margin * 2) - left;
+        const pagination = openPreviewSize > size / 2;
+        let visibleIconsLength = Math.floor(minSize / (side + frame * 2 + margin));
+        visibleIconsLength = visibleIconsLength > iconsLength ? iconsLength : visibleIconsLength;
+        const listSize = this.props.enabled ? (side + frame + margin) * visibleIconsLength + 52 : 0;
+
+        return {pagination, listSize, visibleIconsLength};
+    },
+    renderDesktop() {
+
+        const desktop = assign({
+            side: 78,
+            sidePreview: 104,
+            frame: 3,
+            margin: 5
+        }, this.props.desktop);
+
+        const frame = desktop.frame * 2;
+        const side = desktop.side - frame;
+        const sideButton = this.props.enabled ? desktop.sidePreview - frame : side;
+        const margin = desktop.margin;
+
+        const labelHeight = this.props.enabled ? sideButton - frame * 2 : 0;
+        const layer = this.getLayer();
+        const src = this.getThumb(layer);
+        const icons = this.getIcons(side, frame, margin, false);
+        let left = this.props.drawerWidth !== 0 ? this.props.drawerWidth : 300;
+        left = this.props.drawerEnabled ? left : 0;
+        const {pagination, listSize, visibleIconsLength} = this.getDimensions(side, frame, margin, left, this.props.size.width, icons.length);
+        const buttonSize = side + frame + margin;
+
+        return visibleIconsLength <= 0 && this.props.enabled
+        || !this.props.enabled && this.props.size.width / 2 < left + sideButton + frame + margin * 2 ? null : (
+            <div className="background-plugin-position" style={{left, bottom: this.props.bottom}}>
+                <PreviewButton src={src} side={sideButton} frame={frame} margin={margin} labelHeight={labelHeight} label={layer.title} onToggle={this.props.onToggle}/>
+                <div className="background-list-container" style={{bottom: this.props.bottom, left: left + sideButton + margin * 2 + frame, width: listSize, height: buttonSize}}>
+                    <PreviewList start={this.props.start} bottom={0} height={buttonSize} width={buttonSize * visibleIconsLength} icons={icons} pagination={pagination} length={visibleIconsLength} onClick={this.props.setControlProperty} />
+                </div>
+            </div>
+        );
+    },
+    renderMobile() {
+
+        const mobile = assign({
+            side: 65,
+            frame: 3,
+            margin: 5
+        }, this.props.mobile);
+
+        const frame = mobile.frame * 2;
+        const side = mobile.side - frame;
+        const margin = mobile.margin;
+
+        const layer = this.getLayer();
+        const src = this.getThumb(layer);
+        const icons = this.getIcons(side, frame, margin, true);
+        const {pagination, listSize, visibleIconsLength} = this.getDimensions(side, frame, margin, 0, this.props.size.height, icons.length);
+        const buttonSizeWithMargin = side + frame + margin * 2;
+        const buttonSize = side + frame + margin;
+
+        return this.props.drawerEnabled || visibleIconsLength <= 0 && this.props.enabled ? null : (
+            <div className="background-plugin-position" style={{bottom: this.props.bottom}}>
+                <PreviewButton showLabel={false} src={src} side={side} frame={frame} margin={margin} label={layer.title} onToggle={this.props.onToggle}/>
+                <div className="background-list-container" style={{bottom: this.props.bottom + buttonSizeWithMargin, height: listSize, width: buttonSizeWithMargin}}>
+                    <PreviewList vertical={true} start={this.props.start} bottom={0} height={buttonSize * visibleIconsLength} width={buttonSize} icons={icons} pagination={pagination} length={visibleIconsLength} onClick={this.props.setControlProperty} />
+                </div>
+            </div>
+        );
+    },
+    checkDevice() {
+        return this.props.isMobile ? this.renderMobile() : this.renderDesktop();
+    },
+    render() {
+        return this.props.layers.length > 0 ? this.checkDevice() : null;
+    }
+});
+
+module.exports = BackgroundSelector;

web/client/components/background/PaginationButton.jsx

@@ -0,0 +1,41 @@
+/*
+ * Copyright 2017, GeoSolutions Sas.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+const React = require('react');
+const {Glyphicon} = require('react-bootstrap');
+
+const PaginationButton = React.createClass({
+    propTypes: {
+        side: React.PropTypes.number,
+        direction: React.PropTypes.bool,
+        vertical: React.PropTypes.bool,
+        onClick: React.PropTypes.func
+    },
+    getDefaultProps() {
+        return {
+            side: 0,
+            direction: true,
+            vertical: false,
+            onClick: () => {}
+        };
+    },
+    render() {
+        let glyph = this.props.direction ? 'chevron-right' : 'chevron-left';
+        glyph = this.props.vertical && this.props.direction ? 'chevron-down' : glyph;
+        glyph = this.props.vertical && !this.props.direction ? 'chevron-up' : glyph;
+        const paginationClass = this.props.vertical ? 'background-plugin-pagination-btn-vertical text-center' : 'background-plugin-pagination-btn-horizontal';
+        const style = this.props.vertical ? {width: this.props.side} : {height: this.props.side};
+        return (
+            <div className={paginationClass + ' text-primary'} style={style} onClick={this.props.onClick}>
+                <Glyphicon glyph={glyph} />
+            </div>
+        );
+    }
+});
+
+module.exports = PaginationButton;

web/client/components/background/PreviewButton.jsx

@@ -0,0 +1,50 @@
+/*
+ * Copyright 2017, GeoSolutions Sas.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+const React = require('react');
+
+require('./css/previewbutton.css');
+
+const PreviewButton = React.createClass({
+    propTypes: {
+        src: React.PropTypes.string,
+        side: React.PropTypes.number,
+        frame: React.PropTypes.number,
+        margin: React.PropTypes.number,
+        labelHeight: React.PropTypes.number,
+        label: React.PropTypes.string,
+        showLabel: React.PropTypes.bool,
+        onToggle: React.PropTypes.func
+    },
+    getDefaultProps() {
+        return {
+            src: './images/mapthumbs/none.jpg',
+            side: 50,
+            frame: 4,
+            margin: 5,
+            labelHeight: 29,
+            label: '',
+            showLabel: true,
+            onToggle: () => {}
+        };
+    },
+    render() {
+        return (
+            <div className="background-preview-button" style={{margin: this.props.margin}}>
+                <div className="background-preview-button-container bg-body" onClick={this.props.onToggle} style={{padding: this.props.frame / 2, width: this.props.side + this.props.frame, height: this.props.side + this.props.frame}}>
+                    {this.props.showLabel ? (<div className="background-preview-button-label" style={{width: this.props.side, height: this.props.labelHeight, marginTop: 0, padding: 0}} ><div className="bg-body bg-text" style={{padding: this.props.frame }}>{this.props.label}</div></div>) : null}
+                    <div className="background-preview-button-frame" style={{width: this.props.side, height: this.props.side}}>
+                        <img src={this.props.src}/>
+                    </div>
+                </div>
+            </div>
+        );
+    }
+});
+
+module.exports = PreviewButton;

web/client/components/background/PreviewIcon.jsx

@@ -0,0 +1,58 @@
+/*
+ * Copyright 2017, GeoSolutions Sas.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+const React = require('react');
+
+require('./css/previewicon.css');
+
+const PreviewIcon = React.createClass({
+    propTypes: {
+        side: React.PropTypes.number,
+        frame: React.PropTypes.number,
+        margin: React.PropTypes.number,
+        src: React.PropTypes.string,
+        vertical: React.PropTypes.bool,
+        layer: React.PropTypes.object,
+        currentLayer: React.PropTypes.object,
+        onToggle: React.PropTypes.func,
+        onClose: React.PropTypes.func,
+        setLayer: React.PropTypes.func
+    },
+    getDefaultProps() {
+        return {
+            side: 50,
+            frame: 4,
+            margin: 5,
+            src: '',
+            vertical: false,
+            layer: {},
+            currentLayer: {},
+            onToggle: () => {},
+            onClose: () => {},
+            setLayer: () => {}
+        };
+    },
+    render() {
+        const containerClass = this.props.vertical ? 'background-preview-icon-container-vertical' : 'background-preview-icon-container-horizontal';
+        let type = this.props.layer.visibility ? containerClass + ' bg-primary' : containerClass + ' bg-body';
+        type = this.props.layer.invalid ? containerClass + ' disabled-icon bg-body' : type;
+        const click = this.props.layer.invalid ? () => {} : () => { this.props.onClose(); this.props.onToggle(this.props.layer.id, {visibility: true}); this.props.setLayer('backgroundSelector', 'currentLayer', this.props.layer); };
+        return (
+            <div className={type} style={{padding: this.props.frame / 2, marginLeft: this.props.vertical ? this.props.margin : 0, marginRight: this.props.vertical ? 0 : this.props.margin, marginBottom: this.props.margin, width: this.props.side + this.props.frame, height: this.props.side + this.props.frame}}>
+                <div className="background-preview-icon-frame" style={{width: this.props.side, height: this.props.side}}>
+                    <img
+                        onMouseOver={() => { this.props.setLayer('backgroundSelector', 'tempLayer', this.props.layer); }}
+                        onMouseOut={() => { this.props.setLayer('backgroundSelector', 'tempLayer', this.props.currentLayer); }}
+                        onClick={click} src={this.props.src}/>
+                </div>
+            </div>
+        );
+    }
+});
+
+module.exports = PreviewIcon;