Skip to content
Permalink
Browse files

Merge pull request #128 from ThomasLuu00/issue119

Slider tooltip
  • Loading branch information
btzr-io committed Oct 27, 2019
2 parents 702eeb8 + 9c6d528 commit 3037e8fbad5a495ce2cedc69276e5145456740eb
@@ -1,20 +1,25 @@
html, body {
height: 100%;
width: 100%;
margin: 0;
font-family: "Trebuchet MS", Helvetica, sans-serif;
html,
body {
height: 100%;
width: 100%;
margin: 0;
font-family: 'Trebuchet MS', Helvetica, sans-serif;
}

body, h1, h2, h3 {
margin: 0;
body,
h1,
h2,
h3 {
margin: 0;
}

body, #app, .villain-demo {
display: flex;
flex: 1;
body,
#app,
.villain-demo {
display: flex;
flex: 1;
}


.villain {
position: absolute;
top: 0;
@@ -23,10 +28,10 @@ body, #app, .villain-demo {
bottom: 0;
margin: auto;
height: 80% !important;
width: 80%!important;
width: 80% !important;
min-width: 400px;
min-height: 400px;
box-shadow: 0 1px 16px rgba(0,0,0,0.12);
box-shadow: 0 1px 16px rgba(0, 0, 0, 0.12);
}

.villain-demo label {
@@ -38,81 +43,80 @@ body, #app, .villain-demo {
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.villain-demo label span{
.villain-demo label span {
color: #3c3c3c;
}

.villain-demo aside {
display: flex;
flex-direction: column;
min-width: 320px;
border: 1px solid rgba(0, 0, 0, 0.1);
margin: 24px;
border-radius: 8px;
overflow: auto;
box-shadow: 0 1px 16px rgba(0,0,0,0.12);
display: flex;
flex-direction: column;
min-width: 320px;
border: 1px solid rgba(0, 0, 0, 0.1);
margin: 24px;
border-radius: 8px;
overflow: auto;
box-shadow: 0 1px 16px rgba(0, 0, 0, 0.12);
}

.villain-demo header {
display: flex;
height: 36px;
padding: 8px;
background: #ff5c65;
box-shadow: 0 -1px 1px #ff5c65;
color: #ffef7f;
font-size: 0.9em;
justify-content: space-between;
align-items: center;
display: flex;
height: 36px;
padding: 8px;
background: #ff5c65;
box-shadow: 0 -1px 1px #ff5c65;
color: #ffef7f;
font-size: 0.9em;
justify-content: space-between;
align-items: center;
}

.villain-demo .form {
flex: 1;
box-shadow: 0 0 1px #d1d5da;
padding: 16px;
overflow-y: auto;
flex: 1;
box-shadow: 0 0 1px #d1d5da;
padding: 16px;
overflow-y: auto;
}

.villain-demo header img {
height: 90%;
margin: 8px;
height: 90%;
margin: 8px;
}

.villain-demo header span {
font-weight: bold;
text-align: center;
font-family: "Lucida Console", Monaco, monospace;
background: transparent;
border: 2px solid #ffef7f;
padding: 2px 8px;
display: inline-block;
margin: 8px;
border-radius: 4px;
font-weight: bold;
text-align: center;
font-family: 'Lucida Console', Monaco, monospace;
background: transparent;
border: 2px solid #ffef7f;
padding: 2px 8px;
display: inline-block;
margin: 8px;
border-radius: 4px;
}


.villain-demo .field input{
color: #3c3c3c;
border: 1px solid rgba(0, 0, 0, 0.2);
background: #fff;
padding: 2px 6px;
max-width: 50%;
.villain-demo .field input {
color: #3c3c3c;
border: 1px solid rgba(0, 0, 0, 0.2);
background: #fff;
padding: 2px 6px;
max-width: 50%;
}

.villain-demo .field input[type=checkbox] {
.villain-demo .field input[type='checkbox'] {
-moz-appearance: none;
-webkit-appearance: none;
}

.villain-demo .field select {
padding: .5em 3em .5em .5em;
padding: 0.5em 3em 0.5em 0.5em;
/* Targetting Webkit browsers only. FF will show the dropdown arrow with so much padding. */
border: 1px solid #c7c7c7;
border-radius: 0;
background-color: rgba(255, 255, 255, 0.5);
color: #676767;
outline: none;
display: inline-block;
transition: all .3s ease-in-out;
transition: all 0.3s ease-in-out;
}

.villain-demo .field select::-ms-expand {
@@ -133,14 +137,13 @@ body, #app, .villain-demo {
}

.villain-demo .instance {
align-self: center;
margin: 0 auto;
width: 100%;
height: 100%;
position: relative;
align-self: center;
margin: 0 auto;
width: 100%;
height: 100%;
position: relative;
}


.villain-demo .field .custom-checkbox-input {
opacity: 1;
position: relative;
@@ -149,7 +152,7 @@ body, #app, .villain-demo {
.villain-demo .field .custom-checkbox-input::before {
content: '';
position: absolute;
background: #FFF;
background: #fff;
left: 50%;
top: 50%;
width: 18px;
@@ -165,7 +168,6 @@ body, #app, .villain-demo {
background: #ff5c65;
}


.villain-demo .field .custom-checkbox-input::after {
content: '';
position: absolute;
@@ -175,7 +177,7 @@ body, #app, .villain-demo {
width: 4px;
height: 8px;
transform: translate(-50%, -50%);
border: solid #FFF;
border: solid #fff;
border-width: 0 3px 3px 0;
transform: rotate(45deg);
cursor: pointer;
@@ -1,39 +1,36 @@
import React, { Component } from 'react'
import clsx from 'clsx'
import Villain from '@/index.js'
import {version} from '../package.json';
import { version } from '../package.json'
import './demo.css'

class Demo extends Component {

state = {
file: '/build/testFile/Example-archive.zip',
options: {
preview: 0,
theme: {type: 'select', value: 'Light', options: ['Dark', 'Light']},
theme: { type: 'select', value: 'Light', options: ['Dark', 'Light'] },
mangaMode: false,
allowFullScreen: true,
autoHideControls: false,
allowGlobalShortcuts: false,
}
},
}

constructor(props) {
super(props)
}



handleChange = ({target}) => {
const {name, value} = parseEvent(target)
this.setState({[name]: value})
handleChange = ({ target }) => {
const { name, value } = parseEvent(target)
this.setState({ [name]: value })
}

handleOptionsChange = ({target}) => {
const {options} = this.state
let {name, value} = parseEvent(target)
if (isObject(options[name])) value = {...options[name], value}
this.setState({'options': {...options, [name]: value}})
handleOptionsChange = ({ target }) => {
const { options } = this.state
let { name, value } = parseEvent(target)
if (isObject(options[name])) value = { ...options[name], value }
this.setState({ options: { ...options, [name]: value } })
}

optionsToFields() {
@@ -42,36 +39,38 @@ class Demo extends Component {
let type = 'text'
if (isBoolean(value)) type = 'boolean'
if (isObject(options[key]) && value.type) type = value.type
return <Field
key={key}
name={key}
type={type}
value={this.state.options[key]}
onChange={this.handleOptionsChange}
{...isObject(options[key]) ? value : undefined}
/>
return (
<Field
key={key}
name={key}
type={type}
value={this.state.options[key]}
onChange={this.handleOptionsChange}
{...(isObject(options[key]) ? value : undefined)}
/>
)
})
}

optionsToProps() {
return Object.entries(this.state.options).reduce((options, [key, value]) => {
options[key] = isObject(value) ? value.value : value
return options
}, {})
options[key] = isObject(value) ? value.value : value
return options
}, {})
}

render() {
const options = { workerUrl: '/build/worker-bundle.js', ...this.optionsToProps()}
const options = { workerUrl: '/build/worker-bundle.js', ...this.optionsToProps() }
return (
<div className="villain-demo">
<aside>
<header>
<header>
<img src="./logo.png" alt="logo" />
<span>{`v ${version}`}</span>
</header>
<div className="form">
<h3>Options</h3>
<Field name="file" type="file" onChange={this.handleChange}/>
<Field name="file" type="file" onChange={this.handleChange} />
{this.optionsToFields()}
</div>
</aside>
@@ -83,14 +82,25 @@ class Demo extends Component {
}
}

function Field({name, type = 'text', value, options = [], onChange}) {
let input = <input {...{name, type, value, onChange}} />
if (type === 'boolean') input = <input {...{name, onChange}} type="checkbox" checked={value} className="custom-checkbox-input" />
else if (type === 'select') input = (
<select {...{name, value, onChange}}>
{options.map(option => <option key={option}>{option}</option>)}
</select>
)
function Field({ name, type = 'text', value, options = [], onChange }) {
let input = <input {...{ name, type, value, onChange }} />
if (type === 'boolean')
input = (
<input
{...{ name, onChange }}
type="checkbox"
checked={value}
className="custom-checkbox-input"
/>
)
else if (type === 'select')
input = (
<select {...{ name, value, onChange }}>
{options.map(option => (
<option key={option}>{option}</option>
))}
</select>
)
return (
<label className={clsx('field', type === 'checkbox' && 'checkbox')}>
<span>{name}</span>
@@ -99,17 +109,18 @@ function Field({name, type = 'text', value, options = [], onChange}) {
)
}

const isObject = (value) => value && typeof value === 'object' && value.constructor === Object
const isObject = value =>
value && typeof value === 'object' && value.constructor === Object

const isBoolean = (value) => typeof value === 'boolean'
const isBoolean = value => typeof value === 'boolean'

const parseEvent = (target) => {
const parseEvent = target => {
const name = target.name
let value = target.value
if (target.type === 'checkbox') value = target.checked
else if (target.type === 'file') value = target.files[0]
else if (!isNaN(Number(value))) value = Number(value)
return {name, value}
return { name, value }
}

export default Demo
@@ -1,8 +1,9 @@
import React from 'react'

const Loader = ({ id }) =>
const Loader = ({ id }) => (
<div className="villain-overlay" id={id}>
<div className="villain-loader-indicator" />
</div>
)

export default React.memo(Loader)

0 comments on commit 3037e8f

Please sign in to comment.
You can’t perform that action at this time.