Skip to content

Instantly share code, notes, and snippets.

View StefanNieuwenhuis's full-sized avatar
:bowtie:
Follow me on twitter @stefannhs

stefannhs StefanNieuwenhuis

:bowtie:
Follow me on twitter @stefannhs
26 followers · 14 following
View GitHub Profile
@StefanNieuwenhuis
StefanNieuwenhuis / stenciljs-modal-overlay__logic-step1.tsx
Created December 27, 2018 16:01
import { Component, Prop } from '@stencil/core';
@Component({
tag: 'my-component',
styleUrl: 'my-component.css',
shadow: true
})
export class MyComponent {
@Prop({mutable: true}) isActive = false;
@StefanNieuwenhuis
StefanNieuwenhuis / stenciljs-modal-overlay__index.html
Created December 27, 2018 16:01
<!DOCTYPE html>
<html dir="ltr" lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0">
<title>Stencil Component Starter</title>
<script src="/build/mycomponent.js"></script>
</head>
@StefanNieuwenhuis
StefanNieuwenhuis / stenciljs-image-upload__index.html
Created December 27, 2018 10:35
<!DOCTYPE html>
<html dir="ltr" lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0">
<title>Stencil Component Starter</title>
<script src="/build/mycomponent.js"></script>
<script>
document.addEventListener('onUploadCompleted', (e) => console.log(e));
</script>
@StefanNieuwenhuis
StefanNieuwenhuis / stenciljs-image-upload__logic-step4.tsx
Last active December 27, 2018 10:30
import { Component, Element, Event, EventEmitter } from '@stencil/core';
const MAX_UPLOAD_SIZE = 1024; // bytes
const ALLOWED_FILE_TYPES = 'image.*';
@Component({
tag: 'my-component',
styleUrl: 'my-component.css',
shadow: true
})
@StefanNieuwenhuis
StefanNieuwenhuis / stenciljs-image-upload__logic-step4.tsx
Last active December 27, 2018 10:31
import { Component, Element } from '@stencil/core';
const MAX_UPLOAD_SIZE = 1024; // bytes
const ALLOWED_FILE_TYPES = 'image.*';
@Component({
tag: 'my-component',
styleUrl: 'my-component.css',
shadow: true
})
@StefanNieuwenhuis
StefanNieuwenhuis / stenciljs-image-upload__logic-step3.tsx
Last active December 27, 2018 10:31
import { Component } from '@stencil/core';
const MAX_UPLOAD_SIZE = 1024; // bytes
const ALLOWED_FILE_TYPES = 'image.*';
@Component({
tag: 'my-component',
styleUrl: 'my-component.css',
shadow: true
})
@StefanNieuwenhuis
StefanNieuwenhuis / stenciljs-image-upload__logic-step2.tsx
Last active December 27, 2018 09:37
import { Component } from '@stencil/core';
const MAX_UPLOAD_SIZE = 1024; // bytes
const ALLOWED_FILE_TYPES = 'image.*';
@Component({
tag: 'my-component',
styleUrl: 'my-component.css',
shadow: true
})
@StefanNieuwenhuis
StefanNieuwenhuis / stenciljs-image-upload__logic-step1.tsx
Last active December 27, 2018 09:37
import { Component} from '@stencil/core';
@Component({
tag: 'my-component',
styleUrl: 'my-component.css',
shadow: true
})
export class MyComponent {
public onInputChange(files: FileList) {
// check if 1 image is uploaded
@StefanNieuwenhuis
StefanNieuwenhuis / stenciljs-image-upload__styling.css
Created December 24, 2018 13:45
stenciljs-image-upload__styling
.image-upload {
position: relative;
max-width: 205px;
margin: 50px auto;
}
.image-upload__edit {
position: absolute;
top: 10px;
right: 12px;
@StefanNieuwenhuis
StefanNieuwenhuis / stenciljs-image-upload__render-template.tsx
Last active December 24, 2018 13:43
stenciljs-image-upload__render-template
render() {
return <div class="image-upload">
<div class="image-upload__edit">
<label htmlFor="file"></label>
<input type="file" name="files[]" id="file" accept="image/*" class="image-upload__input"
onChange={($event: any) => this.onInputChange($event.target.files)} />
</div>
<div class="image-upload__preview">
<div id="image-preview"></div>