pixuireactcomponents 0.0.0

package/ui/components/slider/Slider.js

@@ -0,0 +1,289 @@
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+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);
+};
+import { Component, createRef, h } from 'preact';
+var row_center_center = {
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center'
+};
+var row_between_center = {
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center'
+};
+var wrapperStyle;
+var outerStyle;
+var innerStyle;
+var dotStyle;
+var dotWrapperStyle;
+var incButtonStyle;
+var decButtonStyle;
+var withButtonStyle;
+var lastX = undefined; // 上一次位置的横坐标
+var count = 0; // 拖动条距离最左端的位置 [0, this.props.wrapperWidth]
+var rect = undefined; // 滑动区域
+var Slider = /** @class */ (function (_super) {
+    __extends(Slider, _super);
+    function Slider(props) {
+        var _this = _super.call(this, props) || this;
+        _this.discrete = Math.round(_this.props.discrete == null ? 0 : _this.props.discrete);
+        _this.refWrapper = createRef();
+        _this.onDragStart = function (event) {
+            console.log('【Slider】DragStart event.clientX--' + event.clientX + '-----percent----' + _this.state.percent + '-----currentX----' + (_this.state.percent / 10000 * _this.props.wrapperWidth));
+            lastX = event.clentX;
+            count = _this.state.percent / 10000 * _this.props.wrapperWidth;
+            if (_this.props.onDragStart) {
+                _this.props.onDragStart();
+            }
+        };
+        _this.onDrag = function (event) {
+            if (event.clientX < rect.left - 50 || event.clientX > rect.right + 50)
+                return;
+            if (lastX == undefined) {
+                lastX = event.clientX;
+                return;
+            }
+            var move = Number(event.clientX) - Number(lastX);
+            count += move;
+            count = Math.min(_this.props.wrapperWidth, count);
+            count = Math.max(0, count);
+            var newPercent = count / _this.props.wrapperWidth * 10000;
+            if (_this.props.isDiscrete == true && _this.props.maxDiscrete != null) {
+                newPercent = count / _this.props.wrapperWidth * _this.props.maxDiscrete;
+                _this.discrete = Math.round(newPercent);
+                // this.setState({
+                //     discrete: Math.round(newPercent),
+                // })
+                if (_this.props.rangeControl) {
+                    if (_this.props.endRange != null)
+                        _this.discrete = Math.min(_this.discrete, _this.props.endRange);
+                    if (_this.props.startRange != null)
+                        _this.discrete = Math.max(_this.discrete, _this.props.startRange);
+                }
+                newPercent = _this.discrete * (10000 / _this.props.maxDiscrete);
+            }
+            _this.setState({
+                percent: newPercent
+            }, function () {
+                console.log('【Slider】OnDrag event.clientX--' + event.clientX + '-----percent----' + _this.state.percent + '-----discrete----' + _this.discrete + '-----currentX----' + (_this.state.percent / 10000 * _this.props.wrapperWidth));
+                if (_this.props.onDrag)
+                    _this.props.onDrag(_this.props.isDiscrete ? _this.discrete : newPercent);
+            });
+            lastX = event.clientX;
+        };
+        _this.onDragEnd = function (event) {
+            lastX = undefined;
+            if (_this.props.isDiscrete == true && _this.props.maxDiscrete != null) {
+                //console.log("OnDragEnd -----discrete----"+this.state.discrete)
+                _this.setState({
+                    percent: _this.discrete * (10000 / _this.props.maxDiscrete),
+                }, function () {
+                    console.log('【Slider】DragEnd event.clientX--' + event.clientX + '-----percent----' + _this.state.percent + '-----discrete----' + _this.discrete + '-----currentX----' + (_this.state.percent / 10000 * _this.props.wrapperWidth));
+                    if (_this.props.onDragEnd) {
+                        _this.props.onDragEnd(_this.props.isDiscrete ? _this.discrete : _this.state.percent);
+                    }
+                });
+            }
+            else {
+                console.log('【Slider】DragEnd event.clientX--' + event.clientX + '-----percent----' + _this.state.percent + '-----currentX----' + (_this.state.percent / 10000 * _this.props.wrapperWidth));
+                if (_this.props.onDragEnd) {
+                    _this.props.onDragEnd(_this.props.isDiscrete ? _this.discrete : _this.state.percent);
+                }
+            }
+        };
+        _this.onDecClick = function () {
+            //离散的情况
+            if (_this.props.isDiscrete && _this.props.maxDiscrete) {
+                if (_this.discrete >= 1) {
+                    _this.discrete -= 1;
+                    if (_this.props.rangeControl && _this.props.startRange != null) {
+                        _this.discrete = Math.max(_this.discrete, _this.props.startRange);
+                    }
+                    var newPercent = _this.discrete * (10000 / _this.props.maxDiscrete);
+                    _this.setState({
+                        //discrete: this.state.discrete - 1,
+                        percent: newPercent
+                    }, function () {
+                        if (_this.props.onDecClick) {
+                            _this.props.onDecClick(_this.discrete);
+                        }
+                    });
+                }
+            }
+            //连续的情况
+            else {
+                if (_this.state.percent > 0) {
+                    _this.setState({
+                        percent: _this.state.percent - 1
+                    }, function () {
+                        if (_this.props.onDecClick) {
+                            _this.props.onDecClick(_this.state.percent);
+                        }
+                    });
+                }
+            }
+        };
+        _this.onIncClick = function () {
+            //离散的情况
+            if (_this.props.isDiscrete && _this.props.maxDiscrete) {
+                if (_this.discrete < _this.props.maxDiscrete) {
+                    _this.discrete += 1;
+                    if (_this.props.rangeControl && _this.props.startRange != null) {
+                        _this.discrete = Math.max(_this.discrete, _this.props.startRange);
+                    }
+                    var newPercent = _this.discrete * (10000 / _this.props.maxDiscrete);
+                    _this.setState({
+                        // discrete: this.state.discrete + 1,
+                        percent: newPercent
+                    }, function () {
+                        if (_this.props.onIncClick) {
+                            _this.props.onIncClick(_this.discrete);
+                        }
+                    });
+                }
+            }
+            //连续的情况
+            else {
+                if (_this.state.percent < 10000) {
+                    _this.setState({
+                        percent: _this.state.percent + 1
+                    }, function () {
+                        if (_this.props.onIncClick) {
+                            _this.props.onIncClick(_this.state.percent);
+                        }
+                    });
+                }
+            }
+        };
+        _this.computeWrapperStyle = function () {
+            wrapperStyle = __assign({ width: _this.props.wrapperWidth + 'px', height: _this.props.wrapperHeight + 'px' }, row_center_center);
+        };
+        _this.computeOuterStyle = function () {
+            outerStyle = {
+                width: '100%',
+                height: _this.props.height + 'px',
+                backgroundImage: "url(".concat(_this.props.outerBg, ")"),
+                backgroundSize: '100% 100%',
+                display: 'flex',
+                flexDirection: 'row',
+                justifyContent: 'start',
+                alignItems: 'center'
+            };
+        };
+        _this.computeInnerStyle = function () {
+            var _width = Math.floor(_this.state.percent / 100) + '%';
+            innerStyle = {
+                width: _width,
+                height: (_this.props.innerHeight != null) ? _this.props.innerHeight + 'px' : '100%',
+                backgroundImage: "url(".concat(_this.props.innerBg, ")"),
+                backgroundSize: '100% 100%',
+                display: 'flex',
+                flexDirection: 'row',
+                justifyContent: 'start',
+                alignItems: 'center'
+            };
+        };
+        _this.computeDotWrapperStyle = function () {
+            dotWrapperStyle = __assign({ position: 'absolute', width: _this.props.dotWrapperWidth + 'px', height: _this.props.dotWrapperHeight + 'px', 
+                //marginTop: (this.props.height - this.props.dotWrapperHeight) / 2 + "px",
+                marginLeft: (_this.props.wrapperWidth * _this.state.percent / 10000 - _this.props.dotWrapperWidth / 2) + 'px' }, row_center_center
+            // backgroundColor: '#FF000066'
+            );
+        };
+        _this.computeDotStyle = function () {
+            dotStyle = {
+                width: _this.props.dotWidth + 'px',
+                height: _this.props.dotHeight + 'px',
+            };
+        };
+        _this.computeIncButtonStyle = function () {
+            incButtonStyle = {
+                width: _this.props.incButtonWidth + 'px',
+                height: _this.props.incButtonHeight + 'px',
+                //marginLeft:this.props.incButtonLeft+"px",
+                //backgroundImage: `url(${this.props.incButtonBg})`,
+            };
+        };
+        _this.computeDecButtonStyle = function () {
+            decButtonStyle = {
+                width: _this.props.decButtonWidth + 'px',
+                height: _this.props.decButtonHeight + 'px',
+                //marginRight:this.props.decButtonRight+"px",
+                //backgroundImage: `url(${this.props.decButtonBg})`,
+            };
+        };
+        _this.computeWithButtonStyle = function () {
+            withButtonStyle = __assign({ minWidth: _this.props.overallWidth + 'px' }, row_between_center);
+        };
+        _this.state = {
+            percent: (props.discrete != null && _this.props.maxDiscrete != null && _this.props.discrete != null) ? _this.props.discrete * (10000 / _this.props.maxDiscrete) : Math.floor(_this.props.percent),
+            //discrete: Math.round(this.props.discrete==null?0:this.props.discrete)
+        };
+        _this.computeWrapperStyle();
+        _this.computeOuterStyle();
+        return _this;
+    }
+    Slider.prototype.componentDidMount = function () {
+        rect = this.refWrapper.current.getBoundingClientRect();
+    };
+    Slider.prototype.componentWillReceiveProps = function (nextProps) {
+        if (nextProps.percent == this.props.percent && nextProps.discrete == this.props.discrete)
+            return;
+        if (this.props.isDiscrete == true && this.props.maxDiscrete != null) {
+            this.discrete = nextProps.discrete;
+            this.setState({
+                //discrete:nextProps.discrete,
+                percent: this.discrete * (10000 / this.props.maxDiscrete)
+            });
+        }
+        else {
+            this.setState({
+                percent: nextProps.percent,
+            });
+        }
+    };
+    Slider.prototype.render = function () {
+        this.computeInnerStyle();
+        this.computeDotWrapperStyle();
+        this.computeDotStyle();
+        this.computeIncButtonStyle();
+        this.computeDecButtonStyle();
+        this.computeWithButtonStyle();
+        return (h("div", { style: this.props.hasIncDecButton ? withButtonStyle : {} },
+            this.props.hasIncDecButton && h("img", { src: this.props.decButtonBg, style: decButtonStyle, onClick: this.onDecClick }),
+            h("div", { ref: this.refWrapper, style: wrapperStyle },
+                h("div", { style: outerStyle },
+                    h("div", { style: innerStyle },
+                        h("div", { style: dotWrapperStyle, draggable: true, onDragStart: this.onDragStart, onDrag: this.onDrag, onDragEnd: this.onDragEnd },
+                            h("img", { src: this.props.dotBg, style: dotStyle }))))),
+            this.props.hasIncDecButton && h("img", { src: this.props.incButtonBg, style: incButtonStyle, onClick: this.onIncClick })));
+    };
+    return Slider;
+}(Component));
+export { Slider };

package/ui/components/tab/Tab.d.ts

@@ -0,0 +1,6 @@
+import { Component, JSX } from "preact";
+export declare class Tab extends Component<{
+    realTab: JSX.Element;
+}, any> {
+    render(): JSX.Element;
+}

package/ui/components/tab/Tab.js

@@ -0,0 +1,27 @@
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+import { Component } from "preact";
+var Tab = /** @class */ (function (_super) {
+    __extends(Tab, _super);
+    function Tab() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    Tab.prototype.render = function () {
+        return (this.props.realTab);
+    };
+    return Tab;
+}(Component));
+export { Tab };

package/ui/components/tab/Tabs.d.ts

@@ -0,0 +1,12 @@
+import { Component, CSSProperties, h } from "preact";
+export declare class Tabs extends Component<{
+    tabBarStyle: CSSProperties;
+    onChoose: Function;
+    defaultIndex: number | null;
+}, {
+    selectedIndex: number;
+}> {
+    constructor(props: any);
+    SetCurrentIndex: (index: number) => void;
+    render(): h.JSX.Element;
+}

package/ui/components/tab/Tabs.js

@@ -0,0 +1,54 @@
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+import { Component, h } from "preact";
+import { Tab } from "./Tab";
+var Tabs = /** @class */ (function (_super) {
+    __extends(Tabs, _super);
+    function Tabs(props) {
+        var _this = _super.call(this, props) || this;
+        _this.SetCurrentIndex = function (index) {
+            if (index < 0 || index >= _this.props.children.length)
+                return;
+            _this.setState({
+                selectedIndex: index
+            });
+        };
+        var initIndex = _this.props.defaultIndex == null ? 0 : _this.props.defaultIndex;
+        _this.state = {
+            selectedIndex: initIndex
+        };
+        return _this;
+    }
+    Tabs.prototype.render = function () {
+        var _this = this;
+        return (h("div", { style: this.props.tabBarStyle }, this.props.children.map(function (v, index) {
+            if (v.type != Tab)
+                return v; // 留的口子，方便往Tabs里插入一些东西
+            return (h("div", { onClick: function () {
+                    if (_this.state.selectedIndex == index) {
+                        return;
+                    }
+                    _this.setState({
+                        selectedIndex: index
+                    }, function () {
+                        _this.props.onChoose(_this.state.selectedIndex);
+                    });
+                } }, v));
+        })));
+    };
+    return Tabs;
+}(Component));
+export { Tabs };

package/ui/components/togglegroup/ToggleGroup.d.ts

@@ -0,0 +1,13 @@
+import { h, Component } from "preact";
+export declare class ToggleGroup extends Component<any, any> {
+    private isMultiOption;
+    private toggleArray;
+    private togglePic;
+    private currentIndex;
+    private items;
+    private refreshAll;
+    private GenerateToggleItem;
+    private checkSelected;
+    constructor(props: any);
+    render(props: any): h.JSX.Element;
+}

package/ui/components/togglegroup/ToggleGroup.js

@@ -0,0 +1,99 @@
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+import { h, Component } from "preact";
+var ToggleGroup = /** @class */ (function (_super) {
+    __extends(ToggleGroup, _super);
+    function ToggleGroup(props) {
+        var _this = _super.call(this, props) || this;
+        _this.GenerateToggleItem = function (toggleItem, togglePic, index, refreshAll) {
+            return h(Toggle, { toggleText: toggleItem.toggleText, selectedFun: toggleItem.selectedFun, notSelectedFun: toggleItem.notSelectedFun, isSelected: toggleItem.isSelected, selected_pic: togglePic.selected_pic, not_selected_pic: togglePic.not_selected_pic, index: index, checkSelected: _this.checkSelected, refreshAll: _this.refreshAll });
+        };
+        _this.checkSelected = function (index) {
+            if (_this.isMultiOption)
+                return;
+            else {
+                if (index == _this.currentIndex) {
+                    _this.toggleArray[index].isSelected = false;
+                    _this.currentIndex = -1;
+                }
+                else {
+                    if (_this.currentIndex == -1) {
+                        _this.currentIndex = index;
+                        _this.toggleArray[index].isSelected = true;
+                        return;
+                    }
+                    _this.refreshAll = !_this.refreshAll;
+                    _this.toggleArray[_this.currentIndex].isSelected = false;
+                    _this.toggleArray[_this.currentIndex].notSelectedFun();
+                    _this.toggleArray[index].isSelected = true;
+                    _this.currentIndex = index;
+                    _this.items = [];
+                    _this.forceUpdate();
+                }
+            }
+        };
+        _this.toggleArray = props.toggleArray;
+        for (var i = 0; i < _this.toggleArray.length; i++) {
+            _this.toggleArray[i].isSelected = false;
+        }
+        _this.togglePic = props.togglePic;
+        _this.isMultiOption = props.isMultiOption != undefined ? props.isMultiOption : true;
+        _this.currentIndex = -1;
+        _this.refreshAll = true;
+        _this.items = [];
+        return _this;
+    }
+    ToggleGroup.prototype.render = function (props) {
+        for (var i = 0; i < this.toggleArray.length; i++) {
+            this.items.push(this.GenerateToggleItem(this.toggleArray[i], this.togglePic, i, this.refreshAll));
+        }
+        return (h("div", { style: { flexDirection: "row" } }, this.items));
+    };
+    return ToggleGroup;
+}(Component));
+export { ToggleGroup };
+var Toggle = /** @class */ (function (_super) {
+    __extends(Toggle, _super);
+    function Toggle(props) {
+        var _this = _super.call(this, props) || this;
+        _this.selected_pic = props.selected_pic;
+        _this.not_selected_pic = props.not_selected_pic;
+        _this.toggleText = props.toggleText;
+        _this.selectedFun = props.selectedFun;
+        _this.notSelectedFun = props.notSelectedFun;
+        _this.index = props.index;
+        _this.checkSelected = props.checkSelected;
+        _this.refreshAll = props.refreshAll;
+        _this.state = {
+            isSelected: props.isSelected
+        };
+        return _this;
+    }
+    Toggle.prototype.render = function (props) {
+        var _this = this;
+        if (props.refreshAll != this.refreshAll && props.isSelected != this.state.isSelected) {
+            this.setState({ isSelected: !this.state.isSelected });
+            return;
+        }
+        this.refreshAll = props.refreshAll;
+        return (h("div", { style: { alignItems: "flex-end", flexDirection: "row" } },
+            h("div", { style: { width: "36px", height: "36px", backgroundSize: "contain", backgroundImage: "url(".concat(this.state.isSelected ? this.selected_pic : this.not_selected_pic, ")") }, onClick: function () { _this.state.isSelected ? _this.notSelectedFun() : _this.selectedFun(); _this.setState({ isSelected: !_this.state.isSelected }); _this.checkSelected(_this.index); } }),
+            h("div", null,
+                h("text", null, "".concat(this.toggleText))),
+            h("div", { style: { width: "50px" } })));
+    };
+    return Toggle;
+}(Component));

package/ui/sample/Images.d.ts

@@ -0,0 +1,28 @@
+export declare const Images: {
+    btn_close: any;
+    changtai_button: any;
+    checkbox0: any;
+    checkbox1: any;
+    data_arrow_down: any;
+    data_arrow_up: any;
+    dot: any;
+    inner: any;
+    item_reddot: any;
+    loading: any;
+    money_dropdown: any;
+    money_dropdownall: any;
+    outer: any;
+    tab_choosed: any;
+    tabs_bg: any;
+    video_pause: any;
+    video_play: any;
+    video_reload: any;
+    xuanfu_button: any;
+    yaxia_button: any;
+    slapface_samplepic1: any;
+    slapface_samplepic2: any;
+    slapface_samplepic3: any;
+    slapface_samplepic4: any;
+    slapface_samplepic5: any;
+    slapface_samplepic6: any;
+};

package/ui/sample/Images.js

@@ -0,0 +1,54 @@
+import btn_close from './asset/btn_close.png';
+import changtai_button from './asset/changtai_button.jpg';
+import checkbox0 from './asset/checkbox0.png';
+import checkbox1 from './asset/checkbox1.png';
+import data_arrow_down from './asset/data_arrow_down.png';
+import data_arrow_up from './asset/data_arrow_up.png';
+import dot from './asset/dot.png';
+import inner from './asset/inner.png';
+import item_reddot from './asset/item_reddot.png';
+import loading from './asset/loading.png';
+import money_dropdown from './asset/money_dropdown.png';
+import money_dropdownall from './asset/money_dropdownall.png';
+import outer from './asset/outer.png';
+import tab_choosed from './asset/tab_choosed.png';
+import tabs_bg from './asset/tabs_bg.png';
+import video_pause from './asset/video_pause.png';
+import video_play from './asset/video_play.png';
+import video_reload from './asset/video_reload.png';
+import xuanfu_button from './asset/xuanfu_button.jpg';
+import yaxia_button from './asset/yaxia_button.jpg';
+import slapface_samplepic1 from './asset/slapface_samplepic1.png';
+import slapface_samplepic2 from './asset/slapface_samplepic2.png';
+import slapface_samplepic3 from './asset/slapface_samplepic3.png';
+import slapface_samplepic4 from './asset/slapface_samplepic4.png';
+import slapface_samplepic5 from './asset/slapface_samplepic5.png';
+import slapface_samplepic6 from './asset/slapface_samplepic6.png';
+export var Images = {
+    btn_close: btn_close,
+    changtai_button: changtai_button,
+    checkbox0: checkbox0,
+    checkbox1: checkbox1,
+    data_arrow_down: data_arrow_down,
+    data_arrow_up: data_arrow_up,
+    dot: dot,
+    inner: inner,
+    item_reddot: item_reddot,
+    loading: loading,
+    money_dropdown: money_dropdown,
+    money_dropdownall: money_dropdownall,
+    outer: outer,
+    tab_choosed: tab_choosed,
+    tabs_bg: tabs_bg,
+    video_pause: video_pause,
+    video_play: video_play,
+    video_reload: video_reload,
+    xuanfu_button: xuanfu_button,
+    yaxia_button: yaxia_button,
+    slapface_samplepic1: slapface_samplepic1,
+    slapface_samplepic2: slapface_samplepic2,
+    slapface_samplepic3: slapface_samplepic3,
+    slapface_samplepic4: slapface_samplepic4,
+    slapface_samplepic5: slapface_samplepic5,
+    slapface_samplepic6: slapface_samplepic6
+};