Skip to content

Instantly share code, notes, and snippets.

Yauheni Prakopchyk asvae

Block or report user

Report or block asvae

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
@asvae
asvae / inject-provide-store-example.md
Last active Oct 11, 2019
Inject-provide store example
View inject-provide-store-example.md

Plugin (store-plugin.ts)

import { CheckOutStore } from '../services/store'

export const checkOutStoreInjectKey = Symbol('checkOutStore')

export const StorePlugin = {
  install (Vue: any): void {
    Vue.mixin({
      inject: {
View gist:f96f02869f3df99bd0a013b07ac11de1
import DomHelpers from './Utility/DomHelpers.js'
// ...
methods: {
click (event) {
DomHelpers.isChild(this.$el, event.target) || this.hide()
},
}
View gist:bebeb828485a565f14c3eb1259fe0842
<div class="click-target-modal">
<div class="click-target-modal__content"
v-if="isDisplayed"
>
<slot></slot>
</div>
</div>
View gist:c28ea25d1e82e02852b060ee2a94ff32
// ...
methods: {
show () {
this.isDisplayed = true
this.$emit('input', true)
this.listen(true)
},
hide () {
this.isDisplayed = false
this.$emit('input', false)
View gist:d6ad5095cb6cdf123d76f9ca882f125e
<div class="document-event-modal">
<div class="document-event-modal__content"
@click.stop
v-if="isDisplayed"
>
<slot></slot>
</div>
</div>
View gist:c9acb805f673e19440ad7df9aa391450
.full-screen-overlay-modal {
&__background {
position: fixed;
z-index: 1000;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
&__content {
View gist:003578d7b9c4f9b5cafac22b8caa40ce
<div class="full-screen-overlay-modal">
<div class="background"
@click="hide()"
v-if="isDisplayed"
/>
<div class="content"
v-if="isDisplayed"
>
<slot></slot>
</div>
@asvae
asvae / Hunt for perfect modal.md
Created Jul 16, 2018
Hunt for perfect modal
View Hunt for perfect modal.md

Hunt for perfect modal

#modal #popup #javascript #vuejs 2017-05-08

vue navigation

Hey. Today we will pursue our dream for perfect modal. Being perfect means:

  • Floats above everything else.
  • Is not blocking.
  • Supports nesting of any depth.
View FieldRepository.js
import Field from '../Domain/Entity/Field.js'
import FieldMapper from '../Domain/Mapper/FieldMapper.js'
import repoBus from '../../oop-store/repoBus'
import axios from '../../plugins/internal/axios-instance.js'
import MappingHelpers from '../Utility/Static/MappingHelpers.js'
export const FIELD_UPDATED = 'Field updated'
export const FIELD_CREATED = 'Field created'
@asvae
asvae / 2c2p promise loader
Created Sep 1, 2017
2c2p-promise-loader.js
View 2c2p promise loader
let promise
export async function getMy2c2p () {
promise || (promise = new Promise((resolve, reject) => {
const script = document.createElement('script')
script.src = 'https://demo2.2c2p.com/2C2PFrontEnd/SecurePayment/api/my2c2p.1.6.9.min.js'
script.async = true
script.onload = () => {
resolve(My2c2p)
}
You can’t perform that action at this time.