Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Stashing work towards interaction editors.

The way that the App view works, other views
are not aware of when their content is hidden or
revealed within toggler interfaces. Unfortunately,
for stuff like CodeMirror, that means that it initializes
without any ClientWidths available, and then when the
toggler button is clicked, you can't grab the event
after the App view does. I think that this should
possibly spawn a top-down event for visibility changing
in app views.

Currently this means that we have mustache and HTML
highlighting, but it isn't active until you
check out the element with Web Developer extensions.
CodeMirror's .refresh() method doesn't work - it's
unclear whether this is really a CodeMirror bug or
some odd browser bug, but it exists in Firefox, Chrome,
and Safari.

This is on the road to addressing #838
  • Loading branch information...
commit 0fa913487d5c3dce5511bf2b8a50430b6660288c 1 parent 961a1a2
@tmcw tmcw authored
View
8 assets/css/code.css
@@ -23,6 +23,7 @@ div.CodeMirror-gutter-text pre.error {
cursor:pointer;
}
+/* Carto */
span.cm-carto-variable { color:#708; }
span.cm-carto-color-variable { color:#B60049; }
span.cm-carto-unit { color:#281; }
@@ -37,3 +38,10 @@ span.cm-carto-punctuation { color:#666; }
span.cm-carto-comment { color:#999; }
span.cm-carto-string { color:#8010a0; }
span.cm-carto-filter { color:#66475B; }
+
+/* Mustache */
+span.cm-mustache { color:#B60049; }
+span.cm-string { color:#8010a0; }
+span.cm-attribute { color:#281; }
+span.cm-tag { color:#708; }
+span.cm-error { background:#fe8; }
View
19 assets/css/style.css
@@ -945,6 +945,25 @@ textarea {
-webkit-box-sizing:border-box;
}
+.input-codemirror textarea {
+ height:100px;
+ width:450px;
+}
+
+.input-codemirror .CodeMirror {
+ background:#f8f8f8;
+ border:1px solid #ccc;
+ border-color:#ccc #ddd #ddd;
+ box-shadow:inset #ddd 0px 2px 3px;
+ -moz-box-shadow:inset #ddd 0px 2px 3px;
+ -webkit-box-shadow:inset #ddd 0px 2px 3px;
+ box-sizing:border-box;
+ -moz-box-sizing:border-box;
+ -webkit-box-sizing:border-box;
+ height:100px;
+ width:450px;
+}
+
textarea {
height:auto;
resize:none;
View
18 assets/js/codemirror.mustache.js
@@ -1,14 +1,18 @@
-CodeMirror.defineMode("mustache", function(config, parserConfig) {
+CodeMirror.defineMode('mustache', function(config, parserConfig) {
var mustacheOverlay = {
token: function(stream, state) {
- if (stream.match("{{")) {
+ if (stream.match('{{{')) {
while ((ch = stream.next()) != null)
- if (ch == "}" && stream.next() == "}") break;
- return "mustache";
+ if (ch == '}' && stream.next() == '}' && stream.next() == '}') break;
+ return 'mustache';
+ } else if (stream.match('{{')) {
+ while ((ch = stream.next()) != null)
+ if (ch == '}' && stream.next() == '}') break;
+ return 'mustache';
}
- while (stream.next() != null && !stream.match("{{", false)) {}
+ while (stream.next() != null && !stream.match('{{', false)) {}
return null;
}
};
- return CodeMirror.overlayParser(CodeMirror.getMode(config, parserConfig.backdrop || "text/html"), mustacheOverlay);
-});
+ return CodeMirror.overlayParser(CodeMirror.getMode(config, parserConfig.backdrop || 'text/html'), mustacheOverlay);
+});
View
4 templates/Settings._
@@ -99,12 +99,12 @@
</li>
<li class='dependent'>
<label>Teaser<small class='description'>Basic HTML</small></label>
- <textarea cols='60' rows='2' name='template_teaser'><%= (get('interactivity') || {}).template_teaser %></textarea>
+ <div class='input-codemirror'><textarea cols='60' rows='2' name='template_teaser'><%= (get('interactivity') || {}).template_teaser %></textarea></div>
<div class='preview'></div>
</li>
<li class='dependent'>
<label>Full<small class='description'>Basic HTML</small></label>
- <textarea cols='60' rows='2' name='template_full'><%= (get('interactivity') || {}).template_full %></textarea>
+ <div class='input-codemirror'><textarea cols='60' rows='2' name='template_full'><%= (get('interactivity') || {}).template_full %></textarea></div>
<div class='preview'></div>
</li>
<li class='buttons'>
View
62 views/Settings.bones
@@ -3,24 +3,18 @@ view = Backbone.View.extend();
view.prototype.events = {
'click input[type=submit]': 'save',
'change select[name=layer]': 'attach',
+ 'click a[href=#settingsTooltips]': 'refresh',
'keyup input[name=template_location]': 'preview',
- 'keyup textarea[name=template_teaser]': 'preview',
- 'keyup textarea[name=template_full]': 'preview',
'focus input[name=template_location]': 'preview',
- 'focus textarea[name=template_teaser]': 'preview',
- 'focus textarea[name=template_full]': 'preview',
- 'blur textarea[name=template_teaser]': 'collapse',
- 'blur textarea[name=template_full]': 'collapse'
};
view.prototype.initialize = function(options) {
- _(this).bindAll('render', 'save', 'attach', 'zoom', 'preview', 'collapse');
+ _(this).bindAll('render', 'save', 'attach', 'zoom', 'preview', 'refresh');
this.render().attach();
};
view.prototype.preview = function(ev) {
var target = $(ev.currentTarget);
- target.addClass('expand');
var format = target.attr('name').split('template_').pop();
var feature = this.datasource.get('features')[0];
try {
@@ -31,10 +25,9 @@ view.prototype.preview = function(ev) {
}
};
-view.prototype.collapse = function(ev) {
- var target = $(ev.currentTarget);
- target.removeClass('expand');
- target.siblings('.preview').html('');
+view.prototype.refresh = function() {
+ this.mirror_teaser.refresh();
+ this.mirror_full.refresh();
};
view.prototype.render = function() {
@@ -51,10 +44,6 @@ view.prototype.render = function() {
// Focus name field for unnamed projects.
if (!this.model.get('name')) this.$('input[type=text]:first').focus();
- var template_location_mirror = CodeMirror(this.$('input[name=template_location]').get(0), {
- lineNumbers: true,
- mode: "mustache"
- });
return this;
};
@@ -72,11 +61,10 @@ view.prototype.save = function() {
'format': this.$('select[name=format]').val(),
'minzoom': parseInt(this.$('.slider').slider('values', 0)),
'maxzoom': parseInt(this.$('.slider').slider('values', 1)),
- 'interactivity': this.$('select[name=layer]').val() ?
- {
+ 'interactivity': this.$('select[name=layer]').val() ? {
'layer': this.$('select[name=layer]').val(),
- 'template_teaser': this.$('textarea[name=template_teaser]').val(),
- 'template_full': this.$('textarea[name=template_full]').val(),
+ 'template_teaser': this.mirror_teaser.getVal(),
+ 'template_full': this.mirror_full.getVal(),
'template_location': this.$('input[name=template_location]').val(),
} :
false,
@@ -129,7 +117,41 @@ view.prototype.attach = function() {
}).join(' '));
this.$('.dependent').show();
+
+ this.mirrorChange = _(function(ed) {
+ var val = ed.getValue(),
+ feature = this.datasource.get('features')[0];
+ try {
+ $(ed.getWrapperElement()).parent().siblings('.preview').html(
+ wax.template(val).format(false, feature));
+ } catch(err) {
+ $(ed.getWrapperElement()).parent().siblings('.preview').html(err.toString());
+ }
+ }).bind(this);
+
$('#popup').removeClass('loading');
+
+ if (this.mirror_teaser) {
+ this.mirror_teaser.refresh();
+ } else {
+ this.mirror_teaser = CodeMirror.fromTextArea(
+ this.$('textarea[name=template_teaser]').get(0), {
+ onChange: this.mirrorChange,
+ onFocus: this.mirrorChange,
+ mode: 'mustache'
+ });
+ }
+
+ if (this.mirror_full) {
+ this.mirror_full.refresh();
+ } else {
+ this.mirror_full = CodeMirror.fromTextArea(
+ this.$('textarea[name=template_full]').get(0), {
+ onChange: this.mirrorChange,
+ onFocus: this.mirrorChange,
+ mode: 'mustache'
+ });
+ }
}).bind(this);
// Cache the datasource model to `this.datasource` so it can
Please sign in to comment.
Something went wrong with that request. Please try again.