Skip to content

Commit

Permalink
Added collapsing side panels
Browse files Browse the repository at this point in the history
  • Loading branch information
@bigtimebuddy
bigtimebuddy committed Nov 27, 2017
1 parent 5701503 commit 50720b7
Show file tree
Hide file tree
Showing 3 changed files with 172 additions and 112 deletions.
16 changes: 16 additions & 0 deletions css/main.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -101,6 +101,22 @@ h3 {
background-color: #d8d9e0;
}


.controls h4 {
cursor: pointer;
}

.controls .collapsed:before {
content: '\25B8';
display: inline-block;
width: 20px;
}
.controls .expanded:before {
content: '\25BE';
display: inline-block;
width: 20px;
}

.controls .row {
min-height:36px;
}
Expand Down
28 changes: 14 additions & 14 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,25 +6,25 @@
<link href="https://fonts.googleapis.com/css?family=Libre+Franklin:400,700" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/monokai-sublime.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/main.css?v=1">
<link rel="stylesheet" type="text/css" href="css/main.css?v=3">
</head>
<body>
<script src="https://pixijs.download/release/pixi.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mithril/1.1.1/mithril.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
<script src="js/utils/deepCopy.js?v=1"></script>
<script src="js/utils/deepEqual.js?v=1"></script>
<script src="js/components/StyleComponent.js?v=1"></script>
<script src="js/components/StyleCheckbox.js?v=1"></script>
<script src="js/components/StyleNumber.js?v=1"></script>
<script src="js/components/StyleSelect.js?v=1"></script>
<script src="js/components/StyleColor.js?v=1"></script>
<script src="js/components/StyleColorGradient.js?v=1"></script>
<script src="js/components/StyleStopPoints.js?v=1"></script>
<script src="js/components/StyleBackgroundColor.js?v=1"></script>
<script src="js/mixins/TextStyle.js?v=1"></script>
<script src="js/TextStyleEditor.js?v=2"></script>
<script src="js/main.js?v=1"></script>
<script src="js/utils/deepCopy.js?v=3"></script>
<script src="js/utils/deepEqual.js?v=3"></script>
<script src="js/components/StyleComponent.js?v=3"></script>
<script src="js/components/StyleCheckbox.js?v=3"></script>
<script src="js/components/StyleNumber.js?v=3"></script>
<script src="js/components/StyleSelect.js?v=3"></script>
<script src="js/components/StyleColor.js?v=3"></script>
<script src="js/components/StyleColorGradient.js?v=3"></script>
<script src="js/components/StyleStopPoints.js?v=3"></script>
<script src="js/components/StyleBackgroundColor.js?v=3"></script>
<script src="js/mixins/TextStyle.js?v=3"></script>
<script src="js/TextStyleEditor.js?v=3"></script>
<script src="js/main.js?v=3"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
Expand Down
240 changes: 142 additions & 98 deletions js/TextStyleEditor.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,19 @@ class TextStyleEditor {
// Placeholder for URL
this.shortenUrl = '';

// Save the panel layout
this.panels = localStorage.panels ? JSON.parse(localStorage.panels) : {
text: true,
font: true,
fill: false,
stroke: false,
layout: false,
shadow: false,
multiline: false,
texture: false,
background: false
};

// Restore the values or get the defaults
let values = {
text: localStorage.text || this.defaultText,
Expand Down Expand Up @@ -65,6 +78,11 @@ class TextStyleEditor {
this.app.stop();
}

onPanel(id) {
this.panels[id] = !this.panels[id];
localStorage.panels = JSON.stringify(this.panels);
}

view() {
const init = this.init.bind(this);
const onText = this.onText.bind(this);
Expand All @@ -74,6 +92,17 @@ class TextStyleEditor {
const onFormat = this.onFormat.bind(this);
const onShorten = this.onShorten.bind(this);

const panelOptions = (id) => {
return { class: this.panels[id] ? 'visible' : 'hidden' };
};

const panelToggle = (id) => {
return {
onclick: this.onPanel.bind(this, id),
class: this.panels[id] ? 'expanded': 'collapsed'
};
};

return m('div', {oncreate: init}, [
m('nav.controls', [
m('div.container-fluid', [
Expand All @@ -85,8 +114,8 @@ class TextStyleEditor {
' Reset'
])
]),
m('h4', 'Text'),
m('div.row', [
m('h4', panelToggle('text'), 'Text'),
m('div.pane.row', panelOptions('text'), [
m('div.col-sm-12', [
m('textarea.form-control#input', {
autofocus: true,
Expand All @@ -96,111 +125,126 @@ class TextStyleEditor {
])
]),

m('h4', 'Font'),
this.select('fontFamily', 'Font Family', [
'Arial',
'Arial Black',
'Comic Sans MS',
'Courier New',
'Georgia',
'Helvetica',
'Impact',
'Tahoma',
'Times New Roman',
'Verdana',
'Georgia, serif',
'"Palatino Linotype", "Book Antiqua", Palatino, serif',
'"Times New Roman", Times, serif',
'Arial, Helvetica, sans-serif',
'"Arial Black", Gadget, sans-serif',
'"Comic Sans MS", cursive, sans-serif',
'Impact, Charcoal, sans-serif',
'"Lucida Sans Unicode", "Lucida Grande", sans-serif',
'Tahoma, Geneva, sans-serif',
'"Trebuchet MS", Helvetica, sans-serif',
'Verdana, Geneva, sans-serif',
'"Courier New", Courier, monospace',
'"Lucida Console", Monaco, monospace'
]),
this.number('fontSize', 'Font Size', 1, 1),
this.select('fontStyle', 'Font Style', [
'normal',
'italic',
'oblique'
]),
this.select('fontVariant', 'Font Variant', [
'normal',
'small-caps'
]),
this.select('fontWeight', 'Font Weight', [
'normal',
'bold',
'bolder',
'lighter',
'100',
'200',
'300',
'400',
'500',
'600',
'700',
'800',
'900'
m('h4', panelToggle('font'), 'Font'),
m('div.pane', panelOptions('font'), [
this.select('fontFamily', 'Font Family', [
'Arial',
'Arial Black',
'Comic Sans MS',
'Courier New',
'Georgia',
'Helvetica',
'Impact',
'Tahoma',
'Times New Roman',
'Verdana',
'Georgia, serif',
'"Palatino Linotype", "Book Antiqua", Palatino, serif',
'"Times New Roman", Times, serif',
'Arial, Helvetica, sans-serif',
'"Arial Black", Gadget, sans-serif',
'"Comic Sans MS", cursive, sans-serif',
'Impact, Charcoal, sans-serif',
'"Lucida Sans Unicode", "Lucida Grande", sans-serif',
'Tahoma, Geneva, sans-serif',
'"Trebuchet MS", Helvetica, sans-serif',
'Verdana, Geneva, sans-serif',
'"Courier New", Courier, monospace',
'"Lucida Console", Monaco, monospace'
]),
this.number('fontSize', 'Font Size', 1, 1),
this.select('fontStyle', 'Font Style', [
'normal',
'italic',
'oblique'
]),
this.select('fontVariant', 'Font Variant', [
'normal',
'small-caps'
]),
this.select('fontWeight', 'Font Weight', [
'normal',
'bold',
'bolder',
'lighter',
'100',
'200',
'300',
'400',
'500',
'600',
'700',
'800',
'900'
]),
]),

m('h4', 'Fill'),
this.gradient('fill', 'Color'),
this.select('fillGradientType', 'Gradient Type', [
[0, 'linear vertical'],
[1, 'linear horizontal']
m('h4', panelToggle('fill'), 'Fill'),
m('div.pane', panelOptions('fill'), [
this.gradient('fill', 'Color'),
this.select('fillGradientType', 'Gradient Type', [
[0, 'linear vertical'],
[1, 'linear horizontal']
]),
this.stopPoints('fillGradientStops', 'Fill Gradient Stops', 0.1, 0, 1),
]),
this.stopPoints('fillGradientStops', 'Fill Gradient Stops', 0.1, 0, 1),

m('h4', 'Stroke'),
this.color('stroke', 'Color'),
this.number('strokeThickness', 'Thickness', 1, 0),
this.select('lineJoin', 'Line Join', [
'miter',
'round',
'bevel'

m('h4', panelToggle('stroke'), 'Stroke'),
m('div.pane', panelOptions('stroke'), [
this.color('stroke', 'Color'),
this.number('strokeThickness', 'Thickness', 1, 0),
this.select('lineJoin', 'Line Join', [
'miter',
'round',
'bevel'
]),
this.number('miterLimit', 'Miter Limit', 1, 0),
]),
this.number('miterLimit', 'Miter Limit', 1, 0),

m('h4', 'Layout'),
this.number('letterSpacing', 'Letter Spacing'),
this.select('textBaseline', 'Text Baseline', [
'alphabetic',
'bottom',
'middle',
'top',
'hanging'

m('h4', panelToggle('layout'), 'Layout'),
m('div.pane', panelOptions('layout'), [
this.number('letterSpacing', 'Letter Spacing'),
this.select('textBaseline', 'Text Baseline', [
'alphabetic',
'bottom',
'middle',
'top',
'hanging'
]),
]),

m('h4', 'Drop Shadow'),
this.checkbox('dropShadow', 'Enable'),
this.color('dropShadowColor', 'Color'),
this.number('dropShadowAlpha', 'Alpha', 0.1, 0, 1),
this.number('dropShadowAngle', 'Angle', 0.1),
this.number('dropShadowBlur', 'Blur'),
this.number('dropShadowDistance', 'Distance'),

m('h4', 'Multiline'),
this.checkbox('wordWrap', 'Enable'),
this.checkbox('breakWords', 'Break Words'),
this.select('align', 'Align', [
'left',
'center',
'right'
m('h4', panelToggle('shadow'), 'Drop Shadow'),
m('div.pane', panelOptions('shadow'), [
this.checkbox('dropShadow', 'Enable'),
this.color('dropShadowColor', 'Color'),
this.number('dropShadowAlpha', 'Alpha', 0.1, 0, 1),
this.number('dropShadowAngle', 'Angle', 0.1),
this.number('dropShadowBlur', 'Blur'),
this.number('dropShadowDistance', 'Distance'),
]),
this.number('wordWrapWidth', 'Wrap Width', 10, 0),
this.number('lineHeight', 'Line Height', 1, 0),

m('h4', 'Texture'),
this.number('padding', 'Padding'),
this.checkbox('trim', 'Trim'),
m('h4', panelToggle('multiline'), 'Multiline'),
m('div.pane', panelOptions('multiline'), [
this.checkbox('wordWrap', 'Enable'),
this.checkbox('breakWords', 'Break Words'),
this.select('align', 'Align', [
'left',
'center',
'right'
]),
this.number('wordWrapWidth', 'Wrap Width', 10, 0),
this.number('lineHeight', 'Line Height', 1, 0),
]),
m('h4', panelToggle('texture'), 'Texture'),
m('div.pane', panelOptions('texture'), [
this.number('padding', 'Padding'),
this.checkbox('trim', 'Trim'),
]),

m('h4', 'Background'),
m(StyleBackgroundColor, { parent: this, id: 'backgroundColor', name: 'Color' })
m('h4', panelToggle('background'), 'Background'),
m('div.pane', panelOptions('background'), [
m(StyleBackgroundColor, { parent: this, id: 'backgroundColor', name: 'Color' })
])
])
]),
m('main.main', [
Expand Down

0 comments on commit 50720b7

Please sign in to comment.