I can't seem to get LESS CSS's isurl method to work.
If I pass in "http://www.google.com" to the mixin, isurl doesn't evaluate to true.
If I pass in http://www.google.com (without quotes) then it doesn't compile.
My isnumber guards work as i'd expect.
Made the following simple test harness. Text is blue.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en-US" xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<style type="text/less" media="screen">
.testIsUrl(#i) when (isurl(#i)) { #textColor:red; }
.testIsUrl(#i) when not (isurl(#i)) { #textColor:blue; }
.testIsNum(#x) when (isnumber(#x)) { #fontSize: 30pt; }
.testIsNum(#x) when not (isnumber(#x)) { #fontSize: 10pt; }
.testIsUrl("http://www.google.com");
//.testIsUrl(http://www.google.com); // results in error
.testIsNum(32); // evaluates to true in isnumber
//.testIsNum("32"); // evaluates to false in isnumber
.text { color: #textColor; font-size: #fontSize;}
</style>
<script src="https://raw.github.com/cloudhead/less.js/master/dist/less-1.3.0.js" type="text/javascript"></script>
</head>
<body>
<div id="main">
<div class="text">This text should be red if isurl is true... and big font if isnum is true</div>
</div>
</body>
</html>
It appears that the type check function for url is simply to check whether you are stating it explicitly to be a CSS url type. In other words, this makes it evaluate to true:
.testIsUrl(url("http://www.google.com"));
It is not checking to see if what you are passing is in fact a valid url path, nor even if it is a valid url syntax.
Update: To Test for Empty String
You mention the need to test for an empty string. You can do so with javascript. Something like so for your code given above:
.testIsUrl(#i) when ((`#{i} === '' ? 1 : 0`) = 1) { #textColor:red; }
.testIsUrl(#i) when not ((`#{i} === '' ? 1 : 0`) = 1) { #textColor:blue; }
Related
I am very much new to AngularJS. I want to update the .less files variable dynamically. But didn't get how to access this .less file using AngularJS.
My code:
style.less
#bg-color: #484848;
.header{
background: #bg-color;
}
I want to update #bg-color: #484848; present in the style.less file to some value input by user. How can I get this using AngularJS.
You should run Less in browser to do this. If you load less.js in your HTML, the global less object come available, so you can use less.modifyVars() and less.refreshStyles() inside your angularJS code:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example - example-example78-production</title>
<link rel="stylesheet/less" type="text/css" href="color.less" />
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.0-beta.1/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.3.1/less.min.js"></script>
</head>
<body ng-app="submitExample">
<script>
angular.module('submitExample', [])
.controller('ExampleController', ['$scope', function($scope) {
$scope.list = [];
$scope.text = 'orange';
$scope.submit = function() {
if ($scope.text) {
less.modifyVars({ color : $scope.text });
}
};
}]);
</script>
<h1>Colored text</h1>
<form ng-submit="submit()" ng-controller="ExampleController">
Enter text and hit enter:
<input type="text" ng-model="text" name="text" />
<input type="submit" id="submit" value="Submit" />
</form>
</body>
</html>
See: http://plnkr.co/5b1HTkneFXLMGVvXEG8j http://plnkr.co/edit/Z9tRY3Lol31PMnPUfxQi
I am creating a app that can be displayed outside rally. I created a login key for a read-only user as described in the documentation and substituted it for [loginkey] in the code below. When i try to access the app I am being asked for user credentials again. When i cancel the authentication dialog i receive a 401 error in the developer tools in the browser. Please find my code below.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>LoginKey</title>
<!--App information-->
<meta name="Name" content="App: LoginKey"/>
<meta name="Version" content="1.0"/>
<meta name="Vendor" content=""/>
<!--Include SDK-->
<script type="text/javascript" src="https://rally1.rallydev.com/apps/1.32/sdk.js?loginkey=[loginkey]"></script>
<script type="text/javascript">
function onLoad() {
var rallyDataSource = new rally.sdk.data.RallyDataSource(
'__WORKSPACE_OID__',
'__PROJECT_OID__',
'__PROJECT_SCOPING_UP__',
'__PROJECT_SCOPING_DOWN__');
rallyDataSource.setApiVersion("1.43");
var config = {type: "hierarchicalrequirement", columnKeys:["FormattedID", "Name"]};
var table = new rally.sdk.ui.Table(config, rallyDataSource);
table.display("tableDiv");
}
rally.addOnLoad(onLoad);
</script>
<style type="text/css">
.loginKey {
/* Add app styles here */
}
</style>
</head>
<body class="loginKey">
<div id="tableDiv" style="float:left;width:400px"></div>
</body>
</html>
The issue was with the name of the parameter. I was using loginkey for the name of the parameter while it was actually supposed to be loginKey
I am building a sample MVC4 web application, my aim is to learn and master working with the Bing Maps API, but I'm afraid it is not going well.
I am following this tutorial, but when I reload my page, I do not get a map, where the map is suppose to show, I just see blank background colour ! even after getting the API Key, and putting it into the script on my page ! No map is showing !
Here is my script code:
<script type="text/javascript">
var map = null;
function getMap()
{
var boundingBox = Microsoft.Maps.LocationRect.fromLocations(new Microsoft.Maps.Location(47.618594, -122.347618), new Microsoft.Maps.Location(47.620700, -122.347584), new Microsoft.Maps.Location(47.622052, -122.345869));
map = new Microsoft.Maps.Map(document.getElementById('myMap'), { credentials: 'MyKeyGoesHere', bounds: boundingBox });
}
</script>
There are several things to consider in your implementation.
Add the script reference to the Bing Maps API
Add the HTML element and required information in your web page
Add the load event and fire your getMap() method (using an onload event set on the body or dynamicaly by code)
See the MSDN to help you in your first implementation:
http://msdn.microsoft.com/en-us/library/gg427624.aspx
Here is a sample static page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script type="text/javascript" charset="UTF-8" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0">
</script>
<script type="text/javascript">
var map = null;
function getMap() {
var boundingBox = Microsoft.Maps.LocationRect.fromLocations(
new Microsoft.Maps.Location(47.618594, -122.347618),
new Microsoft.Maps.Location(47.620700, -122.347584),
new Microsoft.Maps.Location(47.622052, -122.345869));
map = new Microsoft.Maps.Map(
document.getElementById('myMap'),
{
credentials: 'YOURKEY',
bounds: boundingBox
});
}
</script>
</head>
<body onload="getMap();">
<div id="myMap" style="position: relative; width: 800px; height: 600px;">
</div>
</body>
</html>
I'm having trouble getting even a simple use of angular-ui up and running. I want to be able to easily detect keypresses, for instance, to automatically add an item after pressing enter in a text box without having to press an Add button.
Here's my current attempt:
<!DOCTYPE html>
<html ng-app xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Main</title>
<link rel="stylesheet", href="http://angular-ui.github.com/angular-ui/build/angular-ui.css" />
</head>
<body ng-controller="Ctrl">
<button ng-click="add()">Add</button>
<input type="text" ui-keypress="{enter: 'add()'}" />
{{item}}
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"> </script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>
<script src="http://angular-ui.github.com/angular-ui/build/angular-ui.js"></script>
<script src="main.js"></script>
</body>
</html>
var myApp = angular.module('myApp', ['ui.directives']);
function Ctrl($scope) {
$scope.item = "";
$scope.add = function () {
$scope.item = "Item Added";
}
}
You can see the behavior here: http://jsfiddle.net/NbjZL/5/. Note that clicking the button after typing text works, but pressing enter after typing text does not. I've read what documentation I can find and have looked at several examples, but I'm sure I'm still missing some small thing.
Angular ui was not able to find the angular app. All you need to do is to specify the app name in ng-app to get it working.
<html ng-app="myModule" xmlns="http://www.w3.org/1999/xhtml">
Check the js fiddle to see the code work
I am trying to get dijits to render using the dojo.NodeList.instantiate method, which takes existing HTML elements and turns them into dijits when the DOM has loaded.
The API reference for the instantiate method can be found here.
The following example, which calls the instantiate method in the dojo.addOnLoad method, should create a BorderContainer with two ContentPane instances, but the DIVs remain as they start out, and do not become dijits:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Dijit Test</title>
<style type="text/css">
#import "dojoroot/dijit/themes/tundra/tundra.css";
#import "dojoroot/dojo/resources/dojo.css";
</style>
<script type="text/javascript" src="dojoroot/dojo/dojo.js"
djConfig="parseOnLoad: true"></script>
<script type="text/javascript">
dojo.require("dijit.layout.BorderContainer");
dojo.require("dijit.layout.ContentPane");
dojo.addOnLoad(
function() {
dojo.query("#divOuter").instantiate(
dijit.layout.BorderContainer, {
design : 'sidebar',
gutters : false
}
);
dojo.query("#divMiddle").instantiate(
dijit.layout.ContentPane, {
region : 'center'
}
);
dojo.query("#divRight").instantiate(
dijit.layout.ContentPane, {
region : 'right',
splitter : true
}
);
}
);
</script>
</head>
<body>
<div id="divOuter" style="width:400px;height:300px">
<div id="divMiddle">Middle box</div>
<div id="divRight">Right box</div>
</div>
</body>
</html>
I have tried the above code in both Firefox 3.5 and Internet Explorer 7 and both fail to render the dijits. If I specify a standard HTML attribute in a property object (such as the style attribute), this style change appears correctly, indicating that the object is being read:
// The red border appears when using this example
dojo.query("#divRight").instantiate(
dijit.layout.ContentPane, {
region : 'right',
splitter : true,
style : 'border:1px solid red'
}
);
The following HTML (using dojoType and other property attributes) works fine - the BorderContainer and ContentPanes appear correctly in both browsers:
<div dojoType="dijit.layout.BorderContainer" design="sidebar" gutters="false"
style="width:400px;height:300px">
<div dojoType="dijit.layout.ContentPane" region="center">Middle box</div>
<div dojoType="dijit.layout.ContentPane" region="right" splitter="true"
style="width:200px;">Right box</div>
</div>
Please can anyone tell me why the instantiate example does not work?
I have done a lot of searching, but cannot seem to find anyone else with this issue, which may mean that I'm not using the instantiate method correctly!
Thanks.
You need to call startup on those dijits after they are instantiated. dojo.query.instantiate doesn't do it for you since it just creates the objects.
At the bottom of your onLoad function, add these:
dijit.byId('divOuter').startup();
dijit.byId('divMiddle').startup();
dijit.byId('divRight').startup();