How to add, remove and change css classes for an ember element based on the value from the contentBinding while doing ember each?
Doing something like below in didInsertElement, but by the time have added the css classes, based on content value from controller, view element is attached to the view and hence css doesn't get applied.
Is there any other way that we could perform this while view element is getting rendered?
didInsertElement: function() {
this._super();
var personStr= this.get("content").person;
if(personStr==1){
this.$("img").addClass("add-person");
this.$("img").removeClass("view-person");
this.$("img").removeClass("edit-person");
}
}
You could use a Ember.CollectionView and specify your classes which depend on the content in classNameBindings. See API documentation, section HTML class Attribute.
See an example here http://jsfiddle.net/pangratz666/b4xGP/:
Ember.CollectionView.create({
content: [{name: 'Brunö'}, {name: 'Alfred'}, {name: 'Hansi'}],
itemViewClass: Ember.View.extend({
templateName: 'item',
classNameBindings: 'beginsWithA'.w(),
beginsWithA: function() {
var name = this.getPath('content.name');
if (!Ember.empty(name)) {
return name.indexOf('A') === 0;
}
}.property('content.name')
})
}).append();
Related
I'm trying to provide dynamic styling to a MatHeaderCell instance like this:
[ngStyle]="styleHeaderCell(c)"
I've created a demo here.
I can see that:
styleHeaderCell(c)
Receives the column and returns and object however the style is not applied, and so the column still has a min width of 12rem and I want it to be 4rem. Thoughts?
It appears to be a syntax issue in your styles helper function.
Give this a try.
public styles: any = {
ID: {
'min-width': '4rem',
'background-color': 'red'
}
};
STACKBLITZ
https://stackblitz.com/edit/angular-material-data-table-module-styling-7vhrth?file=src/app/app.component.ts
When Gutenberg creates a class, it seems to be of the format
div.wp-block
div.editor-block-list__insertion-point
div.editor-block-list__block-edit
div.editor-block-contextual-toolbar
div
<your actual block html goes here>
I'd like to be able to add a class to that top div.wp-block element so I can properly style my block in the editor. The class is dynamically generated based on an attribute so I can't just use the block name class. Is there a clean way of doing this? I can hack it using javascript DOM, but it gets overwritten quickly enough.
https://wordpress.org/gutenberg/handbook/designers-developers/developers/filters/block-filters/#editor-blocklistblock
const { createHigherOrderComponent } = wp.compose
const withCustomClassName = createHigherOrderComponent((BlockListBlock) => {
return props => {
return <BlockListBlock { ...props } className={ 'my-custom-class' } />
}
}, 'withCustomClassName')
wp.hooks.addFilter('editor.BlockListBlock', 'my-plugin/with-custom-class-name', withCustomClassName)
You can add class in your block edit view by using className that is present in this.props, className will print class in following format wp-blocks-[block_name]
edit( { className } ) { // using destructing from JavaScript ES-6
return <div className={ className }></div>
}
Suggestion
Always try to look for manipulating DOM via React instead of manipulating DOM directly because React manages it's own state and issues can occur by manipulating DOM directly.
I am writhing Angular 2+ unit test with TestBed.
Scenario, I want to verify my component, that the color of a pseudo element.
component.ts
label::before {
right: 0;
background-color: red;
}
#Component({
selector: 'app-test',
template: `
<div><label>a label</label></div>
`,
styleUrls: ['./test.component.scss'],
})
export class TestComponent {
}
so when I write unit test, I want to verify the pseudo element background color
beforeEach(() => {
fixture = TestBed.createComponent(TestComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should set background color', () => {
const ele = fixture.debugElement.query(By.css('label::before')).nativeElement; // error here
// not sure how to use by.css to locate on the pseudo element
expect(ele.backgroundColor).toBe('....');
});
I would suggest writing your test in a different manner.
Fixture is of type ComponentFixture<T> where T is the component you are trying to access. The debugElement property has two properties that you are normally interested In when writing a test componentInstance and nativeElement
ComponentInstance is your component ts file. It's your class declaration in a sense.
NativeElement as the name suggests is the mark-up or your template
I don't think it's possible to do it the way you suggested.
However you could try
const color = window.getComputedStyle(fixture.debugElement.nativeElement.querySelector('label'), ':after').getPropertyValue('background-color');
This will give you a rgb result so for red it would be rgb(255,0,0)
I got this from: How to get pseudo element?
Try this and see if it works. It's not great that we had to access the window element inside of our test but it might solve your issue. Possibly create a better test without having to access the window api i would suggest.
I am using ReactJS with redux.
I using scss.
lets say my path is:
http://localhost:3000/login
I need to add to this page:
html:{ overflow:hidden}
and on other pages i want to remove this attribute.
Anyone have a clue?
You can change the style attribute of the html tag:
class MyPage extends React.Component {
componentWillMount() {
this.htmlTag = document.getElementsByTagName('html')[0];
this.htmlTag.setAttribute('style', 'overflow: hidden');
}
componentWillUnmount() {
this.htmlTag.setAttribute('style', '');
}
...
}
I don't know how is your project architecture, but you can add a class (className) into your HTML tag in differently ways.
If you want, you can also use your redux state.
You check if you are in X page, if it's ok, pass a boolean at true and if it's true, put your css.
I prefer the first solution.
You could just import a className, let's say loginStyle, and make it so:
html: {
overflow: hidden;
}
Then, you just put it as a condition let's say on your header (has to be an element present in every page).
Something like
const isLogin = window.location.pathname === login ? true : false ( <= this is not the real condition, but make it so isLogin equals true is you are on your login page).
<Header className={${className1} ${className2} ${isLogin ? loginStyle : ' '}}/>
And your style will only be applied on your login page. Maybe not the simpliest, but at least this would work :)
I have a directive that I am currently making that is an input field of type text. Now I would like this field's width to grow dynamically if the text gets too big for the input field. Below is my directive:
.directive('dynamicInput', function () {
return {
restrict: 'E',
template: '<input type="text" style="display: inherit;" class="form-control" required />',
require: 'ngModel',
link: function (scope, element, attrs, ngModel) {
console.log('ATTRS: ', attrs);
console.log('ELEMENT: ', element);
if(attrs.width){
console.log('WiDTH: ', attrs);
}
}
}
});
Here is the plunker:
Change Width Dynamically.
I know you can change the CSS class youre using on your element object, however, I dont just want to change the class I want to basically dynamically change the width as the text increases inside the box. So the question is: How can I change the CSS on every fire of the 'onchange' event to the length of the text being entered? Also, I would like to keep this contained within a directive, so that I am not relying on anything within the parent scope in which its declared in.
You can get your input element, and then do whatever you want with it using vanilla javascript or angular object element.
Like this (link function):
var inputEl = angular.element(element.children()[0]);
inputEl.on('keydown', function() {
inputEl.attr('size', inputEl.val().length);
});
This does not do exactly what you want I think, but you get the idea.
You have access to the element inside the directive, so this kind of logic is very easy to implement without depending on anything else but itself.
Modified plunker.