Svelte component

README.md

Svelte component

This gist was generated by the Svelte REPL. Visit https://svelte.technology/repl?gist=this_gist_id to see it.

App.html

<Modal bind:showModal title="Hello World" content="How are you man, this is something that isn't coming along." />

<a href="#" on:click="set({showModal: true})">Modal Open</a>

<script>
	import Modal from './Modal.html';
	
	export default {
		data: function () {
			return  {
				showModal: false
			}
		},
		components: {
			Modal
		}
	}
</script>

data.json

{
  "name": "world"
}

Modal.html

{{#if showModal}}
<div class="modal fade-in {{show}}" style="{{modalPosition}}" transition:scale>
  <div class="modal-wrapper">
      <div class="modal-close"><a on:click="close(event)" href="#">&times;</a></div>
      {{#if title}}
      <h2 class="modal-title">{{title}} {{showModal}}</h2>
      {{/if}}

      <div class="modal-content">
        {{{content}}}
      </div>
  </div>
</div>

<div class="modal-overlay"></div>
{{/if}}

<style>
.modal {
  position: absolute;
  left: 50%;
  width: calc(100% - 4em);
  max-width: 32em;
  padding: 1em;

  z-index: 101;
  box-shadow: 0 0 0 0 #cdcbcb;
  opacity: .2;
  border: 1px solid #d8d8d8;
  background-color: #fff;
}

.modal.show ~ .modal-overlay {
  opacity: .9;
}

.modal.show .modal-wrapper {
  opacity: 1;
}

.modal.fade-in {
  opacity: 1;
  box-shadow: 0 0 20px 2px #cdcbcb;
}

.modal .modal-wrapper {
  background-color: #fff;
  width: 100%;
  height: 100%;
  transition: all 400ms;
  opacity: 0;
}

.modal .close {
  width: 40px;
  height: 40px;
  position: absolute;
  top: 0;
  right: 0;
  cursor: pointer;
}

.modal-title {
  font-weight: 300;
}

.modal-close {
  position: absolute;
  top: 5px;
  right: 5px;
}

.modal-close a {
  border-radius: 50%;
  color: #333;
  display: block;
  height: 26px;
  font-size: 32px;
  text-decoration: none;
  line-height: 0.6;
  padding: 5px 8px;
  width: 20px;
}

.modal-close a:hover {
  background-color: #eee;
  color: #000;
}

.modal-overlay {
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.4);
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all .5s;
  transition: all .5s;
}

@media screen and (min-width: 64em) {
  .modal {
    position: fixed;
    width: 296px;
    min-height: 198px;
    height: auto;
  }

  .modal.fade-in {
    width: 640px;
  }
}
</style>

<script>
	import { cubicOut } from 'eases-jsnext';
	
	export default {
		data: function () {
			return  {
				showModal: false,
				positionTop: '50%',
				title: '',
				content: ''
			}
		},
		computed: {
			show: function (showModal) {
				return showModal ? 'show' : '';
			},
			modalPosition: function (positionTop) {
				return 'top: ' + positionTop + '; transform: translate(-50%,-' + positionTop +');';
			}
		},
		methods: {
			close: function (event) {
				event.preventDefault();
				this.set({showModal: false});
			}
		},
		transitions: {
			scale(
				node,
				{ delay = 0, duration = 400, easing = cubicOut, initial = 0.9 }
			) {
				const diff = initial - 1;

				return {
					delay,
					duration,
					easing,
					css: t => `opacity: ${t}; transform: scale(${initial - (t * diff)});`
				};
			}
		}
	}
</script>