Within a declaration, how can one programmatically get the value of a property of an element in another declaration?
For example, take the following:
.header {
height: 50px
}
.footer {
margin-top: // TODO a method for retrieving ".header" height should go here
}
Is there some method for getting, for example, the value of .header's height with .footer's declaration? Something like getProperty('height', '.header')?
(I'm trying to avoid creating a variable to handle this if possible.)
SASS and LESS have no such ability to get other declarations' properties.
Stylus can programmatically get values of other properties within the same declaration or its ancestors if nested (see documentation), but it can't get the values of properties elsewhere (see explanation).
So the solution is identical to all three preprocessors: Introduce a variable (or a mix-in).
Related
Below is a class Template. I want to access its content like this..
console.log(this.temp.name);
But I can't. Its result is undefined. How to make it just an object to be able to access it?
Update
In the parent component, I have the code below
template is declared as template = new Template();
after the initialization, when I console log template, the value is this
I then bind template to its child component
but when I console log the value of template in the child component, it became this (the extracted values are the topmost screenshot)
so when I console log this.template.name and so on, it is undefined
instead of making Template as class, make it as interface
example:
export interface Template {
/* fields */
}
To instantiate a class, you can either use the new keyword, assign a json structure that is structural compatible to the class definition or if you have a JSON string and want to de serialize it you could use JSON.parse() and assign it to a variable of this type.
I'm using casperJS to capture a portion of the screen using casptureSelector method with the code below:
this.waitForSelector(config.selector, function () {
this.then(function() {
this.captureSelector(config.imageFileName, config.selector);
});
});
it is possible to pass #someId for an an id selector and .someClass for a class selector.
But how can I pass multiple classes selector like .someClass.otherClass ?
I tried many variations but I'm unable to make it work.
I believe you can you any valid css selector so for multiple classes select you just separate the string with a comma:
'.firstSelector, .secondSelector'
You can't path an array but you can dynamically build with Array.join a string of comma separated classes
EDIT
I believe this would work only if the selection results in a single DOM element . If you drill into the code, the selector is used to find the capture bounds and adjust zoom., an inner method for calculating the bounds calls findOne with the selector, so I guess (without really digging into findOne method that it would return the first element if a query results in multiple DOM elements.
I'm using a chart to render a piechart for my app. I have:
Ext.query('.highcharts-container')
that gives me an array of highchart-containers and I'd like to add a custom class to every one of them to add some custom css. I tried:
Ext.query('.highcharts-container').addCls("test")
but says "addCls" is not a function.
below is the img of how it looks:
and accord to the answers below, i tried adding it in seperate app, and it works, but for some reason in this case it constant shows undefined.no clue whts going on?
Ext.query returns an array. Instead, use Ext.select which returns a CompositeElement. It lets you run Ext.dom.Element methods on a group of elements:
Ext.select('.highcharts-container').addCls("test");
Ext.query will return an array of matching components. If you're sure there will always be exactly 1 item in the array, you can use:
Ext.ComponentQuery.query('.highcharts-container')[0].addCls("test")
Otherwise, you should loop through the items and add the class to each component.
Ext.ComponentQuery.query('.highcharts-container').forEach(function (item) {
item.addCls("test");
});
I not sure how to solve this issue. I am sure someone will know this very quickly.
I have an array of objects and modifying a property. I have a firebase listener 'child_changed'. When firebase is updated need to update the array. Here is the code below.
dbRefList.on('child_changed', function(snap) {
var len = this.grocerylist.length;
for(var i=len; i--;) {
if(this.grocerylist[i].key === snap.key) {
this.set(['grocerylist', i, 'selected'], snap.val().selected);
}
}
this.notifyPath('grocerylist', this.grocerylist.slice());
}.bind(this));
When the array is modified I want the template repeat-dom to trigger. I know this.set will not trigger array mutation sub properties but again I am not sure how to solve this. I done research and tried so many solutions.
I can force a render on the template dom-repeat but I would prefer the data binding way.
So this code (just the this.set you have in there now) should cause the value of grocerylist.i.selected to update inside the dom-repeat (assuming it's bound in there so it's actually showing up).
What behavior are you seeing? Are you trying to filter or sort the list based on the selected value? In that case, you might need to add observe="selected" on the dom-repeat.
(Also—have you confirmed that the child-changed callback is being called with the this value you expect—the element—rather than window or something else?)
You should be able to force a refresh by doing this.grocerylist = this.grocerylist.slice() or this.set('grocerylist', this.grocerylist.slice()); ... notifyPath doesn't work here because notifyPath doesn't change the value, it notifies the element about a prior change (the second argument is effectively ignored).
I'm new to AngularJS and have been assigned a maintenance task on an app we've inherited (originally developed for us by a third-party).
At the left of a header row in a table is a small button showing either a plus (+) or minus (-) symbol to indicate whether it will expand or collapse the section when clicked. It does this using ngClass as follows.
ng-class="{false:'icon-plus',true:'icon-minus'}[day.expanded]"
I have to remove the button when there is no data in the section and thus no ability to expand. There is already a class (.plus-placeholder) for this and I was wondering if the expressions that ngClass uses can be nested to allow something like this
ng-class="{false:'plus-placeholder',true:{false:'icon-plus',true:'icon-minus'}[day.expanded]}[day.hasTrips]"
which would allow me to add a hasTrips property to day to accomplish the task.
If this is not possible I think I will need to add a property something like expandoState that returns strings 'collapsed', 'expanded' and 'empty'. so I can code the ngClass like this
ng-class="{'collapsed':'icon-plus','expanded':'icon-minus','empty':'plus-placeholder'}[day.expandoState]"
And perhaps this is a cleaner way to do it in any case. Any thoughts/suggestions? Should it be relevant, the app is using AngularJS v1.0.2.
You certainly can do either of the two options you have mentioned. The second is far preferable to the first in terms of readable code.
The expandoState property you mention should probably be a property or a method placed on the scope. Your attribute would then read something like
ng-class="{'collapsed':'icon-plus','expanded':'icon-minus','empty':'plus-placeholder'}[expandoState()]"
To put this method on the scope you would need to find the relevant controller. This will probably be wherever day is assigned to the scope. Just add
$scope.expandoState = function() {
// Return current state name, based on $scope.day
};
Alternatively, you could write a method on the controller like
$scope.buttonClass = function() {
// Return button class name, based on $scope.day
};
that just returns the class to use. This will let you write the logic from your first option in a much more readable fashion. Then you can use
ng-class="buttonClass()"