Dockable tabs in Electron - javascript

I'm creating a document editing tool in electron and I'd really like to split the functional views into dockable windows within the program. I like the functionality of Atom's dockable windows, and how it remembers where they are on next load.
I'm wondering if there are any component libraries or projects out there which are a barebone example of this working? I've tried picking apart atom to work out how it works, but I'm not sure if I'm going to be able to cleanly extract their code.

You can use chrome-tabs then all you have to do is display the reset of the content by your active tab.

Related

options for implementing a PowerPoint viewer on HTML for a web app (other than embedding with provided i-frame tag)

Here's what I'm trying to accomplish: displaying a PowerPoint presentation on HTML. The user should be able to start and execute the presentation exactly like when you press the "Start Presentation" button in Microsoft PowerPoint: it goes fullscreen, transitions and animations are played, it goes to the next slide if a duration for the slide is set, on click it goes to the next slide, arrow keys are used for navigating slides and so on. Only need to run the presentation, NOT editing.
I've been looking around and came up with these three approaches:
Creating the viewer from scratch and processing/reading the .pptx file using HTML, CSS and JS, btw is this is feasible?
I know it won't be easy, but it seems it would take a lot of time to develop (I'm just one person working in the project).
Also free or paid approaches both are fine, the more options I get to know the better.
WOPI host, the problem with this is I need a paid Office365 membership.
Embedding using a third party such as Office Online, Google Docs, slides.com, the problem I noticed is that the i-frame they provide lacks from functionality and customization.
So my question is, are there other approaches for this? or is this all there is?
Final Edit: I decided to go with iSpring Converter Pro. Seems like the best option overall
Insane amount of work -> not worth it. But you could use a paid library such as Aspose.Slides
MS WOPI is, indeed, a way to do that. WOPI clients such as Office Online and Office Online Server offer an action called present. That's what you're looking for.
What about SlideShare's API and oEmbed?
Another approach:
Convert the PPTX to ODF and use https://viewerjs.org/

Atom editor - TODO highlight for JS?

In Atom editor, TODOs are automatically highlighted with atom/language-todo package, and I can change the style using user stylesheet. That much I know.
So I'm developing a webpage right now, and have to simultaneously work with HTML, CSS, and JS. However it seems that TODOs are only highlighted for HTML and CSS files, not JS files. This is strange because in the settings for atom/language-todo, the scope for all triggers are .html.php.text - HTML is included; CSS and JS are not. So reasonably thinking, either both CSS and JS should have highlight enabled, or both should have it disabled.
What is causing this strange behavior? Is there anything I can do to enable highlighting for JS?
P.S. Currently mrodalgaard/atom-todo-show is my alternate solution. It's quite good but I would still like to have my highlights.
This problem is probably related to this open issue on the atom/language-todo repository: https://github.com/atom/language-todo/issues/82.
As someone suggests in the issue conversation, the todo highlighting can be restored by disabling Atom tree-sitter in the settings:core page.
For more information on how the tree-sitter improves code parsing, see the release article on the Github blog

CSS and JS load as copies of HTML in website built with gulp and angular.js

I'm making a website using gulp and angular. When I load the page in the browser, my developer tools, sources tab shows my css resources to be copies of my html. This only started happening after I tried to make a custom directive using angular. I took the custom directive out and tried to change everything back but it is still loading both my css and js as just the html code from the page. Does anyone have any idea what might cause this? My google and stackoverflow searches have turned up nothing.
After restarting Chrome and restarting my computer twice everything magically started working again. So I never knew what exactly went wrong but the principles of always try "on/off" before anything else seems to apply.

HTML Desktop wallpaper

I am somewhat familiar with HTML and Javascript (I have had a few classes covering these in college and dabbled a little on my own). What I would like to do is create a desktop wallpaper on my Windows 7 x64 machine that uses HTML (or whatever I need to use) that runs only on my machine and allows me to use images as links to a few websites(have that working) and shortcuts to run applications that are on my machine. This is the part I am having problems with. I tried using an anchor tag and just placing the file path of the executable but when it is clicked my browser is opened and I am prompted to download the executable. Is there a way to run an executable using HTML, Javascript or something else on my local machine this way.
Also, I have read that this feature has been disabled on Windows 7. I found an application, AveDesktopSites from brothersoft.com that I think may allow me to use an html file as my wallpaper but I have not tried it. Any confirmation or recommendations for other software to do this would be appreciated.
Here is what I have so far(its very simple):
<body>
<a id="StackOverflow" href="websiteURL"> </a>
<a id="Excel" href="filepath to Excel Executable"> </a>
</body>
Then in the CSS file this HTML is using I adjusted the size of each of these anchor tags using their IDs to be the same size as the image and positioned them absolutely over the images to make the images appear to be clickable. I have only tested in my browser at this point.
Thanks in advance.
In windows XP and maybe even in versions before that it was possible to have a website as wallpaper.
You could just have a small block(resizable) with a custom given URL and it would stay on there you could just browse it like it was just another window.
However this option has been removed for Windows Vista and Windows 7.
So what you want now is not possible.
If you use Mozilla Firefox try downloading the addon "Speed dial."
It allows you to have a raster of 3x3 as your home page(you can create several groups all containing 3x3 or any other amount till a certain amount)
And every block in that raster can be a different website.
Gives you the same idea but not as wallpaper.
Its almost the same as bookmarks but just way faster.
I really dont know about any other software but they would have to do things to your windows that shouldnt be possible anymore. So im not sure if that really is what you want. There is probably a reason why Microsoft took it out.
Hope I could be of any help.
http://support.microsoft.com/default.aspx?scid=kb;EN-GB;q232077
I found a similar post containing this link. This looks like it could solve your dilemma if you never found a way.

Using multiple CodeMirror editors on a single page?

I'm writing a page with examples that demonstrate the use of my js library. I'd like these examples to be editable and runnable, so I thought I have these options :
Use prettify to display code on the tutorial page, have a button that opens a new window with the editor where you can run the code (currently implemented solution). Alternatively, I can make the editor a modal dialog of some sort.
Use multiple CodeMirror editors for each example on the page (could be up to 30 on a single page). I'm not sure how "heavy" those editors are, so I'm not sure if that's a good idea.
Have an edit button that "swaps" prettyfied code with a CodeMirror editor when editing is needed, so that the user can edit and run the examples without bothering with new windows. I'm not sure if I can make prettify and CodeMIrror's syntax highlighting to look the same.
Any ideas on how I should do this and why? I'm also open to suggestions about different code editors or syntax highlighters too, so if anybody has experience with this kind of thing, please tell me how you did it.
You could use the same technique that Marijn Haverbeke (the creator of CodeMirror) uses for the online version of his javascript book. It shows code snippets, and provides an edit-button that opens a javascript console at the bottom of the screen.
Look at this chapter for an example.

Categories

Resources