firstor / polymer-chat Goto Github PK
View Code? Open in Web Editor NEWPolymer Chat Demo
Polymer Chat Demo
/* ========= src/polyfills.ts ========= */
...
/**
* Date, currency, decimal and percent pipes.
* Needed for: All but Chrome, Firefox, Edge, IE11 and Safari 10
*/
import 'intl'; // Run `npm install --save intl`.
/**
* Need to import at least one locale-data with intl.
*/
import 'intl/locale-data/jsonp/en-US';
HH:mm
(according to DatePipe format)
<!-- ========= message-item.component.html ========= -->
...
<span class="posted">{{message.posted | date:'HH:mm'}}</span>
...
2017-06-12 09:03:10
=> 09:03
but 09:00:6/12/2017 9:03:10 AM
2017-06-12 13:23:30
=> 13:23
but 13:00:6/12/2017 1:23:30 PM
Styling paper-textarea
doesn't seem to work properly. It works fine on Chrome and FF, but not in Edge (v14.14393) and IE (v11.0.14393.0).
src/app/message/message-item.component.css
.message-input-field {
--paper-input-container-input-color: var(--app-color-green); /* NOT working */
--paper-input-container-underline: { /* NOT working */
display: none;
}
--paper-input-container-underline-focus: { /* NOT working */
display: none;
}
@apply --app-word-wrapping; /* seems working fine */
}
Need to resolve this asap.
If you click on the paper-menu-button
to activate paper-menu
, and then you won't scroll in the app anymore.
[Related issues]
There was a similar issue once with Angular 2 + Polymer 1 and it was resolved after [email protected] was released.
According to Angular's browser support guide, different polyfills are required to make Angular applications work on different browsers. In Angular 4, there is an entry, polyfills.ts
, to import such required polyfills, and we can add more polyfills imports in it to support more and more browsers.
However, the problem is that more and more polyfills may increase the bundle size and thus affect loading time on the evergreen browsers (the modern and up-to-date ones) even though they're only required for older browsers. (e.g. ES6 polyfill not required on Chrome)
So, our wish is to implement conditional polyfilling, like as Philip Walton introduced in his article: Loading Polyfills Only When Needed. But it seems that there is no legal way with Angular to do that.
if (!es6_native_support) {
// import es6 polyfills
}
The app gets loaded in development mode, but not work in production mode for Firefox, IE and Edge browsers, and the browser console prints out the following error:
ERROR TypeError: a.__shady is undefined
Stack trace:
Rb@http://local.polymer-chat.com/assets/bower_components/webcomponentsjs/webcomponents-hi-sd-ce.js:59:218
La@http://local.polymer-chat.com/assets/bower_components/webcomponentsjs/webcomponents-hi-sd-ce.js:57:152
insertBefore@http://local.polymer-chat.com/assets/bower_components/webcomponentsjs/webcomponents-hi-sd-ce.js:120:445
Xc/<@http://local.polymer-chat.com/assets/bower_components/webcomponentsjs/webcomponents-hi-sd-ce.js:40:211
n@http://local.polymer-chat.com/assets/components.html-13.js:1:2401
value@http://local.polymer-chat.com/assets/components.html-13.js:1:3091
value@http://local.polymer-chat.com/assets/components.html-24.js:1:1403
l@http://local.polymer-chat.com/assets/components.html-10.js:1:865
q@http://local.polymer-chat.com/assets/components.html-11.js:1:1075
Pe@http://local.polymer-chat.com/assets/components.html-12.js:1:8626
The error comes after the modules and web components were upgraded and everything worked fine before upgrade.
Why is the roboto font requested? It should not be included anymore since the app uses its own fonts.
/* ========= app.module.ts ========= */
import {CUSTOM_ELEMENTS_SCHEMA, NgModule} from '@angular/core';
import {PolymerModule} from '@codebakery/origami';
...
@NgModule({
...
imports: [
...
PolymerModule.forRoot(),
...
],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
...
})
...
<paper-textarea>
element in an Angular component
<!-- ========= angular.component.html ========= -->
...
<paper-textarea class="form-control message-input-field" ...>
</paper-textarea>
...
/* ========= angular.component.css ========= */
.message-input-field {
--paper-input-container-input-color: var(--app-input-color); /* works fine */
--paper-input-container-underline: { /* NOT working */
display: none;
}
--paper-input-container-underline-focus: { /* NOT working */
display: none;
}
@apply --app-word-wrapping; /* works fine */
}
/* ========= document-level styles ========= */
--app-word-wrapping: {
overflow-wrap: break-word;
word-wrap: break-word;
-ms-word-wrap: break-word;
word-break: break-word;
-ms-word-break: break-word;
}
--paper-input-container-input-color: var(--app-input-color);
--paper-input-container-underline: {display:none}--paper-input-container-underline-focus:{display:none}overflow-wrap: var(--app-word-wrapping_-_overflow-wrap);
word-wrap: var(--app-word-wrapping_-_word-wrap);
-ms-word-wrap: var(--app-word-wrapping_-_-ms-word-wrap);
word-break: var(--app-word-wrapping_-_word-break);
-ms-word-break: var(--app-word-wrapping_-_-ms-word-break);
--paper-input-container-input-color: var(--app-input-color);
--paper-input-container-underline_-_display: none;
--paper-input-container-underline-focus_-_display: none;
overflow-wrap: var(--app-word-wrapping_-_overflow-wrap);
word-wrap: var(--app-word-wrapping_-_word-wrap);
-ms-word-wrap: var(--app-word-wrapping_-_-ms-word-wrap);
word-break: var(--app-word-wrapping_-_word-break);
-ms-word-break: var(--app-word-wrapping_-_-ms-word-break);
This does happen only in the production build and everything works fine in the development mode. The production build is configured based on origami's production build guide and enableProdMode()
is invoked in the production mode. (See also https://github.com/hotforfeature/origami/tree/master/demo for more detail of my production build configuration)
Not sure if this problem comes from Angular production mode itself or anything else.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.