How to conditionally select JavaScript in AngularDart - dart

The instruction for routing in AngularDart recommend the following for development mode, but explicitly says not to use it for production:
// WARNING: DO NOT set the <base href> like this in production!
// Details: https://webdev.dartlang.org/angular/guide/router
(function () {
var m = document.location.pathname.match(/^(\/[-\w]+)+\/web($|\/)/);
document.write('<base href="' + (m ? m[0] : '/') + '" />');
}());
How can I conditionally include this code in development mode, only? I believe I know how to detect development mode in Dart code, but I'm not sure how to detect the mode and make the selection in JavaScript before any of the application code even loads.

Related

Progressive web app launched in standalone does not detect site updates

I've a Progressive web app that is added on my home screen. I've chosen standalone run type, I've a service-worker running in it.
All working perfectly, only one doubt: if I update my site (with its relative service-worker, I can see updates if I load it directly into browser, but if I launch it by home added link I see always the old site.
There is a way to request updates when launching my site in standalone mode?
I think you are asking "is there a way to dynamically update my precached assets without updating my service worker?"
Yes!
I have been working on an upgrade to the JSON cache strategy here -> https://serviceworke.rs/json-cache.html We will publish this soon!
After digging I've discovered the simple solution, I report it for others.
iOS does not support service-workers, so that is not the problem.
iOS keep in cache many resources, so the solution is to add a parameter to the various imports like so:
The best solution to ensure updates is to add an hash of imported as the parameter.
Alternatively we can use a timestamp to ensure that resources are ALWAYS updated.
To attach this parameter we can import these resources injecting them with javascript, like so
/**
* inietta uno script nella pagina
*/
function appendScript(url) {
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = url;
script.async = false; // async false to wait for previous file loading
head.appendChild(script);
}
// create parameter with date
var currVersion = '?v=' + new Date().getTime();
// get head html element
var head = document.getElementsByTagName("head")[0];
// append script
appendScript('app.js' + currVersion);
// append css
head.insertAdjacentHTML('beforeend', '<link rel="stylesheet" type="text/css" href="style.css' + currVersion + '">');

How to add the language selector in the ckeditor tool

I've integrated the ckeditor gem for rails in the activeadmin gem. So far it is working good but I want to include the language selector which I've seen in the demo of the ckeditor. But I've not found any related article except this. The demo of that selector isthis. Thanks in advance.
Download CKEditor and check the following sample: samples\uilanguages.html
Basically, CKEditor demo just shows a custom select element, with the list of languages taken from samples/assets/uilanguages/languages.js
The most relevant lines from this sample are:
<script src="assets/uilanguages/languages.js"></script>
<script>
document.write( '<select disabled="disabled" id="languages" onchange="createEditor( this.value );">' );
// Get the language list from the _languages.js file.
for ( var i = 0 ; i < window.CKEDITOR_LANGS.length ; i++ ) {
document.write(
'<option value="' + window.CKEDITOR_LANGS[i].code + '">' +
window.CKEDITOR_LANGS[i].name +
'</option>' );
}
document.write( '</select>' );
</script>
Keep in mind that by default CKEditor auto detects the browser language and loads the correct translation. So, providing a select combo to a user may so that he could select the language may not have a lot of sense.

Can you use a background image in CSS with trigger.io?

Im trying to use a background image in a trigger.io ios mobile app but they dont seem to work. When I use catalyst it lists the image location in some temporary local file that doesn't exist.
Is it possible to use the background-image property in CSS with trigger.io and if so, how do I get it to work?
If you are creating a DOM element on the fly with zepto or jQuery:
forge.tools.getURL('img/yourImage.png', function(path) {
var el = $('<div style="background-image: url(' + path + ')"></div>');
});
Or if you just need to set it via zepto or jQuery:
forge.tools.getURL('img/yourImage.png', function(path) {
$("#yourElement").css("background-image", "url(" + path + ")");
});
Note: I've been using backbone.js and I just pass the "path" variable to my view that does not know anything about forge.tools.getURL.

Dynamic path in new.AjaxRequest with Rails

I was wondering if there's anyway to get a 'dynamic path' into a .js file through Ruby on Rails.
For example, I have the following:
new Ajax.Request('/tokens/destroy/' + GRID_ID, {asynchronous:true, evalScripts:true, onComplete:function(request){load('26', 'table1', request.responseText)}, parameters:'token=' + dsrc.id + '&authenticity_token=' + encodeURIComponent(AUTH_TOKEN)})
The main URL is '/tokens/destroy/:id', however on my production server this app runs as a sub folder. So the URL for this ajax call needs to be '/qrpsdrail/tokens/destroy/:id'
The URL this is being called from would be
/grids/1 or /qrpsdrail/grids/1
I could, of course, do ../../path -- but that seems a bit hackish. It is also dependent on the routing never changing, which at this stage I can't guarantee.
I'm just interested in seeing what other solutions there might be to this problem.
Thanks in advance :)
Maybe a bit hackish solution, but i have a configuration-file like described here, and so you could do something like, inside a config.yml :
development:
root: /
production:
root: /qrpsdrail/
and when you build your Ajaxrequest, you could write
new Ajax.Request("#{AppConfig.root}tokens/destroy/' + ...
But it still looks like there should be a cleaner way to solve this ;)
you can use Dynamic path in new.AjaxRequest using javascript in rails
javascript
function dynamic_ajax(GRID_ID)
{
new Ajax.Request("/tokens/destroy?"+GRID_ID, {asynchronous:true, evalScripts:true, onComplete:function(request){load('26', 'table1', request.responseText)}, parameters:'token=' + dsrc.id + '&authenticity_token=' + encodeURIComponent(AUTH_TOKEN)});
}
html
Grid Id 1
Grid Id 2
Grid Id 3
You can set the path as an attribute to your html object that initiates the ajax call. An example would be:
HTML
<a id='my_clicky_thing' href='#' rails_path='<%= tokens_destroy_path %>'>Click me</a>
JQuery
$('#my_clicky_thing').live('click', function(){
var ajax_path = $(this).attr('rails_path');
/* Do ajax stuff here with the path */
});
This would allow you to use the actual rails path in your .js files, as you do in your views.
(This code may not work, it is for the concept only)

define JavaScript functions on iframe facebook app inside <fb:serverfbml> tag

How can I define a JavaScript function on the inside of ? I tried to load a JavaScript file on the end tag , but I still can't call the function in the JavaScript file.
Here is the FBML tag:
<fb:serverfbml>
<script type="text/fbml">
<fb:fbml>
Hello World!
<script src="http://absolute.path.to/your/javascript/file.js"></script>
</fb:fbml>
</script>
</fb:serverfbml>
And here is the JavaScript function in file.js:
function random_int(lo, hi) {
return Math.floor((Math.random() * (hi - lo)) + lo)
}
function do_colors(obj) {
var r = random_int(0, 255), b = random_int(0, 255), g = random_int(0, 255);
obj.setStyle({background: 'rgb('+[r, g, b].join(',')+')',
color: 'rgb('+[r<128?r+128:r-128, g<128?g+128:g-128, b<128?b+128:b-128].join(',')+')'});
}
I use rails and facebooker to develop the application.
Any idea or suggestion for including JavaScript functions?
Did you try loading the script first?
There are a couple of other guidelines here.
I can see how the following could bite you if you change your script.
Since the cache policy is set to never
expire, you should update the URL only
if the content of the script changes.
For example, you can change
http://foo.com/bar.js?v=1.0 to
http://foo.com/bar.js?v=2.0 or
http://foo.com/v1.0/bar.js to
http://foo.com/v2.0/bar.js when a new
version of the script is available.

Resources