createjs fixed/floating hallo editor - frontend

I am trying to achieve the same effect that is seen in this example of the hallo editor, and here is a screenshot:
Basically I would rather have the editor appear above the current content that is being edited than at the top of the page. Is this something that can be achieved by passing settings to midgardeCreate()?
I thought something along these lines would get me on the right track, but this keeps the editor at the top of the page.
jQuery('body').midgardCreate('configureEditor', 'default', 'halloWidget', {
plugins: {
halloformat: {},
halloblacklist: {
tags: ['br']
}
},
toolbarState: 'halloToolbarFixed',
parentElement: '.create-ui-toolbar-dynamictoolarea .create-ui-tool-freearea'
});

I haven't worked with midgard, but I have used hallo. I think the only change you need to make is here:
toolbarState: 'halloToolbarFixed',
to:
toolbar: 'halloToolbarFixed',

Related

Adaptive Card QuickView Navigation not firing

Ok, so I'm just getting started with adaptive cards and downloaded the PNP ACE project (Git Hub Link) to use as a jumping off point. Started the project up and ran gulp serve.... everything seemed great.... until I tried to click either the View Items or Add Item buttons on the CardView. Both of these buttons fire QuickViews, but when you click them nothing happened. Tried 2 different browsers, no errors registered in the console, it just acts like there isn't an action tied to the buttons.
So, thinking "well maybe something got screwed up in a commit", I started a brand new project using yeoman.
Got the project set up, building and served it up; EXACT SAME PROBLEM!! The button in the default ACE project template didn't work either. I can't figure out what gives.
Here is the function for the button that the template created :
public get cardButtons(): [ICardButton] | [ICardButton, ICardButton] | undefined {
return [
{
title: strings.QuickViewButton,
action: {
type: 'QuickView',
parameters: {
view: QUICK_VIEW_REGISTRY_ID
}
}
}
]};
That looks just like the PNP example (and every other example I've seen online). Even the quickViewNavigator is populated the same. Here is the one from the template project (class definitions removed to save space):
const CARD_VIEW_REGISTRY_ID: string = 'JasonAdaptiveTest_CARD_VIEW';
export const QUICK_VIEW_REGISTRY_ID: string = 'JasonAdaptiveTest_QUICK_VIEW';
public onInit(): Promise<void> {
this.state = { };
this.cardNavigator.register(CARD_VIEW_REGISTRY_ID, () => new CardView());
this.quickViewNavigator.register(QUICK_VIEW_REGISTRY_ID, () => new QuickView());
return Promise.resolve();
}
So what gives? Why do these not work? Is there some NPM package that may be missing?
Well, found the line buried in the tutorials that explains my problem. A single note, in a page that isn't necessarily about quick views.
Note
ACE interaction is disabled while in Edit mode. The Workbench or Page must be >in Preview or Read mode to interact with the ACE.

Tauri : How to open webpage when cliking on the menu

I'm trying to make a small tauri app with the same menu on the top of each page. I followed this tutorial, "Adding the menu to all windows" section. I can see the menu, I can quit the app with it, but I can't find out how to go to another hmtl page when cliked.
I've got this piece of code but I have no idea what to put under "accel"
.on_menu_event(|event| {
match event.menu_item_id() {
"quit" => {
std::process::exit(0);
}
"close" => {
event.window().close().unwrap();
}
"accel" => {
//not working, as you can imagine
//tauri::WindowUrl::App("index.html".into());
//I would like tauri to display index.html in the main window
}
_ => {}
}
})
Does someone has an idea on how to do that ? I've found dozen of example code with menus but none showed what I'm looking for (or I'm unable to point out the line I need)
Thanks for your help !
I finally got the answer from the tauri discord chat, I hope it can be useful to someone?
window.eval("window.location.replace('your.url')");
made the job

How do I use the Ace dialog to show messages/errors?

I use the ace editor with the vim keybindings on my site. Whenever someone goes into normal mode and types a command, it shows up in a dialog at the bottom. I defined a function like so:
ace.config.loadModule("ace/keyboard/vim", m => {
m.CodeMirror.Vim.defineEx("write", "w", () => submitForm())
})
The neat thing is, whenever that function errors, it shows the error in another dialog. My question is, is this feature exposed to users? Can I use that dialog to show messages like the editor does when the function errors? Here's a screenshot to show an example:
Typing a command -
Error pops up (another dialog in front of the one that I use to type the command) -
there is no documented api for this, but judging by
https://github.com/ajaxorg/ace/blob/v1.4.9/lib/ace/keyboard/vim.js#L4983, it should be possible to use the following
editor.state.cm.openNotification(domNodeOrHtmlString, {bottom: true, duration: 5000})
to create the dom node you can use the buildDom function from ace.
var domNode = ace.require("ace/lib/dom").buildDom(["span", {style: "color:red"}, "xxxxx"])

How can I disable javascript for the page that's being opened?

I was up till 1 am last night trying to find an example of how to do this. My theory is that I'd write a function that would comment out all javascript.
The second option would be to add the url to the list of javascript settings.
Right now my extension is very simple:
function linkOnClick(info, tab) {
window.open(info.linkUrl)
}
chrome.contextMenus.create(
{title: "Load with no Javascript", contexts:["link"], onclick: linkOnClick});
This is my first extension and I'm kind of lost.
edit: let me know if I should also post the manifest.json.
edit: I can't mark this as solved for 2 days (why? who knows.), so I'll probably not remember to mark this as solved. So accept this as the official making: SOLVED.
chrome.contentSettings.javascript.set is the thing that disables javascript.
Here's the part that disables javascript.
(Google, here's what an actual example should look like):
chrome.contentSettings.javascript.set(
{'primaryPattern':AnyDomainName, /*this is a string with the domain*/
'setting': "block", /* block the domain. Can be switched to "allow" */
'scope':'regular'}, /*it's either regular or incognito*/
function(){
/*optional action you want to
take place AFTER something's been blocked'*/
});
Here's the script I used to import into my json script for my chrome extension.
var link=""
var pattern=""
function linkOnClick(info, tab) {
r = /:\/\/(.[^/]+)/;
link=info.linkUrl
pattern="http://"+link.match(r)[1]+"/*"
chrome.contentSettings.javascript.set(
{'primaryPattern':pattern,
'setting': "block",
'scope':'regular'},
function(){
window.open(link)
});
}
chrome.contextMenus.create({title: "Load with no Javascript", contexts:["link"], onclick: linkOnClick});
I couldn't tell how any of this worked by reading the developer.chrome.com page! They really need add complete working examples or allow a way for users to add examples. I can't even use it. The git hub link is what saved me.

How to modify dashlets to auto-refresh?

Is there a simple way to modify a dashlet to automatically re-load itself periodically?
I am particularly thinking of the "My Tasks" dashlet - we are using pooled review workflows, so tasks may come and go all the time as they are created and then are claimed.
It may be frustrating for users to keep clicking on tasks that turn out to have already been claimed - or having to remember to keep re-loading their Dashboard page. I'd prefer the dashlet to refresh on a timed interval so it's always reasonably up to date.
In order to do this you will need to add a new capability to the client-side class Alfresco.dashlet.MyTasks (docs, source) found in the file components/dashlets/my-tasks.get.js. First you will need to add a new method to the prototype extension specified as the second parameter in the YAHOO.lang.augmentObject() call, e.g.
...
}, // end of last OOTB function - add a comment here
// begin changes
reloadData: function MyTasks_onReady()
{
this.widgets.alfrescoDataTable.loadDataTable(
this.options.filters[this.widgets.filterMenuButton.value]
);
}
// end changes
});
})();
It's not the ideal development environment, you can modify the JS file directly in the Share webapp, although you will also need to update the corresponding -min.js file.
Once you've done this, check that it works by running the following line in your browser's JavaScript console
Alfresco.util.ComponentManager.findFirst("Alfresco.dashlet.MyTasks").reloadData();
If that works, then you can wire up your new method to a title bar action (see my DevCon presentation for more background info), in the dashlet web script. The method depends on whether you are using v4.2 or a previous version, but if it is the latter then you need to add some code to the dashlet's Freemarker file my-tasks.get.html.ftl (under WEB-INF/classes/alfresco/site-webscripts/org/alfresco/components/dashlets).
In that file you should see some JavaScript code inside a <script> tag, this sets up an instance of the client-side class and some utility classes, the contents of which you can replace with the following, to add your custom title bar action.
(function()
{
var dashlet = new Alfresco.dashlet.MyTasks("${jsid}").setOptions(
{
hiddenTaskTypes: [<#list hiddenTaskTypes as type>"${type}"<#if type_has_next>, </#if></#list>],
maxItems: ${maxItems!"50"},
filters:
{<#list filters as filter>
"${filter.type?js_string}": "${filter.parameters?js_string}"<#if filter_has_next>,</#if>
</#list>}
}).setMessages(${messages});
new Alfresco.widget.DashletResizer("${id}", "${instance.object.id}");
var refreshDashletEvent = new YAHOO.util.CustomEvent("onDashletRefresh");
refreshDashletEvent.subscribe(dashlet.reloadData, dashlet, true);
new Alfresco.widget.DashletTitleBarActions("${args.htmlid}").setOptions(
{
actions:
[
{
cssClass: "refresh",
eventOnClick: refreshDashletEvent,
tooltip: "${msg("dashlet.refresh.tooltip")?js_string}"
},
{
cssClass: "help",
bubbleOnClick:
{
message: "${msg("dashlet.help")?js_string}"
},
tooltip: "${msg("dashlet.help.tooltip")?js_string}"
}
]
});
})();
You will need to add some styles for the class name specified, in the dashlet's CSS file my-tasks.css, such as the following
.my-tasks .titleBarActions .refresh
{
display: none;
background-image: url('refresh-icon.png');
}
The icon file (here is one you could re-use) must be in the same directory as the CSS file.
Lastly you'll need to define the label dashlet.refresh.tooltop used for the title bar action's tooltip. You can do this in the dashlet web script's .properties file.
For a similar example, check out the source of my Train Times dashlet, which features a refresh title bar action.
In some ways it's actually easier to define your own dashlets than it is to extend the Alfresco-supplied ones, but if you have the option of using 4.2.x, the new method allows you to extend the existing components without duplicating any code, which obviously makes upgrades much easier.

Resources