I'm using Angular-gettext to extract strings from .html and .js files for multi-language translation using Gruntfile.js:
grunt.initConfig({
nggettext_extract: {
pot: {
files: {
'po/template.pot': ['**/*.html', '**/*.cshtml', '**/controller.caseload.js']
}
},
}
But when I try to pull from a .cshtml file, it is not being extracted.
I need to extract from my Header.cshtml file because I am using it as my Layout for my angular app. The layout basically displays a header bar at the top of every page that contains user information (Profile, Preferences, Logout, etc.).
When I try to add a line like <div translate>Preferences<div> to my Header.cshtml file, it doesn't extract into my .pot file. But if I add that same line to my index.html file, it extracts correctly and I am then able to define a translation for it.
Is there a good way to do this with angular-gettext for .cshtml files?
Try to add this code to your option section.
options: {
extensions: {
htm: 'html',
html: 'html',
php: 'html',
phtml: 'html',
tml: 'html',
js: 'js',
cshtml: 'html'
}
Maybe it's trying to parse your template as a Javascript by default.
Related
I have combined a CLI generated Vue application with ASP.NET Core web application.
I want to create a new entry point and use this new entry point in the MVC view while not impacting the existing main.js entry point.
I am using the following vue.config.js file to add the second entry point.
// https://cli.vuejs.org/config/#pages
module.exports = {
pages: {
index: {
// entry for the page
entry: 'src/main.js',
// the source template
template: 'public/index.html',
// output as dist/index.html
filename: 'index.html',
// when using title option,
// template title tag needs to be <title><%= htmlWebpackPlugin.options.title %></title>
title: 'Index Page',
// chunks to include on this page, by default includes
// extracted common chunks and vendor chunks.
chunks: ['chunk-vendors', 'chunk-common', 'index']
},
index2: {
// entry for the page
entry: 'src/index2.js',
// the source template
template: 'public/index2.html',
// output as dist/index.html
filename: 'index2.html',
// when using title option,
// template title tag needs to be <title><%= htmlWebpackPlugin.options.title %></title>
title: 'Index2 Page',
// chunks to include on this page, by default includes
// extracted common chunks and vendor chunks.
chunks: ['chunk-vendors', 'chunk-common', 'index2']
},
// when using the entry-only string format,
// template is inferred to be `public/subpage.html`
// and falls back to `public/index.html` if not found.
// Output filename is inferred to be `subpage.html`.
//subpage: 'src/subpage/main.js'
}
}
In the Views/Index.cshtml how can I reference the necessary files when the generated files include a hash. i.e. i need to reference index2.24ba2458.js and chunk-vendors.869468b2.js (as well as the css files)
Can I redirect the output directory for index2.html to /Views/Home/Index2.cshtml?
Is it possible that I can serve a HMR js to an mvc view?
You can disable the filename hashing in the config so that you can reference the js file output to the dist directory.
module.exports = {
filenameHashing: false,
I have a Ruby on Rails application with normally integrated TinyMCE (JS not the gem used)
Now I want to integrate a filemanager, which one can I use for this? Upload is not required, I only want to browse trough my picture galary.
Written my own File Manager.
To access the Filemanager from TinyMCE you need to set up the button correctly
in TinyMCE options you have to add this:
file_browser_callback: function (field_name, url, type, win) {
tinymce.activeEditor.windowManager.open({
title: "My file browser",
url: "/uploads/filechooser/",
width: 850,
height: 600
}, {
oninsert: function (url) {
win.document.getElementById(field_name).value = url;
}
});
}
in URL you have to specify the path to your own filechooser.
and in filechooser you need this:
$(".filechooser").click(function () {
top.tinymce.activeEditor.windowManager.getParams().oninsert($(this).parent().prev().val());
top.tinymce.activeEditor.windowManager.close();
});
to return the selected image or file back to TinyMCE
So here is the scenario:
I have 4 entries in a database, they are 4 map routes.
Each map route has its own XML file containing the co-ordinates of each route, I have written an ajax function to pull the data from the xml and write it to a google map
this is an extract from the code
$.ajax({
type: 'GET',
url: '/route4.gpx',
dataType: 'xml',
success: function(track) {
var grids = [];
var bounds = new google.maps.LatLngBounds ();
$(track).find('trkpt').each(function() {
var lat = $(this).attr('lat');
var lon = $(this).attr('lon');
var point = new google.maps.LatLng(lat, lon);
grids.push(point);
bounds.extend(point);
I have this code saved into 4 javascript files where the URL line is different on each (route1.gpx, route2.gpx etc)
What I want to do is on the show.html.erb file is to change the javascript_include_tag to update to the relevant javascript file
So the show.html.erb tags look like the following
<%= javascript_include_tag "http://maps.google.com/maps/api/js?sensor=false" ,"http://code.jquery.com/jquery-1.9.1.min.js", "/js/script1.js" =%>
what I would like is the last reference to change when I visit a different page so
when linked to show/1 the javascript file would be "/js/script1.js"
when linked to show/2 the javascript file would be "/js/script2.js"
when linked to show/3 the javascript file would be "/js/script3.js"
when linked to show/4 the javascript file would be "/js/script4.js"
So is there anyway to write into the javascript_include_tag to achieve this?
All help/suggestions/comments appreciated
You could interpolate the string passed to javascript_include_tag, pass it as an instance variable etc, but I think you are heading down the wrong track. I would have a single javascript function that takes the url to make the ajax request to as a parameter.
You would then call that function with that parameter. You've got several choices here.
You could have a script tag where you generate the function call dynamically, ie you do something along the lines of
$(function(){
my_function(<%= #url.to_json %>)
})
You could have a script tag where you set a window property with the url and use that later:
window.map_url = <%= #url.to_json %>
and then somewhere else
$(function(){
my_function(window.map_url)
})
You could have the function call be part of the static javascript, but have it pull its parameters either from the data attribute of some relevant DOM element
$(function(){
my_function($('some_element').data('url'))
})
I'd usually go for the latter
Why don't you interpolate?
<%= javascript_include_tag "http://maps.google.com/maps/api/js?sensor=false" ,"http://code.jquery.com/jquery-1.9.1.min.js", "/js/script#{controller_variable_for_example_id}.js" =%>
I am using the jquery-ui version of Blueimp upload and I like how I can format a table and display files that were just uploaded. But I'd like to use it as a file manager as well so I want to preload existing files and display than as if they were just uploaded. How can I do that? A sample link to where someone else has addressed this would suffice. BTW, I am uploading several different file types, not just images.
Thanks!
Or without an ajax call:
Prepare array containing details of existing files, e.g:
var files = [
{
"name":"fileName.jpg",
"size":775702,
"type":"image/jpeg",
"url":"http://mydomain.com/files/fileName.jpg",
"deleteUrl":"http://mydomain.com/files/fileName.jpg",
"deleteType":"DELETE"
},
{
"name":"file2.jpg",
"size":68222,
"type":"image/jpeg",
"url":"http://mydomain.com/files/file2.jpg",
"deleteUrl":"http://mydomain.com/files/file2.jpg",
"deleteType":"DELETE"
}
];
Call done callback
var $form = $('#fileupload');
// Init fileuploader if not initialized
// $form.fileupload();
$form.fileupload('option', 'done').call($form, $.Event('done'), {result: {files: files}});
I also had the same problem. It is not magic how it works. I recommend to examine the UploadHandler.php file. Then you will be able to modify this plugin accordind to your needs.
The code above in your second post is just an ajax call to the uploader script (by default index.php in server/php/ folder). The call method is set to "get" by default in $.ajax object.
Open the UploadHandler.php file and go to the class method "initialize(...)". You will see how the call with "get" handled. UploadHandler calls the class method this->get(.:.) to prepare and send the list of existing files. If you use other upload directory, you need pass a parameter to the UploadHänder. Simply chage the url property in the $.ajax object like :
url: $('#fileupload').fileupload('option', 'url')+'?otherDir='+myDir,
then you should initialize the option property of the UploadHandler before you create a new UploadHandler object like this:
$otherDir = trim($_REQUEST['otherDir']);
$otherDir_url = [anyURL] .'/'.$otherDir;//so that the files can be downloaded by clicking on the link
$options = array(
'upload_dir'=> $otherDir,
'upload_url'=> $otherDir_url,
);
$upload_handler = new UploadHandler($options);
Found the code in the main js file... It wasn't obvious how it worked. Got it working just fine.
// Load existing files:
$.ajax({
url: $('#fileupload').fileupload('option', 'url'),
dataType: 'json',
context: $('#fileupload')[0]
}).done(function (result) {
$(this).fileupload('option', 'done').call(this, null, {result: result});
});
If any of you looking at this is doing it in .NET, find this: (for me it is in application.js
For a fairly recent version, there is a function
// Load existing files:
$.getJSON($('#fileupload form').prop('action'), function(files) {
files = somethingelse;
var fu = $('#fileupload').data('fileupload');
fu._adjustMaxNumberOfFiles(-files.length);
fu._renderDownload(files)
.appendTo($('#fileupload .files'))
.fadeIn(function() {
// Fix for IE7 and lower:
$(this).show();
});
});
Inside the application.js
I'm doing it for .NET though, and actually needed this gone.
Then set your somethingelse to either your files or "" depending on what you want to show. If you remove the line files = somethingelse then it will preload all files from the folder.
I'm using Handlebars.js, and currently all my templates live inside script tags which live inside .html files housing dozens of other templates, also inside script tags.
<script type="text/template" id="template-1">
<div>{{variable}}</div>
</script>
<script type="text/template" id="template-2">
<div>{{variable}}</div>
</script>
<script type="text/template" id="template-3">
<div>{{variable}}</div>
</script>
...
Then I include this file on the server-side as a partial.
This has the following disadvantages:
A bunch of templates are crammed into HTML files.
Finding a given template is tedious.
I'm looking for a better way to organize my templates. I'd like each each template to live in its own file. For example:
/public/views/my_controller/my_action/some_template.html
/public/views/my_controller/my_action/some_other_template.html
/public/views/my_controller/my_other_action/another_template.html
/public/views/my_controller/my_other_action/yet_another_template.html
/public/views/shared/my_shared_template.html
Then at the top of my view, in the backend code, I can include these templates when the page loads, like this:
SomeTemplateLibrary.require(
"/public/views/my_controller/my_action/*",
"/public/views/shared/my_shared_template.html"
)
This would include all templates in /public/views/my_controller/my_action/ and also include /public/views/shared/my_shared_template.html.
My question: Are there any libraries out there that provide this or similar functionality? Or, does anyone have any alternative organizational suggestions?
RequireJS is really good library for AMD style dependency management. You can actually use the 'text' plugin of requireJS to load the template file in to your UI component. Once the template is attached to the DOM, you may use any MVVM, MVC library for bindings OR just use jQuery events for your logic.
I'm the author of BoilerplateJS. BoilerplateJS reference architecture uses requireJS for dependency management. It also provides a reference implementations to show how a self contained UI Components should be created. Self contained in the sense to handle its own view template, code behind, css, localization files, etc.
There is some more information available on the boilerplateJS homepage, under "UI components".
http://boilerplatejs.org/
I ended up using RequireJS, which pretty much let me do this. See http://aaronhardy.com/javascript/javascript-architecture-requirejs-dependency-management/.
I use a template loader that loads the template using ajax the first time it is needed, and caches it locally for future requests. I also use a debug variable to make sure the template is not cached when I am in development:
var template_loader = {
templates_cache : {},
load_template : function load_template (params, callback) {
var template;
if (this.templates_cache[params.url]){
callback(this.templates_cache[params.url]);
}
else{
if (debug){
params.url = params.url + '?t=' + new Date().getTime(), //add timestamp for dev (avoid caching)
console.log('avoid caching url in template loader...');
}
$.ajax({
url: params.url,
success: function(data) {
template = Handlebars.compile(data);
if (params.cache){
this.templates_cache[params.url] = template;
}
callback(template);
}
});
}
}
};
The template is loaded like this:
template_loader.load_template({url: '/templates/mytemplate.handlebars'}, function (template){
var template_data = {}; //get your data
$('#holder').html(template(template_data)); //render
})
there's this handy little jquery plugin I wrote for exactly this purpose.
https://github.com/cultofmetatron/handlebar-helper