xgqfrms commented 6 years ago

css3 & 3d flip cards

https://css3playground.com/3d-flip-cards/

https://davidwalsh.name/css-flip

https://www.cnblogs.com/xgqfrms/p/9127423.html

xgqfrms commented 6 years ago

layoutit

可视化布局生成器

https://www.layoutit.com/build

xgqfrms commented 6 years ago

bug

JSON !== JSOn


console.log(`pages configs =\n`, JSON.stringify(configs, null, 4));

// console.log(`pages configs =\n`, JSOn.stringify(configs, null, 4));

xgqfrms commented 6 years ago


function checker() {
  var img = document.querySelector('img[src^="http://www.ruanyifeng.com/blog/images"]');
  if (img && window.getComputedStyle(img).display === 'none'){
    var sponsor = document.querySelector('.entry-sponsor');
    var prompt = document.createElement('div');
    prompt.style = 'border: 1px solid #c6c6c6;border-radius: 4px;background-color: #f5f2f0;padding: 15px; font-size: 16px;';
    prompt.innerHTML = '<p>您使用了广告拦截器，导致本站内容无法显示。</p><p>请将 www.ruanyifeng.com 加入白名单，解除广告屏蔽后，刷新页面，谢谢。</p>';
    sponsor.parentNode.replaceChild(prompt, sponsor);
    document.querySelector('#main-content').innerHTML = '';
  }
}

setTimeout(checker, 1000);

http://www.ruanyifeng.com/blog/2016/04/same-origin-policy.html

xgqfrms commented 6 years ago

CORS & Fetch API

CORS请求默认不发送Cookie和HTTP认证信息。

如果要把Cookie发到服务器，一方面要服务器同意，指定 Access-Control-Allow-Credentials 字段。
另一方面，开发者必须在AJAX请求中打开withCredentials属性。否则，即使服务器同意发送Cookie，浏览器也不会发送。或者，服务器要求设置Cookie，浏览器也不会处理。

PS: 需要注意的是，如果要发送Cookie，Access-Control-Allow-Origin就不能设为星号，必须指定明确的、与请求网页一致的域名。同时，Cookie依然遵循同源政策，只有用服务器域名设置的Cookie才会上传，其他域名的Cookie并不会上传，且（跨源）原网页代码中的document.cookie也无法读取服务器域名下的Cookie。

Access-Control-Allow-Credentials: true 另一方面，开发者必须在AJAX请求中打开withCredentials属性。

http://www.ruanyifeng.com/blog/2016/04/cors.html

xgqfrms commented 6 years ago

解决谷歌浏览器 chrome解决跨域（CORS）问题---chrome插件 chrome中跨域问题解决方案

插件解决，插件地址 https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi (请用正确的方式打开)

下载后添加到浏览器当中即可。

注：打开chrome浏览器时，如果没有启动该插件，记得要启动！

禁止chrome中CORS跨域资源共享错误在开发中，可以通过命令行命令chrome --allow-file-access-from-files来禁止CORS错误。

xgqfrms commented 6 years ago

Chrome 浏览器的跨域设置

https://www.cnblogs.com/cshi/p/5660039.html

https://github.com/xyz-data/RAIO/issues/360

https://www.cnblogs.com/xgqfrms/p/9467482.html

xgqfrms commented 6 years ago

https://edgecoders.com/the-mistakes-i-made-as-a-beginner-programmer-ac8b3e54c312

xgqfrms commented 6 years ago


/**
 * @description OOPMT: OOP_Modules_Tempalte v1.1.1 (2017-11-01)
 * @author xgqfrms
 * 
 * @copyright 2017-present
 * @license MIT
 */
'use strict';
(function(root, factory) {
    if (typeof module === 'object' && module.exports) {
        module.exports = root.document ?
            factory(root) :
            factory;
    } else {
        root.OOPMT = factory(root);
    }
}(typeof window !== 'undefined' ? window : this, function(win) {
    console.log(`win = this \n`, win);
    // IIFE
    var OOPMT = (function() {
        /**
         * (c) 2010-2017 xgqfrms
         *
         * License: www.OOPMT.com/license
         */
        /* global win */
        var doc = win.document,
            SVG_NS = 'http://www.w3.org/2000/svg',
            userAgent = (win.navigator && win.navigator.userAgent) || '',
            svg = doc && doc.createElementNS && !!doc.createElementNS(SVG_NS, 'svg').createSVGRect,
            isMS = /(edge|msie|trident)/i.test(userAgent) && !win.opera,
            isFirefox = /Firefox/.test(userAgent),
            hasBidiBug = isFirefox && parseInt(userAgent.split('Firefox/')[1], 10) < 4; // issue #38

        var OOPMT = win.OOPMT ? win.OOPMT.error(16, true) : {
            product: 'OOPMT',
            version: '6.0.2',
            deg2rad: Math.PI * 2 / 360,
            doc: doc,
            hasBidiBug: hasBidiBug,
            hasTouch: doc && doc.documentElement.ontouchstart !== undefined,
            isMS: isMS,
            isWebKit: /AppleWebKit/.test(userAgent),
            isFirefox: isFirefox,
            isTouchDevice: /(Mobile|Android|Windows Phone)/.test(userAgent),
            SVG_NS: SVG_NS,
            chartCount: 0,
            seriesTypes: {},
            symbolSizes: {},
            svg: svg,
            win: win,
            marginNames: ['plotTop', 'marginRight', 'marginBottom', 'plotLeft'],
            noop: function() {
                return undefined;
            },
            /**
             * An array containing the current chart objects in the page. A chart's
             * position in the array is preserved throughout the page's lifetime. When
             * a chart is destroyed, the array item becomes `undefined`.
             * @type {Array.<OOPMT.Chart>}
             * @memberOf OOPMT
             */
            charts: []
        };
        return OOPMT;
    }());
    // IIFE & OOPMT
    (function(H) {
        /**
         * (c) 2010-2017 xgqfrms
         *
         * License: www.OOPMT.com/license
         */
        var each = H.each,
            isNumber = H.isNumber,
            map = H.map,
            merge = H.merge,
            pInt = H.pInt;

        /**
         * @typedef {string} ColorString
         * A valid color to be parsed and handled by OOPMT. OOPMT internally 
         * supports hex colors like `#ffffff`, rgb colors like `rgb(255,255,255)` and
         * rgba colors like `rgba(255,255,255,1)`. Other colors may be supported by the
         * browsers and displayed correctly, but OOPMT is not able to process them
         * and apply concepts like opacity and brightening.
         */
        /**
         * Handle color operations. The object methods are chainable.
         * @param {String} input The input color in either rbga or hex format
         */
        H.Color = function(input) {
            // Backwards compatibility, allow instanciation without new
            if (!(this instanceof H.Color)) {
                return new H.Color(input);
            }
            // Initialize
            this.init(input);
        };
        H.Color.prototype = {

            // Collection of parsers. This can be extended from the outside by pushing parsers
            // to OOPMT.Color.prototype.parsers.
            parsers: [{
                // RGBA color
                regex: /rgba\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]?(?:\.[0-9]+)?)\s*\)/,
                parse: function(result) {
                    return [pInt(result[1]), pInt(result[2]), pInt(result[3]), parseFloat(result[4], 10)];
                }
            }, {
                // RGB color
                regex: /rgb\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*\)/,
                parse: function(result) {
                    return [pInt(result[1]), pInt(result[2]), pInt(result[3]), 1];
                }
            }],

            // Collection of named colors. Can be extended from the outside by adding
            // colors to OOPMT.Color.prototype.names.
            names: {
                none: 'rgba(255,255,255,0)',
                white: '#ffffff',
                black: '#000000'
            },

            /**
             * Parse the input color to rgba array
             * @param {String} input
             */
            init: function(input) {
                var result,
                    rgba,
                    i,
                    parser,
                    len;

                this.input = input = this.names[
                    input && input.toLowerCase ?
                    input.toLowerCase() :
                    ''
                ] || input;

                // Gradients
                if (input && input.stops) {
                    this.stops = map(input.stops, function(stop) {
                        return new H.Color(stop[1]);
                    });

                    // Solid colors
                } else {

                    // Bitmasking as input[0] is not working for legacy IE.
                    if (input && input.charAt && input.charAt() === '#') {

                        len = input.length;
                        input = parseInt(input.substr(1), 16);

                        // Handle long-form, e.g. #AABBCC
                        if (len === 7) {

                            rgba = [
                                (input & 0xFF0000) >> 16,
                                (input & 0xFF00) >> 8,
                                (input & 0xFF),
                                1
                            ];

                            // Handle short-form, e.g. #ABC
                            // In short form, the value is assumed to be the same 
                            // for both nibbles for each component. e.g. #ABC = #AABBCC
                        } else if (len === 4) {

                            rgba = [
                                ((input & 0xF00) >> 4) | (input & 0xF00) >> 8,
                                ((input & 0xF0) >> 4) | (input & 0xF0),
                                ((input & 0xF) << 4) | (input & 0xF),
                                1
                            ];
                        }
                    }

                    // Otherwise, check regex parsers
                    if (!rgba) {
                        i = this.parsers.length;
                        while (i-- && !rgba) {
                            parser = this.parsers[i];
                            result = parser.regex.exec(input);
                            if (result) {
                                rgba = parser.parse(result);
                            }
                        }
                    }
                }
                this.rgba = rgba || [];
            },

            /**
             * Return the color a specified format
             * @param {String} format
             */
            get: function(format) {
                var input = this.input,
                    rgba = this.rgba,
                    ret;

                if (this.stops) {
                    ret = merge(input);
                    ret.stops = [].concat(ret.stops);
                    each(this.stops, function(stop, i) {
                        ret.stops[i] = [ret.stops[i][0], stop.get(format)];
                    });

                    // it's NaN if gradient colors on a column chart
                } else if (rgba && isNumber(rgba[0])) {
                    if (format === 'rgb' || (!format && rgba[3] === 1)) {
                        ret = 'rgb(' + rgba[0] + ',' + rgba[1] + ',' + rgba[2] + ')';
                    } else if (format === 'a') {
                        ret = rgba[3];
                    } else {
                        ret = 'rgba(' + rgba.join(',') + ')';
                    }
                } else {
                    ret = input;
                }
                return ret;
            },

            /**
             * Brighten the color
             * @param {Number} alpha
             */
            brighten: function(alpha) {
                var i,
                    rgba = this.rgba;

                if (this.stops) {
                    each(this.stops, function(stop) {
                        stop.brighten(alpha);
                    });

                } else if (isNumber(alpha) && alpha !== 0) {
                    for (i = 0; i < 3; i++) {
                        rgba[i] += pInt(alpha * 255);

                        if (rgba[i] < 0) {
                            rgba[i] = 0;
                        }
                        if (rgba[i] > 255) {
                            rgba[i] = 255;
                        }
                    }
                }
                return this;
            },

            /**
             * Set the color's opacity to a given alpha value
             * @param {Number} alpha
             */
            setOpacity: function(alpha) {
                this.rgba[3] = alpha;
                return this;
            },

            /*
             * Return an intermediate color between two colors.
             *
             * @param  {OOPMT.Color} to
             *         The color object to tween to.
             * @param  {Number} pos
             *         The intermediate position, where 0 is the from color (current
             *         color item), and 1 is the `to` color.
             *
             * @return {String}
             *         The intermediate color in rgba notation.
             */
            tweenTo: function(to, pos) {
                // Check for has alpha, because rgba colors perform worse due to lack of
                // support in WebKit.
                var fromRgba = this.rgba,
                    toRgba = to.rgba,
                    hasAlpha,
                    ret;

                // Unsupported color, return to-color (#3920, #7034)
                if (!toRgba.length || !fromRgba || !fromRgba.length) {
                    ret = to.input || 'none';

                    // Interpolate
                } else {
                    hasAlpha = (toRgba[3] !== 1 || fromRgba[3] !== 1);
                    ret = (hasAlpha ? 'rgba(' : 'rgb(') +
                        Math.round(toRgba[0] + (fromRgba[0] - toRgba[0]) * (1 - pos)) +
                        ',' +
                        Math.round(toRgba[1] + (fromRgba[1] - toRgba[1]) * (1 - pos)) +
                        ',' +
                        Math.round(toRgba[2] + (fromRgba[2] - toRgba[2]) * (1 - pos)) +
                        (
                            hasAlpha ?
                            (
                                ',' +
                                (toRgba[3] + (fromRgba[3] - toRgba[3]) * (1 - pos))
                            ) :
                            ''
                        ) +
                        ')';
                }
                return ret;
            }
        };
        H.color = function(input) {
            return new H.Color(input);
        };

    }(OOPMT));
    // return Object
    return OOPMT;
}));

/* 

    'use strict';
    // window/this, function
    (function(root, factory) {
        // module & module.exports
        if (typeof module === 'object' && module.exports) {
            // window.document/this.document ? function( window/this) : function
            module.exports = root.document ? factory(root) : factory;
        } else {
            // window.OOPMT/this.OOPMT ? function(window/this)
            root.OOPMT = factory(root);
        }
    }(typeof window !== 'undefined' ? window : this, function(win) {
        console.log(`win = this \n`, win);
        // IIFE
        var OOPMT = (function() {
            // global win
            var doc = win.document,
                SVG_NS = 'http://www.w3.org/2000/svg',
                userAgent = (win.navigator && win.navigator.userAgent) || '',
                svg = doc && doc.createElementNS && !!doc.createElementNS(SVG_NS, 'svg').createSVGRect,
                isMS = /(edge|msie|trident)/i.test(userAgent) && !win.opera,
                isFirefox = /Firefox/.test(userAgent),
                hasBidiBug = isFirefox && parseInt(userAgent.split('Firefox/')[1], 10) < 4; 
                // issue #38
            var OOPMT = win.OOPMT ? win.OOPMT.error(16, true) : {
                product: 'OOPMT',
                version: '6.0.2',
                deg2rad: Math.PI * 2 / 360,
                doc: doc,
                hasBidiBug: hasBidiBug,
                hasTouch: doc && doc.documentElement.ontouchstart !== undefined,
                isMS: isMS,
                isWebKit: /AppleWebKit/.test(userAgent),
                isFirefox: isFirefox,
                isTouchDevice: /(Mobile|Android|Windows Phone)/.test(userAgent),
                SVG_NS: SVG_NS,
                chartCount: 0,
                seriesTypes: {},
                symbolSizes: {},
                svg: svg,
                win: win,
                marginNames: ['plotTop', 'marginRight', 'marginBottom', 'plotLeft'],
                noop: function() {
                    return undefined;
                },
                charts: []
            };
            return OOPMT;
        }());
        // return Object
        return OOPMT;
    }));

*/

/* 

# navigator.userAgent

Chrome
Safari ???
Firefox
Edge
Trident

// Chrome Canary
window.navigator.userAgent;
// "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/64.0.3246.2 Safari/537.36"

// Chrome
window.navigator.userAgent;
// "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/61.0.3163.100 Safari/537.36"

// Firefox
window.navigator.userAgent;
// "Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:56.0) Gecko/20100101 Firefox/56.0"

// Edge
window.navigator.userAgent;
// "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/52.0.2743.116 Safari/537.36 Edge/15.15063"

// IE 11
window.navigator.userAgent;
// "Mozilla/5.0 (Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; rv:11.0) like Gecko"

*/

xgqfrms commented 6 years ago

https://codepen.io/webgeeker/full/mjoWqw/

xgqfrms commented 6 years ago

css transition

bug & display: none

https://www.w3schools.com/css/css3_transitions.asp

<!DOCTYPE html>
<html>
<head>
<style> 

.p{
position: relative;
width: 100px;
height: 100px;
background: #666;
display: block;
}
.div {
    width: 10px;
    height: 100px;
    background: red;
    display: none;
    transition: width 2s;
}

.p:hover>.div {
    width: 300px;
    display: block;
}
</style>
</head>
<body>

<div class="p">
<div class="div"></div>
</div>

</body>
</html>


.h5-dnd-icon-box {
    position: relative;
    overflow: hidden;
    max-height: 100px;
}

.h5-dnd-icon-p-mask {
    display: block;
    margin-top: 100px;
    margin-left: -1px;
    box-sizing: border-box;
    text-align: center;
    margin-top: 0;
    font-size: 12px;
    height: 0;
    line-height: 100px;
    width: 100px;
    padding-left: 7px;
    padding-right: 7px;
    word-break: break-all;
    overflow-wrap: break-word;
    color: #000;
    background: #fff;
    opacity: 0;
}

.h5-dnd-icon-box:hover>p.h5-dnd-icon-p-mask {
    transform: translateY(-84px);
    height: 108px;
    opacity: 1;
    transition: all 1s 0.5s;
}

xgqfrms commented 3 years ago

前端可视化布局生成器 All in One

https://www.layoutit.com/

https://www.runoob.com/try/bootstrap/layoutit/

https://www.bootcss.com/p/layoutit/

http://layoutit.justjavac.com/ https://github.com/justjavac/layoutit

http://savokiss.me/layoutit/ https://github.com/savokiss/layoutit

xgqfrms / FEIQA