how to create custom validators in Angular 2 ES5? - validation

I'm trying to create a custom validator for Angular 2 using ES5. I can't find a sample online, and the cheatsheet of the documentation doesn't help and it's not documented for ES5 at all. Also, I can't transpile completely from given examples of TypeScript to ES5. Let's say the validator is a simple code validator that more than a simple Regular Expression match, should check for CRC too. Thus it can't be accomplished with built-in pattern validator of Angular 2.
Here's my code that I've tried:
var securityCode = ng.core.Directive({
selector: '[securityCode][ngModel]',
providers: [
{
provide: ng.forms.NG_VALIDATORS,
useExisting: securityCode,
multi: true
}
]
}).Class({
constructor: function() {
console.log('securityCode');
},
validate: function(value){
console.log('validate...');
},
validator: function(value){
console.log('validator...');
}
});
and here's how I want to use it:
<input mdInput type="text" requried securityCode />
I'm stuck now, I can't go further as this doesn't work because I get Cannot read property 'validate' of undefined exception, and I have no idea what to do next.

Related

Spartacus Storefront Multisite I18n with Backend

We've run into some problems for our MultiSite Spartacus setup when doing I18n.
We'd like to have different translations for each site, so we put these on an API that can give back the messages dependent on the baseSite, eg: backend.org/baseSiteX/messages?group=common
But the Spartacus setup doesn't let us pass the baseSite? We can
pass {{lng}} and {{ns}}, but no baseSite.
See https://sap.github.io/spartacus-docs/i18n/#lazy-loading
We'd could do it by overriding i18nextInit, but I'm unsure how to achieve this.
In the documentation, it says you can use crossOrigin: true in the config, but that does not seem to work. The type-checking say it's unsupported, and it still shows uw CORS-issues
Does someone have ideas for these problems?
Currently only language {{lng}} and chunk name {{ns}} are supported as dynamic params in the i18n.backend.loadPath config.
To achieve your goal, you can implement a custom Spartacus CONFIG_INITIALIZER to will populate your i18n.backend.loadPath config based on the value from the BaseSiteService.getActive():
#Injectable({ providedIn: 'root' })
export class I18nBackendPathConfigInitializer implements ConfigInitializer {
readonly scopes = ['i18n.backend.loadPath']; // declare config key that you will resolve
readonly configFactory = () => this.resolveConfig().toPromise();
constructor(protected baseSiteService: BaseSiteService) {}
protected resolveConfig(): Observable<I18nConfig> {
return this.baseSiteService.getActive().pipe(
take(1),
map((baseSite) => ({
i18n: {
backend: {
// initialize your i18n backend path using the basesite value:
loadPath: `https://backend.org/${baseSite}/messages?lang={{lng}}&group={{ns}}`,
},
},
}))
);
}
}
and provide it in your module (i.e. in app.module):
#NgModule({
providers: [
{
provide: CONFIG_INITIALIZER,
useExisting: I18nBackendPathConfigInitializer,
multi: true,
},
],
/* ... */
})
Note: the above solution assumes the active basesite is set only once, on app start (which is the case in Spartacus by default).

ckeditor 5 Disabling content filtering

I've notice when extracting the data from the editor it filters some classes and styles.
I want to use the exact same styling as the editor uses.
So, i have 2 problems i need to solve.
How can i prevent the filtering of classes and styles from happening.
How can i extract the CSS to a separate file?
I know when using previous ckeditor versions you could have used the following to prevent it filtering:
config.allowedContent = true;
You can use the General HTML support plugin in CKEditor 5. More info in the docs
This is what I'm using to enable some features as per my needs. You can customize to your implementation.
ClassicEditor.create(richEditorElem, {
htmlSupport: {
allow: [
{
name: /^(div|ul|li|ol|a|button|p|h[1-6])$/,
classes: true,
styles: true
}
]
}
}).then( editor => {
}).catch( error => {
console.error( error );
});

Special characters and PurgeCSS not working as expected

Using PurgeCSS along with Laravel Mix on a non Laravel project.
Everything works well but I want to use some special non CSS characters in my responsive utility classes but PurgeCSS is stripping them even if present in the markup.
My example class would be:
<div class="u<sm:hidden"></div>
In the css this is written as:
.u\<sm\:hidden {}
PurgeCSS has no issue with the colon symbol as the following class acts fine:
.u-sm\:hidden {}
Any way I can make this work as expected?
Thanks
So I was facing the same issue and I did some digging and found the solution here
https://lancecore.com/building-our-sites/.
The way I solved it was to use a custom extractor for Purgecss and in that extractor write a regex expression that correctly matches the way responsive classes are designed in tailwindcss.
Now, here is my postcss.config.js file where all this magic happened:
const purgecss = require('#fullhuman/postcss-purgecss')
class TailwindExtractor {
static extract(content) {
return content.match(/[A-z0-9-:\/]+/g)
}
}
module.exports = {
plugins: [
require('tailwindcss')('./tailwind.js'),
require('autoprefixer'),
purgecss({
content: [
'./pages/**/*.vue',
'./layouts/**/*.vue',
'./components/**/*.vue'
],
extractors: [{
extractor: TailwindExtractor,
extensions: ['vue']
}
],
whitelist: ['html', 'body']
})
]
}

Inject kendo ui with requirejs

The documentation on kendo ui and requirejs seems to miss some stuff.
They tell me how to use kendo.web.min which have everything included:
http://www.kendoui.com/blogs/teamblog/posts/13-05-08/requirejs-fundamentals.aspx
(search for keyword 'shim')
but I am not interested in adding the big 2MB kendo.web.min script, I just want to shim the
kendo.grid.min but this file has a dependency to kendo.data.min which again has a dependency
to kendo.core.min.
How can I tell requirejs to load also kendo.data.min and kendo.core.min before kendo.grid.min is loaded and after jquery has been loaded. I just guess this would be the correct order.
This is what I have tried from the above telerik link:
requirejs.config({
paths: {
'text': '../Scripts/text',
'durandal': '../Scripts/durandal',
'plugins': '../Scripts/durandal/plugins',
'transitions': '../Scripts/durandal/transitions',
'knockout': '../Scripts/knockout-2.3.0',
'jquery': '../Scripts/jquery-2.0.3',
'kendoGrid': '../Scripts//kendo.grid.min',
},
shim: {
"kendoGrid": {
deps: ["jquery"]
}
}
});
What is the correct way of defining the kendo dependencies like kendo.data and kendo.core ?
At the moment I am getting an exception on application startup from durandal in the systems.js saying:
"Failed to load composed module (viewmodels/DocumentBrowser). details: The property \"jQuery\" of an undefined or null reference can not be 'accessed'.
I know this error is not directly about kendo, but since I introduced kendo ui with requirejs in the DocumentBrowser module I get this exception!
UPDATE
According to CodingWhitSpike`s advise I have changed my requirejs configuration:
requirejs.config({
paths: {
'text': '../Scripts/text',
'durandal': '../Scripts/durandal',
'plugins': '../Scripts/durandal/plugins',
'transitions': '../Scripts/durandal/transitions',
'knockout': '../Scripts/knockout-2.3.0',
'jquery': '../Scripts/jquery-2.0.3',
'moment': '../Scripts/moment',
k: "../Scripts/kendo"
}
});
define(['durandal/app', 'plugins/dialog', 'knockout', 'services/dataservice', 'plugins/router', 'moment', 'k/kendo.grid.min'],
function (app, dialog, ko, dataservice, router, moment, kendoGrid) {
$("#grid").kendoGrid(...); => kendoGrid is instantiated and it works :)
});
This is taken from the official Kendo docs at http://docs.kendoui.com/getting-started/using-kendo-with/using-kendo-with-requirejs
<!-- first, load RequireJS -->
<script src="require.js"></script>
<!-- configure RequireJS with two logical paths:
- "app/" will be used for your files
- "k/" will be for Kendo UI modules -->
<script>
requirejs.config({
paths: {
app: "/path/to/your/files",
k: "http://cdn.kendostatic.com/VERSION/js"
}
});
require([
"http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js",
"app/foo",
"app/bar",
"k/kendo.menu.min",
"k/kendo.grid.min"
], initApp);
function initApp() {
// main entry point of your application
}
</script>
Assuming that kendo has set up dependencies of their modules correctly, setting up a path like k: "http://cdn.kendostatic.com/VERSION/js which points to the modules directory (NOT one individual module) and use a module in like k/kendo.grid.min should all that's required.

Attaching multiple views to a controller in ExtJS 4 MVC

This is using the standard ExtJS 4 MVC library and structure.
I am trying to attach multiple views to a single controller so I can create instances of them later to add to panels. Unfortunately I am getting errors about the view when I add the second one and ExtJS is blocking the syntax errors it appears so that I am unable to see where the issue is.
If I comment out ViewOrders from the list below it works fine, but if it is in there then I get the following error:
An uncaught error was raised with the following data: ext-all-debug-with-comments.js (line 7864)
msg:
"The following classes are not declared even if their files have been loaded: 'PVAL_App.view.ViewOrders'. Please check the source code of their corresponding files for possible typos: 'app/view/ViewOrders.js'"
sourceClass: "Ext.Loader"
sourceMethod: "onFileLoaded"
Here is my controller:
Ext.define('PVAL_App.controller.Viewport', {
extend: 'Ext.app.Controller',
views: [
'Viewport', 'ViewOrders'
],
init: function() {
console.log('Viewport controller init()');
}
});
Here is my ViewOrders view:
Ext.define('PVAL_APP.view.ViewOrder', {
/* Begin Definitions */
extend: 'Ext.panel.Panel',
alias: 'widget.ViewOrders',
requires: [
'Ext.panel.Panel',
'Ext.data.ArrayStore'
],
border:false,
layout: 'fit',
//autoScroll: true,
initComponent: function() {
}
});
I doubt this is needed but this is my application file:
Ext.Loader.setConfig(
{
enabled: true
});
Ext.application({
name: 'PVAL_App',
appFolder: 'app',
autoCreateViewport: true,
controllers: [
'PVAL_App', 'Viewport'
],
launch:function() {
// Nothing yet.
//console.log(this.controllers);
}
});
I cannot seem to figure out if it is a syntax error or if this is an issue with the framework. I have experienced close to the same issue if I try to link to another controller from within one which makes me believe that this might be a constraint of the framework.
The problem here is that the class name in your app/view/ViewOrders.js script does not match the view name. Instead of Ext.define('PVAL_APP.view.ViewOrder', { you need the plural (and correct case) Ext.define('PVAL_App.view.ViewOrders', {. Either that our you can change your filename and refernece to the singular and just correct the case.

Resources