Question

Эй, товарищи по стакановому цвету!

Я создал панель мониторинга, но я хочу использовать всплывающий плагин JavaScript для запуска, нажимая «Control + D» или что-то в этом роде.Вот точный плагин JS, о котором я говорю:

HTML:

.container
.header
    h1 SmallPop Playground
    h3 A lightweight small pop up javascript plugin with no dependencies
    a.btn(href="https://silvio-r.github.io/spop/" target="_blank") Site / Docs 
    a.btn(href="https://github.com/silvio-r/spop" target="_blank") Code / Github

.section
    a.btn.btn-play#btn-info 
        span.text-info ●
        | Spop Info
    a.btn.btn-play#btn-success
        span.text-success ●
        | New Phone Detected
    a.btn.btn-play#btn-warning
        span.text-warning ●
        |  Spop Warning
    a.btn.btn-play#btn-error
        span.text-error ●
        |  Spop Error

CSS:

/*!
 * smallPop 0.1.2 | https://github.com/silvio-r/spop
 * Copyright (c) 2015 Sílvio Rosa @silvior_
 * MIT license
 */

$spop-bg-color:         #454A56 !default;
$spop-color:            #fff !default;

$spop-info-bg:          $spop-bg-color !default;
$spop-info-color:       #3a95ed !default;

$spop-error-bg:         $spop-bg-color !default;
$spop-error-color:      #ff5656 !default;

$spop-success-bg:       $spop-bg-color !default;
$spop-success-color:    #2ecc54 !default;

$spop-warning-bg:       $spop-bg-color !default;
$spop-warning-color:    #fcd000 !default;

$spop-title-color:      #fff !default;
$spop-link-color:       $spop-title-color !default;

$spop-width:            320px !default;
$spop-font-size-base:   14px;
$spop-space:            0.7em !default;

$spop-animation-duration:   0.4s !default;

$use-box-shadow:            false !default;
$box-shadow:                0 0 6px 2px rgba( #000, 0.25) !default;

$use-border-radius:         true !default;
$border-radius:             2px !default;

$use-icon:                  true;

.spop-container {
    z-index: 2000;
    position: fixed;

    &,
    *,
    *:after,
    *:before { box-sizing: border-box;}
}

.spop--top-left   {
    top: 0;
    left: 0;
    .spop { transform-origin: 0 0;}
}
.spop--top-center {
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    .spop { transform-origin: 50% 0;}
}
.spop--top-right  {
    top: 0;
    right: 0;
    .spop { transform-origin: 100% 0;}
}


.spop--center  {
    top: 50%;
    left: 50%;
    transform: translate3d(-50%, -50%, 0);
    .spop { transform-origin: 50% 0;}
}


.spop--bottom-left   {
    bottom: 0;
    left: 0;
    .spop {transform-origin: 0 100%;}
}
.spop--bottom-center {
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    .spop { transform-origin: 50% 100%;}
}
.spop--bottom-right  {
    bottom: 0;
    right: 0;
    .spop { transform-origin: 100% 100%;}
}


@media screen and (max-width:30em) {
    .spop--top-left,
    .spop--top-center,
    .spop--top-right,
    .spop--bottom-left,
    .spop--bottom-center,
    .spop--bottom-right  {
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        margin-left: 0;
        transform: translateX(0);
        .spop { transform-origin: 50% 100%;}
    }

    .spop { border-bottom: 1px solid rgba(#000,0.15);}
}

.spop {
    position: relative;
    min-height: 56px;
    line-height: 1.25;
    font-size: $spop-font-size-base;
    transform: translateZ(0);


    @if $use-box-shadow == true {
        box-shadow: $box-shadow;
    }

    @media screen and (min-width:30em) {
        @if $use-border-radius == true {
            border-radius: $border-radius;
        }

        width: $spop-width;
        margin: $spop-space;
    }
}

.spop--info,
.spop--error,
.spop--warning,
.spop--success { color: $spop-color; background-color: $spop-bg-color;}

@keyframes spopIn {
    0%   { transform: scale(0.2,0.2);}
    95%  { transform: scale(1.1,1.1);}
    100% { transform: scale(1,1);}
}
@keyframes spopOut {
    0%   { opacity: 1; transform: scale(1,1);}
    20%  { transform: scale(1.1,1.1);}
    100% { opacity: 0; transform: scale(0,0);}
}

.spop--out {
    animation: spopOut $spop-animation-duration ease-in-out;
}

.spop--in {
    animation: spopIn $spop-animation-duration ease-in-out;
}

.spop-body {
    padding: ($spop-space * 2);
    p { margin: 0;}

    a {
        color: $spop-link-color;
        text-decoration: underline;

        &:hover {
            color: rgba($spop-link-color, 0.8);
            text-decoration: none;
        }
    }
}

.spop-title {
    margin-top: 0;
    margin-bottom: 0.25em;
    color: $spop-title-color;
}

.spop-close {
    position: absolute;
    right: 0;
    top: 0;
    height: 32px;
    width: 32px;
    padding-top: 7px;
    padding-right: 7px;
    font-size: 22px;
    font-weight: bold;
    text-align: right;
    line-height: 0.6;
    color: $spop-color;
    opacity: 0.5;

    &:hover {
        opacity: 0.7;
        cursor: pointer;
    }
}

@if $use-icon == true {
    .spop-icon {
        position: absolute;
        top: 13px;
        left: 16px;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        animation: spopIn $spop-animation-duration $spop-animation-duration ease-in-out;
        &:after,
        &:before {
            content:"";
            position: absolute;
            display: block;
        }

        & + .spop-body { padding-left: ($spop-space * 6);}
    }

    .spop-icon--error,
    .spop-icon--info {
        border: 2px solid $spop-info-color;
        &:before {
            top: 5px;
            left: 11px;
            width: 4px;
            height: 4px;
            background-color:$spop-info-color;
        }
        &:after {
            top: 12px;
            left: 11px;
            width: 4px;
            height: 9px;
            background-color:$spop-info-color;
        }
    }

    .spop-icon--error {
        border-color: $spop-error-color;
        &:before {
            top: 16px;
            background-color:$spop-error-color;
        }
        &:after {
            top: 5px;
            background-color:$spop-error-color;
        }
    }

    .spop-icon--success {
        border: 2px solid $spop-success-color;
        &:before {
            top: 7px;
            left: 7px;
            width: 13px;
            height: 8px;
            border-bottom: 3px solid $spop-success-color;
            border-left: 3px solid $spop-success-color;
            transform: rotate(-45deg);
        }
    }

    .spop-icon--warning {
        border: 2px solid $spop-warning-color;
        &:before {
            top: 7px;
            left: 7px;
            width: 0;
            height: 0;
            border-style: solid;
            border-color: transparent transparent $spop-warning-color transparent;
            border-width: 0 6px 10px 6px;
        }
    }
}


/* Extra styles for playgroud */

$gray-dark:     #555;
$gray:          #ddd;
$gray-light:    #eee;
$gray-lighter:  #f7f7f7;

$color:         #454A56;
$color-light:   #5c83b0;
$content-bg:    #f7f7f7;

$gutter: 2rem;

$h1: 2.5rem;
$h2: 1.8rem;
$h3: 1.3rem;
$h4: 1.15rem;

$lh: 1.47em;

body {
    font-family: 'Roboto', sans-serif;
    background-color: $gray;
    font-size: 100%;
    font-weight: 400;
    line-height: 1.47;
    min-width: 320px;
}

.container {
    position: relative;
    max-width: 42em;
    padding-left: $gutter/2;
    padding-right: $gutter/2;
    margin: 0 auto;
    text-align: center;
}

h1, h2, h3, .h1, .h2, .h3 {
    margin-top: 0;
    font-weight: 300;
    color: $gray-dark;
    line-height: 1.1;
}

h1, .h1 { font-size: $h1;}
h2, .h2 { font-size: $h2;}
h3, .h3 { font-size: $h3;font-weight: 400;}

a {
    color: $color-light;
    text-decoration: none;

    &:hover {
        text-decoration: none;
        color: darken($color-light,16%);
    }
}

.header {
    padding: $gutter;
    padding-bottom: $gutter/2;
    background-color: $gray-light;
}

.section {
    padding: $gutter;
    background-color: $gray-lighter;
}

.btn {
    display: inline-block;
    vertical-align: middle;
    padding: 6px 12px;
    margin: 2px;
    color: #fff;
    background-color: $color-light;
    border-radius: 3px;
    transition: background-color 0.3s ease-in-out;
    cursor: pointer;
    text-align: center;


    &:hover,
    &:focus {
        color: #fff;
        background-color: darken($color-light,10%);
    }
}

.btn-play {
    background-color: lighten($spop-bg-color, 5%);
    span { margin-right: 0.4em;}
}

.text-info    { color: $spop-info-color;}
.text-success { color: $spop-success-color; }
.text-error   { color: $spop-error-color;}
.text-warning { color: $spop-warning-color;}

JS:

/*!
 * smallPop 0.1.2 | https://github.com/silvio-r/spop
 * Copyright (c) 2015 Sílvio Rosa @silvior_
 * MIT license
 */

;(function() {
    'use strict';

    var animationTime = 390;
    var options, defaults, container, icon, layout, popStyle, positions, close;

    var SmallPop = function(template, style) {

        this.defaults = {
            template  : null,
            style     : 'info',
            autoclose : false,
            position  : 'top-right',
            icon      : true,
            group     : false,
            onOpen    : false,
            onClose   : false
        };

        defaults = extend(this.defaults, spop.defaults);

        if ( typeof template === 'string' || typeof style === 'string' ) {
            options = { template: template, style: style || defaults.style};
        }
        else if (typeof template === 'object') {
            options = template;
        }
        else {
            console.error('Invalid arguments.');
            return false;
        }

        this.opt = extend( defaults, options);

        if ($('spop--' + this.opt.group)) {

            this.remove($('spop--' + this.opt.group));
        }

        this.open();
    };

    SmallPop.prototype.create = function(template) {

        container = $(this.getPosition('spop--', this.opt.position));

        icon = (!this.opt.icon) ? '' : '<i class="spop-icon '+
                    this.getStyle('spop-icon--', this.opt.style) +'"></i>';

        layout ='<div class="spop-close" data-spop="close" aria-label="Close">&times;</div>' +
                        icon +
                    '<div class="spop-body">' +
                        template +
                    '</div>';

        if (!container) {

            this.popContainer = document.createElement('div');

            this.popContainer.setAttribute('class', 'spop-container ' +
                this.getPosition('spop--', this.opt.position));

            this.popContainer.setAttribute('id', this.getPosition('spop--', this.opt.position));

            document.body.appendChild(this.popContainer);

            container = $(this.getPosition('spop--', this.opt.position));
        }

        this.pop = document.createElement('div');

        this.pop.setAttribute('class', 'spop spop--out spop--in ' + this.getStyle('spop--', this.opt.style) );

        if (this.opt.group && typeof this.opt.group === 'string') {
            this.pop.setAttribute('id', 'spop--' + this.opt.group);
        }


        this.pop.setAttribute('role', 'alert');

        this.pop.innerHTML = layout;

        container.appendChild(this.pop);
    };

    SmallPop.prototype.getStyle = function(sufix, arg) {

        popStyle = {
            'success': 'success',
            'error'  : 'error',
            'warning': 'warning'
        };
        return sufix + (popStyle[arg] || 'info');
    };

    SmallPop.prototype.getPosition = function(sufix, position) {

        positions = {
            'top-left'     : 'top-left',
            'top-center'   : 'top-center',
            'top-right'    : 'top-right',
            'bottom-left'  : 'bottom-left',
            'bottom-center': 'bottom-center',
            'bottom-right' : 'bottom-right'
        };
        return sufix + (positions[position] || 'top-right');
    };

    SmallPop.prototype.open = function() {

        this.create(this.opt.template);

        if (this.opt.onOpen) { this.opt.onOpen();}

        this.close();
    };

    SmallPop.prototype.close = function () {

        if (this.opt.autoclose && typeof this.opt.autoclose === 'number') {

            this.autocloseTimer = setTimeout( this.remove.bind(null, this.pop), this.opt.autoclose);
        }

        this.pop.addEventListener('click', this.addListeners.bind(this) , false);
    };

    SmallPop.prototype.addListeners = function(event) {

        close = event.target.getAttribute('data-spop');

        if (close === 'close') {

            if (this.autocloseTimer) { clearTimeout(this.autocloseTimer);}

            if (this.opt.onClose) { this.opt.onClose();}

            this.remove(this.pop);
        }
    };

    SmallPop.prototype.remove = function(elm) {

        removeClass(elm, 'spop--in');

        setTimeout( function () {

            if(document.body.contains(elm)) {
                elm.parentNode.removeChild(elm);
            }

        }, animationTime);
    };


    // Helpers

    function $(el, con) {
        return typeof el === 'string'? (con || document).getElementById(el) : el || null;
    }

    function removeClass(el, className) {
        if (el.classList) {
            el.classList.remove(className);
        }
        else {
            el.className = el.className.replace(new RegExp('(^|\\b)' +
                            className.split(' ').join('|') +
                            '(\\b|$)', 'gi'), ' ');
        }
    }

    function extend(obj, src) {

        for (var key in src) {
            if (src.hasOwnProperty(key)) obj[key] = src[key];
        }

        return obj;
    }

    window.spop = function (template, style) {
        if ( !template || !window.addEventListener ) { return false;}

        return new SmallPop(template, style);
    };

    spop.defaults = {};
}());


/* Extra scripts for playgroud */
(function(){
    spop.defaults = {
        //style     : 'info',
        //position  : 'top-right',
        //icon      : true,
        autoclose : 5000
    };

    var $ = function(e) { return document.getElementById(e);}

    var clickSpop = function(element, msm, type) {
        $(element).addEventListener('click', function() {
            spop(msm, type);
        }, false);
    };

    clickSpop('btn-info', 'Default SmallPop');
    clickSpop('btn-success', '[New Phone Detected]', 'success');
    clickSpop('btn-error', 'Error SmallPop', 'error');
    clickSpop('btn-warning', 'Warning SmallPop', 'warning');
}());

Будет ли способ переключить это всплывающее окно с помощью клавиатуры?Я провел некоторые исследования и ничего не могу найти.Я хочу переключить всплывающее окно «Успех», например, нажав «Control + D».

Спасибо, Stackoverflowers, надеюсь, у вас будет отличная ночь!

Монтана

Mel Macaluso · Answer 1 · 22 февраля 2019

В этом случае обычной практикой является создание массива или объекта keyCode s и перекрестная проверка, если они совпадают с желаемыми значениями, условно инициируя выполнение выбранной вами функции.

В следующем примеремы устанавливаем IIFE, где мы:

Создаем массив временных клавиш для хранения наших нажатых клавиш (и еще не отпущенных)
Мы создаем 3 функции: одну для хранения нажатых клавишодин для сброса их, когда мы отпускаем клавишу, другой для запуска желаемого вызова функции, когда определенная комбинация найдена в нашем массиве

(() => {
  let keys = []
  
  const resetKeysPressed = () => {
        keys = []
  }

  const keysPressed = e => {
    keys.push(e.keyCode)
    console.log(keys)
  }
  
  const dismissModalShortcut = keys => {
    if(keys.includes(17) && keys.includes(68)) {
      console.log('CTRL+D pressed')
      // dismissModal()
    }
  }
  
window.addEventListener('keydown', e => keysPressed(e))
window.addEventListener('keyup', e => resetKeysPressed())
window.addEventListener('keydown', () => dismissModalShortcut(keys))


})()

Переключить всплывающее окно на приборной панели

Пожалуйста, войдите или зарегистрируйтесь чтобы ответить на этот вопрос.

1 Ответ

Пожалуйста, войдите или зарегистрируйтесь что бы добавить комментарий.

Переключить всплывающее окно на приборной панели

Пожалуйста, войдите или зарегистрируйтесь чтобы ответить на этот вопрос.

1 Ответ

Пожалуйста, войдите или зарегистрируйтесь что бы добавить комментарий.

Похожие темы