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
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)
}
@asvae
asvae / suggest-node-testing.md
Created Aug 6, 2017
Suggesting node testing
View suggest-node-testing.md

We suggest to use node.js for api integration tests.

Upsides

  • Code sharing between frontend and testers (Entity (sctructure + bound logic), Factory, Mapper).
  • Filling the test-coverage gap between backend and frontend. Currently this is the most untested and dangerous part.
  • Node is better than php to work with dynamic data structures.
  • Making frontend guys happy as our burden will be lightened.

Downsides

  • Testers should have to learn JS. Though tests don't pose much a difficulty.
You can’t perform that action at this time.