guys
I'm building the web based code editor for my personal project.I want to make it work like VS code but facing some issues.
I'm using ACE editor.
This is what I get while trying with autocompletion.
I'm getting all the available suggestions while trying to write "os.(something)", rather then just getting the language and package specific suggestions.
What I want is this.
In this pic as you can see I'm getting suggetion related to os package only.
Depending on your setup with require-js, you may also need to include an additional javascript file in the html for your page. You need to write this simple script to working with the auto completion feature.
ace.require("ace/ext/language_tools");
var editor = ace.edit("editor");
editor.setOptions({
enableBasicAutocompletion: true
});
Demo: https://github.com/ajaxorg/ace/blob/master/demo/autocompletion.html
Reference: https://github.com/ajaxorg/ace/wiki/How-to-enable-Autocomplete-in-the-Ace-editor
HTML, JS, CSS Based
Create <textarea onkeyup=compile() id=code>. It should be big enaugt for code.
Create <script> </script>
Build the autocomplete
Script: function compile() { document.GetElementById('code').value = document.GetElementById('code').value.replaceAll('snippet1', 'Snippet1Value').replaceAll('snippet2', 'SnippetValue'). ...
E.g.: When you enter _text_ (and you set snippet1 to <input type=text>) then your textarea will write <input type=text>. To create an picker, use a contextmenu-library at json.
I know, this is only an plan how to do is.
Related
I'm writing a documentation with angular.
For now, i duplicate twice the code. Once in the button.component.html to make the componenbt appear, and the other is injected from the button.component.ts as a string so it's not interpreted.
The goal is to show the result you will get if you tips the code contain in pre balise.
I need to avoid these duplication cause when a component change, i need to modify twice the code.
I first have use to simulate include comportement but it's not working as the final content is the generated content and not the original content.
Then i checked how angular material perform for their documentation, and it's same to be a bit tricky and complicated for me has they inject their component as dependancies.
I'm asking if there is a sample way to avoid this duplication content and if someone have faced the same issue.
I have only one idea, it's to run a shell commande in the end of ng build with webpack and node, and get the content of the target block and inject directely in the target balise.
Sample :
<div class="my-5" data-source="myButton">
<button mat-button>
<mat-icon class="icon-left">help</mat-icon>
Support center
</button>
</div>
<code data-target="myButton"></code>
But i'm not very sur about that solution.
Thanks in advance.
Kevin
For people who have face the same problem, there is the module you have to use :
exemplify-angular
It's do the job perfectly.
Kevin
i have purchased a website template and i need help concerning the website translator using google translate.
The translate works well but after selecting a language, a google drop down appears and when i scroll down, it still appears and hides my main header titles.
Can something be done like removing this drop down when i translate a language or can someone suggest me another method.
Thanks a lot.
The problem is the the contents in this bar are inside of an iframe, So you cant use javascript to trigger the close button.
Solution
Once the user chooses a language the an iframe with a class named 'goog-te-banner-frame'
is added.
You can use javascript to detect if it present and hide it
$(document).ready(function(){
if($('.goog-te-banner-frame').length > 0){//check if the iframe exsits
$('.goog-te-banner-frame').css('display','none');
$('body').css('top',0);//google adds top to the body so the bar wont cover website content
}
});
because this code uses jquery. make you sure you load it like this:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
I have been working with Vaadin charts during this week and I found a problem that I cannot solve. I need to send several charts to a PDF generation (using iTextpdf) and I could do it using SVGGenerator. The main problem is I cannot use this solution because the final laptop doesn't allow any installation, and Phantomjs is required for SVG Generator (no add-on can be installed neither). I tried to find a different solution to convert the chart content into file or buffer that I can manage, but I think I have been reading so much posts and I am not able to distinguish the solution.
So, I will try to clarify basic questions first:
a) Is it possible to manage SVG Generator without any installation in the laptop?
b) If not, is there a different way to convert a chart into an object which class could be managed to insert it into a PDF?
I can assure you I tried to read all documentation in this forum and official Vaadin forum related to this topic but I couldn't find any solution. I don't want to seem lazy, I only want to avoid spending more time and clarify the maining pre-conditions to solve this issue.
thanks in advance for your time and help.
Kind regards,
David.
You can take a screenshot of your chart and append it to pdf:
Screenshot screenshot = new Screenshot();
screenshot.setTargetComponent(myTargetComponent);
myChartLayout.addComponent(screenshot);
//when complete
screenshot.addScreenshotListener(new ScreenshotListener() {
public void screenshotComplete(ScreenshotImage image) {
//do something
}
});
//take screenshot
screenshot.takeScreenshot();
You will not be able to render a Vaadin Chart without a web browser engine of some kind. That's what PhantomJS provides. If you have a full-blown web browser at your disposal, though, you can grab the SVG markup manually from there; it's just a bit more difficult to automate. This works in Chrome:
Open your Charts app in the browser
Open the JavaScript console (Ctrl/Cmd + Shift + J)
Type something like this: copy(document.getElementsByTagName('svg')[0].outerHTML)
Paste the contents of your clipboard to a new text file and save it as an SVG.
You don't need to install phantomjs, just bundle its binary along with your web application (Reference). I did the same thing with my Amazon AWS deployment and it works just fine.
I'm trying to create my first chrome extension. Basically I have a simple html page and some javascript that im using to allow users to enter some data, the script will format it correctly and then output it:
<form>
MAC ADDRESS: <input type="text" id="mac" name="macAddress" maxlength="17" >
<button onclick="convert(); return false;">Convert</button>
</form>
Javascript:
function convert() {
var mac = document.getElementById('mac').value; //get string
var mac2 = mac.replace(/\:|-/g,""); //remove colons and dashes
//
//add fullstops after every 4th character, appart from last character.
//
mac2 = mac2.replace(/(.{4})(?!$)/g , '$1.');
//output string
document.getElementById("outputDiv").innerHTML= mac2;
};
My problem is that while this works fine as a normal web page, the get method, to the same page, is not working when I tried to implement it as an extension.
I've followed the tutorials on google's site and the extension is showing up but it doesn't seem to be able to handle get requests. I've tried modifying the manifest file using different suggestions I found on here but still no success.
Theres nothing in the console when I try to debug it (something briefly flickers up when I submit the get request but it doesn't stay up long enough to see what the issue is).
I'd really appreciate it if someone could point me in the right direction with this!
Due to the Content Security Policy applied to extensions:
Inline JavaScript will not be executed. This restriction bans both inline blocks and inline event handlers (e.g. ).
[...]
The inline event handler definitions must be rewritten in terms of addEventListener and extracted into popup.js.
For more info atake a look at the docs.
I have piece of code which I want to use in some of the dust templates, so i am planning to use partials. I am not sure if following is the best approach. Please help.
1) I extracted common code from base templates in to a template file called userinfo.html
2) I compiled userinfo.html to create userinfo.dust
3) I added {>"userinfo.dust"/} code into all templates where I wanted to see user information.
4) Now when I render the template with following command. I get "Template not found: userinfo.dust" error.
dust.render("moduleTemplate", templateData, function(err, out) {
$main.html(out);
});
Do, I need to send userinfo.dust along with templateData while rendering? I tried reading all partial related information which google can give me, but not able to to figure how to implement partials.
In your template, when you call:
{>"userinfo.dust"/}
You should really be calling
{>"userinfo"/}
As yo don't need to specify the .dust extension. Here's a template example of mine:
{>header /}
{>results /}
{>footer /}
HTH
It sounds like the answer to your problem is that the partial is not being included on the page. Dust compiles to JavaScript, so this will make more sense if you rename your files: userinfo.dust (the template), and userinfo.js (the compiled template). Now include your template using a script tag:
<script type="text/javascript" src="templates/userinfo.js"></script>
Finally, you need to call the template using the svame name it was compiled with. It is a good idea to use the filename (often but not necessarily without the extension):
var userinfoCompiled = dust.compile('userinfo', 'user info template goes here');
A template compiled in this way can be called using:
{>userinfo/}
If you're not sure what your compiled template's name is, you can open the compiled JavaScript file and look for:
dust.register('userinfo')