pixuireactcomponents 1.1.21 → 1.1.22

package/ui/components/slapface/Slapface.js

@@ -1,227 +1,224 @@
-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 { h, Component } from "preact";
-// @ts-ignore
-import SlapfaceLess from "./less/Slapface.less";
-// @ts-ignore
-import btn_close from "src/pixUIReactComponents/ui/sample/asset/btn_close.png";
-//默认配置项
-var settingsitems = {
-    ani_switch_type: 1,
-    is_mask: false
-};
-//默认无跳转按钮
-var jumpButton = {
-    pic_changtai: '',
-    pic_yaxia: '',
-    pic_xuanfu: ''
-};
-var node = /** @class */ (function () {
-    function node(par_index) {
-        if (par_index == undefined)
-            this.index = -1;
-        else
-            this.index = par_index;
-        this.next = null;
-    }
-    return node;
-}());
-var nodeList = /** @class */ (function () {
-    function nodeList(groupArr) {
-        this.head = new node();
-        var cur = this.head;
-        this.size = 0;
-        if (groupArr) {
-            for (var i = 0; i < groupArr.length; i++) {
-                cur.next = new node(i);
-                cur = cur.next;
-            }
-            this.groupArr = groupArr;
-            this.size += groupArr.length;
-        }
-        this.tail = cur;
-    }
-    nodeList.prototype.Add = function (index, next) {
-        this.tail.next = new node(index);
-        this.tail = this.tail.next;
-        ++this.size;
-        return this.tail;
-    };
-    nodeList.prototype.DeleteNext = function (curParam) {
-        if (curParam.next == null)
-            return;
-        else {
-            curParam.next = curParam.next.next;
-        }
-        --this.size;
-    };
-    nodeList.prototype.CheckReady = function () {
-        var cur = this.head;
-        while (cur.next != null) {
-            if (this.groupArr[cur.next.index].isLoadDone) {
-                cur = cur.next;
-            }
-            else {
-                var retIndex = cur.next.index;
-                this.DeleteNext(cur);
-                return retIndex;
-            }
-        }
-        return -1;
-    };
-    return nodeList;
-}());
-var Slapface = /** @class */ (function (_super) {
-    __extends(Slapface, _super);
-    function Slapface(props) {
-        var _this = _super.call(this, props) || this;
-        _this.closeAct = function () {
-            _this.actDisplay = "none";
-            _this.forceUpdate();
-        };
-        _this.LoadGroup = _this.props.LoadGroup;
-        _this.jumpButton = _this.props.jumpButton ? _this.props.jumpButton : jumpButton;
-        _this.settingsitems = _this.props.settingsitems ? _this.props.settingsitems : settingsitems;
-        _this.btn_closeButton = _this.props.btn_closeButton ? _this.props.btn_closeButton : btn_close;
-        _this.pic_loading = _this.props.pic_loading;
-        _this.actDisplay = "flex";
-        return _this;
-    }
-    Slapface.prototype.render = function () {
-        var slapfaceinfo = {
-            LoadGroup: this.LoadGroup,
-            jumpButton: this.jumpButton,
-            settingsitems: this.settingsitems,
-            btn_closeButton: this.btn_closeButton,
-            pic_loading: this.pic_loading
-        };
-        return (h("div", { className: SlapfaceLess.maininterface, style: { display: this.actDisplay } },
-            h("div", { style: { flexDirection: 'row', flexWrap: 'nowrap' } }),
-            h("div", { style: { width: '100%', height: '100%', backgroundColor: "rgba(0,0,0,0.5)" } }, h(Group, __assign({}, slapfaceinfo, { closeAct: this.closeAct })))));
-    };
-    return Slapface;
-}(Component));
-export { Slapface };
-var Group = /** @class */ (function (_super) {
-    __extends(Group, _super);
-    function Group(props) {
-        var _this = _super.call(this, props) || this;
-        var emptyGroup = [
-            {
-                isLoadDone: false,
-                picture: "",
-                width: 0,
-                height: 0
-            }
-        ];
-        _this.groupArr = emptyGroup.concat(_this.props.LoadGroup);
-        _this.groupIndexList = new nodeList(_this.groupArr);
-        _this.loadDisplay = "hidden";
-        _this.elseDisplay = "visible";
-        _this.state = {
-            curIndex: _this.groupIndexList.CheckReady()
-        };
-        return _this;
-    }
-    Group.prototype.componentDidMount = function () {
-        var _this = this;
-        if (this.picBack.style.visibility == 'hidden') {
-            setTimeout(function () {
-                _this.picBack.style.visibility = 'visible';
-                _this.closeClick();
-            }, 600);
-        }
-    };
-    Group.prototype.componentDidUpdate = function () {
-        var _this = this;
-        var curIndex = this.state.curIndex;
-        setTimeout(function () {
-            if (!_this.groupArr[curIndex].isLoadDone) {
-                _this.groupArr[curIndex].isLoadDone = true;
-                _this.closeClick();
-            }
-        }, 1000);
-    };
-    Group.prototype.closeClick = function (e) {
-        var _this = this;
-        e === null || e === void 0 ? void 0 : e.stopPropagation();
-        var nextIndex = this.groupIndexList.CheckReady();
-        setTimeout(function () { _this.loadDisplay = "visible"; }, 1000);
-        this.elseDisplay = "hidden";
-        if (nextIndex != -1) {
-            if (this.props.settingsitems.ani_switch_type == 2) {
-                this.picBack.className = SlapfaceLess.groupBack;
-            }
-            this.setState({ curIndex: nextIndex });
-        }
-        else {
-            this.props.closeAct();
-        }
-    };
-    Group.prototype.render = function () {
-        var _this = this;
-        if (this.state.curIndex == -1) {
-            this.setState({ curIndex: this.groupIndexList.CheckReady() });
-        }
-        return (h("div", { ref: function (div) { _this.picBack = div; }, style: { width: '100%', height: '100%', alignItems: 'center', justifyContent: 'center', position: 'absolute', visibility: 'hidden' }, onAnimationEnd: function () { _this.picBack.className = SlapfaceLess.groupBackReverse; } },
-            h("div", { onClick: function () { if (_this.props.settingsitems.is_mask == false)
-                    return; _this.closeClick(); }, style: { position: "absolute", width: "100%", height: "100%" } }),
-            h("div", null,
-                h("img", { src: this.groupArr[this.state.curIndex].picture, style: { visibility: this.elseDisplay, width: this.groupArr[this.state.curIndex].width, height: this.groupArr[this.state.curIndex].height }, onLoad: function () { var curIndex = _this.state.curIndex; if (!_this.groupArr[curIndex].isLoadDone) {
-                        _this.groupArr[curIndex].isLoadDone = true;
-                        _this.loadDisplay = "hidden";
-                        _this.elseDisplay = "visible";
-                        _this.forceUpdate();
-                    } } }),
-                h("div", { ref: function (div) { _this.loadPic = div; }, className: SlapfaceLess.loading_anim, style: { backgroundImage: "url(".concat(this.props.pic_loading, ")"), width: this.groupArr[this.state.curIndex].width, height: this.groupArr[this.state.curIndex].height, position: "absolute", visibility: this.loadDisplay } }, " "),
-                h(CloseButton, { btn_closeButton: this.props.btn_closeButton, elseDisplay: this.elseDisplay, onClick: function (e) { _this.closeClick(e); } }),
-                h(JumpButton, { elseDisplay: this.elseDisplay, jumpButton: this.props.jumpButton }))));
-    };
-    return Group;
-}(Component));
-var CloseButton = /** @class */ (function (_super) {
-    __extends(CloseButton, _super);
-    function CloseButton() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    CloseButton.prototype.render = function () {
-        return (h("button", { className: SlapfaceLess.closeButton, style: { visibility: this.props.elseDisplay, backgroundImage: "url(".concat(this.props.btn_closeButton, ")") }, onClick: this.props.onClick }));
-    };
-    return CloseButton;
-}(Component));
-var JumpButton = /** @class */ (function (_super) {
-    __extends(JumpButton, _super);
-    function JumpButton() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    JumpButton.prototype.render = function () {
-        var _this = this;
-        return (h("div", { className: SlapfaceLess.jumpButton, style: { visibility: this.props.elseDisplay }, onMouseDown: function () { _this.jumpbtnImg.src = _this.props.jumpButton.pic_yaxia; }, onMouseUp: function () { _this.jumpbtnImg.src = _this.props.jumpButton.pic_xuanfu; }, onMouseOver: function () { _this.jumpbtnImg.src = _this.props.jumpButton.pic_xuanfu; }, onMouseOut: function () { _this.jumpbtnImg.src = _this.props.jumpButton.pic_changtai; } },
-            h("img", { ref: function (img) { _this.jumpbtnImg = img; }, src: this.props.jumpButton.pic_changtai })));
-    };
-    return JumpButton;
-}(Component));
+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 { h, Component } from "preact";
+import SlapfaceLess from "./less/Slapface.less";
+//默认配置项
+var settingsitems = {
+    ani_switch_type: 1,
+    is_mask: false
+};
+//默认无跳转按钮
+var jumpButton = {
+    pic_changtai: '',
+    pic_yaxia: '',
+    pic_xuanfu: ''
+};
+var node = /** @class */ (function () {
+    function node(par_index) {
+        if (par_index == undefined)
+            this.index = -1;
+        else
+            this.index = par_index;
+        this.next = null;
+    }
+    return node;
+}());
+var nodeList = /** @class */ (function () {
+    function nodeList(groupArr) {
+        this.head = new node();
+        var cur = this.head;
+        this.size = 0;
+        if (groupArr) {
+            for (var i = 0; i < groupArr.length; i++) {
+                cur.next = new node(i);
+                cur = cur.next;
+            }
+            this.groupArr = groupArr;
+            this.size += groupArr.length;
+        }
+        this.tail = cur;
+    }
+    nodeList.prototype.Add = function (index, next) {
+        this.tail.next = new node(index);
+        this.tail = this.tail.next;
+        ++this.size;
+        return this.tail;
+    };
+    nodeList.prototype.DeleteNext = function (curParam) {
+        if (curParam.next == null)
+            return;
+        else {
+            curParam.next = curParam.next.next;
+        }
+        --this.size;
+    };
+    nodeList.prototype.CheckReady = function () {
+        var cur = this.head;
+        while (cur.next != null) {
+            if (this.groupArr[cur.next.index].isLoadDone) {
+                cur = cur.next;
+            }
+            else {
+                var retIndex = cur.next.index;
+                this.DeleteNext(cur);
+                return retIndex;
+            }
+        }
+        return -1;
+    };
+    return nodeList;
+}());
+var Slapface = /** @class */ (function (_super) {
+    __extends(Slapface, _super);
+    function Slapface(props) {
+        var _this = _super.call(this, props) || this;
+        _this.closeAct = function () {
+            _this.actDisplay = "none";
+            _this.forceUpdate();
+        };
+        _this.LoadGroup = _this.props.LoadGroup;
+        _this.jumpButton = _this.props.jumpButton ? _this.props.jumpButton : jumpButton;
+        _this.settingsitems = _this.props.settingsitems ? _this.props.settingsitems : settingsitems;
+        _this.btn_closeButton = _this.props.btn_closeButton ? _this.props.btn_closeButton : '';
+        _this.pic_loading = _this.props.pic_loading;
+        _this.actDisplay = "flex";
+        return _this;
+    }
+    Slapface.prototype.render = function () {
+        var slapfaceinfo = {
+            LoadGroup: this.LoadGroup,
+            jumpButton: this.jumpButton,
+            settingsitems: this.settingsitems,
+            btn_closeButton: this.btn_closeButton,
+            pic_loading: this.pic_loading
+        };
+        return (h("div", { className: SlapfaceLess.maininterface, style: { display: this.actDisplay } },
+            h("div", { style: { flexDirection: 'row', flexWrap: 'nowrap' } }),
+            h("div", { style: { width: '100%', height: '100%', backgroundColor: "rgba(0,0,0,0.5)" } }, h(Group, __assign({}, slapfaceinfo, { closeAct: this.closeAct })))));
+    };
+    return Slapface;
+}(Component));
+export { Slapface };
+var Group = /** @class */ (function (_super) {
+    __extends(Group, _super);
+    function Group(props) {
+        var _this = _super.call(this, props) || this;
+        var emptyGroup = [
+            {
+                isLoadDone: false,
+                picture: "",
+                width: 0,
+                height: 0
+            }
+        ];
+        _this.groupArr = emptyGroup.concat(_this.props.LoadGroup);
+        _this.groupIndexList = new nodeList(_this.groupArr);
+        _this.loadDisplay = "hidden";
+        _this.elseDisplay = "visible";
+        _this.state = {
+            curIndex: _this.groupIndexList.CheckReady()
+        };
+        return _this;
+    }
+    Group.prototype.componentDidMount = function () {
+        var _this = this;
+        if (this.picBack.style.visibility == 'hidden') {
+            setTimeout(function () {
+                _this.picBack.style.visibility = 'visible';
+                _this.closeClick();
+            }, 600);
+        }
+    };
+    Group.prototype.componentDidUpdate = function () {
+        var _this = this;
+        var curIndex = this.state.curIndex;
+        setTimeout(function () {
+            if (!_this.groupArr[curIndex].isLoadDone) {
+                _this.groupArr[curIndex].isLoadDone = true;
+                _this.closeClick();
+            }
+        }, 1000);
+    };
+    Group.prototype.closeClick = function (e) {
+        var _this = this;
+        e === null || e === void 0 ? void 0 : e.stopPropagation();
+        var nextIndex = this.groupIndexList.CheckReady();
+        setTimeout(function () { _this.loadDisplay = "visible"; }, 1000);
+        this.elseDisplay = "hidden";
+        if (nextIndex != -1) {
+            if (this.props.settingsitems.ani_switch_type == 2) {
+                this.picBack.className = SlapfaceLess.groupBack;
+            }
+            this.setState({ curIndex: nextIndex });
+        }
+        else {
+            this.props.closeAct();
+        }
+    };
+    Group.prototype.render = function () {
+        var _this = this;
+        if (this.state.curIndex == -1) {
+            this.setState({ curIndex: this.groupIndexList.CheckReady() });
+        }
+        return (h("div", { ref: function (div) { _this.picBack = div; }, style: { width: '100%', height: '100%', alignItems: 'center', justifyContent: 'center', position: 'absolute', visibility: 'hidden' }, onAnimationEnd: function () { _this.picBack.className = SlapfaceLess.groupBackReverse; } },
+            h("div", { onClick: function () { if (_this.props.settingsitems.is_mask == false)
+                    return; _this.closeClick(); }, style: { position: "absolute", width: "100%", height: "100%" } }),
+            h("div", null,
+                h("img", { src: this.groupArr[this.state.curIndex].picture, style: { visibility: this.elseDisplay, width: this.groupArr[this.state.curIndex].width, height: this.groupArr[this.state.curIndex].height }, onLoad: function () { var curIndex = _this.state.curIndex; if (!_this.groupArr[curIndex].isLoadDone) {
+                        _this.groupArr[curIndex].isLoadDone = true;
+                        _this.loadDisplay = "hidden";
+                        _this.elseDisplay = "visible";
+                        _this.forceUpdate();
+                    } } }),
+                h("div", { ref: function (div) { _this.loadPic = div; }, className: SlapfaceLess.loading_anim, style: { backgroundImage: "url(".concat(this.props.pic_loading, ")"), width: this.groupArr[this.state.curIndex].width, height: this.groupArr[this.state.curIndex].height, position: "absolute", visibility: this.loadDisplay } }, " "),
+                h(CloseButton, { btn_closeButton: this.props.btn_closeButton, elseDisplay: this.elseDisplay, onClick: function (e) { _this.closeClick(e); } }),
+                h(JumpButton, { elseDisplay: this.elseDisplay, jumpButton: this.props.jumpButton }))));
+    };
+    return Group;
+}(Component));
+var CloseButton = /** @class */ (function (_super) {
+    __extends(CloseButton, _super);
+    function CloseButton() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    CloseButton.prototype.render = function () {
+        return (h("button", { className: SlapfaceLess.closeButton, style: { visibility: this.props.elseDisplay, backgroundImage: "url(".concat(this.props.btn_closeButton, ")") }, onClick: this.props.onClick }));
+    };
+    return CloseButton;
+}(Component));
+var JumpButton = /** @class */ (function (_super) {
+    __extends(JumpButton, _super);
+    function JumpButton() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    JumpButton.prototype.render = function () {
+        var _this = this;
+        return (h("div", { className: SlapfaceLess.jumpButton, style: { visibility: this.props.elseDisplay }, onMouseDown: function () { _this.jumpbtnImg.src = _this.props.jumpButton.pic_yaxia; }, onMouseUp: function () { _this.jumpbtnImg.src = _this.props.jumpButton.pic_xuanfu; }, onMouseOver: function () { _this.jumpbtnImg.src = _this.props.jumpButton.pic_xuanfu; }, onMouseOut: function () { _this.jumpbtnImg.src = _this.props.jumpButton.pic_changtai; } },
+            h("img", { ref: function (img) { _this.jumpbtnImg = img; }, src: this.props.jumpButton.pic_changtai })));
+    };
+    return JumpButton;
+}(Component));

package/ui/components/slapface/less/Slapface.less

@@ -0,0 +1,125 @@
+.maininterface{
+    width:1200px;
+    height:682px;
+    /* width:100%;
+    height:100%; */
+    margin: auto;
+    /* padding:  0px 36px 36px 36px; */
+    /* background-color: grey; */
+    flex-direction: column;
+    position: relative;
+}
+
+.closeButton{
+    width:36px;
+    height:36px;
+    background-size: contain;
+    /* float: left; */
+    position: absolute;
+    right:0px;
+    top:0px;
+}
+
+@keyframes zoom{
+    from{
+        transform: scale(0)
+    }
+    80%{
+        transform: scale(1.1);
+    }
+    to{
+        transform: scale(1);
+    }
+}
+
+@keyframes zoomReverse{
+    from{
+        transform: scale(0)
+    }
+    to{
+        transform: scale(0);
+    }
+}
+
+.groupBack{
+    animation-name:zoom;
+    animation-timing-function:ease-in-out;
+    animation-iteration-count:1;
+    animation-duration: 1s;
+}
+
+.groupBackReverse{
+    animation-name:zoomReverse;
+    animation-timing-function:'';
+    animation-iteration-count:'';
+    animation-duration:'';
+}
+
+.isShowToday{
+    width:36px;
+    height:31px;
+    background-size: contain;
+    position: absolute;
+    right:0px;
+    bottom:0px;
+}
+
+.jumpButton{
+    position: absolute;
+    right:50%;
+    bottom:10%;
+    /* top:80%; */
+    transform: translate(50%, -50%);
+}
+.slapImage{
+    box-sizing:  content-box;
+    /* border-width: 5px;
+    border-color: black;
+    border-style: solid; */
+    position: absolute;
+    left:50%;
+    top:50%;
+    transform:translate(-50%,-50%);
+}
+.frame {
+    border: 12px solid rgb(60, 65, 71); 
+    display: flex;
+    /* flex-direction: row; */
+    /* flex-basis: content; */
+    /* justify-content: space-around; */
+    width: 1128px;
+    height: 604px;
+    position: relative;
+    top:-12px;
+    background-color: rgb(60, 65, 71);
+}
+
+.mask{
+    // background:url(images/coupon-logo.gif) no-repeat;
+    height:100px;background-color:#fff;
+    opacity:0.6;
+}
+
+@keyframes rotate_by_myself{
+    from {
+        transform: rotate(0deg);
+    }
+
+    50% {
+        transform: rotate(180deg);
+    }
+
+    to {
+        transform: rotate(360deg);
+    }
+}
+
+.loading_anim{
+    animation-name: rotate_by_myself;
+    animation-duration: 1.5s;
+    animation-timing-function: linear;
+    animation-iteration-count: infinite;
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: 50%;
+}