Skip to content

Commit

Permalink
Initial support for ace editor theme preview
Browse files Browse the repository at this point in the history
  • Loading branch information
jcheng5 committed Mar 18, 2011
1 parent 3ca343d commit cea598a
Show file tree
Hide file tree
Showing 7 changed files with 171 additions and 9 deletions.
Expand Up @@ -58,6 +58,12 @@ public void onLoaded()

public ExternalJavaScriptLoader(String url)
{
this(Document.get(), url);
}

public ExternalJavaScriptLoader(Document document, String url)
{
document_ = document;
url_ = url;
}

Expand All @@ -83,11 +89,11 @@ public void addCallback(Callback callback)
private void startLoading()
{
assert state_ == State.Start;
ScriptElement script = Document.get().createScriptElement();
ScriptElement script = document_.createScriptElement();
script.setType("text/javascript");
script.setSrc(url_);
registerCallback(script);
Element head = Document.get().getElementsByTagName("head").getItem(0);
Element head = document_.getElementsByTagName("head").getItem(0);
head.appendChild(script);
}

Expand Down Expand Up @@ -121,4 +127,5 @@ public boolean execute()
private LinkedList<Callback> callbacks_ = new LinkedList<Callback>();
private State state_ = State.Start;
private final String url_;
private final Document document_;
}
50 changes: 50 additions & 0 deletions src/gwt/src/org/rstudio/core/client/widget/DynamicIFrame.java
@@ -0,0 +1,50 @@
package org.rstudio.core.client.widget;

import com.google.gwt.core.client.GWT;
import com.google.gwt.dom.client.Document;
import com.google.gwt.resources.client.ClientBundle;
import com.google.gwt.user.client.ui.Frame;
import org.rstudio.core.client.dom.IFrameElementEx;
import org.rstudio.core.client.dom.WindowEx;
import org.rstudio.core.client.resources.StaticDataResource;

public abstract class DynamicIFrame extends Frame
{
interface Resources extends ClientBundle
{
@Source("dynamicFrame.html")
StaticDataResource dynamicFrame();
}

public DynamicIFrame()
{
Resources res = GWT.create(Resources.class);
setUrl(res.dynamicFrame().getUrl());
attachCallback();
}

protected abstract void onFrameLoaded();

protected IFrameElementEx getIFrame()
{
return getElement().cast();
}

protected WindowEx getWindow()
{
return getIFrame().getContentWindow();
}

protected final Document getDocument()
{
return getWindow().getDocument();
}

private native final void attachCallback() /*-{
var self = this;
var el = this.@com.google.gwt.user.client.ui.UIObject::getElement()();
el.__dynamic_init__ = $entry(function() {
self.@org.rstudio.core.client.widget.DynamicIFrame::onFrameLoaded()();
});
}-*/;
}
12 changes: 12 additions & 0 deletions src/gwt/src/org/rstudio/core/client/widget/dynamicFrame.html
@@ -0,0 +1,12 @@
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
window.onload = function() {
if (window.frameElement && window.frameElement.__dynamic_init__)
window.frameElement.__dynamic_init__();
};
</script>
</head>
<body></body>
</html>
@@ -0,0 +1,82 @@
package org.rstudio.studio.client.workbench.prefs.views;

import com.google.gwt.dom.client.*;
import com.google.gwt.dom.client.Style.BorderStyle;
import com.google.gwt.dom.client.Style.Unit;
import org.rstudio.core.client.ExternalJavaScriptLoader;
import org.rstudio.core.client.ExternalJavaScriptLoader.Callback;
import org.rstudio.core.client.widget.DynamicIFrame;
import org.rstudio.studio.client.workbench.views.source.editors.text.ace.AceResources;

public class AceEditorPreview extends DynamicIFrame
{
public AceEditorPreview()
{
Style style = getStyleElement().getStyle();
style.setBorderColor("#CCC");
style.setBorderWidth(1, Unit.PX);
style.setBorderStyle(BorderStyle.SOLID);
style.setWidth(85, Unit.PCT);

}

@Override
protected void onFrameLoaded()
{
isFrameLoaded_ = true;
if (initialThemeUrl_ != null)
setTheme(initialThemeUrl_);

final Document doc = getDocument();
final BodyElement body = doc.getBody();
body.getStyle().setMargin(0, Unit.PX);

StyleElement style = doc.createStyleElement();
style.setType("text/css");
style.setInnerText(".ace_editor {border: none !important;}");
body.appendChild(style);

DivElement div = doc.createDivElement();
div.setId("editor");
div.getStyle().setWidth(100, Unit.PCT);
div.getStyle().setHeight(100, Unit.PCT);
div.setInnerText("hello");
body.appendChild(div);

ExternalJavaScriptLoader loader = new ExternalJavaScriptLoader(
doc, AceResources.INSTANCE.acejs().getUrl());
loader.addCallback(new Callback()
{
public void onLoaded()
{
body.appendChild(doc.createScriptElement(
"var editor = ace.edit('editor');\n" +
"editor.renderer.setHScrollBarAlwaysVisible(false);\n" +
"editor.setHighlightActiveLine(false);"));
}
});
}

public void setTheme(String themeUrl)
{
if (!isFrameLoaded_)
{
initialThemeUrl_ = themeUrl;
return;
}

if (currentStyleLink_ != null)
currentStyleLink_.removeFromParent();

Document doc = getDocument();
currentStyleLink_ = doc.createLinkElement();
currentStyleLink_.setRel("stylesheet");
currentStyleLink_.setType("text/css");
currentStyleLink_.setHref(themeUrl);
doc.getBody().appendChild(currentStyleLink_);
}

private LinkElement currentStyleLink_;
private boolean isFrameLoaded_;
private String initialThemeUrl_;
}
@@ -1,5 +1,7 @@
package org.rstudio.studio.client.workbench.prefs.views;

import com.google.gwt.event.dom.client.ChangeEvent;
import com.google.gwt.event.dom.client.ChangeHandler;
import com.google.gwt.resources.client.ImageResource;
import com.google.gwt.user.client.ui.ListBox;
import com.google.inject.Inject;
Expand All @@ -11,7 +13,7 @@ public class AppearancePreferencesPane extends PreferencesPane
@Inject
public AppearancePreferencesPane(PreferencesDialogResources res,
UIPrefs uiPrefs,
AceThemes themes)
final AceThemes themes)
{
res_ = res;
uiPrefs_ = uiPrefs;
Expand Down Expand Up @@ -39,8 +41,21 @@ public AppearancePreferencesPane(PreferencesDialogResources res,
theme_ = new SelectWidget("Editor Theme",
themes.getThemeNames(),
themes.getThemeNames());
theme_.getListBox().addChangeHandler(new ChangeHandler()
{
public void onChange(ChangeEvent event)
{
ListBox list = theme_.getListBox();
preview_.setTheme(
themes.getThemeUrl(list.getValue(list.getSelectedIndex())));
}
});
add(theme_);
theme_.setValue(themes.getEffectiveThemeName(uiPrefs_.theme().getValue()));

preview_ = new AceEditorPreview();
preview_.setTheme(themes.getThemeUrl(uiPrefs_.theme().getValue()));
add(preview_);
}

@Override
Expand Down Expand Up @@ -69,4 +84,5 @@ public String getName()
private final UIPrefs uiPrefs_;
private SelectWidget fontSize_;
private SelectWidget theme_;
private AceEditorPreview preview_;
}
Expand Up @@ -2,8 +2,6 @@

import com.google.gwt.event.dom.client.ClickEvent;
import com.google.gwt.event.dom.client.ClickHandler;
import com.google.gwt.event.logical.shared.ValueChangeEvent;
import com.google.gwt.event.logical.shared.ValueChangeHandler;
import com.google.gwt.resources.client.ImageResource;
import com.google.gwt.user.client.ui.CheckBox;
import com.google.gwt.user.client.ui.RadioButton;
Expand All @@ -16,9 +14,6 @@
import org.rstudio.studio.client.application.Desktop;
import org.rstudio.studio.client.common.FileDialogs;
import org.rstudio.studio.client.common.SimpleRequestCallback;
import org.rstudio.studio.client.common.Value;
import org.rstudio.studio.client.server.ServerError;
import org.rstudio.studio.client.server.ServerRequestCallback;
import org.rstudio.studio.client.workbench.model.RemoteFileSystemContext;
import org.rstudio.studio.client.workbench.model.WorkbenchServerOperations;
import org.rstudio.studio.client.workbench.prefs.model.RPrefs;
Expand Down Expand Up @@ -78,7 +73,6 @@ public void onClick(ClickEvent event)

add(cranMirror_);
}


saveWorkspace_ = new SelectWidget(
"Save workspace on exit?",
Expand Down
Expand Up @@ -64,6 +64,7 @@ public void onClick(ClickEvent event)
for (final PreferencesPane pane : panes_)
{
sectionChooser.addSection(pane.getIcon(), pane.getName());
pane.setWidth("100%");
container_.add(pane);
container_.setWidgetLeftRight(pane, 12, Unit.PX, 0, Unit.PX);
container_.setWidgetTopBottom(pane, 0, Unit.PX, 0, Unit.PX);
Expand Down

0 comments on commit cea598a

Please sign in to comment.