Skip to content

Instantly share code, notes, and snippets.

View zoxon's full-sized avatar

Zoxon zoxon

View GitHub Profile
@zoxon
zoxon / file-to-base64.js
Created September 18, 2018 10:10
Read file to base64
const getBase64 = (img, callback) => {
const reader = new FileReader();
reader.addEventListener("load", () => callback(reader.result));
reader.readAsDataURL(img);
};
const getFiles = event => {
if (event.dataTransfer) {
return event.dataTransfer.files;
@zoxon
zoxon / swiper-autoplay-start-stop.js
Last active September 18, 2018 10:02
Swiper.js - stop autoplay on hover and start on blur
const sliderElement = document.querySelector(".main-slider");
if (sliderElement) {
const slider = new Swiper(".swiper-container", {
slidesPerView: 1,
spaceBetween: 0,
watchOverflow: true,
loop: true,
autoplay: {
delay: 4000,
@zoxon
zoxon / Image.js
Created September 18, 2018 07:29
Image react component
/**
* Image Component
*/
/*
// Usage example
<Image
alt='example'
className='additional-className'
src='example-small.png',
@zoxon
zoxon / mixins.scss
Created July 16, 2018 10:39
SCSS mixins
@mixin clearfix {
&:after {
content: '';
display: table;
clear: both;
}
}
@mixin visuallyhidden {
position: absolute;
@zoxon
zoxon / [1] main.js
Created July 5, 2018 10:02 — forked from hfalucas/[1] main.js
[Vue.js] Authentication and Authorization
/**
* Think of this "main.js" file as your application bootstrap.
*/
import Vue from 'vue'
import Resource from 'vue-resource'
import VueRouter from 'vue-router'
import routes from './routes'
import middleware from './middleware'
@zoxon
zoxon / addClassToSlot.vue
Created May 17, 2018 08:22
Add class to VNode in slot
<script>
export default {
name: "ButtonGroup",
// eslint-disable-next-line no-unused-vars
render(h) {
return (
<div class="button-group">
{this.$slots.default &&
@zoxon
zoxon / Loader.js
Created May 8, 2018 03:00
React text loader
import React from 'react';
import PropTypes from 'prop-types';
const DEFAULT_LOADER_CHARACTERS = '\\|/—'; // ⣾⣽⣻⢿⡿⣟⣯⣷
const DEFAULT_LOADER_SPEED_MS = 100;
const LOADER_STYLE = {
fontFamily: 'monospace',
};
export default class Loader extends React.Component {
// @url https://www.sitepoint.com/react-architecture-best-practices/
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { push } from 'react-router-redux';
export default function requiresAuth(WrappedComponent) {
class AuthenticatedComponent extends Component {
static propTypes = {
user: PropTypes.object,
@zoxon
zoxon / modal-youtube-video.js
Created May 2, 2018 08:09
Start and pause youtube video on open and close modal window
// Micromodal
import MicroModal from "micromodal";
const youtubeCommand = func =>
window.JSON.stringify({ event: "command", func });
const execCommand = (frame, command) => {
if (null === frame.contentWindow) {
return;
}
@zoxon
zoxon / randomPick.js
Created February 17, 2018 14:01 — forked from Takazudo/randomPick.js
randomPick/randomNum
/* need underscore.js */
/**
* randomNum
* randomNum(3,6); => 4
*/
var randomNum = function(from, to) {
return from + Math.floor( Math.random() * (to - from + 1) );
};