Skip to content

Commit

Permalink
Merge pull request #1 from blast-hardcheese/color-cleanup
Browse files Browse the repository at this point in the history 
Color cleanup
  • Loading branch information
@blast-hardcheese
blast-hardcheese committed Dec 15, 2015
2 parents d4f0299 + d3eccb6 commit 3997e04
Show file tree
Hide file tree
Showing 8 changed files with 119 additions and 61 deletions.
33 changes: 23 additions & 10 deletions app/assets/javascripts/editor.ts
View file
Expand Up @@ -6,9 +6,13 @@ interface PageInfo {
saveUrl: string;
}

interface PageMeta {
title: string;
}

interface PageData {
data: any;
title: string;
_meta: PageMeta;
}

declare var PageInfo: PageInfo;
Expand Down Expand Up @@ -44,11 +48,20 @@ jQuery(function($) {
e.preventDefault();
e.stopPropagation();

var _pageData = _.extend({}, PageData);

delete _pageData['_meta'];

var postData = {
title: PageData._meta.title,
data: _pageData,
};

$.ajax({
type: 'PUT',
url: PageInfo.saveUrl,
contentType: 'application/json',
data: JSON.stringify(PageData),
data: JSON.stringify(postData),
}).then(function() {
console.info('Success!');
toastr.success('Success!');
Expand All @@ -59,10 +72,10 @@ jQuery(function($) {
});

$('#title')
.val(deepGet(PageData, 'title'))
.val(deepGet(PageData, '_meta', 'title'))
.typeWatch({
callback: function (value) {
deepSet(PageData, value, 'title');
deepSet(PageData, value, '_meta', 'title');

updateTextArea();
},
Expand All @@ -72,14 +85,14 @@ jQuery(function($) {
});

$('#custom-code')
.val(deepGet(PageData, 'data', 'metadata', 'custom'))
.val(deepGet(PageData, 'metadata', 'custom'))
.typeWatch({
callback: function (value) {
if (value.length === 0) {
var metadata = deepGet(PageData, 'data', 'metadata');
var metadata = deepGet(PageData, 'metadata');
delete metadata['custom'];
} else {
deepSet(PageData, value, 'data', 'metadata', 'custom');
deepSet(PageData, value, 'metadata', 'custom');
}


Expand All @@ -91,14 +104,14 @@ jQuery(function($) {
});

$('#ga-trackingId')
.val(deepGet(PageData, 'data', 'metadata', 'ga', 'trackingId'))
.val(deepGet(PageData, 'metadata', 'ga', 'trackingId'))
.typeWatch({
callback: function (value) {
if (value.length === 0) {
var metadata = deepGet(PageData, 'data', 'metadata');
var metadata = deepGet(PageData, 'metadata');
delete metadata['ga'];
} else {
deepSet(PageData, value, 'data', 'metadata', 'ga', 'trackingId');
deepSet(PageData, value, 'metadata', 'ga', 'trackingId');
}

updateTextArea();
Expand Down
12 changes: 12 additions & 0 deletions app/assets/javascripts/mixins.ts
View file
Expand Up @@ -51,6 +51,18 @@ var Utils = {
}
return newprops;
},

buildToggleState: function(...keys: string[]) {
return function() {
var _this = this;
var newState = _.foldl<string, any>(keys, function(a, key) {
a[key] = ! _this.state[key];
return a;
}, {});

this.setState(newState);
};
},
};

var Updatable = {
Expand Down
52 changes: 42 additions & 10 deletions app/assets/javascripts/templates.jsx
View file
Expand Up @@ -6,8 +6,16 @@ var dynamicTplValues = function(selector) {
function TemplateManager(key, data) {
var _this = this;

data = _.extend({templateId: key}, data, {
editable: Boolean(data.sandbox || data.saveUrl),
data = _.extend({
templateId: key,
_meta: {
saveUrl: null,
title: null
}
}, data);

data = _.extend(data, {
editable: Boolean(data.sandbox || data._meta.saveUrl),
updated: function (newData) {
_this.refresh(newData);
}
Expand Down Expand Up @@ -95,6 +103,13 @@ var TemplateHelperMixin = {
var ColorPicker = React.createClass({
mixins: [Utils, Updatable, TemplateHelperMixin],

getInitialState: function() {
return {
showColors: false,
showCustom: false,
};
},

update: function (idx) {
this.deepUpdated('css', {
scheme: idx
Expand All @@ -121,9 +136,12 @@ var ColorPicker = React.createClass({
};
},

toggleColors: Utils.buildToggleState('showColors'),
toggleCustom: Utils.buildToggleState('showCustom'),

render: function() {
// If we can't save and we're not in a sandbox, don't even show the save buttons
if (!this.props.saveUrl && !this.props.sandbox) return null;
if (!this.props._meta.saveUrl && !this.props.sandbox) return null;
if (typeof $ === 'undefined' || $('style#dynamic').length === 0) return null;

var _this = this;
Expand Down Expand Up @@ -152,10 +170,19 @@ var ColorPicker = React.createClass({
);
});

var showCustom: boolean = this.state.showCustom;

var toggleCustomLabel: string = (showCustom ? 'Hide' : 'Show') + ' Color Customizer';
choices.push(<button style={{
display: 'block',
}} onClick={this.toggleCustom}>{toggleCustomLabel}</button>);

var defaultValues = this.getDefaultCssValues();
choices.push(<div className='color-customizer' style={{
border: '1px solid black',
backgroundColor: 'white',
overflow: 'auto',
display: showCustom ? 'block' : 'none',
}} key={-1}>
{_.map(this.getCssValues(), function(value, key) {
return <div key={key} style={{
Expand Down Expand Up @@ -186,9 +213,14 @@ var ColorPicker = React.createClass({
})}
</div>);

var showColors: boolean = this.state.showColors;
var toggleColorLabel = (showColors ? 'Hide' : 'Show') + ' Color Schemes';
return (
<div className='color-picker' style={{float: 'left'}}>
{choices}
<button style={{
display: 'block',
}} onClick={this.toggleColors}>{toggleColorLabel}</button>
{showColors ? choices : []}
</div>
);
},
Expand All @@ -209,12 +241,12 @@ var EditButtons = React.createClass({
var templateId = pageData.templateId;

delete pageData.editable;
delete pageData.saveUrl;
delete pageData._meta;
delete pageData.title;
delete pageData.updated;
delete pageData.templateId;

var title = this.props.title;
var title = this.props._meta.title;

var data = {
title: title,
Expand All @@ -225,7 +257,7 @@ var EditButtons = React.createClass({
contentType: 'application/json',
data: JSON.stringify(data),
method: 'PUT',
url: this.props.saveUrl + '?templateId=' + templateId,
url: this.props._meta.saveUrl + '?templateId=' + templateId,
error: function() {
console.error('Unable to save');
toastr.error('Unable to save');
Expand All @@ -239,7 +271,7 @@ var EditButtons = React.createClass({

render: function() {
// If we can't save and we're not in a sandbox, don't even show the save buttons
if (!this.props.saveUrl && !this.props.sandbox) return null;
if (!this.props._meta.saveUrl && !this.props.sandbox) return null;

var toggleEditButton = null;
var saveButton = null;
Expand All @@ -254,7 +286,7 @@ var EditButtons = React.createClass({
toggleEditButton = <button style={buttonStyle} onClick={this.setEditable.bind(this, true)}>Enable Editing</button>;
}

if (this.props.saveUrl) {
if (this.props._meta.saveUrl) {
saveButton = <button style={buttonStyle} onClick={this.performSave}>Save</button>;
}

Expand Down Expand Up @@ -354,7 +386,7 @@ var AddWidgetPopup = React.createClass({

render: function() {
// If we can't save and we're not in a sandbox, don't even show the save buttons
if (!this.props.saveUrl && !this.props.sandbox) return null;
if (!this.props._meta.saveUrl && !this.props.sandbox) return null;

var _this = this;

Expand Down
10 changes: 8 additions & 2 deletions app/utils/views.scala
View file
@@ -1,7 +1,9 @@
package utils

import play.twirl.api._
import play.api.libs.json.{ Json, JsValue, JsObject }
import play.api.libs.json.{ Json, JsValue, JsObject, JsString }

import javax.script.ScriptEngine

case class PageData(saveUrl: Option[String], title: String)
object PageData {
Expand All @@ -11,7 +13,7 @@ object PageData {
package object views {
def encodePageData(saveUrl: Option[String], title: String, data: JsValue): Html = {
val newData: JsObject = (
Json.toJson(PageData(saveUrl, title)).asInstanceOf[JsObject] ++
Json.obj("_meta" -> Json.toJson(PageData(saveUrl, title)).asInstanceOf[JsObject]) ++
data.asInstanceOf[JsObject]
)

Expand All @@ -30,5 +32,9 @@ package object views {

Html(Json.stringify(maybeCloudinary getOrElse Json.obj()))
}

def createElement(templateId: Html, key: String, pageData: JsValue)(engine: ScriptEngine): Html = {
Html(engine.eval(s"React.renderToString(React.createElement(Templates[$templateId].classes[${JsString(key)}], _.extend({editable: false, _meta: {}}, $pageData)));").toString)
}
}

5 changes: 1 addition & 4 deletions app/views/account/edit.scala.html
View file
Expand Up @@ -25,10 +25,7 @@
path: @Html(Json.stringify(JsString(vm.page.path))),
saveUrl: @Html(Json.stringify(JsString(routes.Application.save(domain, vm.page.path, templateId=vm.template_key).toString()))),
};
PageData = {
title: @Html(Json.stringify(JsString(vm.page.title))),
data: @Html(Json.stringify(vm.page.data))
};
var PageData = @utils.views.encodePageData(None, vm.page.title, vm.page.data);
</script>

<script src="@routes.Assets.at("javascripts/editor.js")" type="text/javascript"></script>
Expand Down
18 changes: 10 additions & 8 deletions app/views/templates/html5up_prologue.scala.html
View file
Expand Up @@ -7,8 +7,6 @@

@import play.api.libs.json.Json

@jsSaveUrl = @{ saveUrl.map(JsString.apply _).getOrElse(JsNull) }

@sharedCssPath(path: String) = @{ routes.Assets.at("stylesheets/html5up/" + path) }
@cssPath(path: String) = @{ routes.Assets.at(s"stylesheets/$templateId/" + path) }

Expand All @@ -30,6 +28,10 @@
display: none; // Why is this necessary?!
}
</style>

<style id="dynamic" type="text/css"></style>
<style id="dynamic-tpl" type="text/underscore">
</style>
}

@afterBody = {
Expand Down Expand Up @@ -99,33 +101,33 @@
});
</script>

@Html(engine.eval(s"React.renderToString(React.createElement(Templates[$templateIdJson].classes['#metadata'], _.extend({editable: false}, $pageData)));").toString)
@utils.views.createElement(templateIdJson, "#metadata", pageData)(engine)

}

@main(renderModel.title)(header, afterBody) {
<div id="add-popup">
@Html(engine.eval(s"React.renderToString(React.createElement(Templates[$templateIdJson].classes['#add-popup'], _.extend({editable: false}, $pageData)));").toString)
@utils.views.createElement(templateIdJson, "#add-popup", pageData)(engine)
</div>

<div id="wrapper">
<!-- Header -->
<div id="header-wrapper" class="skel-layers-fixed">
@Html(engine.eval(s"React.renderToString(React.createElement(Templates[$templateIdJson].classes['#header-wrapper'], _.extend({editable: false}, $pageData)));").toString)
@utils.views.createElement(templateIdJson, "#header-wrapper", pageData)(engine)
</div>

<!-- Main -->
<div id="main-wrapper">
@Html(engine.eval(s"React.renderToString(React.createElement(Templates[$templateIdJson].classes['#main-wrapper'], _.extend({editable: false}, $pageData)));").toString)
@utils.views.createElement(templateIdJson, "#main-wrapper", pageData)(engine)
</div>

<!-- Footer -->
<section id="footer">
@Html(engine.eval(s"React.renderToString(React.createElement(Templates[$templateIdJson].classes['#footer'], _.extend({editable: false}, $pageData)));").toString)
@utils.views.createElement(templateIdJson, "#footer", pageData)(engine)
</section>

<div id="admin-buttons">
@Html(engine.eval(s"React.renderToString(React.createElement(Templates[$templateIdJson].classes['#admin-buttons'], _.extend({editable: false}, $pageData)));").toString)
@utils.views.createElement(templateIdJson, "#admin-buttons", pageData)(engine)
</div>
</div>
}

0 comments on commit 3997e04

Please sign in to comment.