I've been using Yesod's messages system to help keep my language consistent. For example, I have a message named MsgBrand, which gets interpolated into Hamlet files with no problem. However, I am now using a JavaScript library which needs this kind of information.
var tour = Tour.new();
tour.addSteps([
{ element: "#some-id",
title: "Some Title",
content: "_{MsgTourStepFoo}"
}
]);
However, _{MsgTourStepFoo} is appearing in the rendered JavaScript code verbatim. In other words, there is no interpolation. Is this normal or am I missing something?
This is normal. We could have a i18n-variant of Julius, but have avoided it so far simply because it seems like it would be more confusion than it's worth. Instead, you can use getMessageRender to get the message rendering function and then call it from Julius, something like:
Haskell:
messageRender <- getMessageRender
Julius:
content: "#{messageRender MsgTourStepFoo}"
Related
Using the webview_flutter with evaluateJavascript(), I've been able to modify the style of most elements of my website, but can't understand why some elements don't get modified.
My WebView is included, and the website to display within the WebView is https://dme.com.sg/index.php?dispatch=auth.login_form
I've included a snapshot as well, showing how I can hide and modify the colours for most of the elements, yet it seems all those that are within the "form" cannot be changed.
Would appreciate any help on how I can modify those as well, especially to change their colours to a darker theme to match the colours of the app.
WebView(
initialUrl: 'https://dme.com.sg/index.php?dispatch=auth.login_form',
javascriptMode: JavascriptMode.unrestricted,
onWebViewCreated: (controller) {
_controller = controller;
},
onPageStarted: (url) {
_controller.evaluateJavascript(
"document.getElementsByClassName('tygh-top-panel clearfix')[0].style.display='none';"
"document.getElementsByClassName('tygh-header clearfix')[0].style.display='none';"
"document.getElementsByClassName('tygh-header')[0].style.display='none';"
"document.getElementsByClassName('tygh-footer')[0].style.display='none';"
"document.getElementsByClassName('auth-information-grid')[0].style.display='none';"
"document.getElementsByClassName('ty-breadcrumbs clearfix')[0].style.display = 'none';"
"document.getElementsByClassName('container-fluid content-grid')[0].style.background = 'black';"
"document.getElementsByClassName('ty-mainbox-title')[0].style.color = 'pink';"
"document.getElementsByClassName('buttons-container clearfix')[0].style.display = 'none';"
);
},
),
Have kept tinkering around with it, and looking up JavaScript tutorial, and I managed to find a solution. So I'm not sure HOW or WHY, so still hoping someone could comment a response that explains so I can better understand.
Something else I've learnt, it's easier to just use the "console" tab of chrome to test the java scripts on the page before moving it into flutter webview.
Using the "document.getElementsByClassName("buttons-container clearfix")" command, I got a list of where the class was being used, and found the one I wanted to change was 1. It helps that when as you type the right index number, it gets highlighted on the website.
So then using "document.getElementsByClassName("buttons-container clearfix")1.style.background = 'black'" I managed to change the style of the element I wanted.
I've included a screengrab of the chrome console here if it can help anyone else.
I am trying to have my slides in a specific transition. Right now, I have something called "easing" which is used within my slideshow. The problem is that I have no idea how to change that specific portion. I have modified the slideshow to a great extent to make it usable for the work project I am working on. I definitely wanna use that for work and for myself, because I find it to be such a good slideshow. But, I would love to have a simple transition like the Sudo Slider, as opposed to easing.
(once I have a basic transitition, I could change it to another sudo transitiion effect, so that will not be a problem)
Anyhow, the plugin I found - the Sudo Slider - is found on this website
http://webbies.dk/assets/files/SudoSlider/package/demos/continuous.html
<script type="text/javascript" >
$(document).ready(function(){
var sudoSlider = $("#slider").sudoSlider({
numeric: true
continuous:true
});
});
</script>
As for the slideshow (called MovingBoxes), this is one of things I have modified within the code. As for the speed, I have to put it at 1 to "remove" the effect of the easing. But I would really like to be capable of using the Sudo Slider transition effects instead (or any other non-easing transition effect). How could I achieve this?
$.movingBoxes.defaultOptions = {
// Appearance
startPanel : 1,
reducedSize : 1,
fixedHeight : false,
// Behaviour
initAnimation: false,
stopAnimation: false,
hashTags: true,
wrap: true,
buildNav: false,
navFormatter: null,
easing: 'easeInOutQuint',
// Times
speed: 1, // animation time in milliseconds - 500 is original
}
You seem to think that transition effects are just setting an option, it't not.
Each of the transition effects you see in e.g. SudoSlider are made of complex code.
You could take a look at the function "boxTemplate" in: http://webbies.dk/assets/files/SudoSlider/package/js/jquery.sudoSlider.js
The "boxTemplate" function defines the different effects involving boxes in SudoSlider.
If that could easily be moved to work with a script like MovingBoxes, I would happily do it.
But making it work with MovingBoxes would involve rewriting most of it, something that's not going to happen here on StackOverflow.
When you render jade templates in express you can configure your application with 'view options', { layout: true } and the templates rendered will automatically get plugged into the body local of the layout template.
I'm trying to achieve the equivalent behavior rendering files from node.js, but without the express framework (I'm just building static files as part of a larger pipeline).
There appear to be two options:
Load both the main template and the layout, convert to functions, render the template first and then pass the results to the layout function
Use the standard template inheritance and block structure, but then I'm explicitly using named blocks
Are these the only options (which, fair enough, are still awesome), or am I missing some trick?
Edit
Here's a rough cut of the first option in case anyone is interested:
// Load jade
var jade = require('jade');
// Load actual template text
var layout = fs.readFileSync('layout-path', 'utf8')
tpl = fs.readFileSync('tpl-path', 'utf8');
// Compile template rendering function
layout = jade.compile(layout, { pretty: true, filename: 'layout-path' });
tpl = jade.compile(tpl, { pretty: true, filename: 'tpl-path' });
// Render jade template, passing in the info
var output = layout({ body: tpl({ local1: some_var, local2: some_var }) }
// Write rendered content to file
fs.writeFileSync('output.html', output);
I believe the answer is "no", you're not missing any trick. The two options you outline seem to me the two most straightforward ways to use jade to generate your file. Of course there are plenty of non-jade approaches as well. For example, you could merge the contents with the plates approach, good old String.replace, or split your layout into separate header ad footer fragment files and just concatenate them in head, body, foot order.
So we know how to compile it, we have seen its demos and loved it. We have seen probably only one real life opensource project based on it. So I look at the samples and see only 3 quite long C++ applications that can be ofmy intrest ASL\test\adam_tutorial\, ASL\test\adam_smoke\, ASL\test\eve_smoke\. But I still do not get how htving simple Eve file with:
dialog(name: "Clipping Path")
{
column(child_horizontal: align_fill)
{
popup(name: "Path:", bind: #path, items:
[
{ name: "None", value: empty },
{ name: "Path 1", value: 1 },
{ name: "Path 2", value: 2 }
]);
edit_number(name: "Flatness:", digits: 9, bind: #flatness);
}
button(name: "OK", default: true, bind: #result);
}
in it, Adam file bound to it (theoretically, because I do not quite get how to bind Eve to adam and see no tutorialon how to do this), with
sheet clipping_path
{
output:
result <== { path: path, flatness: flatness };
interface:
unlink flatness : 0.0 <== (path == empty) ? 0.0 : flatness;
path : 1;
}
in it, make each time flatness variableis changed some C++ function of mine called (A simple one couting new flatness value for example)
So How to implement such thing with Adobe Adam and Eve and Boost ofcourse?
Update
We have tried to do it here and it worked but not in a live feedback way - only on dialog close action. And than here but due to our compile evrething on linux absession we have paused our development in ASL programming and started investing time into ASL compilation on Linux OS.
A good place to ask questions about ASL is on the ASL developer mailing list: http://sourceforge.net/mail/?group_id=132417.
You might want to look at the "Begin" test app . Although this only runs Mac and Win it does demonstrate how to wire things up.
The basic idea is that when a layout description (Eve) is parsed it will call your add_view_proc http://stlab.adobe.com/structadobe_1_1eve__callback__suite__t.html#a964b55af7417ae24aacbf552d1efbda4 with the arguments expression. Normally you use bind_layout_proc for the callback which will handle the argument evaluation for your and call a simplified callback that takes a dictionary with the arguments.
When your callback is invoked, you would typically create an appropriate widget and associate the dictionary to the widget or extract the arguments of interest from the dictionary and store them in a struct. Using the bind argument, you can setup callbacks with the associated sheet (Adam), using the monitor_xxxx functions on sheet_t. Usually you'll use monitor_value and monitor_enabled. When called, you set the value or enabled state on the widget. When the widgets value is changed by the user, and widget is invoked (it may be through an event handler, or a callback, or whatever mechanism your UI toolkit supports) you call sheet_t::set() to set the value of the cell and then sheet_t::update() to cause the sheet to recalculate.
That's about it - When trying to get Adam/Eve going with a new UI framework - start small. I usually start with just a window containing two checkboxs and wire up Eve first. Once that is going add Adam and a simple sheet connecting two boolean cells so you can see if things are happening correctly. Once you have that going you'll find it's pretty simple to get much more complex UIs wired up.
I understand that to share variables between templates you have to use hook preprocess.
I think I've got the hook preprocess bit ok.
I've got this in my theme's template php file.
function rootcandy_preprocess_views_view_fields__default(&$vars) {
$vars ['brian'] = 'hello from brian';
In views-view-fields--default.tpl.php I've got this:
print $brian ;
So it prints out "hello from brian". Hooray.
However I want to print out the header of my View - which is available in views-view.tpl.php but not in views-view-fields.
This code below looks promising but I don't understand why it doesn't result in my header being printed out in views-view-fields--default.tpl.php
function rootcandy_preprocess_views_view_fields__default(&$vars)
{$vars['mytitle'] = $vars['view']->display[$vars['view']->current_display]->header['area'];
}
I have of course got print $mytitle ; in views-view-fields--default.tpl.php
Any ideas?
Thanks.
It is a matter of timing, when views-view-fields is parsing, views-view has been parsed and you can't get his variables - They are not 'existing' anymore.
Use a function to generate the value and refer to that function in views-view and in views-view-fields, or create a module to produce this value and use it freely in any template.