Skip to content

Commit

Permalink
Add custom animation
Browse files Browse the repository at this point in the history
  • Loading branch information
dixso committed Nov 1, 2016
1 parent c962c70 commit c6624f6
Show file tree
Hide file tree
Showing 4 changed files with 120 additions and 66 deletions.
1 change: 1 addition & 0 deletions src/ajax.html
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
<div style="background: #fc5e5e; border: #fc5e5e solid 1px">
<a href="javascript:void(0);" onclick="dynamicModal()">Open new modal</a>
<a href="javascript:void(0);" onclick="dynamicModal('close')">CLOSE</a>
</div>
29 changes: 26 additions & 3 deletions src/custombox.scss
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,12 @@ $content: #{$cb}-content;
// Actions
$open: 'open';
$close: 'close';
$t: 'top';
$b: 'bottom';

// Effects
$effect1: fadein;
$effect2: slide;

/*
----------------------------
Expand Down Expand Up @@ -67,7 +70,7 @@ $effect1: fadein;

/*
----------------------------
Fadein
#{$effect1}
----------------------------
*/
.#{$cb}.#{$effect1} {
Expand All @@ -76,11 +79,31 @@ $effect1: fadein;
transition-property: all;
opacity: 0;
}
}
.#{$cb}.#{$effect1} {
.#{$open}.#{$content} {
transform: scale(1);
opacity: 1;
visibility: visible;
}
}

/*
----------------------------
#{$effect2}
----------------------------
*/
.#{$cb}.#{$effect2} {
align-items: stretch;

.#{$content}.#{$t},
.#{$close}.#{$content}.#{$t} {
transform: translateY(-50%);
}
.#{$open}.#{$content}.#{$t},
.#{$open}.#{$content}.#{$b} {
transform: translateY(50%);
}
.#{$content}.#{$b},
.#{$close}.#{$content}.#{$b} {
transform: translateY(150%);
}
}
120 changes: 72 additions & 48 deletions src/custombox.ts
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ module Custombox {
speed: number;
effect: string;
width: string;
animation: Array<string>;
open: Function;
complete: Function;
close: Function;
Expand All @@ -19,8 +20,9 @@ module Custombox {
effect: string;
}

const cb: string = 'custombox';
const o: string = 'open';
const CB: string = 'custombox';
const O: string = 'open';
const C: string = 'close';

class Defaults {
private defaults: Options;
Expand All @@ -39,6 +41,7 @@ module Custombox {
// Content
this.defaults.speed = 500;
this.defaults.width = null;
this.defaults.animation = ['top', 'top'];
}

// Public methods
Expand All @@ -52,10 +55,10 @@ module Custombox {

constructor(effect: string, full: boolean) {
this.element = document.createElement('div');
this.element.classList.add(cb, effect);
this.element.classList.add(CB, effect);

if (full) {
this.element.classList.add(`${cb}-is-full`);
this.element.classList.add(`${CB}-is-full`);
}
}

Expand All @@ -76,11 +79,11 @@ module Custombox {
constructor(private options: Options) {
this.element = document.createElement('div');
this.element.style.backgroundColor = this.options.overlayColor;
this.element.classList.add(`${cb}-overlay`);
this.element.classList.add(`${CB}-overlay`);

let sheet = this.createSheet();
sheet.insertRule(`.${cb}-overlay { animation: CloseFade ${this.options.overlaySpeed}ms; }`, 0);
sheet.insertRule(`.${o}.${cb}-overlay { animation: OpenFade ${this.options.overlaySpeed}ms; opacity: ${this.options.overlayOpacity} }`, 0);
sheet.insertRule(`.${CB}-overlay { animation: CloseFade ${this.options.overlaySpeed}ms; }`, 0);
sheet.insertRule(`.${O}.${CB}-overlay { animation: OpenFade ${this.options.overlaySpeed}ms; opacity: ${this.options.overlayOpacity} }`, 0);
sheet.insertRule(`@keyframes OpenFade { from {opacity: 0} to {opacity: ${this.options.overlayOpacity}} }`, 0);
sheet.insertRule(`@keyframes CloseFade { from {opacity: ${this.options.overlayOpacity}} to {opacity: 0} }`, 0);
}
Expand All @@ -99,7 +102,7 @@ module Custombox {
}

return new Promise((resolve: Function) => {
this.element.classList[action](o);
this.element.classList[action](O);
this.listener().then(()=> resolve());
});
}
Expand All @@ -114,7 +117,7 @@ module Custombox {
// Private methods
private createSheet(): any {
this.style = document.createElement('style');
this.style.setAttribute('id', `${cb}-overlay-${Date.now()}`);
this.style.setAttribute('id', `${CB}-overlay-${Date.now()}`);
document.head.appendChild(this.style);

return this.style.sheet;
Expand All @@ -128,10 +131,13 @@ module Custombox {
class Content {
element: HTMLElement;

constructor(speed: number) {
private animationDefaults: Array<string>;

constructor(speed: number, private effect: string, private animation: Array<string>) {
this.element = document.createElement('div');
this.element.style.transitionDuration = `${speed}ms`;
this.element.classList.add(`${cb}-content`);
this.element.classList.add(`${CB}-content`);
this.checkAnimation();
}

// Public methods
Expand Down Expand Up @@ -175,21 +181,20 @@ module Custombox {
}

bind(method: string): Promise<Event> {
let action: string;

switch (method) {
case 'close':
action = 'remove';
break;
return new Promise((resolve: Function) => {
this.element.classList.remove(O);
this.element.classList.add(C);
this.checkAnimation(1);
this.listener().then(()=> resolve());
});
default:
action = 'add';
break
return new Promise((resolve: Function) => {
this.element.classList.add(O);
this.listener().then(()=> resolve());
});
}

return new Promise((resolve: Function) => {
this.element.classList[action](o);
this.listener().then(()=> resolve());
});
}

remove(): void {
Expand All @@ -202,6 +207,22 @@ module Custombox {
private listener(): Promise<Event> {
return new Promise((resolve: Function) => this.element.addEventListener('transitionend', () => resolve(), true));
}

private checkAnimation(action: number = 0): void {
this.animationDefaults = ['slide'];

if (this.animationDefaults.indexOf(this.effect) > -1) {
if (this.element.classList.contains('top')) {
this.element.classList.remove('top');
}

if (this.element.classList.contains('bottom')) {
this.element.classList.remove('bottom');
}

this.element.classList.add(this.animation[action]);
}
}
}

export class modal {
Expand All @@ -215,7 +236,7 @@ module Custombox {
this.options = defaults.assign();

this.wrapper = new Wrapper(this.options.effect, this.options.width === 'full');
this.content = new Content(this.options.speed);
this.content = new Content(this.options.speed, this.options.effect, this.options.animation);

if (this.options.overlay) {
this.overlay = new Overlay(this.options);
Expand All @@ -228,44 +249,47 @@ module Custombox {

// Public methods
open(): void {
this.content.fetch(this.options.target, this.options.width).then((element: HTMLElement) => {
// Append
this.content.element.appendChild(element);
document.body.appendChild(this.wrapper.element);

if (this.options.overlay) {
this.overlay.bind('open').then(() => this.content.bind('open').then(() => this.dispatchEvent('complete')));
} else {
let ready = window.getComputedStyle(this.content.element).transitionDuration;
if (ready) {
this.content.bind('open').then(() => this.dispatchEvent('complete'));
this.content
.fetch(this.options.target, this.options.width)
.then((element: HTMLElement) => {
// Append
this.content.element.appendChild(element);
document.body.appendChild(this.wrapper.element);

if (this.options.overlay) {
this.overlay.bind(O).then(() => this.content.bind(O).then(() => this.dispatchEvent('complete')));
} else {
let ready = window.getComputedStyle(this.content.element).transitionDuration;
if (ready) {
this.content.bind(O).then(() => this.dispatchEvent('complete'));
}
}
}

// Dispatch event
this.dispatchEvent('open');
// Dispatch event
this.dispatchEvent(O);

// Listeners
this.listeners();
}).catch((error: string) => {
throw error;
});
// Listeners
this.listeners();
})
.catch((error: Error) => {
throw error;
});
}

close(): void {
if (this.options.overlay) {
Promise.all([
this.content.bind('close').then(() => this.content.remove()),
this.overlay.bind('close').then(() => this.overlay.remove())
this.content.bind(C).then(() => this.content.remove()),
this.overlay.bind(C).then(() => this.overlay.remove())
]).then(() => {
this.wrapper.remove();
this.dispatchEvent('close');
this.dispatchEvent(C);
});
} else {
this.content.bind('close').then(() => {
this.content.bind(C).then(() => {
this.content.remove();
this.wrapper.remove();
this.dispatchEvent('close');
this.dispatchEvent(C);
});
}
}
Expand All @@ -276,7 +300,7 @@ module Custombox {
}

private dispatchEvent(type: string): void {
let event = new Event(`${cb}:${type}`);
let event = new Event(`${CB}:${type}`);
document.dispatchEvent(event);

try {
Expand Down
36 changes: 21 additions & 15 deletions src/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -6,10 +6,15 @@
<link rel="stylesheet" href="./custombox.css">
<script src="./custombox.js"></script>
<script>
const modal = new Custombox.modal({
var effects = ['fadein', 'slide'];
var animation = ['top', 'bottom'];

const modal =
new Custombox.modal({
target: 'ajax.html',
effect: 'fadein',
});
effect: effects[Math.floor(Math.random() * effects.length)],
animation: [animation[Math.floor(Math.random() * animation.length)], animation[Math.floor(Math.random() * animation.length)]]
});
var modals = [];
</script>
</head>
Expand All @@ -19,23 +24,24 @@
<div id="test" style="background: #fc5e5e; border: #fc5e5e solid 1px">
<a href="javascript:void(0);" onclick="dynamicModal()">Open new modal</a>
</div>
<div id="test2" style="background: #FFF;">
Funciona
<a href="javascript:void(0);" onclick="modals[modals.length - 1].close()">Close</a>
</div>
<script>
document.addEventListener("DOMContentLoaded", () => modal.open());
document.addEventListener("custombox:close", () => console.log('close'));

function dynamicModal() {
let custom = new Custombox.modal({
target: '#test2',
effect: 'fadein',
width: 'full',
});
function dynamicModal(action) {
if (!action) {
var custom = new Custombox.modal({
target: 'ajax.html',
effect: effects[Math.floor(Math.random() * effects.length)],
animation: [animation[Math.floor(Math.random() * animation.length)], animation[Math.floor(Math.random() * animation.length)]]
});

custom.open();
modals.push(custom);
custom.open();
modals.push(custom);
} else {
modals[modals.length - 1].close();
modals.splice(modals.length - 1, 1);
}
}
</script>
</body>
Expand Down

0 comments on commit c6624f6

Please sign in to comment.