Skip to content

Commit

Permalink
New edit area and site feature editor rework
Browse files Browse the repository at this point in the history 
support for style search, resizing edit area and intelligent style
highlighting
  • Loading branch information
@cykod
cykod committed Mar 30, 2010
1 parent d03d0f6 commit 2974e02
Show file tree
Hide file tree
Showing 58 changed files with 255 additions and 831 deletions.
2 changes: 1 addition & 1 deletion app/views/edit/_set_template_features.rhtml
View file
Expand Up @@ -2,7 +2,7 @@ cmsEdit.clearTemplateFeatures();
<% @available_features.each do |template_id,feature_types| %>
<% feature_types.each do |feature_type,features| %>
cmsEdit.setTemplateFeatures(<%= template_id.to_i %>,"<%= feature_type %>",
new Array( <%= features.collect { |f| "['#{h(f[0])}',#{f[1]}]" }.join(",") %> )
new Array( <%= features.collect { |f| "['#{jh(f[0])}',#{f[1]}]" }.join(",") %> )
);
<% end -%>
<% end -%>
2 changes: 1 addition & 1 deletion app/views/templates/_style_selector.rhtml
View file
@@ -1,7 +1,7 @@
<% if styles -%>
<% styles.each do |style| -%>
<div class='template_style'>
<div title='<%= vh style[0] %>' style='background-color:#white; <%= vh default_styles %><%= vh display_style(merge_style(style,styles)) %>' onclick='TemplateEdit.selectStyle(<%= style[1] %>);'><%= h style[0] %></div>
<div class='template_title' title='<%= vh style[0] %>' style='background-color:#white; <%= vh default_styles %><%= vh display_style(merge_style(style,styles)) %>' onclick='TemplateEdit.selectStyle(<%= style[1] %>);'><%= h style[0] %></div>
</div>
<% end -%>
<% end -%>
66 changes: 57 additions & 9 deletions app/views/templates/edit.rhtml
View file
Expand Up @@ -73,13 +73,27 @@
$('zone_order').value = zone_order;

},

editorHeight: 0,

loadEditor: function() {
var offset = $('editor_content').cumulativeOffset();
var height = document.viewport.getHeight() - 215;

TemplateEdit.editorHeight = height;

style_height = height - 30;
$('struct_styles_display').style.height = style_height + "px";
$('design_styles_display').style.height = style_height + "px";
$('editor_content').style.height = height + "px";

$('editor_content').scrollTo();

editAreaLoader.init({
id: "editor_content" // id of the textarea to transform
,start_highlight: true
,allow_toggle: false
,min_height: 200
,language: "en"
,syntax: "html"
,toolbar: "search, go_to_line, |, undo, redo, |, select_font, |, change_smooth_selection, highlight, reset_highlight, |, help"
Expand Down Expand Up @@ -137,29 +151,53 @@

switchFile: function(file) {
TemplateEdit.currentFile = file.id;
$('struct_styles_display').hide();
$('design_styles_display').hide();
$('struct_styles_display_wrapper').hide();
$('design_styles_display_wrapper').hide();

if(file.id == 'style_struct') {
$('struct_styles_display').show();
$('struct_styles_display_wrapper').show();
}
else if(file.id == 'style_design') {
$('design_styles_display').show();
$('design_styles_display_wrapper').show();
}
// Force Syntax Changes
editAreaLoader.execCommand('editor_content','change_syntax',TemplateEdit.tabLanguages.get(file.id));

},

selectStyle: function(line) {
var rows_offset = Math.round( (TemplateEdit.editorHeight - 50) / 18 / 2);
// Shift the editor halfway down so the selected style isn't at the bottom of the screen
editAreaLoader.execCommand('editor_content','go_to_line',"" + (line + rows_offset));
editAreaLoader.execCommand('editor_content','go_to_line',"" + line);
},

loadVersion: function(version_id) {
if(confirm('<%= jh "Load a previous version of this template?".t %>')) {
document.location = '?version=' + version_id;
}
}

},
filterTimeout: null,
filterStylesWait: function(style,div) {
if(TemplateEdit.filterTimeout) clearTimeout(TemplateEdit.filterTimeout);
TemplateEdit.filterTimeout = setTimeout(function() { TemplateEdit.filterStyles(style,div); },200);
},

filterStyles: function(style,div) {
TemplateEdit.filterTimeout = null;
$(div + "_clear").style.display = style == '' ? 'none' : 'inline';
$(div).select('.template_title').each(function(s) {
if(style == '' || s.title.include(style))
s.parentNode.show();
else
s.parentNode.hide();
});
},

clearFilter: function(type) {
$(type + '_styles_search').value = '';
TemplateEdit.filterStyles('',type + "_styles_display");
}

};

Expand Down Expand Up @@ -213,8 +251,9 @@
if($('selected_language'))
output += '&selected_language=' + $('selected_language').value
return output;
}
}
};



</script>
Expand Down Expand Up @@ -251,12 +290,21 @@
<textarea name='editor_content' id='editor_content' style='width:100%; height:450px;'></textarea>
</td>
<td>
<div class='style_display' id='design_styles_display' style='display:none;'>
<div class='style_display_container admin_form' id='design_styles_display_wrapper' style='display:none;'>
SEARCH: <input type='text' id='design_styles_search' class='text_field' size='20' onkeyup='TemplateEdit.filterStylesWait(this.value,"design_styles_display");' onchange='TemplateEdit.filterStylesWait(this.value,"design_styles_display");' />
<button id='design_styles_display_clear' style='display:none;' onclick="TemplateEdit.clearFilter('design');">Clear</button>
<div class='style_display' id='design_styles_display'>
<%= render :partial => 'style_selector', :locals => { :styles => @design_styles, :default_styles => display_style(@default_design_styles) } %>
</div>
<div class='style_display' id='struct_styles_display' style='display:none;'>
</div>
<div class='style_display_container' id='struct_styles_display_wrapper' style='display:none;'>
SEARCH: <input type='text' id='struct_styles_search' class='text_field' size='20' onkeyup='TemplateEdit.filterStylesWait(this.value,"struct_styles_display");' onchange='TemplateEdit.filterStylesWait(this.value,"struct_styles_display");' />
<button id='struct_styles_display_clear' style='display:none;' onclick="TemplateEdit.clearFilter('struct');">Clear</button>

<div class='style_display' id='struct_styles_display'>
<%= render :partial => 'style_selector', :locals => { :styles => @struct_styles, :default_styles => display_style(@default_struct_styles) } %>
</div>
</div>
</td>
</tr>
</table>
Expand Down
110 changes: 88 additions & 22 deletions app/views/templates/feature.rhtml
View file
@@ -1,17 +1,72 @@

<script>
FeatureEditor = {

cssActive: false,

activateCss: function() {
editAreaLoader.init({
if(FeatureEditor.cssActive) return false;
editAreaLoader.init({
id: "feature_css" // id of the textarea to transform
,start_highlight: true // if start with highlight
,allow_resize: "y"
,min_height: 200
,language: "en"
,syntax: "css"
,change_callback: "FeatureEditor.fileChange"
});
FeatureEditor.activateCss = function() {};
});
},

activateFeature: function() {
editAreaLoader.init({
id: "feature_body" // id of the textarea to transform
,start_highlight: true // if start with highlight
,allow_resize: "no"
,min_height: 200
,allow_toggle: true
,language: "en"
,syntax: "html"
,show_line_colors: false
});
},

resizeTextarea: function() {
var height = document.viewport.getHeight();

var controls_height = 150 + $('top_controls').getHeight();
var elem_height = height - controls_height;


$('feature_body').style.height = elem_height + "px";
$('feature_documentation').style.height = elem_height + "px";
$('feature_css').style.height = elem_height + "px";
$('styles_display').style.height = elem_height + "px";
},

killerTimeout: null,
killedEditors: false,


killEditors: function(e) {
SCMS.select_tab_num(2);
FeatureEditor.resizeTextarea();
if(FeatureEditor.killerTimeout) clearTimeout(FeatureEditor.killerTimeout);
FeatureEditor.killerTimeout = setTimeout(FeatureEditor.activateEditors,700);

if(FeatureEditor.killedEditors) return false;
FeatureEditor.killedEditors = true;
editAreaLoader.delete_instance('feature_body');
if(FeatureEditor.cssACtive) {
editAreaLoader.delete_instance('feature_css');
FeatureEditor.cssActive = false;
}

},

activateEditors: function(e) {
FeatureEditor.killerTimeout = null;
FeatureEditor.killedEditors = false;

FeatureEditor.activateFeature();
},

fileChange: function(id) {
Expand Down Expand Up @@ -55,7 +110,20 @@ versionWarning: <%= @feature.current_version_id ? true : false %>,
if(confirm('<%= jh "Load a previous version of this feature?".t %>')) {
document.location = '<%= @reload_url %>version=' + version_id;
}
}
},

insertFeature: function(e,name,type) {
var tg,end_tg = "";
var elems = name.split(":");
var tg_name = elems[elems.length - 1];
if(e.ctrlKey) {
tg = "<cms:" + tg_name + ">";
end_tg = "</cms:" + tg_name + ">";
} else {
tg = "<cms:" + tg_name + " />";
}
editAreaLoader.insertTags('feature_body',tg,end_tg);
}

}

Expand All @@ -69,12 +137,14 @@ TemplateEdit = {

hljs.initHighlightingOnLoad();

Event.observe(document.onresize ? document : window, "resize",FeatureEditor.killEditors);

</script>



<form action='' onsubmit='FeatureEditor.saveChanges(); return false;' method='post' id='feature_form'>
<form action='' onsubmit='FeatureEditor.saveChanges(); return false;' method='post' id='feature_form' class='admin_form' >
<div id='top_controls'>
<div style='float:right' id='feature_versions'>
<%= render :partial => 'feature_versions' %>
</div>
Expand All @@ -91,6 +161,7 @@ hljs.initHighlightingOnLoad();
<input type='checkbox' name='ignore_xml_errors' id='ignore_xml_errors' value='1' /> <%= "Ignore XML Validation Errors (This is necessary for some advanced features)".t %>
</label>
</div>
</div>
<% ajax_tabs ['Options','Feature',['CSS','FeatureEditor.activateCss();']], 'Feature' do |t| -%>
<% t.tab do -%>
<div class='admin_content' id='feature_options'>
Expand Down Expand Up @@ -130,27 +201,18 @@ hljs.initHighlightingOnLoad();
<tr>
<td width='100%'>
<textarea id='feature_body' style='height:450px; width:100%;' name='feature[body]'><%= h @feature.body %></textarea>
<script>
editAreaLoader.init({
id: "feature_body" // id of the textarea to transform
,start_highlight: true // if start with highlight
,allow_resize: "no"
,min_height: 450
,allow_toggle: true
,language: "en"
,syntax: "html"
,show_line_colors: false
});

</script>
</td>
<td nowrap='1'>
<% if @doc -%>
<div id='feature_documentation' class='style_display' style='display:none; width:400px;'>
<% @doc.each do |tg| -%>
<div class='template_style'>
<div id='feature_documentation' class='style_display' style='display:none; width:400px;'>
<b>Click on a tag to insert it, Ctrl-click to insert a block</b>
<% @doc.each_with_index do |tg,idx| -%>
<div class='template_style' id="cms_feature_<%= idx %>" >
<%= "&nbsp;&nbsp;" * (tg[1].split(":").length) %>&lt;cms:<%= tg[1] %>&gt; - <%= tg[0].humanize %><br/>
</div>
<script>
$('cms_feature_<%= idx %>').observe('click',function(e) { return FeatureEditor.insertFeature(e,"<%= jh tg[1] %>","<%= jh tg[0] %>"); });
</script>
<% end -%>
</div>
<% end -%>
Expand Down Expand Up @@ -191,3 +253,7 @@ hljs.initHighlightingOnLoad();
</div>

</form>
<script type='text/javascript'>
FeatureEditor.resizeTextarea();
FeatureEditor.activateFeature();
</script>
2 changes: 1 addition & 1 deletion app/views/templates/save_feature.rjs
View file
Expand Up @@ -7,7 +7,7 @@ if @saved

if @paragraph_index
page.call("window.opener.cmsEdit.selectParagraphStyle",@paragraph_index,@feature.id)
page << "window.opener.cmsEdit.setTemplateFeatures(#{@feature.site_template_id.to_i},'#{@feature.feature_type}',new Array( #{@available_features.collect { |f| "['#{h(f[0])}',#{f[1]}]" }.join(",")}));"
page << "window.opener.cmsEdit.setTemplateFeatures(#{@feature.site_template_id.to_i},'#{@feature.feature_type}',new Array( #{@available_features.collect { |f| "['#{jh(f[0])}',#{f[1]}]" }.join(",")}));"
page << 'window.close()' if @return
elsif @return
page.redirect_to url_for(:action => 'features')
Expand Down

0 comments on commit 2974e02

Please sign in to comment.