How to request fullscreen in compiled dart - dart

I'm playing around with a Dart app trying to get fullscreen mode to work. My HTML (excluding boilerplate):
<div id="fullscreen_div">
Clicking this should cause it to go fullscreen!
</div>
My Dart code:
import 'dart:html';
void main() {
var div = querySelector('#fullscreen_div');
div.onClick.listen((MouseEvent e) {
div.requestFullscreen();
print('requested fullscreen');
});
}
Here it is on DartPad.
If I've done this correctly, clicking the div once should cause the div to go into fullscreen mode. On Chromium, this works. When compiled to JavaScript (both debug and minified), this does not happen, and the console outputs:
Uncaught TypeError: undefined is not a function
This happens on both Chrome, Firefox and IE (tested on Windows 7). From what I've understood this is a common JavaScript error, and searching does not bring up anything obvious.
Any ideas why requestFullScreen won't work when dart is compiled to JS?

As pointed out in the comments (thanks Günter!), this is a known issue. #12 in that thread posted a good workaround, edited by me to be a bit more generic:
import 'dart:js';
void fullscreenWorkaround(Element element) {
var elem = new JsObject.fromBrowserObject(element);
if (elem.hasProperty("requestFullscreen")) {
elem.callMethod("requestFullscreen");
}
else {
List<String> vendors = ['moz', 'webkit', 'ms', 'o'];
for (String vendor in vendors) {
String vendorFullscreen = "${vendor}RequestFullscreen";
if (vendor == 'moz') {
vendorFullscreen = "${vendor}RequestFullScreen";
}
if (elem.hasProperty(vendorFullscreen)) {
elem.callMethod(vendorFullscreen);
return;
}
}
}
}
I used this in my code, and replaced this call
div.requestFullscreen();
with
fullscreenWorkaround(div);
which worked great. Tested and working compiled on Chrome and IE.

Here is an extended version of Tobbe hack to use the whole fullscreen API.
import 'dart:html';
import 'dart:js';
// Workaround for https://code.google.com/p/dart/issues/detail?id=4136
class FullscreenWorkaround {
static void requestFullscreen(Element element) {
_callMethods(element, [
'requestFullscreen',
'webkitRequestFullscreen',
'mozRequestFullScreen',
'msRequestFullscreen',
'oRequestFullscreen'
]);
}
static void exitFullscreen() {
_callMethods(document, [
'exitFullscreen',
'webkitExitFullscreen',
'mozCancelFullScreen',
'msExitFullscreen',
'oExitFullscreen'
]);
}
static bool get fullscreenEnabled {
var result = _getProperty(document, [
'fullscreenEnabled',
'webkitFullscreenEnabled',
'mozFullScreenEnabled',
'msFullscreenEnabled',
'oFullscreenEnabled'
]);
return result != null ? result : false;
}
static get fullscreenElement {
return _getProperty(document, [
'fullscreenElement',
'webkitFullscreenElement',
'mozFullScreenElement',
'msFullscreenElement',
'oFullscreenElement'
]);
}
static _callMethods(browserObject, List methods) {
var jsElem = new JsObject.fromBrowserObject(browserObject);
for (String methodName in methods) {
if (jsElem.hasProperty(methodName)) {
return jsElem.callMethod(methodName);
}
}
}
static _getProperty(browserObject, List properties) {
var jsElem = new JsObject.fromBrowserObject(browserObject);
for (String propertyName in properties) {
if (jsElem.hasProperty(propertyName)) {
return jsElem[propertyName];
}
}
}
}

Related

CodeMirror6 in Vaadin 14 & Lit

I created a simple LitElement with CodeMirror6 I can see the Editor, but when I call the same LitElement in Vaadin , the styling is completely gone.
I have tried both 14 and 23. Same issue.
CodeMirror6 Lit
import { LitElement, html } from 'lit';
import { EditorState, EditorView, basicSetup } from "#codemirror/basic-setup"
import { sql } from '#codemirror/lang-sql';
import { oneDark } from '#codemirror/theme-one-dark';
export class App extends LitElement {
static get properties() {
return {
value: String,
};
}
render() {
return html`
<div id="codeeditor"></div>`;
}
firstUpdated() {
let editorState = EditorState.create({
doc: this.value, extensions: [
basicSetup,
oneDark,
sql(),
]
});
var element = document.getElementById('codeeditor');
const editor = new EditorView(
{
state: editorState,
parent: element
}
);
}
createRenderRoot() {
return this;
}
}
customElements.define('code-mirror', App);
LitElement Code Editor Image - https://i.stack.imgur.com/0MsjU.png
No issue here works perfectly, but When I call the above litelement into Vaadin . The formatting and styling is completely gone.
LitElement in Vaadin Image : https://i.stack.imgur.com/RP35C.png
Any suggestion or pointer for me to fix this issue.
The problem is way on which vaadin renders child components in a Vertical|Horizontal layout (shadowRoot with slots).
If you add your implementation to the ROOT content (first layout), the codemirror will work fine as the styles will be applied correctly.
I tried extending new module about #CssImport with codemirror styles. The module was displaying correctly but the codemirror events stopped working because of the vaadin structure ;/
The problem can be worked around as follows. I know it's not elegant, but it works.
Create a new element in document.body
Init codemirror in the new element
Move codemirror from created element to element rendered by module
import {EditorState, EditorView, basicSetup} from "#codemirror/basic-setup"
import {sql} from "#codemirror/lang-sql"
import {html, LitElement} from "lit";
import { oneDark } from '#codemirror/theme-one-dark';
export class App extends LitElement {
static get properties() {
return {
value: String,
};
}
createRenderRoot() {
return this;
}
render() {
return html`<span id="codeeditor"></span>`;
}
firstUpdated() {
var element = document.getElementById('codeeditor');
var parent = document.createElement("div");
document.body.append(parent);
new EditorView({
state: EditorState.create({
extensions: [basicSetup, oneDark ,sql()]
}),
parent: parent
})
document.body.removeChild(parent);
element.appendChild(parent);
}
}
customElements.define('code-mirror', App);

How to use MediaQueryList from Dart [duplicate]

How to use window.matchMedia in Dart?
I have found corresponding method:
MediaQueryList matchMedia(String query)
And "MediaQueryList" method:
void addListener(MediaQueryListListener listener)
But: MediaQueryListListener has no constructor and looks like some sort of a generated stub.
I have JS example:
var mq = window.matchMedia( "(min-width: 500px)" );
// media query event handler
if (matchMedia) {
var mq = window.matchMedia("(min-width: 500px)");
mq.addListener(WidthChange);
WidthChange(mq);
}
// media query change
function WidthChange(mq) {
if (mq.matches) {
// window width is at least 500px
}
else {
// window width is less than 500px
}
}
And it has good support http://caniuse.com/#feat=matchmedia
As pointed in a comment it doesn't seem to be implemented in Dart for now.
However you can use dart:js to do that like this :
import 'dart:js';
main() {
if (context['matchMedia'] != null) {
final mq = context.callMethod('matchMedia', ['(min-width: 500px)']);
mq.callMethod('addListener', [widthChange]);
widthChange(mq);
}
}
widthChange(mq) {
if (mq['matches']) {
print('window width is at least 500px');
} else {
print('window width is less than 500px');
}
}

Groovy/Grails promises/futures. There is no .resolve(1,2,3) method. Strange?

I am developing in a Grails application. What I want to do is to lock the request/response, create a promise, and let someone else resolve it, that is somewhere else in the code, and then flush the response.
What I find really strange is that the Promise promise = task {} interface has no method that resembles resolve or similar.
I need to lock the response until someone resolves the promise, which is a global/static property set in development mode.
Promise interface:
http://grails.org/doc/latest/api/grails/async/Promise.html
I have looked at the GPars doc and can't find anything there that resembles a resolve method.
How can I create a promise, that locks the response or request, and then flushes the response when someone resolves it?
You can call get() on the promise which will block until whatever the task is doing completes, but I imagine what that is not what you want. What you want seems to be equivalent to a GPars DataflowVariable:
http://gpars.org/1.0.0/javadoc/groovyx/gpars/dataflow/DataflowVariable.html
Which allows using the left shift operator to resolve the value from another thread. Currently there is no way to use the left shift operator via Grails directly, but since Grails' promise API is just a layer over GPars this can probably be accomplished by using the GPars API directly with something like:
import org.grails.async.factory.gpars.*
import groovyx.gpars.dataflow.*
import static grails.async.Promise.*
def myAction() {
def dataflowVar = new DataflowVariable()
task {
// do some calculation and resolve data flow variable
def expensiveData = ...
dataflowVar << expensiveData
}
return new GParsPromise(dataflowVar)
}
It took me quite some time to get around this and have a working answer.
I must say that it appears as if Grails is quite a long way of making this work properly.
task { }
will always execute immediatly, so the call is not put on hold until dispatch() or whatever is invoked which is a problem.
Try this to see:
public def test() {
def dataflowVar = new groovyx.gpars.dataflow.DataflowVariable()
task {
// do some calculation and resolve data flow variable
println '1111111111111111111111111111111111111111111111111111'
//dataflowVar << expensiveData
}
return new org.grails.async.factory.gpars.GparsPromise(dataflowVar);
}
If you are wondering what this is for, it is to make the lesscss refresh automatically in grails, which is a problem when you are using import statements in less. When the file is touched, the lesscss compiler will trigger a recompilation, and only when it is done should it respond to the client.
On the client side I have some javascript that keeps replacing the last using the refresh action here:
In my controller:
/**
* Refreshes link resources. refresh?uri=/resource/in/web-app/such/as/empty.less
*/
public def refresh() {
return LessRefresh.stackRequest(request, params.uri);
}
A class written for this:
import grails.util.Environment
import grails.util.Holders
import javax.servlet.AsyncContext
import javax.servlet.AsyncEvent
import javax.servlet.AsyncListener
import javax.servlet.http.HttpServletRequest
/**
* #Author SecretService
*/
class LessRefresh {
static final Map<String, LessRefresh> FILES = new LinkedHashMap<String, LessRefresh>();
String file;
Boolean touched
List<AsyncContext> asyncContexts = new ArrayList<AsyncContext>();
String text;
public LessRefresh(String file) {
this.file = file;
}
/** Each request will be put on hold in a stack until dispatchAll below is called when the recompilation of the less file finished **/
public static AsyncContext stackRequest(HttpServletRequest request, String file) {
if ( !LessRefresh.FILES[file] ) {
LessRefresh.FILES[file] = new LessRefresh(file);
}
return LessRefresh.FILES[file].handleRequest(request);
}
public AsyncContext handleRequest(HttpServletRequest request) {
if ( Environment.current == Environment.DEVELOPMENT ) {
// We only touch it once since we are still waiting for the less compiler to finish from previous edits and recompilation
if ( !touched ) {
touched = true
touchFile(file);
}
AsyncContext asyncContext = request.startAsync();
asyncContext.setTimeout(10000)
asyncContexts.add (asyncContext);
asyncContext.addListener(new AsyncListener() {
#Override
void onComplete(AsyncEvent event) throws IOException {
event.getSuppliedResponse().writer << text;
}
#Override
void onTimeout(AsyncEvent event) throws IOException {
}
#Override
void onError(AsyncEvent event) throws IOException {
}
#Override
void onStartAsync(AsyncEvent event) throws IOException {
}
});
return asyncContext;
}
return null;
}
/** When recompilation is done, dispatchAll is called from LesscssResourceMapper.groovy **/
public void dispatchAll(String text) {
this.text = text;
if ( asyncContexts ) {
// Process all
while ( asyncContexts.size() ) {
AsyncContext asyncContext = asyncContexts.remove(0);
asyncContext.dispatch();
}
}
touched = false;
}
/** A touch of the lessfile will trigger a recompilation **/
int count = 0;
void touchFile(String uri) {
if ( Environment.current == Environment.DEVELOPMENT ) {
File file = getWebappFile(uri);
if (file && file.exists() ) {
++count;
if ( count < 5000 ) {
file << ' ';
}
else {
count = 0
file.write( file.getText().trim() )
}
}
}
}
static File getWebappFile(String uri) {
new File( Holders.getServletContext().getRealPath( uri ) )
}
}
In LesscssResourceMapper.groovy of the lesscsss-recources plugin:
...
try {
lessCompiler.compile input, target
// Update mapping entry
// We need to reference the new css file from now on
resource.processedFile = target
// Not sure if i really need these
resource.sourceUrlExtension = 'css'
resource.contentType = 'text/css'
resource.tagAttributes?.rel = 'stylesheet'
resource.updateActualUrlFromProcessedFile()
// ==========================================
// Call made here!
// ==========================================
LessRefresh.FILES[resource.sourceUrl.toString()]?.dispatchAll( target.getText() );
} catch (LessException e) {
log.error("error compiling less file: ${originalFile}", e)
}
...
In the index.gsp file:
<g:set var="uri" value="${"${App.files.root}App/styles/empty.less"}"/>
<link media="screen, projection" rel="stylesheet" type="text/css" href="${r.resource(uri:uri)}" refresh="${g.createLink(controller:'home', action:'refresh', params:[uri:uri])}" resource="true">
JavaScript method refreshResources to replace the previous link href=...
/**
* Should only be used in development mode
*/
function refreshResources(o) {
o || (o = {});
var timeoutBegin = o.timeoutBegin || 1000;
var intervalRefresh = o.intervalRefresh || 1000;
var timeoutBlinkAvoid = o.timeoutBlinkAvoid || 400 ;
var maxErrors = o.maxErrors || 200 ;
var xpath = 'link[resource][type="text/css"]';
// Find all link[resource]
$(xpath).each(function(i, element) {
refresh( $(element) );
});
function refresh(element) {
var parent = element.parent();
var next = element.next();
var outer = element.clone().attr('href', '').wrap('<p>').parent().html();
var uri = element.attr('refresh');
var errorCount = 0;
function replaceLink() {
var link = $(outer);
link.load(function () {
// The link has been successfully added! Now remove the other ones, then do again
errorCount = 0;
// setTimeout needed to avoid blinking, we allow duplicates for a few milliseconds
setTimeout(function() {
var links = parent.find(xpath + '[refresh="'+uri+'"]');
var i = 0;
// Remove all but this one
while ( i < links.length - 1 ) {
links[i++].remove();
}
replaceLinkTimeout();
}, timeoutBlinkAvoid );
});
link.error(function(event, handler) {
console.log('Error refreshing: ' + outer );
++errorCount;
if ( errorCount < maxErrors ) {
// Load error, it happens. Remove this & redo!
link.remove();
replaceLink();
}
else {
console.log('Refresh: Aborting!')
}
});
link.attr('href', urlRandom(uri)).get(0);
link.insertBefore(next); // Insert just after
}
function urlRandom(uri) {
return uri + "&rand=" + Math.random();
}
function replaceLinkTimeout() {
setTimeout(function() {
replaceLink();
}, intervalRefresh ) ;
}
// Waith 1s before triggering the interval
setTimeout(function() {
replaceLinkTimeout();
}, timeoutBegin);
}
};
Comments
I am unsure why Javascript style promises have not been added to the Grails stack.
You can not render or stuff like that in the onComplete. render, redirect and what not are not available.
Something tells me that Grails and Promises/Futures are not there yet. The design of the GPars libraries seems not take into account of the core features which is to resolve later. At least it is not simple to do so.
It would be great if the dispatch() method actually could be invoked with some paramaters to pass from the resolving context. I am able to go around this using static properties.
I might continue to write my own solution and possibly contribute with a more fitting solutions around the AsyncContext class, but for now, this is enough for me.
I just wanted to refresh my less resources automatically.
Phew...
EDIT:
I made it to support several number of files. It is complete now!

Prevent to read file many times

I am trying to write an i18n app. The program read a json file, that contains translation from languages and it based on json structure.
{
"EN": {
"TEXT1": "Hello",
"TEXT2": "March"
},
"DE": {
"TEXT1": "Hallo",
"TEXT2": "März"
}
}
My program read the json file in async way with the file class, the whole code
import 'dart:io';
import 'dart:async';
import 'package:json_object/json_object.dart';
abstract class I18n {
static _I18n _i18n;
factory I18n(String file, String lang) {
if(_i18n == null) {
_i18n = new _I18n(file, lang);
return _i18n;
}
return _i18n;
}
Future<String> getTextByMap(String textId);
}
class _I18n implements I18n {
File _file;
String _lang;
JsonObject _jsonContainer;
JsonObject _jsonFiltered;
Future<JsonObject> _imme;
// Parameters:
// file: The whole path and filename
// lang: Expected language
_I18n(String file, this._lang) {
this._file = new File(file);
}
// Read file and return the content of file.
Future<String> _readFileFromStream() {
var com = new Completer();
this._file.exists()
.then((fileExists) {
if(!fileExists) {
throw new StateError('File not found');
}
return this._file.readAsString()
.then((stream) => com.complete(stream));
});
return com.future;
}
void _convertContentToJson(String stream) {
this._jsonContainer = new JsonObject.fromJsonString(stream);
}
Future<JsonObject> _prepareData() {
return this._readFileFromStream().then((stream) {
_convertContentToJson(stream);
this._jsonFiltered = this._jsonContainer[this._lang];
return this._jsonFiltered;
});
}
Future<String> getTextByMap(String textId) {
return this._prepareData().then((filterd) {
return filterd[textId];
});
}
}
and the main code
import 'package:i18n/i18n.dart';
void main() {
var i18n = new I18n('../hello.json', 'EN');
i18n.getTextByMap('TEXT1').then((val) => print(val));
i18n.getTextByMap('TEXT2').then((val) => print(val));
}
Everything here, happen in dart async way, read json file etc. And everytime, when i call the method
i18n.getTextByMap('TEXT1').then((val) => print(val));
it gonna read the json file again and again. I tried to rewrite the method to prevent reading json file many times
Future<String> getTextByMap(String textId) {
if(this._jsonFiltered == null)
{
return this._prepareData().then((filterd) {
return filterd[textId];
});
}
return new Future(() => this._jsonFiltered[textId]);
}
but it doesn't work too, because dart works in async way.
My question is, how can i keep this json file content in an object? Read json file only one time and keep the contents in an object, it is better then read json file everytime, that is my opinion.
It could do everything in sync way, then i wouldn't have such as problem but this is not dart terminology.
In which order do dart execute I/O operations, like this?
Future
I/O Events
My solution would be to create a class with a factory constructor. The factory constructor always returns a object of that file.
Your problem is that futures are parallel. So both calls are executed in parallel. The solution is to let the first future complete and then do other stuff to be able to get cached results.
Then you can have a read() method that reads the value of the file if it is not present in the classes "contents" attribute for example - or if that attribute is not null, it loads the file in background.
In both cases a completer or future is returned you can listen on.
EDIT Example Code:
example_async_file_factory.dart
import 'dart:io';
import 'dart:async';
class FileHolder {
String _contents = null;
String path;
static Map<String, FileHolder> _files;
factory FileHolder(String path) {
if (_files == null) {
_files = {};
}
if (_files.containsKey(path)) {
return _files[path];
} else {
final fh = new FileHolder._internal(path);
_files[path] = fh;
return fh;
}
}
FileHolder._internal(this.path);
Future<String> getContents() {
if(_contents != null) {
print("cached");
return new Future.value(_contents);
} else {
print("read");
File f = new File(this.path);
Future<String> future = f.readAsString();
Completer completer = new Completer();
future.then((String c) {
_contents = c;
completer.complete(_contents);
});
return completer.future;
}
}
}
void main() {
FileHolder f = new FileHolder("example_async_file_factory.dart");
f.getContents().then((String contents) {
print(contents.length);
FileHolder f2 = new FileHolder("example_async_file_factory.dart");
f2.getContents().then((String contents) {
print(contents.length);
});
f2.getContents().then((String contents) {
print(contents.length);
});
f.getContents().then((String contents) {
print(contents.length);
});
});
}
Output:
read
1411
cached
cached
cached
1411
1411
1411
Regards
Robert

How to call a dart method from Javascript after dart2js

I got this Dart Script below and I want to access the methods from the class hello_world by JavaScript after I compiled the Dart Script with dart2js.
Does anybody know how this works?!
I already know how to access the functions like foo(...), thats not the problem, but it does not work the same way with classes and methods.
And the tutorials on dartlang.org only explain how to access functions, not methods and classes.
I dont get it...
import 'dart:js' as js;
class hello_world {
String hello = 'Hello World!';
String getHello() {
print("getHello!!!!!");
return hello;
}
void ausgabe() {
print("Hallo Welt");
//return 0;
}
}
String foo(int n) {
print("hallo");
void foo2() {
print("hallo2");
}
//works
js.context['foo2'] = foo2;
return 'Hallo';
}
void main() {
int zahl1 = 3;
int zahl2 = 1234;
String w = 'test';
hello_world test = new hello_world();
//works
js.context['foo'] = foo;
}
Assuming you want to create a Js function bind on a Dart method you can do almost the same thing :
void main() {
hello_world test = new hello_world();
// define a 'getHelloOnTest' Js function
js.context['getHelloOnTest'] = test.getHello;
}
Now on Js side you can use :
getHelloOnTest();

Resources