Skip to main content
[Date Prev][Date Next][Thread Prev][Thread Next][Date Index][Thread Index] [List Home]
Re: [orion-dev] CodeEdit change font size
Hi Libing,

I know :D
The whole point of me fiddling with the TextTheme internals was to get the API to do exactly that for me: Load the theme as link, and later just add additional style tags for the font size. I didn’t want to manually include the link tags on all of my pages because of maintenance reasons. 

But I went with another solution for that: Instead of changing the TextTheme class to get it to do what I want, I simply create the link tag for the prospecto theme dynamically myself (should have done that from the beginning) and then just specify the textTheme attribute in the editor options. And now everything works just fine :D

Thanks for all of your help,
Sebastian

P.S.: Here is the revised portion of my test file:
require.config({
                baseUrl: '../built-js/codeEdit',
                bundles: {
                    '../built-js/codeEdit/code_edit/built-codeEdit-amd.js': ['orion/codeEdit', 'orion/util']
                }
            });
            require(["orion/codeEdit", "orion/util"], function(mCodeEdit, util) {
                function loadTheme(themeName) {
                    var node = util.createElement(document, 'link');
                    node.rel = 'stylesheet';
                    node.type = 'text/css';
                    node.href = '' + themeName + '.css';
                    var head = document.getElementsByTagName('head')[0] || document.documentElement;
                    head.appendChild(node);
                }

                loadTheme('prospecto');

                var codeEdit = new mCodeEdit();
                var contents = 'var foo = "bar";';
                codeEdit.create({parent: "embeddedEditor"}).then(function(editorViewer) {
                    editorViewer.editor.getTextView().setOptions({
                        themeClass: 'prospecto'
                    });
                    editorViewer.settings.contentAssistAutoTrigger = true;

                    editorViewer.setContents(contents, "application/_javascript_");

                    window.editorViewer = editorViewer;
                });
            });

Am 03.12.2015 um 20:51 schrieb Libing Wang <Libing_Wang@xxxxxxxxxx>:

Hi Sebastian:
I copied the one from Orion and changed the keyword color to blue and reproduced the issue.
The solution is to load the prospecto.css once, in your html file. The rest of your code just remains the saem.
 <link rel="stylesheet" type="text/css" href=""/>

Please let me know if this works for you.
Thanks,
Libing



From:        Libing Wang/Ottawa/IBM@IBMCA
To:        Orion developer discussions <orion-dev@xxxxxxxxxxx>
Date:        12/03/2015 02:36 PM
Subject:        Re: [orion-dev] CodeEdit change font size
Sent by:        orion-dev-bounces@xxxxxxxxxxx



Hi Sebastian:
Could you send me your prospecto.css as well? Then I can simulate completely your situation here.

Thanks,
Libing



From:        Sebastian Pahnke <pahnke.sebastian@xxxxxxxxx>
To:        Orion developer discussions <orion-dev@xxxxxxxxxxx>
Date:        12/02/2015 03:27 PM
Subject:        Re: [orion-dev] CodeEdit change font size
Sent by:        orion-dev-bounces@xxxxxxxxxxx



Just to be sure here is the source code of index.html:

<!doctype html>
<html>
<head>
   <title>Pluggable Editor Demo</title>
   <style type="text/css">
       .demoBody{
           height: 450px;
       }
   </style>
   <link rel="stylesheet" type="text/css" href=""/>
   <script src=""></script>
   <script>
       /*globals orion */
       window._onload_=function(){
           require.config({
               baseUrl: '../built-js/codeEdit',
               bundles: {
                   '../built-js/codeEdit/code_edit/built-codeEdit-amd.js': ['orion/codeEdit', 'orion/editor/textTheme']
               }
           });
           require(["orion/codeEdit", "orion/editor/textTheme"], function(mCodeEdit, mTextTheme) {
               function loadTheme(themeName) {
                   var theme = mTextTheme.TextTheme.getTheme(themeName);
                   if (!theme.getThemeClass()) {
                       theme.setThemeClass(themeName, { href: 'themes/' + themeName });
                   }
                   return theme;
               }

               var theme = loadTheme('prospecto');

               var codeEdit = new mCodeEdit();
               var contents = 'var foo = "bar";';
               codeEdit.create({parent: "embeddedEditor"}).then(function(editorViewer) {
                   editorViewer.editor.getTextView().setOptions({
                       theme: theme
                   });

                   editorViewer.setContents(contents, "application/_javascript_");

                   window.editorViewer = editorViewer;
               });
           });
       };
       var fontSizeCounter = 13;
       var themeClass = "prospecto";
       var settings = {
           "className": "prospecto",
           "name": "prospecto",
           "styles": {
               "fontSize": "12px"
           }
       };
       function changeFontDynamically() {
           var theme = window.editorViewer.editor.getTextView().getOptions("theme");
           settings["styles"]["fontSize"] = fontSizeCounter + "px";
           theme.setThemeClass(themeClass, theme.buildStyleSheet(themeClass, settings));
           fontSizeCounter++;
       }
   </script>
</head>
<body id="orion-browser" spellcheck="false" class="orionPage">
<button _onclick_="changeFontDynamically();">Test</button>
<div class="demoBody" id="embeddedEditor">
</div>
</body>
</html>


Am 02.12.2015 um 21:18 schrieb Sebastian Pahnke <pahnke.sebastian@xxxxxxxxx>:

Hi Libing,

that’s right I tried your code from the wiki page; see the attached HTML file. I copied the themes folder beside the built code edit widget (into built-js/codeEdit). If you click the button to change the font size, the color of the 'var' keyword changes as the style tag with the prospecto theme definition gets overriden.

Just to clarify, here is my folder structure:
buildEditorTest
  |— index.html
built-js
  |— codeEdit
     |— code_edit
     |— …
     |— themes
        |— prospecto.css

Regards,
Sebastian
<index.html>

Am 02.12.2015 um 20:40 schrieb Libing Wang <Libing_Wang@xxxxxxxxxx>:

Hi Sebastian:
Just want to double check, when you mentioned "the original theme (prospecto in my case) gets removed", this means even if you applied the solution in   https://wiki.eclipse.org/Orion/How_Tos/Code_Edit#How_to_change_the_editor.27s_font_dynamically, it still does not work, right? If yes, please give me your code how you did that.

Regarding _createStyle, we do not recommend you override an internal API from within the build.

Libing



From:        Sebastian Pahnke <pahnke.sebastian@xxxxxxxxx>
To:        Orion developer discussions <orion-dev@xxxxxxxxxxx>
Date:        12/02/2015 01:27 PM
Subject:        Re: [orion-dev] CodeEdit change font size
Sent by:        orion-dev-bounces@xxxxxxxxxxx



Hi Libing,

thanks for the new section. I’m using the requirejs loader, btw.

As I mentioned in my last mail, the solution doesn’t quite work, as the original theme (prospecto in my case) gets removed. I fiddled with this a little further today and came up with a two part solution for this:
1. In my setup I had to use an absolute path to the prospecto.css file. This way, the _load function in orion/editor/textTheme creates a link element instead of inlining the file in a style tag.
2. I then got null reference exceptions in the _createStyle function when changing the font size because of the node.firstChild.data check (firstChild was null). So I changed the function slightly, such that it only gives IDs to style tags but not link tags (see below).

This way the original theme is inserted as a link tag and all dynamic changes to the font are additionally inserted as a style tag. It works for my needs, but let me know if I am doing something stupid here :D

_createStyle: function(className, styleSheet, callback, link) {
var document = this._document;
var id = THEME_PREFIX + className;
var node = document.getElementById(id);
if (node) {
if (link || node.firstChild.data ="" styleSheet) {
return;
}
node.removeChild(node.firstChild);
node.appendChild(document.createTextNode(styleSheet));
} else {
if (link) {
node = util.createElement(document, "link"); //$NON-NLS-0$
node.rel = "stylesheet"; //$NON-NLS-0$
node.type = "text/css"; //$NON-NLS-0$
node.href = "" class="">node.addEventListener("load", function() { //$NON-NLS-0$
callback();
});
} else {
node = util.createElement(document, "style"); //$NON-NLS-0$
node.appendChild(document.createTextNode(styleSheet));
node.id = id; // I moved this up into the else <=================================================
}
var head = document.getElementsByTagName("head")[0] || document.documentElement; //$NON-NLS-0$
head.appendChild(node);
}
if (!link) {
callback();
}
}

Regards,
Sebastian


Am 02.12.2015 um 18:38 schrieb Libing Wang <Libing_Wang@xxxxxxxxxx>:

Hi Sebastian:
Please refer to a new wiki section https://wiki.eclipse.org/Orion/How_Tos/Code_Edit#How_to_change_the_editor.27s_font_dynamically.
By the way, are you using requirejs loader?

Libing



From:        Sebastian Pahnke <pahnke.sebastian@xxxxxxxxx>
To:        Orion developer discussions <orion-dev@xxxxxxxxxxx>
Date:        12/01/2015 06:10 AM
Subject:        Re: [orion-dev] CodeEdit change font size
Sent by:        orion-dev-bounces@xxxxxxxxxxx



Hi Libing,

your proposed solution didn't work for me as I don’t use the "themeClass" but the "theme" attribute (FYI: it did work when using the themeClass attribute, but that would mean I have to include the corresponding CSS file on all of my editor pages) and it is not dynamic enough for my needs. However, I did some experimenting and came up with the following idea (but with a catch):

// setup (same as before)
function loadTheme(themeName) {
var theme = mTextTheme.TextTheme.getTheme(themeName);
if (!theme.getThemeClass()) {
theme.setThemeClass(themeName, { href: 'CodeEditWidget/themes/' + themeName });
}
return theme;
}

var theme = loadTheme('prospecto');

codeEdit.create({ parent: 'editor' }).then(function(editorViewer) {
editorViewer.editor.getTextView().setOptions({
theme: theme
});
});

// on zoom value change
var stylesheet = theme.buildStyleSheet('prospecto', { className: 'prospecto', styles: { 'font-size': fontSize + 'px' } });
theme.setThemeClass('prospecto', stylesheet);


Although this works for setting the font size (without artifacts), the Prospecto theme is lost after the call to setThemeClass and the editor falls back to the default theme. Any suggestions for that?

Thanks and regards,
Sebastian

Am 27.11.2015 um 16:00 schrieb Libing Wang <Libing_Wang@xxxxxxxxxx>:

Hi Sebastian:
You can use editorViewer.editor.getTextView().setOptions({themeClass: "editorTheme"}) any time you want as mentioned in https://wiki.eclipse.org/Orion/How_Tos/Code_Edit#Theming_your_editor.
For example if you ONLY want to change the font size you can trim the css file as below:
.editorTheme.textview {
    font-size: 14px;
}
You then need to dynamically manipulate that css class.

In Orion IDE editor style settings page, by the way, we are using a theme builder to change the css from a complex object and apply that css to the editor. The Code edit build is not exporting that capability but if you really want a complex theme builder, please open a bug describing what you need.
Hope this will help you understanding what happened in Orion IDE.

Thanks,
Libing



From:        Sebastian Pahnke <pahnke.sebastian@xxxxxxxxx>
To:        Orion developer discussions <orion-dev@xxxxxxxxxxx>
Date:        11/26/2015 11:23 AM
Subject:        Re: [orion-dev] CodeEdit change font size
Sent by:        orion-dev-bounces@xxxxxxxxxxx



Hi,

yeah, I forgot to mention that I like to change the font dynamically and not necessarily on startup. My bad :D
The use case is a „zoom“ control for the editor text, similar to ones found in IDEs like Visual Studio. What happens in the full Orion IDE when the user changes the font size in the settings?

Regards,
Sebastian


Am 26.11.2015 um 17:15 schrieb Libing Wang <Libing_Wang@xxxxxxxxxx>:

Hi Sebastian:
Have you tried https://wiki.eclipse.org/Orion/How_Tos/Code_Edit#Theming_your_editor?

Thanks,
Libing



From:        Sebastian Pahnke <pahnke.sebastian@xxxxxxxxx>
To:        orion-dev@xxxxxxxxxxx
Date:        11/26/2015 04:49 AM
Subject:        [orion-dev] CodeEdit change font size
Sent by:        orion-dev-bounces@xxxxxxxxxxx



Hi,

I’d like to change the font size in the codeEdit widget. Is there a central function to do that properly? Right now I’m working around that by changing the style settings by jQuery:

$('.textview, .textviewTooltip, .contentassist').css('font-size', fontSize + 'px');
$('.textview').css('line-height', (fontSize*1.2) + 'px‘);
$('.contentassist').css('line-height', lineHeight + 'px');
$('.contentassist').css('width', width + 'px');
$('.contentassist').css('height', height + 'px');

and then ‚refreshing‘ the editor using editor.setText(editor.getText()).

However, this results in some ugly artifacts. Especially the second line breaks the zoom ruler, but without it, the lines get smushed in IE11. For the refresh I also tried using editor.getTextView().redraw(), but that causes the line numbers to look ugly.

Thanks and regards,
Sebastian

_______________________________________________
orion-dev mailing list
orion-dev@xxxxxxxxxxx
To change your delivery options, retrieve your password, or unsubscribe from this list, visit
https://dev.eclipse.org/mailman/listinfo/orion-dev

_______________________________________________
orion-dev mailing list
orion-dev@xxxxxxxxxxx
To change your delivery options, retrieve your password, or unsubscribe from this list, visit
https://dev.eclipse.org/mailman/listinfo/orion-dev
_______________________________________________
orion-dev mailing list
orion-dev@xxxxxxxxxxx
To change your delivery options, retrieve your password, or unsubscribe from this list, visit
https://dev.eclipse.org/mailman/listinfo/orion-dev

_______________________________________________
orion-dev mailing list
orion-dev@xxxxxxxxxxx
To change your delivery options, retrieve your password, or unsubscribe from this list, visit
https://dev.eclipse.org/mailman/listinfo/orion-dev
_______________________________________________
orion-dev mailing list
orion-dev@xxxxxxxxxxx
To change your delivery options, retrieve your password, or unsubscribe from this list, visit
https://dev.eclipse.org/mailman/listinfo/orion-dev

_______________________________________________
orion-dev mailing list
orion-dev@xxxxxxxxxxx
To change your delivery options, retrieve your password, or unsubscribe from this list, visit
https://dev.eclipse.org/mailman/listinfo/orion-dev
_______________________________________________
orion-dev mailing list
orion-dev@xxxxxxxxxxx
To change your delivery options, retrieve your password, or unsubscribe from this list, visit
https://dev.eclipse.org/mailman/listinfo/orion-dev

_______________________________________________
orion-dev mailing list
orion-dev@xxxxxxxxxxx
To change your delivery options, retrieve your password, or unsubscribe from this list, visit
https://dev.eclipse.org/mailman/listinfo/orion-dev

_______________________________________________
orion-dev mailing list
orion-dev@xxxxxxxxxxx
To change your delivery options, retrieve your password, or unsubscribe from this list, visit
https://dev.eclipse.org/mailman/listinfo/orion-dev
_______________________________________________
orion-dev mailing list
orion-dev@xxxxxxxxxxx
To change your delivery options, retrieve your password, or unsubscribe from this list, visit
https://dev.eclipse.org/mailman/listinfo/orion-dev

_______________________________________________
orion-dev mailing list
orion-dev@xxxxxxxxxxx
To change your delivery options, retrieve your password, or unsubscribe from this list, visit
https://dev.eclipse.org/mailman/listinfo/orion-dev

Back to the top