</head>
<body>
<div id="add">
<div data-i18n="key">You have to Click here to find better result</div>
// If I am using that way that translate complete div and remove link from my text.
<div data-i18n="key">You have to</div> Click here <div data-i18n="key3">to find better result</div>
// If I am using that way code working fine but for this I have to use 3 keys for single sentences. Is it possible to fix this by single key ?
<script>
i18next
i18next.use(window.i18nextBrowserLanguageDetector)
i18next.use(window.i18nextXHRBackend)
.init({
debug: true,
tName: 't',
handleName: 'localize',
selectorAttr: 'data-i18n',
targetAttr: 'i18n-target',
optionsAttr: 'i18n-options',
useOptionsAttr: true,
parseDefaultValueFromContent: true,
initImmediate: true,
fallbackLng: false,
interpolation: {
"escapeValue": true,
"prefix": "{{",
"suffix": "}}",
"formatSeparator": ",",
"unescapePrefix": "-",
"nestingPrefix": "$t(",
"nestingSuffix": ")"
},
detection: {
order: ['querystring', 'cookie', 'navigator', 'htmlTag'],
lookupCookie: 'i18next',
lookupLocalStorage: 'i18nextLng',
caches: ['cookie'],
},
"backend": {
"loadPath": "/locales/{{lng}}/{{ns}}.json"
}
}, function(err, t) {
jqueryI18next.init(i18next, $);
$('#add').localize();
});
</script>
</body>
This code translate complete div
a) Add the tag to your translated text. -> One key
"key": "You have to Click here to find better result"
and
<div data-i18n="html:key">You have to Click here to find better result</div>
to set innerHTML
b) Interpolate the a tag into translation. -> Two keys
"key": "You have to {{link}} to find better result"
with:
$('#add').localize({ link: 'Click here', interpolation: { escapeValue: false }});
translate Click here using i18next.t directly
Related
I have integrated the bootstrap-wysihtml5 editor to description section in my rails application. Now I want to add the client side validation so that it would validate the presence of description field. I used bootstrap-wysihtml5-rails gem.
The editor is being initialized with following code:
<script type="text/javascript">
$(document).ready(function(){
$('#description').each(function(i, elem) {
$(elem).wysihtml5({
toolbar: {
"fa": true, // use Font Awesome
"font-styles": false, // Font styling, e.g. h1, h2, etc.
"emphasis": true, // Italics, bold, etc.
"lists": false, // (Un)ordered lists, e.g. Bullets, Numbers.
"html": false, // Button which allows you to edit the generated HTML.
"link": true, // Button to insert a link.
"image": true, // Button to insert an image.
"color": false, // Button to change color of font
"blockquote": false // Blockquote
}
});
});
})
Thanks in advance.
Found the solution by adding the events as suggested by the documentation
$('#some-textarea').wysihtml5({
"events": {
"load": function() {
console.log("Loaded!");
},
"blur": function() {
console.log("Blured");
}
}
});
I have somewhat of a complex requirement here (a real head-scratcher)... and I'm not sure on the best way to proceed:
Requirement:
Build a page for managing widgets (CMS content blocks) in MVC5 using AngularJS for the frontend (as per the rest of the admin UI). The problem is that each widget has its own specific set of properties. They all share some properties like Title, IsEnabled, etc.. but an HTML Widget for example will have a BodyContent field and a Slider Widget would have a collection of images, etc..
My first thought was using [UIHint] and Html.EditorFor so that each widget type will have its own markup.. I think that's pretty straightforward, but how could we get the properties from any such arbitrary widget into the AngularJS model?
Example Controller
widgetsApp.controller('widgetController', function ($scope, $http) {
$scope.emptyGuid = '00000000-0000-0000-0000-000000000000';
$scope.id = $scope.emptyGuid;
$scope.title = '';
$scope.order = 0;
$scope.enabled = false;
$scope.widgetType = '';
$scope.zoneId = $scope.emptyGuid;
// etc
// how to get properties of ANY widget type?
Is this even possible? Is there a better solution? Note, I might consider changing the code to use Knockout or some other such framework if it can support my requirements.
Edit
Note that the issue is further complicated because of the fact of needing to then pass such a model back to the server and dealing with it there. In regular MVC controllers, I can use Request.Form to inspect what other values are there, but I'm using Web API and not sure if that's possible there.
Edit 2
Okay, so I think I'm on the right track, but still having issues. Firstly, here's my progress:
I found out about .factory and made a test page like this:
<div ng-app="myApp">
<div ng-controller="controller1">
<button class="btn btn-primary" ng-click="showAllInfo()">Show Info</button>
</div>
<div ng-controller="controller2">
</div>
</div>
<script type="text/javascript">
var myApp = angular.module('myApp', []);
myApp.factory('widgetModel', function () {
return {
id: '00000000-0000-0000-0000-000000000000',
title: '',
order: 0,
enabled: false,
widgetName: '',
widgetType: '',
zoneId: '00000000-0000-0000-0000-000000000000',
displayCondition: '',
widgetValues: '',
pageId: null,
cultureCode: '',
refId: null,
};
});
// This is representative of the main controller
myApp.controller('controller1', function ($scope, widgetModel) {
$scope.emptyGuid = '00000000-0000-0000-0000-000000000000';
$scope.model = widgetModel;
$scope.model.id = $scope.emptyGuid;
$scope.showAllInfo = function () {
alert("id: " + $scope.model.id + ", New Property: " + $scope.model.myNewProperty);
};
});
// This is representative of the details controller (to add properties specific to that particular widget type)
myApp.controller('controller2', function ($scope, widgetModel) {
$scope.model = widgetModel;
$scope.model.myNewProperty = "My Awesome Widget";
});
</script>
The above test works beautifully.. however, when I use this sort of code in my real application it fails to work and the reason I believe is because the second controller is injected into the DOM later on.. here's what's happening:
I have a div as follows
<div ng-bind-html="widgetDetails"></div>
and after loading the other details, I load the html for this as such:
$http.get("/admin/widgets/get-editor-ui/" + $scope.model.id).success(function (json) {
$scope.widgetDetails = $sce.trustAsHtml(json.Content);
});
That works.. I can see my the html controls for my new properties there.. the following snippet is the HTML which is injected into the above div:
<div ng-controller="widgetDetailsController">
<div class="col-sm-12 col-md-12">
<div class="form-group">
#Html.Label("BodyContent", "Body Content", new { #class = "control-label" })
#Html.TextArea("BodyContent", null, new { #class = "form-control", ng_model = "model.bodyContent", ui_tinymce = "tinyMCEOptions_BodyContent" })
</div>
</div>
<button class="btn" ng-click="test()">Test</button>
</div>
<script type="text/javascript">
widgetsApp.controller('widgetDetailsController', function ($scope, $http, widgetModel) {
$scope.model = widgetModel;
$scope.json = angular.fromJson($scope.model.widgetValues);
$scope.model.bodyContent = $scope.json.bodyContent || "";
$scope.test = function () {
alert($scope.model.bodyContent);
};
});
</script>
When I click, the "Test" button, nothing happens...
I tried to load a controller dynamically via the method outlined at this link: http://www.bennadel.com/blog/2553-loading-angularjs-components-after-your-application-has-been-bootstrapped.htm
It doesn't work. To be honest though, I am new to AngularJS and don't really know all the ins out outs of it.. any help would be great.
IF you are just looking to get the properties and their values, then on AngularJS or Javascript side you can just iterate over the object properties to get all the properties defined over the object.
for(var key in obj){
$scope[key]=obj[key];
}
Once on scope you can bind it to the view using ng-model.
This approach would get you the data but metadata about the data such as control to render for property need would not work.
For advance scenarios you should try to send metadata about each properties that can help render it on the view.
If ng-model is setup correctly all data would be send to server.
On the server you can use the dynamic keyword as input parameter to webapi method and there should be a similar method to iterate over the payload using key value pair.
I ended up changing to KnockoutJS, partly because AngularJS ended up being a bit overkill for my needs, but also because it couldn't handle this situation very nicely (or at least there was no obvious and clean way to do it). My KnockoutJS solution is below:
In the main page, I add an html element:
<fieldset id="widget-details"></fieldset>
An example of arbitrary HTML to be injected:
<div id="widget-content" class="col-sm-12 col-md-12">
<div class="form-group">
#Html.Label("BodyContent", "Body Content", new { #class = "control-label" })
#Html.TextArea("BodyContent", null, new { #class = "form-control", data_bind = "wysiwyg: bodyContent, wysiwygConfig: tinyMCEConfig" })
</div>
</div>
<script type="text/javascript">
function updateModel() {
var data = ko.mapping.fromJSON(viewModel.widgetValues());
viewModel.bodyContent = ko.observable("");
if (data && data.BodyContent) {
viewModel.bodyContent(data.BodyContent());
}
viewModel.tinyMCEConfig = {
theme: "modern",
plugins: [
"advlist autolink lists link image charmap print preview hr anchor pagebreak",
"searchreplace wordcount visualblocks visualchars code fullscreen",
"insertdatetime media nonbreaking save table contextmenu directionality",
"emoticons template paste textcolor"
],
toolbar1: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image",
toolbar2: "print preview media | forecolor backcolor emoticons",
image_advtab: true,
templates: [
{ title: 'Test template 1', content: 'Test 1' },
{ title: 'Test template 2', content: 'Test 2' }
],
content_css: tinyMCEContentCss
};
};
function onBeforeSave() {
var data = {
BodyContent: viewModel.bodyContent()
};
viewModel.widgetValues(ko.mapping.toJSON(data));
};
</script>
Then in my script for the main page, I use the following:
$.ajax({
url: "/admin/widgets/get-editor-ui/" + self.id(),
type: "GET",
dataType: "json",
async: false
})
.done(function (json) {
var result = $(json.Content);
var content = $(result.filter('#widget-content')[0]);
var details = $('<div>').append(content.clone()).html();
$("#widget-details").html(details);
var scripts = result.filter('script');
scripts.appendTo('body');
// ensure the function exists before calling it...
if (typeof updateModel == 'function') {
updateModel();
var elementToBind = $("#widget-details")[0];
ko.cleanNode(elementToBind);
ko.applyBindings(viewModel, elementToBind);
}
})
.fail(function () {
$.notify("There was an error when retrieving the record.", "error");
});
and when I save, I call this code:
// ensure the function exists before calling it...
if (typeof onBeforeSave == 'function') {
onBeforeSave();
}
Works really well.
I'm using MVC4 with knockoutjs (with mapping plugin) and the binding plugin for tinymce (which defines the "wysiwyg" binding to associate a textarea to a TinyMCE editor) . Everything works fine except that I've been unsuccessfully trying to get unobtrusive validation to work in TinyMCE controls. As you will see, I've applied several of the suggested solutions found here and in google but none works.
The TinyMCE (and also TinyMCE jquery) version is 4.0.26
The involved parts of the code are as follow:
.CS (only the property associated with the TinyMCE control)
[AllowHtml]
[LocRequired]
[LocDisplayName(Consts.LBL_TXT_EN)]
public string Text_en { get; set; }
The "Loc" prefixed attributes inherit from RequiredAttribute and DisplayNameAttribute data annotation classes and were made to also retrieve localized texts from the DB. They work fine, so assume they are regular Required and DisplayName attributes. There are other similar properties: Text_es, Text_de, etc which should have a similar set of attributes, but for now I'm only setting the LocRequired in Text_en, until the problem solves.
.CSHTML:
<td>
<div class="editor-label required">
#Html.LabelFor(model => model.Text_en)
</div>
<div class="editor-field">
#Html.TextAreaFor(model => model.Text_en,new{data_bind="wysiwyg:Text_en"})
#Html.ValidationMessageFor(model => model.Text_en)
</div>
</td>
I have several of those, for the other properties mentioned above, each one with their corresponding setting of course.
javascript: (see the comments in code) . I've already applied the "ignore" option for the validator, the tinymce.triggerSave(), and a form.validate() definition and nothing works
$(function()
{
...
var mapping =
{
create: function(options)
{
var vm = ko.mapping.fromJS(options.data);
...
...
vm.acceptDataEdit = function() //this is associated with the click event "Save" button in the form
{
tinymce.triggerSave(); //Almost every search on google says it solves the problem... Well, here it doesn't
var ok = frm.valid(); //Validation works for other fields but not for the tinymce
if (ok)
{
...//posts the data
}
return false;
}
ko.editable(vm);// ko.editable(this);
return vm;
}
}
ko.bindingHandlers['wysiwyg'].defaults =
{
theme: "modern",
plugins: [
"advlist autolink link image lists charmap print preview hr anchor pagebreak spellchecker",
"searchreplace visualblocks visualchars code fullscreen insertdatetime media nonbreaking",
"table directionality emoticons template paste textcolor"
],
forced_root_block : false,
force_br_newlines : true,
force_p_newlines : false,
content_css: "css/content.css",
toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | l ink image | print preview media fullpage | forecolor backcolor emoticons",
style_formats: [
{title: 'Bold text', inline: 'b'},
{title: 'Red text', inline: 'span', styles: {color: '#ff0000'}},
{title: 'Red header', block: 'h1', styles: {color: '#ff0000'}},
{title: 'Example 1', inline: 'span', classes: 'example1'},
{title: 'Example 2', inline: 'span', classes: 'example2'},
{title: 'Table styles'},
{title: 'Table row 1', selector: 'tr', classes: 'tablerow1'}
]
};
var viewModel = ko.mapping.fromJS(vData, mapping);
ko.applyBindings(viewModel);
$.validator.setDefaults({ ignore: '' }); // again, this is supposed to make the validator process the hidden text areas, but nothing happens
});
and I also tried adding, after the setDefaults line, equally without result:
frm.validate({
rules: {
Text_en:
{
required: true
}
}});
Any other suggestions? Do I have something wrong here?
It finally worked. Thanks to #marathonman I rechecked the posts of the link he provided (previously, the accepted one was the source for what i had already done), but this time I also looked at the Brian Surowiec's post (I'll upvote these two posts when I have enough credits to be able to vote) and following his advice of making the textareas to be shown off-screen was what made it work. So I added just what he did:
var offCss = { position: 'absolute', height: 0, width: 0, top: -100 };
$('#Text_en').css(offCss);
$('#Text_es').css(offCss);
...//and the same for the others
//after that called show() for them
$('#Text_en').show();
$('#Text_es').show();
...//and so on
And that was all. By the way : of the other code I posted , the frm.validate code i tried before, was not needed at all, everything else was kept.
I'm using Bootstrap X-editable in a Rails app. I would like to replace the word empty in a table cell with the name of the field.
The X-editable documentation says the emptytext will replace it.
But, the following doesn't work - I still get empty.
<a href="#" class="answer" data-type="textarea" emptytext="Description" data-pk="1" data-resource="task" data-source="/tasks" data-name="longdesc" data-url="/tasks/<%= task.id %> ">
This is the javascript:
$(".answer").editable
placement: 'bottom'
Thanks for the help.
it's not emptytext="Description" but data-emptytext="Description".
<a href="#" class="answer" data-type="textarea" data-emptytext="Description" data-pk="1" data-resource="task" data-source="/tasks" data-name="longdesc" data-url="/tasks/<%= task.id %> ">
You can also do it in javascript instead of inline html.
$('.answer.description').editable({
placement: 'bottom',
emptytext: 'Description'
});
EDIT about HTML5
Look here about HTML5 data-attribute. This is why all the x-editable's settings start with data-*.
EDIT Answering your comment
You can do like in the official demo Look at the sex select with the prepend data (and display tweak):
$('#sex').editable({
prepend: "not selected",
source: [
{value: 1, text: 'Male'},
{value: 2, text: 'Female'}
],
display: function(value, sourceData) {
var colors = {"": "gray", 1: "green", 2: "blue"},
elem = $.grep(sourceData, function(o){return o.value == value;});
if(elem.length) {
$(this).text(elem[0].text).css("color", colors[value]);
} else {
$(this).empty();
}
}
});
Or you can directly add a sourceData with {value: 0, text: 'Null'}
or you can use
$('.answer').editable({
placement: 'bottom',
defaultValue: 'Description' // for default value
});
I was trying to write a simple directive to generate a (potentially) more complex dom element. I am quite confused about what is going on here but I think the directive I use inside my directive get linked first? Anyway the element I am generating is not visible where it should.
Sorry for all that confusion, here is the plunkr:
http://plnkr.co/edit/vWxTmA1tQ2rz6Z9dJyU9?p=preview
I think the directive I use inside my directive get linked first?
Yes. A child directive's link function will execute before the parent's link function.
Here is a fiddle that shows two nested directives,
<div d1>
<div d2></div>
</div>
and it logs when the directives' controller and link functions are called.
There are a few issues with your Plunker:
Since you are using # for your isolate scopes, you need to use {{}}s in your attribute values:
<visible value='{{visible}}'>plop</visible>
<invisible value='{{visible}}'>plop</invisible>
Since $scope.visible is defined in your controller, I assume you meant to use that value, and not test.
In the invisible directive, you need to use isolate scope property value in your link function. Property visible is available to the transcluded scope (which is in affect if you use a template in your directive like #Langdon has) but not the isolate scope, which is what the link function sees.
var template = "<span ng-show='value'>{{value}}</span>";
Plunker.
If you want a simple directive, you're better off letting Angular do most of the work through ngTransclude, and $watch.
http://plnkr.co/edit/xYTNIUKYuHWhTrK80qKJ?p=preview
HTML:
<!doctype html>
<html ng-app="app">
<head>
<meta charset="utf-8">
<title>trying to compile stuff</title>
<script src="http://code.angularjs.org/1.1.1/angular.js"></script>
<script src="app.js"></script>
</head>
<body>
<div ng-controller="AppCtrl">
<input type="checkbox" ng-model="test" id="test" /><label for="test">Visibility (currently {{test}})</label>
<br />
<br />
<visible value='test'>visible tag</visible>
<invisible value='test'>invisible tag</invisible>
</div>
</body>
</html>
JavaScript:
angular
.module('app', [])
.controller('AppCtrl', function($scope) {
$scope.test = false;
})
.directive('visible', function() {
return {
restrict: 'E',
transclude: true,
template: '<span ng-transclude></span>',
replace: true,
scope: {
value: '='
},
link: function(scope, element, attrs) {
console.log(attrs);
scope.$watch('value', function (value) {
element.css('display', value ? '' : 'none');
});
console.log(attrs.value);
}
};
})
.directive('invisible', function() {
return {
restrict: 'E',
transclude: true,
template: '<span ng-transclude></span>',
replace: true,
scope: {
value: '='
},
link: function(scope, element, attrs) {
scope.$watch('value', function (value) {
element.css('display', value ? 'none' : '');
});
}
};
});