mirror of
https://github.com/opennetworkinglab/onos.git
synced 2025-11-04 10:11:16 +01:00
ONOS-5404: Clean up webapp/_dev directory.
Change-Id: Id3a620923b43ec97b5d6f4b7a8e8e1bf6ddf0a4a
This commit is contained in:
Simon Hunt
parent
b6a2f78c05
commit
7313d1ff5f
@ -1,78 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<!--
|
|
||||||
~ Copyright 2016-present Open Networking Laboratory
|
|
||||||
~
|
|
||||||
~ Licensed under the Apache License, Version 2.0 (the "License");
|
|
||||||
~ you may not use this file except in compliance with the License.
|
|
||||||
~ You may obtain a copy of the License at
|
|
||||||
~
|
|
||||||
~ http://www.apache.org/licenses/LICENSE-2.0
|
|
||||||
~
|
|
||||||
~ Unless required by applicable law or agreed to in writing, software
|
|
||||||
~ distributed under the License is distributed on an "AS IS" BASIS,
|
|
||||||
~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
||||||
~ See the License for the specific language governing permissions and
|
|
||||||
~ limitations under the License.
|
|
||||||
-->
|
|
||||||
|
|
||||||
<!--
|
|
||||||
ONOS -- Display a glyph with Angular test page
|
|
||||||
-->
|
|
||||||
|
|
||||||
<html>
|
|
||||||
<head lang="en">
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<title>Show Icons Angular</title>
|
|
||||||
|
|
||||||
<script type="text/javascript" src="../tp/angular.js"></script>
|
|
||||||
<script type="text/javascript" src="../tp/angular-route.js"></script>
|
|
||||||
|
|
||||||
<script type="text/javascript" src="../tp/d3.js"></script>
|
|
||||||
|
|
||||||
<script type="text/javascript" src="../app/fw/util/util.js"></script>
|
|
||||||
<script type="text/javascript" src="../app/fw/util/fn.js"></script>
|
|
||||||
|
|
||||||
<script type="text/javascript" src="../app/fw/svg/svg.js"></script>
|
|
||||||
<script type="text/javascript" src="../app/fw/svg/svgUtil.js"></script>
|
|
||||||
<script type="text/javascript" src="../app/fw/svg/glyph.js"></script>
|
|
||||||
<script type="text/javascript" src="../app/fw/svg/glyphData.js"></script>
|
|
||||||
|
|
||||||
<script type="text/javascript" src="big-icon.js"></script>
|
|
||||||
|
|
||||||
<link rel="stylesheet" href="../app/common.css">
|
|
||||||
<link rel="stylesheet" href="../app/fw/svg/icon.css">
|
|
||||||
|
|
||||||
<style>
|
|
||||||
html,
|
|
||||||
body {
|
|
||||||
background-color: #ddf;
|
|
||||||
font-family: Arial, Helvetica, sans-serif;
|
|
||||||
font-size: 9pt;
|
|
||||||
}
|
|
||||||
|
|
||||||
h2 {
|
|
||||||
color: darkred;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* foreground color */
|
|
||||||
svg .glyph {
|
|
||||||
stroke: none;
|
|
||||||
fill: #246;
|
|
||||||
fill-rule: evenodd;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* background color */
|
|
||||||
svg.embeddedGlyph .glyph rect {
|
|
||||||
fill: #fff
|
|
||||||
}
|
|
||||||
|
|
||||||
</style>
|
|
||||||
|
|
||||||
</head>
|
|
||||||
<!-- outline for using a controller in Angular -->
|
|
||||||
<body class="light" ng-app="showGlyph" ng-controller="OvShowGlyph as ctrl">
|
|
||||||
<h2>Display a Glyph</h2>
|
|
||||||
<div id="showGlyphs"></div>
|
|
||||||
<svg><defs></defs></svg>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@ -1,159 +0,0 @@
|
|||||||
/*
|
|
||||||
* Copyright 2016-present Open Networking Laboratory
|
|
||||||
*
|
|
||||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
||||||
* you may not use this file except in compliance with the License.
|
|
||||||
* You may obtain a copy of the License at
|
|
||||||
*
|
|
||||||
* http://www.apache.org/licenses/LICENSE-2.0
|
|
||||||
*
|
|
||||||
* Unless required by applicable law or agreed to in writing, software
|
|
||||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
|
||||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
||||||
* See the License for the specific language governing permissions and
|
|
||||||
* limitations under the License.
|
|
||||||
*/
|
|
||||||
|
|
||||||
/*
|
|
||||||
ONOS GUI -- Test code for displaying custom glyphs
|
|
||||||
*/
|
|
||||||
|
|
||||||
(function () {
|
|
||||||
'use strict';
|
|
||||||
|
|
||||||
// assuming the glyph is a square
|
|
||||||
// div is a D3 selection of the <DIV> element into which icon should load
|
|
||||||
// size is the size of the glyph
|
|
||||||
// id is the symbol id
|
|
||||||
function createGlyph(div, size, id) {
|
|
||||||
var dim = size || 20,
|
|
||||||
texty = 30,
|
|
||||||
gid = id || 'unknown',
|
|
||||||
rx = 4,
|
|
||||||
svgCls = 'embeddedGlyph',
|
|
||||||
svg, g;
|
|
||||||
|
|
||||||
svg = div.append('svg').attr({
|
|
||||||
'class': svgCls,
|
|
||||||
width: dim,
|
|
||||||
height: dim + texty,
|
|
||||||
viewBox: '0 0 ' + dim + ' ' + dim
|
|
||||||
});
|
|
||||||
|
|
||||||
g = svg.append('g').attr({
|
|
||||||
'class': 'glyph'
|
|
||||||
});
|
|
||||||
|
|
||||||
g.append('rect').attr({
|
|
||||||
width: dim,
|
|
||||||
height: dim,
|
|
||||||
rx: rx
|
|
||||||
});
|
|
||||||
|
|
||||||
g.append('use').attr({
|
|
||||||
width: dim,
|
|
||||||
height: dim,
|
|
||||||
'class': 'glyph',
|
|
||||||
'xlink:href': '#' + gid
|
|
||||||
});
|
|
||||||
|
|
||||||
g.append('text')
|
|
||||||
.attr({
|
|
||||||
'text-anchor': 'left',
|
|
||||||
y: '1em',
|
|
||||||
x: 0,
|
|
||||||
transform: 'translate(0, ' + dim + ')'
|
|
||||||
})
|
|
||||||
.style('fill', '#800')
|
|
||||||
.text(id);
|
|
||||||
}
|
|
||||||
|
|
||||||
var clock = 'M92.9,61.3a39,39,0,1,1-39-39,39,39,0,0,1,39,39h0Z' +
|
|
||||||
'M44,19.3c-4.4-7.4-14.8-9.3-23.2-4.2S9.1,30.2,13.5,37.6m80.8,0' +
|
|
||||||
'c4.4-7.4,1.2-17.5-7.3-22.5s-18.8-3.2-23.3,4.2m-8.4,1.8V16.5h4.4' +
|
|
||||||
'V11.9H48.2v4.6h4.6v4.6M51.6,56.4H51.5' +
|
|
||||||
'a5.4,5.4,0,0,0,2.4,10.3,4.7,4.7,0,0,0,4.9-3.1H74.5' +
|
|
||||||
'a2.2,2.2,0,0,0,2.4-2.2,2.4,2.4,0,0,0-2.4-2.3H58.8' +
|
|
||||||
'a5.3,5.3,0,0,0-2.5-2.6H56.2V32.9' +
|
|
||||||
'a2.3,2.3,0,0,0-.6-1.7,2.2,2.2,0,0,0-1.6-.7,2.4,2.4,0,0,0-2.4,2.4' +
|
|
||||||
'h0V56.4M82.2,91.1l-7.1,5.3-0.2.2-1.2,2.1a0.6,0.6,0,0,0,.2.8' +
|
|
||||||
'h0.2c2.6,0.4,10.7.9,10.3-1.2m-60.8,0c-0.4,2.1,7.7,1.6,10.3,1.2' +
|
|
||||||
'h0.2a0.6,0.6,0,0,0,.2-0.8l-1.2-2.1-0.2-.2-7.1-5.3';
|
|
||||||
|
|
||||||
var clocks = "M65.7,26.6A34.7,34.7,0,0,0,31,61.5c0,19,16,35.2,35.5,34.8" +
|
|
||||||
"a35.1,35.1,0,0,0,34-35.1A34.7,34.7,0,0,0,65.7,26.6Z" +
|
|
||||||
"m8.6-2.7,27.4,16.4a31.3,31.3,0,0,0,1.2-3.1c1.3-5,0-9.4-3.2-13.2" +
|
|
||||||
"a16.9,16.9,0,0,0-16-6.2A12.8,12.8,0,0,0,74.3,23.9Z" +
|
|
||||||
"M57,23.9L56.4,23a12.9,12.9,0,0,0-10.7-5.5,16.9,16.9,0,0,0-15.1,8," +
|
|
||||||
"14.1,14.1,0,0,0-2.3,11.2,10.4,10.4,0,0,0,1.4,3.5Z" +
|
|
||||||
"M26.9,31.6A33.7,33.7,0,0,0,9.7,59.3C9.2,72.8,14.9,83.1,26,90.7l1-1.9" +
|
|
||||||
"a0.6,0.6,0,0,0-.2-1A34.2,34.2,0,0,1,15.5,50.4" +
|
|
||||||
"a33.8,33.8,0,0,1,10.8-16,1.2,1.2,0,0,0,.5-0.6" +
|
|
||||||
"C26.9,33.1,26.9,32.4,26.9,31.6Z" +
|
|
||||||
"m1,8.1C14.6,55.9,19.2,81,37.6,91.1l1-2.3-2.8-2.4" +
|
|
||||||
"C26.4,77.6,22.9,66.7,25.1,54" +
|
|
||||||
"a31.6,31.6,0,0,1,4.2-10.8,0.8,0.8,0,0,0,.1-0.6Z" +
|
|
||||||
"M12,38.4a11.2,11.2,0,0,1-1.4-5.8A13.7,13.7,0,0,1,14.3,24" +
|
|
||||||
"a17.3,17.3,0,0,1,10.5-5.7h0.4C19,18,13.7,20,9.9,25.2" +
|
|
||||||
"a14.5,14.5,0,0,0-3,11,11.2,11.2,0,0,0,1.6,4.3Z" +
|
|
||||||
"m5.5-2.7L21,33" +
|
|
||||||
"a1,1,0,0,0,.3-0.7,14,14,0,0,1,3.9-8.6,17.3,17.3,0,0,1,10.2-5.4" +
|
|
||||||
"l0.6-.2C24.4,17.3,16.4,27,17.4,35.7Z" +
|
|
||||||
"M70.9,17.2H60.7v4.1h4v4.2H67V21.3h3.9V17.2Z" +
|
|
||||||
"M90.9,87.9l-0.5.3L86,91.5a7.9,7.9,0,0,0-2.6,3.1" +
|
|
||||||
"c-0.3.6-.2,0.8,0.5,0.9a27.9,27.9,0,0,0,6.8.2l1.6-.4" +
|
|
||||||
"a0.8,0.8,0,0,0,.6-1.2l-0.4-1.4Z" +
|
|
||||||
"m-50.2,0-1.8,6c-0.3,1.1-.1,1.4.9,1.7h0.7a26.3,26.3,0,0,0,7.2-.1" +
|
|
||||||
"c0.8-.1.9-0.4,0.5-1.1a8.2,8.2,0,0,0-2.7-3.1Z" +
|
|
||||||
"m-10.8-.4-0.2.6L28,93.5a0.9,0.9,0,0,0,.7,1.3,7.7,7.7,0,0,0,2.2.4" +
|
|
||||||
"l5.9-.2c0.5,0,.7-0.3.5-0.8a7.6,7.6,0,0,0-2.2-2.9Z" +
|
|
||||||
"m-11.3,0-0.2.7-1.6,5.4c-0.2.8-.1,1.2,0.7,1.4a8,8,0,0,0,2.2.4l6-.2" +
|
|
||||||
"c0.4,0,.7-0.3.5-0.6a7.1,7.1,0,0,0-1.9-2.7l-2.8-2.1Z" +
|
|
||||||
"M65.7,26.6m-2,30.3a4.4,4.4,0,0,0-2.2,2,4.8,4.8,0,0,0,4,7.2," +
|
|
||||||
"4.1,4.1,0,0,0,4.3-2.3,0.8,0.8,0,0,1,.8-0.5H84.1" +
|
|
||||||
"a1.9,1.9,0,0,0,2-1.7,2.1,2.1,0,0,0-1.7-2.2H70.8" +
|
|
||||||
"a1,1,0,0,1-1-.5,6.4,6.4,0,0,0-1.5-1.6,1.1,1.1,0,0,1-.5-1" +
|
|
||||||
"q0-10.1,0-20.3a1.9,1.9,0,0,0-2.2-2.1,2.1,2.1,0,0,0-1.8,2.2" +
|
|
||||||
"q0,6.1,0,12.2C63.7,51.2,63.7,54,63.7,56.9Z";
|
|
||||||
|
|
||||||
var smiley = "M97,20.3A9.3,9.3,0,0,0,87.7,11H24.3A9.3,9.3,0,0,0,15,20.3" +
|
|
||||||
"V64.7A9.3,9.3,0,0,0,24.3,74H87.7A9.3,9.3,0,0,0,97,64.7V20.3Z" +
|
|
||||||
"M54.5,19.1A24.3,24.3,0,1,1,30.2,43.3,24.3,24.3,0,0,1,54.5,19.1Z" +
|
|
||||||
"M104.7,94.9L97.6,82.8c-0.9-1.6-3.7-2.8-6.1-2.8H18.9" +
|
|
||||||
"c-2.5,0-5.2,1.3-6.1,2.8L5.6,94.9C4.3,97.1,5.7,99,8.9,99h92.6" +
|
|
||||||
"C104.6,99,106.1,97.1,104.7,94.9ZM54.5,56.5" +
|
|
||||||
"c-7.3,0-17.2-8.6-13.3-7.4,13,3.9,13.7,3.9,26.5,0" +
|
|
||||||
"C71.7,48,61.9,56.6,54.5,56.6Z" +
|
|
||||||
"M38,33.9C38,32,40.2,31,42.1,31h7.3" +
|
|
||||||
"a3.2,3.2,0,0,1,3.1,1.7,13.1,13.1,0,0,1,2.1-.3,12.9,12.9,0,0,1,2.1.4" +
|
|
||||||
"A3.3,3.3,0,0,1,59.7,31H67c1.9,0,4,1,4,2.9v3.2A4.4,4.4,0,0,1,67,41" +
|
|
||||||
"H59.7A4,4,0,0,1,56,37.1V33.9h0a4.4,4.4,0,0,0-1.6-.2l-1.5.2H53v3.2" +
|
|
||||||
"A4,4,0,0,1,49.4,41H42.1A4.4,4.4,0,0,1,38,37.1V33.9Z";
|
|
||||||
|
|
||||||
var glyphData = {
|
|
||||||
_viewbox: "0 0 110 110",
|
|
||||||
alarm: clock,
|
|
||||||
alarms: clocks,
|
|
||||||
smiley: smiley
|
|
||||||
};
|
|
||||||
|
|
||||||
angular.module('showGlyph', ['onosSvg'])
|
|
||||||
.controller('OvShowGlyph', ['$log', 'GlyphService',
|
|
||||||
|
|
||||||
function ($log, gs) {
|
|
||||||
var gDiv = d3.select('#showGlyphs'),
|
|
||||||
defs = d3.select('defs');
|
|
||||||
|
|
||||||
// register out-of-the-box glyphs
|
|
||||||
gs.init();
|
|
||||||
|
|
||||||
// register our custom glyphs
|
|
||||||
gs.registerGlyphSet(glyphData);
|
|
||||||
|
|
||||||
// load all defined glyphs into our <defs> element
|
|
||||||
gs.loadDefs(defs);
|
|
||||||
|
|
||||||
// choose a glyph to render
|
|
||||||
createGlyph(gDiv, 400, 'switch');
|
|
||||||
}]);
|
|
||||||
}());
|
|
||||||
@ -1,145 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<!--
|
|
||||||
~ Copyright 2016-present Open Networking Laboratory
|
|
||||||
~
|
|
||||||
~ Licensed under the Apache License, Version 2.0 (the "License");
|
|
||||||
~ you may not use this file except in compliance with the License.
|
|
||||||
~ You may obtain a copy of the License at
|
|
||||||
~
|
|
||||||
~ http://www.apache.org/licenses/LICENSE-2.0
|
|
||||||
~
|
|
||||||
~ Unless required by applicable law or agreed to in writing, software
|
|
||||||
~ distributed under the License is distributed on an "AS IS" BASIS,
|
|
||||||
~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
||||||
~ See the License for the specific language governing permissions and
|
|
||||||
~ limitations under the License.
|
|
||||||
-->
|
|
||||||
|
|
||||||
<!--
|
|
||||||
ONOS -- Embedded checkmarks and xmarks in table page
|
|
||||||
-->
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<title>Embedded Check and X Marks</title>
|
|
||||||
|
|
||||||
<script src="../tp/d3.js"></script>
|
|
||||||
|
|
||||||
<link rel="stylesheet" href="../app/common.css">
|
|
||||||
|
|
||||||
<style>
|
|
||||||
html,
|
|
||||||
body {
|
|
||||||
background-color: #fff;
|
|
||||||
font-family: Arial, Helvetica, sans-serif;
|
|
||||||
font-size: 9pt;
|
|
||||||
}
|
|
||||||
|
|
||||||
svg .icon .glyph {
|
|
||||||
stroke: none;
|
|
||||||
fill: white;
|
|
||||||
fill-rule: evenodd;
|
|
||||||
}
|
|
||||||
|
|
||||||
svg .icon.active {
|
|
||||||
fill: green;
|
|
||||||
}
|
|
||||||
|
|
||||||
svg .icon.inactive {
|
|
||||||
fill: darkred;
|
|
||||||
}
|
|
||||||
|
|
||||||
svg .icon rect {
|
|
||||||
stroke: white;
|
|
||||||
stroke-width: 3px;
|
|
||||||
}
|
|
||||||
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body class="light">
|
|
||||||
<!-- minimal framework to access glyphs library module -->
|
|
||||||
<script>
|
|
||||||
var libs = {};
|
|
||||||
var ONOS = { ui: { addLib: function (id, things) { libs[id] = things; }}};
|
|
||||||
|
|
||||||
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<!-- Test HTML -->
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<table class="summary-list">
|
|
||||||
<tr> <th></th> <th>Two</th> <th>Three</th> </tr>
|
|
||||||
<tr>
|
|
||||||
<td>
|
|
||||||
<div icon icon-id="active">
|
|
||||||
|
|
||||||
<!-- icon directive needs to inject the following structure -->
|
|
||||||
<!-- ------------------------------------------------ -->
|
|
||||||
<svg width="20" height="20" viewBox="0 0 50 50">
|
|
||||||
<g class="icon active">
|
|
||||||
<rect width="50" height="50" rx="10"></rect>
|
|
||||||
<use class="glyph" xlink:href="#checkmark" width="50" height="50"></use>
|
|
||||||
</g>
|
|
||||||
</svg>
|
|
||||||
<!-- ------------------------------------------------ -->
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
<td>Some text</td>
|
|
||||||
<td>Some text</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>
|
|
||||||
<div icon icon-id="inactive">
|
|
||||||
|
|
||||||
<!-- icon directive needs to inject the following structure -->
|
|
||||||
<!-- ------------------------------------------------ -->
|
|
||||||
<svg width="20" height="20" viewBox="0 0 50 50">
|
|
||||||
<g class="icon inactive">
|
|
||||||
<rect width="50" height="50" rx="10"></rect>
|
|
||||||
<use class="glyph" xlink:href="#xmark" width="50" height="50"></use>
|
|
||||||
</g>
|
|
||||||
</svg>
|
|
||||||
<!-- ------------------------------------------------ -->
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
<td>Some text</td>
|
|
||||||
<td>Some Other text</td>
|
|
||||||
</tr>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- common definitions for other SVG elements to use -->
|
|
||||||
<svg width="0" height="0">
|
|
||||||
<defs>
|
|
||||||
<symbol id="checkmark" viewBox="0 0 10 10">
|
|
||||||
<path d="M2.644,4.531c0,0,0.719-0.422,1.172,0.281l1.047,1.797c0,0,
|
|
||||||
2.675-5.449,2.781-5.719c0,0,0.547-0.859,1.359-0.094
|
|
||||||
c0,0,0.484,0.484,0,1.297S6.775,7.305,5.557,9.211c0,0-0.413,0.461-1.194,
|
|
||||||
0.086S2.222,5.375,2.222,5.375S2.159,4.734,2.644,4.531z">
|
|
||||||
</path>
|
|
||||||
</symbol>
|
|
||||||
|
|
||||||
<symbol id="xmark" viewBox="0 0 10 10">
|
|
||||||
<path d="M8.967,7.196C8.172,6.852,7.37,6.058,6.672,5.189c0.385-0.463,
|
|
||||||
0.665-0.834,0.764-1.008C7.825,3.5,9.382,1.553,8.068,1.067
|
|
||||||
C6.754,0.58,6.585,1.723,6.585,1.723C6.41,2.129,5.955,2.722,5.386,3.371C4.865,
|
|
||||||
2.544,4.541,1.918,4.541,1.918
|
|
||||||
S3.812,0.24,2.863,0.654C1.915,1.067,2.304,2.283,2.304,2.283c0.349,1.122,
|
|
||||||
0.834,2.082,1.368,2.898
|
|
||||||
C2.456,6.396,1.331,7.415,1.331,7.415S0.82,7.829,0.844,8.072C0.869,8.315,
|
|
||||||
0.917,9.556,2.4,9.067
|
|
||||||
C3.084,8.843,4.122,7.933,5.083,6.95c1.306,1.348,2.498,1.949,2.498,1.949s0.535,
|
|
||||||
0.51,1.386-0.244
|
|
||||||
C9.819,7.902,8.967,7.196,8.967,7.196z">
|
|
||||||
</path>
|
|
||||||
</symbol>
|
|
||||||
|
|
||||||
</defs>
|
|
||||||
</svg>
|
|
||||||
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@ -1,130 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<!--
|
|
||||||
~ Copyright 2016-present Open Networking Laboratory
|
|
||||||
~
|
|
||||||
~ Licensed under the Apache License, Version 2.0 (the "License");
|
|
||||||
~ you may not use this file except in compliance with the License.
|
|
||||||
~ You may obtain a copy of the License at
|
|
||||||
~
|
|
||||||
~ http://www.apache.org/licenses/LICENSE-2.0
|
|
||||||
~
|
|
||||||
~ Unless required by applicable law or agreed to in writing, software
|
|
||||||
~ distributed under the License is distributed on an "AS IS" BASIS,
|
|
||||||
~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
||||||
~ See the License for the specific language governing permissions and
|
|
||||||
~ limitations under the License.
|
|
||||||
-->
|
|
||||||
|
|
||||||
<!--
|
|
||||||
ONOS -- Embedded icon test page
|
|
||||||
-->
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<title>Embedded Icons</title>
|
|
||||||
|
|
||||||
<script src="../tp/d3.js"></script>
|
|
||||||
|
|
||||||
<link rel="stylesheet" href="../app/common.css">
|
|
||||||
|
|
||||||
<style>
|
|
||||||
html,
|
|
||||||
body {
|
|
||||||
background-color: #fff;
|
|
||||||
font-family: Arial, Helvetica, sans-serif;
|
|
||||||
font-size: 9pt;
|
|
||||||
}
|
|
||||||
|
|
||||||
svg .icon .glyph {
|
|
||||||
stroke: none;
|
|
||||||
fill: white;
|
|
||||||
fill-rule: evenodd;
|
|
||||||
}
|
|
||||||
|
|
||||||
svg .icon.active {
|
|
||||||
fill: green;
|
|
||||||
}
|
|
||||||
|
|
||||||
svg .icon.inactive {
|
|
||||||
fill: darkred;
|
|
||||||
}
|
|
||||||
|
|
||||||
svg .icon rect {
|
|
||||||
stroke: black;
|
|
||||||
stroke-width: 1px;
|
|
||||||
}
|
|
||||||
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body class="light">
|
|
||||||
<!-- minimal framework to access glyphs library module -->
|
|
||||||
<script>
|
|
||||||
var libs = {};
|
|
||||||
var ONOS = { ui: { addLib: function (id, things) { libs[id] = things; }}};
|
|
||||||
|
|
||||||
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<!-- Test HTML -->
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<table class="summary-list">
|
|
||||||
<tr> <th></th> <th>Two</th> <th>Three</th> </tr>
|
|
||||||
<tr>
|
|
||||||
<td>
|
|
||||||
<div icon icon-id="active">
|
|
||||||
|
|
||||||
<!-- icon directive needs to inject the following structure -->
|
|
||||||
<!-- ------------------------------------------------ -->
|
|
||||||
<svg width="20" height="20" viewBox="0 0 50 50">
|
|
||||||
<g class="icon active">
|
|
||||||
<rect width="50" height="50" rx="4"></rect>
|
|
||||||
<use class="glyph" xlink:href="#ui" width="50" height="50"></use>
|
|
||||||
</g>
|
|
||||||
</svg>
|
|
||||||
<!-- ------------------------------------------------ -->
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
<td>Some text</td>
|
|
||||||
<td>Some text</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>
|
|
||||||
<div icon icon-id="inactive">
|
|
||||||
|
|
||||||
<!-- icon directive needs to inject the following structure -->
|
|
||||||
<!-- ------------------------------------------------ -->
|
|
||||||
<svg width="20" height="20" viewBox="0 0 50 50">
|
|
||||||
<g class="icon inactive">
|
|
||||||
<rect width="50" height="50" rx="4"></rect>
|
|
||||||
<use class="glyph" xlink:href="#ui" width="50" height="50"></use>
|
|
||||||
</g>
|
|
||||||
</svg>
|
|
||||||
<!-- ------------------------------------------------ -->
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
<td>Some text</td>
|
|
||||||
<td>Some Other text</td>
|
|
||||||
</tr>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- common definitions for other SVG elements to use -->
|
|
||||||
<svg width="0" height="0">
|
|
||||||
<defs>
|
|
||||||
<symbol id="ui" viewBox="0 0 10 10">
|
|
||||||
<path d="M2,2.5a.5,.5,0,0,1,.5-.5h5
|
|
||||||
a.5,.5,0,0,1,.5,.5v3a.5,.5,0,0,1-.5,.5h-5a.5,
|
|
||||||
.5,0,0,1-.5-.5zM2.5,2.8a.3,.3,0,0,1,.3-.3
|
|
||||||
h4.4a.3,.3,0,0,1,.3,.3v2.4a.3,.3,0,0,1-.3,
|
|
||||||
.3h-4.4a.3,.3,0,0,1-.3-.3zM2,6.55h6l1,1.45h-8z">
|
|
||||||
</path>
|
|
||||||
</symbol>
|
|
||||||
</defs>
|
|
||||||
</svg>
|
|
||||||
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@ -1,146 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<!--
|
|
||||||
~ Copyright 2016-present Open Networking Laboratory
|
|
||||||
~
|
|
||||||
~ Licensed under the Apache License, Version 2.0 (the "License");
|
|
||||||
~ you may not use this file except in compliance with the License.
|
|
||||||
~ You may obtain a copy of the License at
|
|
||||||
~
|
|
||||||
~ http://www.apache.org/licenses/LICENSE-2.0
|
|
||||||
~
|
|
||||||
~ Unless required by applicable law or agreed to in writing, software
|
|
||||||
~ distributed under the License is distributed on an "AS IS" BASIS,
|
|
||||||
~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
||||||
~ See the License for the specific language governing permissions and
|
|
||||||
~ limitations under the License.
|
|
||||||
-->
|
|
||||||
|
|
||||||
<!--
|
|
||||||
ONOS -- Glyphs library test page (old version)
|
|
||||||
-->
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<title>Glyphs</title>
|
|
||||||
|
|
||||||
<script src="../tp/d3.js"></script>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
html,
|
|
||||||
body {
|
|
||||||
background-color: #ddf;
|
|
||||||
font-family: Arial, Helvetica, sans-serif;
|
|
||||||
font-size: 9pt;
|
|
||||||
}
|
|
||||||
|
|
||||||
svg {
|
|
||||||
background-color: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
svg .glyph {
|
|
||||||
stroke: none;
|
|
||||||
fill: black;
|
|
||||||
fill-rule: evenodd;
|
|
||||||
}
|
|
||||||
|
|
||||||
svg .icon text {
|
|
||||||
text-anchor: middle;
|
|
||||||
font-size: 5pt;
|
|
||||||
fill: green;
|
|
||||||
stroke: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<!-- minimal framework to access glyphs library module -->
|
|
||||||
<script>
|
|
||||||
var libs = {};
|
|
||||||
var ONOS = { ui: { addLib: function (id, things) { libs[id] = things; }}};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<!-- import the glyphs library -->
|
|
||||||
<script src="../glyphs.js"></script>
|
|
||||||
|
|
||||||
<svg></svg>
|
|
||||||
|
|
||||||
<!-- code to display the glyphs in the library -->
|
|
||||||
<script>
|
|
||||||
(function () {
|
|
||||||
var w = 1000,
|
|
||||||
h = 800,
|
|
||||||
vb = '0 0 ' + w + ' ' + h;
|
|
||||||
|
|
||||||
var svg = d3.select('svg')
|
|
||||||
.attr({ width: w, height: h, viewBox: vb });
|
|
||||||
|
|
||||||
// create definitions element...
|
|
||||||
var defs = svg.append('defs');
|
|
||||||
|
|
||||||
// create scaling group
|
|
||||||
var grp = svg.append('g')
|
|
||||||
.attr('transform', 'translate(20,20)scale(2)');
|
|
||||||
|
|
||||||
var mag = svg.append('g')
|
|
||||||
.attr('transform', 'translate(20,20)scale(12)');
|
|
||||||
|
|
||||||
function translate(loc) {
|
|
||||||
return 'translate(' + loc[0] + ',' + loc[1] +')';
|
|
||||||
}
|
|
||||||
|
|
||||||
function icon(what, id, loc, color, bg, size) {
|
|
||||||
var i = '#' + id,
|
|
||||||
c = color || 'black',
|
|
||||||
b = bg || '#eef',
|
|
||||||
z = size || 40,
|
|
||||||
g;
|
|
||||||
|
|
||||||
g = what.append('g')
|
|
||||||
.attr({ 'class': 'icon', transform: translate(loc) });
|
|
||||||
|
|
||||||
g.append('rect')
|
|
||||||
.attr({ width: z, height: z, rx: 4 })
|
|
||||||
.style('fill', b)
|
|
||||||
.style('stroke', 'black')
|
|
||||||
.style('stroke-width', 0.5);
|
|
||||||
|
|
||||||
g.append('use')
|
|
||||||
.attr({ 'class': 'glyph', width: z, height: z, 'xlink:href': i })
|
|
||||||
.style('fill', c);
|
|
||||||
|
|
||||||
if (id !== 'bird') {
|
|
||||||
g.append('text')
|
|
||||||
.text(id)
|
|
||||||
.attr({ x: z / 2, y: z + 8 })
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
// import glyphs...
|
|
||||||
libs.glyphs.loadDefs(defs);
|
|
||||||
|
|
||||||
// bird, top right corner
|
|
||||||
icon(svg, 'bird', [830,10], '#800', '#ecc', 160);
|
|
||||||
|
|
||||||
// show icons...
|
|
||||||
icon(grp, 'unknown', [ 0, 0]);
|
|
||||||
icon(grp, 'node', [ 50, 0]);
|
|
||||||
icon(grp, 'switch', [100, 0]);
|
|
||||||
icon(grp, 'roadm', [150, 0]);
|
|
||||||
icon(grp, 'endstation', [200, 0]);
|
|
||||||
icon(grp, 'router', [250, 0]);
|
|
||||||
icon(grp, 'bgpSpeaker', [300, 0]);
|
|
||||||
icon(grp, 'uiAttached', [350, 0]);
|
|
||||||
icon(grp, 'otn', [400, 0]);
|
|
||||||
|
|
||||||
icon(grp, 'chain', [ 0, 60]);
|
|
||||||
icon(grp, 'crown', [ 50, 60]);
|
|
||||||
|
|
||||||
// icon(mag, 'crown', [20, 15], 'rgba(240,120,120,1)', 'transparent');
|
|
||||||
|
|
||||||
// more goodies to come soon.....
|
|
||||||
})();
|
|
||||||
</script>
|
|
||||||
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@ -1,15 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html>
|
|
||||||
<body ng-app>
|
|
||||||
<input type="text"
|
|
||||||
ng-model="name"
|
|
||||||
placeholder="Enter your name">
|
|
||||||
|
|
||||||
<h1>Hello <span ng-bind="name"></span></h1>
|
|
||||||
<!-- Note alternate syntax for same thig... -->
|
|
||||||
<h1>Hello {{ name }}</h1>
|
|
||||||
|
|
||||||
<script src="../../tp/angular.js"></script>
|
|
||||||
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@ -1,16 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html ng-app="notesApp">
|
|
||||||
<head>
|
|
||||||
<title>Hello AngularJS</title>
|
|
||||||
|
|
||||||
<script src="../../tp/angular.js"></script>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
Hello {{1 + 1}}nd time AngularJS
|
|
||||||
|
|
||||||
<script type="text/javascript">
|
|
||||||
angular.module('notesApp', []);
|
|
||||||
</script>
|
|
||||||
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@ -1,20 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html ng-app="notesApp">
|
|
||||||
<head>
|
|
||||||
<title>Hello AngularJS</title>
|
|
||||||
|
|
||||||
<script src="../../tp/angular.js"></script>
|
|
||||||
</head>
|
|
||||||
<body ng-controller="MainCtrl">
|
|
||||||
Hello {{1 + 1}}nd time AngularJS
|
|
||||||
|
|
||||||
<script type="text/javascript">
|
|
||||||
angular.module('notesApp', [])
|
|
||||||
.controller('MainCtrl', [function () {
|
|
||||||
// controller specific code here
|
|
||||||
console.log('MainCtrl has been created');
|
|
||||||
}]);
|
|
||||||
</script>
|
|
||||||
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@ -1,21 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html ng-app="notesApp">
|
|
||||||
<head>
|
|
||||||
<title>Notes App</title>
|
|
||||||
<script src="../../tp/angular.js"></script>
|
|
||||||
</head>
|
|
||||||
<body ng-controller="MainCtrl as ctrl">
|
|
||||||
{{ctrl.helloMsg}} AngularJS.
|
|
||||||
<br/>
|
|
||||||
{{ctrl.goodbyeMsg}} AngularJS
|
|
||||||
|
|
||||||
<script type="text/javascript">
|
|
||||||
angular.module('notesApp', [])
|
|
||||||
.controller('MainCtrl', [function () {
|
|
||||||
this.helloMsg = 'Hello ';
|
|
||||||
var goodbyeMsg = 'Goodbye ';
|
|
||||||
}]);
|
|
||||||
</script>
|
|
||||||
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@ -1,26 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html ng-app="notesApp">
|
|
||||||
<head>
|
|
||||||
<title>Notes App</title>
|
|
||||||
<script src="../../tp/angular.js"></script>
|
|
||||||
</head>
|
|
||||||
<body ng-controller="MainCtrl as ctrl">
|
|
||||||
{{ctrl.message}} AngularJS.
|
|
||||||
|
|
||||||
<button ng-click="ctrl.changeMessage()">
|
|
||||||
Change Message
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<script type="text/javascript">
|
|
||||||
angular.module('notesApp', [])
|
|
||||||
.controller('MainCtrl', [function () {
|
|
||||||
var self = this;
|
|
||||||
self.message = 'Hello';
|
|
||||||
self.changeMessage = function () {
|
|
||||||
self.message = 'Goodbye'
|
|
||||||
};
|
|
||||||
}]);
|
|
||||||
</script>
|
|
||||||
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@ -1,29 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html ng-app="notesApp">
|
|
||||||
<head>
|
|
||||||
<title>Notes App</title>
|
|
||||||
<script src="../../tp/angular.js"></script>
|
|
||||||
</head>
|
|
||||||
<body ng-controller="MainCtrl as ctrl">
|
|
||||||
|
|
||||||
<div ng-repeat="note in ctrl.notes">
|
|
||||||
<span class="label"> {{note.label}} </span>
|
|
||||||
<!--<span class="status" ng-bind="note.done"></span>-->
|
|
||||||
<span class="status"> {{note.done}} </span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<script type="text/javascript">
|
|
||||||
angular.module('notesApp', [])
|
|
||||||
.controller('MainCtrl', [function () {
|
|
||||||
var self = this;
|
|
||||||
self.notes = [
|
|
||||||
{id: 1, label: 'First note', done: false},
|
|
||||||
{id: 2, label: 'Second note', done: false},
|
|
||||||
{id: 3, label: 'Done note', done: true},
|
|
||||||
{id: 4, label: 'Last note', done: false}
|
|
||||||
]
|
|
||||||
}]);
|
|
||||||
</script>
|
|
||||||
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@ -1,52 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html ng-app="notesApp">
|
|
||||||
<head>
|
|
||||||
<title>Notes App</title>
|
|
||||||
<style>
|
|
||||||
.done {
|
|
||||||
background-color: limegreen;
|
|
||||||
}
|
|
||||||
.pending {
|
|
||||||
background-color: yellow;
|
|
||||||
}
|
|
||||||
.assignee {
|
|
||||||
color: red;
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
<script src="../../tp/angular.js"></script>
|
|
||||||
</head>
|
|
||||||
<body ng-controller="MainCtrl as ctrl">
|
|
||||||
|
|
||||||
<div ng-repeat="note in ctrl.notes"
|
|
||||||
ng-class="ctrl.getNoteClass(note.done)">
|
|
||||||
<span class="label"> {{note.label}} </span>
|
|
||||||
<span class="assignee"
|
|
||||||
ng-show="note.assignee"
|
|
||||||
ng-bind="note.assignee">
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<script type="text/javascript">
|
|
||||||
angular.module('notesApp', []).controller('MainCtrl', [
|
|
||||||
function () {
|
|
||||||
var self = this;
|
|
||||||
self.notes = [
|
|
||||||
{id: 1, label: 'First note', done: false, assignee: 'Simon'},
|
|
||||||
{id: 2, label: 'Second note', done: false},
|
|
||||||
{id: 3, label: 'Done note', done: true},
|
|
||||||
{id: 4, label: 'Last note', done: false, assignee: 'Fred'}
|
|
||||||
];
|
|
||||||
|
|
||||||
self.getNoteClass = function (status) {
|
|
||||||
return {
|
|
||||||
done: status,
|
|
||||||
pending: !status
|
|
||||||
};
|
|
||||||
};
|
|
||||||
}
|
|
||||||
]);
|
|
||||||
</script>
|
|
||||||
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@ -1,28 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html ng-app="notesApp">
|
|
||||||
<head>
|
|
||||||
<title>Notes App</title>
|
|
||||||
<script src="../../tp/angular.js"></script>
|
|
||||||
</head>
|
|
||||||
<body ng-controller="MainCtrl as ctrl">
|
|
||||||
|
|
||||||
<div ng-repeat="(author, note) in ctrl.notes">
|
|
||||||
<span class="label"> {{note.label}} </span>
|
|
||||||
<span class="author" ng-bind="author"></span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<script type="text/javascript">
|
|
||||||
angular.module('notesApp', []).controller('MainCtrl', [
|
|
||||||
function () {
|
|
||||||
var self = this;
|
|
||||||
self.notes = {
|
|
||||||
simon: { id: 1, label: 'First note', done: false},
|
|
||||||
Thomas: { id: 3, label: 'Finished third note', done: true},
|
|
||||||
alice: { id: 2, label: 'Second note', done: false}
|
|
||||||
};
|
|
||||||
}
|
|
||||||
]);
|
|
||||||
</script>
|
|
||||||
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@ -1,42 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html ng-app="notesApp">
|
|
||||||
<head>
|
|
||||||
<title>Notes App</title>
|
|
||||||
<script src="../../tp/angular.js"></script>
|
|
||||||
<style>
|
|
||||||
span {
|
|
||||||
background-color: #cce;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body ng-controller="MainCtrl as ctrl">
|
|
||||||
|
|
||||||
<div ng-repeat="note in ctrl.notes">
|
|
||||||
<div>First element: {{$first}}</div>
|
|
||||||
<div>Middle element: {{$middle}}</div>
|
|
||||||
<div>Last element: {{$last}}</div>
|
|
||||||
<div>Index of element: {{$index}}</div>
|
|
||||||
<div>At even position: {{$even}}</div>
|
|
||||||
<div>At odd position: {{$odd}}</div>
|
|
||||||
|
|
||||||
<span class="label"> {{note.label}} </span>
|
|
||||||
<span class="status"> {{note.done}} </span>
|
|
||||||
<br/><br/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<script type="text/javascript">
|
|
||||||
angular.module('notesApp', []).controller('MainCtrl', [
|
|
||||||
function () {
|
|
||||||
var self = this;
|
|
||||||
self.notes = [
|
|
||||||
{id: 1, label: 'First note', done: false},
|
|
||||||
{id: 2, label: 'Second note', done: false},
|
|
||||||
{id: 3, label: 'Done note', done: true},
|
|
||||||
{id: 4, label: 'Last note', done: false}
|
|
||||||
];
|
|
||||||
}
|
|
||||||
]);
|
|
||||||
</script>
|
|
||||||
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@ -1,58 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html ng-app="notesApp">
|
|
||||||
<head>
|
|
||||||
<title>Notes App</title>
|
|
||||||
<script src="../../tp/angular.js"></script>
|
|
||||||
<style>
|
|
||||||
span {
|
|
||||||
background-color: #cce;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body ng-controller="MainCtrl as ctrl">
|
|
||||||
|
|
||||||
<button ng-click="ctrl.changeNotes()">Change Notes</button>
|
|
||||||
<br/>
|
|
||||||
|
|
||||||
DOM Elements change at every click
|
|
||||||
<div ng-repeat="note in ctrl.notes1">
|
|
||||||
{{note.$$hashKey}}
|
|
||||||
<span class="label"> {{note.label}} </span>
|
|
||||||
<span class="author"> {{note.done}} </span>
|
|
||||||
</div>
|
|
||||||
<br/>
|
|
||||||
|
|
||||||
DOM Elements are reused at every click
|
|
||||||
<div ng-repeat="note in ctrl.notes2 track by note.id">
|
|
||||||
{{note.$$hashKey}}
|
|
||||||
<span class="label"> {{note.label}} </span>
|
|
||||||
<span class="author"> {{note.done}} </span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<script type="text/javascript">
|
|
||||||
angular.module('notesApp', []).controller('MainCtrl', [
|
|
||||||
function () {
|
|
||||||
var self = this;
|
|
||||||
var notes = [
|
|
||||||
{id: 1, label: 'First note', done: false, someRandom: 31431},
|
|
||||||
{id: 2, label: 'Second note', done: false},
|
|
||||||
{id: 3, label: 'Finished third note', done: true}
|
|
||||||
];
|
|
||||||
self.notes1 = angular.copy(notes);
|
|
||||||
self.notes2 = angular.copy(notes);
|
|
||||||
|
|
||||||
self.changeNotes = function () {
|
|
||||||
notes = [
|
|
||||||
{id: 1, label: 'Changed note', done: false, someRandom: 4242},
|
|
||||||
{id: 2, label: 'Second note', done: false},
|
|
||||||
{id: 3, label: 'Finished third note', done: true}
|
|
||||||
];
|
|
||||||
self.notes1 = angular.copy(notes);
|
|
||||||
self.notes2 = angular.copy(notes);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
]);
|
|
||||||
</script>
|
|
||||||
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@ -1,38 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html ng-app="notesApp">
|
|
||||||
<head>
|
|
||||||
<title>Notes App</title>
|
|
||||||
<script src="../../tp/angular.js"></script>
|
|
||||||
<style>
|
|
||||||
span {
|
|
||||||
background-color: #cce;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body ng-controller="MainCtrl as ctrl">
|
|
||||||
|
|
||||||
<table>
|
|
||||||
<tr ng-repeat-start="note in ctrl.notes">
|
|
||||||
<td>{{note.label}}</td>
|
|
||||||
</tr>
|
|
||||||
<tr ng-repeat-end>
|
|
||||||
<td>Done: {{note.done}}</td>
|
|
||||||
</tr>
|
|
||||||
</table>
|
|
||||||
|
|
||||||
|
|
||||||
<script type="text/javascript">
|
|
||||||
angular.module('notesApp', []).controller('MainCtrl', [
|
|
||||||
function () {
|
|
||||||
var self = this;
|
|
||||||
self.notes = [
|
|
||||||
{id: 1, label: 'First note', done: false},
|
|
||||||
{id: 2, label: 'Second note', done: false},
|
|
||||||
{id: 3, label: 'Finished third note', done: true}
|
|
||||||
];
|
|
||||||
}
|
|
||||||
]);
|
|
||||||
</script>
|
|
||||||
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@ -1,28 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html ng-app="notesApp">
|
|
||||||
<head>
|
|
||||||
<title>Notes App</title>
|
|
||||||
<script src="../../tp/angular.js"></script>
|
|
||||||
<style>
|
|
||||||
span {
|
|
||||||
background-color: #cce;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body ng-controller="MainCtrl as ctrl">
|
|
||||||
|
|
||||||
<input type="text" ng-model="ctrl.username"/>
|
|
||||||
You typed {{ctrl.username}}
|
|
||||||
|
|
||||||
|
|
||||||
<script type="text/javascript">
|
|
||||||
angular.module('notesApp', []).controller('MainCtrl', [
|
|
||||||
function () {
|
|
||||||
var self = this;
|
|
||||||
self.username = 'nothing';
|
|
||||||
}
|
|
||||||
]);
|
|
||||||
</script>
|
|
||||||
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@ -1,40 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html ng-app="notesApp">
|
|
||||||
<head>
|
|
||||||
<title>Notes App</title>
|
|
||||||
<script src="../../tp/angular.js"></script>
|
|
||||||
<style>
|
|
||||||
span {
|
|
||||||
background-color: #cce;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body ng-controller="MainCtrl as ctrl">
|
|
||||||
|
|
||||||
<input type="text" ng-model="ctrl.username"/>
|
|
||||||
<input type="password" ng-model="ctrl.password"/>
|
|
||||||
<button ng-click="ctrl.change()">Change values</button>
|
|
||||||
<button ng-click="ctrl.submit()">Submit</button>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<script type="text/javascript">
|
|
||||||
angular.module('notesApp', []).controller('MainCtrl', [
|
|
||||||
function () {
|
|
||||||
var self = this;
|
|
||||||
self.change = function () {
|
|
||||||
self.username = 'changed';
|
|
||||||
self.password = 'password';
|
|
||||||
};
|
|
||||||
|
|
||||||
self.submit = function () {
|
|
||||||
console.log('user clicked submit with ',
|
|
||||||
self.username, self.password);
|
|
||||||
};
|
|
||||||
}
|
|
||||||
]);
|
|
||||||
</script>
|
|
||||||
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@ -1,45 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html ng-app="notesApp">
|
|
||||||
<head>
|
|
||||||
<title>Notes App</title>
|
|
||||||
<script src="../../tp/angular.js"></script>
|
|
||||||
<style>
|
|
||||||
span {
|
|
||||||
background-color: #cce;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body ng-controller="MainCtrl as ctrl">
|
|
||||||
|
|
||||||
<!--
|
|
||||||
- Note, using a form has the advantage of reacting to RETURN triggering
|
|
||||||
- the submit, as well as pressing the submit button.
|
|
||||||
-->
|
|
||||||
<form ng-submit="ctrl.submit()">
|
|
||||||
<input type="text" placeholder="username" ng-model="ctrl.user.username"/>
|
|
||||||
<input type="password" placeholder="password" ng-model="ctrl.user.password"/>
|
|
||||||
<input type="submit" value="Submit"/>
|
|
||||||
<p></p>
|
|
||||||
<textarea cols="60" rows="5" ng-model="ctrl.user.notes" placeholder="Notes">
|
|
||||||
</textarea>
|
|
||||||
<p>
|
|
||||||
NOTES:
|
|
||||||
<div>
|
|
||||||
{{ctrl.user.notes}}
|
|
||||||
</div>
|
|
||||||
</p>
|
|
||||||
</form>
|
|
||||||
|
|
||||||
<script type="text/javascript">
|
|
||||||
angular.module('notesApp', [])
|
|
||||||
.controller('MainCtrl', [function () {
|
|
||||||
var self = this;
|
|
||||||
|
|
||||||
self.submit = function () {
|
|
||||||
console.log('User clicked submit with ', self.user);
|
|
||||||
};
|
|
||||||
}]);
|
|
||||||
</script>
|
|
||||||
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@ -1,44 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html ng-app="notesApp">
|
|
||||||
<head>
|
|
||||||
<title>Notes App</title>
|
|
||||||
<script src="../../tp/angular.js"></script>
|
|
||||||
<style>
|
|
||||||
span {
|
|
||||||
background-color: #cce;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body ng-controller="MainCtrl as ctrl">
|
|
||||||
|
|
||||||
<form ng-submit="ctrl.submit1()">
|
|
||||||
<input type="text" placeholder="username" ng-model="ctrl.username"/>
|
|
||||||
<input type="password" placeholder="password" ng-model="ctrl.password"/>
|
|
||||||
<input type="submit" value="Submit"/>
|
|
||||||
</form>
|
|
||||||
|
|
||||||
<!-- Better way of structuring the form data -->
|
|
||||||
<form ng-submit="ctrl.submit2()">
|
|
||||||
<input type="text" placeholder="username" ng-model="ctrl.user.username"/>
|
|
||||||
<input type="password" placeholder="password" ng-model="ctrl.user.password"/>
|
|
||||||
<input type="submit" value="Submit"/>
|
|
||||||
</form>
|
|
||||||
|
|
||||||
<script type="text/javascript">
|
|
||||||
angular.module('notesApp', [])
|
|
||||||
.controller('MainCtrl', [function () {
|
|
||||||
var self = this;
|
|
||||||
|
|
||||||
self.submit1 = function () {
|
|
||||||
// create user object to send to server
|
|
||||||
var user = {username: self.username, password: self.password};
|
|
||||||
console.log('First submit: ', user);
|
|
||||||
};
|
|
||||||
self.submit2 = function () {
|
|
||||||
console.log('Second submit: ', self.user);
|
|
||||||
};
|
|
||||||
}]);
|
|
||||||
</script>
|
|
||||||
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@ -1,42 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html ng-app="notesApp">
|
|
||||||
<head>
|
|
||||||
<title>Notes App</title>
|
|
||||||
<script src="../../tp/angular.js"></script>
|
|
||||||
<style>
|
|
||||||
span {
|
|
||||||
background-color: #cce;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body ng-controller="MainCtrl as ctrl">
|
|
||||||
|
|
||||||
<form ng-submit="ctrl.submit()" name="myForm">
|
|
||||||
<input type="text"
|
|
||||||
placeholder="username"
|
|
||||||
ng-model="ctrl.user.username"
|
|
||||||
required
|
|
||||||
ng-minlength="4"/>
|
|
||||||
|
|
||||||
<input type="password"
|
|
||||||
placeholder="password"
|
|
||||||
ng-model="ctrl.user.password"
|
|
||||||
required/>
|
|
||||||
|
|
||||||
<input type="submit"
|
|
||||||
value="Submit"
|
|
||||||
ng-disabled="myForm.$invalid"/>
|
|
||||||
</form>
|
|
||||||
|
|
||||||
<script type="text/javascript">
|
|
||||||
angular.module('notesApp', [])
|
|
||||||
.controller('MainCtrl', [function () {
|
|
||||||
var self = this;
|
|
||||||
self.submit = function () {
|
|
||||||
console.log('Submit: ', self.user);
|
|
||||||
};
|
|
||||||
}]);
|
|
||||||
</script>
|
|
||||||
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@ -1,53 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html ng-app="notesApp">
|
|
||||||
<head>
|
|
||||||
<title>Notes App</title>
|
|
||||||
<script src="../../tp/angular.js"></script>
|
|
||||||
</head>
|
|
||||||
<body ng-controller="MainCtrl as ctrl">
|
|
||||||
|
|
||||||
<form ng-submit="ctrl.submit()" name="myForm">
|
|
||||||
<input type="text"
|
|
||||||
name="uname"
|
|
||||||
placeholder="username"
|
|
||||||
ng-model="ctrl.user.username"
|
|
||||||
required
|
|
||||||
ng-minlength="4"/>
|
|
||||||
<span ng-show="myForm.uname.$error.required">
|
|
||||||
This is a required field
|
|
||||||
</span>
|
|
||||||
<span ng-show="myForm.uname.$error.minlength">
|
|
||||||
Minimum length required is 4
|
|
||||||
</span>
|
|
||||||
<span ng-show="myForm.uname.$invalid">
|
|
||||||
This field is invalid
|
|
||||||
</span>
|
|
||||||
<br/>
|
|
||||||
|
|
||||||
<input type="password"
|
|
||||||
name="pwd"
|
|
||||||
placeholder="password"
|
|
||||||
ng-model="ctrl.user.password"
|
|
||||||
required/>
|
|
||||||
<span ng-show="myForm.pwd.$error.required">
|
|
||||||
This is a required field
|
|
||||||
</span>
|
|
||||||
<br/>
|
|
||||||
|
|
||||||
<input type="submit"
|
|
||||||
value="Submit"
|
|
||||||
ng-disabled="myForm.$invalid"/>
|
|
||||||
</form>
|
|
||||||
|
|
||||||
<script type="text/javascript">
|
|
||||||
angular.module('notesApp', [])
|
|
||||||
.controller('MainCtrl', [function () {
|
|
||||||
var self = this;
|
|
||||||
self.submit = function () {
|
|
||||||
console.log('Submit: ', self.user);
|
|
||||||
};
|
|
||||||
}]);
|
|
||||||
</script>
|
|
||||||
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@ -1,45 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html ng-app="notesApp">
|
|
||||||
<head>
|
|
||||||
<title>Notes App</title>
|
|
||||||
<script src="../../tp/angular.js"></script>
|
|
||||||
<style>
|
|
||||||
.username.ng-valid {
|
|
||||||
background-color: greenyellow;
|
|
||||||
}
|
|
||||||
.username.ng-dirty.ng-invalid-required {
|
|
||||||
background-color: hotpink;
|
|
||||||
}
|
|
||||||
.username.ng-dirty.ng-invalid-minlength {
|
|
||||||
background-color: lightpink;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body ng-controller="MainCtrl as ctrl">
|
|
||||||
|
|
||||||
<form ng-submit="ctrl.submit()" name="myForm">
|
|
||||||
<input type="text"
|
|
||||||
class="username"
|
|
||||||
name="uname"
|
|
||||||
placeholder="username"
|
|
||||||
ng-model="ctrl.user.username"
|
|
||||||
required
|
|
||||||
ng-minlength="4"/>
|
|
||||||
|
|
||||||
<input type="submit"
|
|
||||||
value="Submit"
|
|
||||||
ng-disabled="myForm.$invalid"/>
|
|
||||||
</form>
|
|
||||||
|
|
||||||
<script type="text/javascript">
|
|
||||||
angular.module('notesApp', [])
|
|
||||||
.controller('MainCtrl', [function () {
|
|
||||||
var self = this;
|
|
||||||
self.submit = function () {
|
|
||||||
console.log('Submit: ', self.user);
|
|
||||||
};
|
|
||||||
}]);
|
|
||||||
</script>
|
|
||||||
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@ -1,63 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html ng-app>
|
|
||||||
<head>
|
|
||||||
<title>Notes App</title>
|
|
||||||
<script src="../../tp/angular.js"></script>
|
|
||||||
</head>
|
|
||||||
<!-- no controller in this example -->
|
|
||||||
<body>
|
|
||||||
|
|
||||||
<form novalidate name="myForm">
|
|
||||||
<input type="text"
|
|
||||||
class="username"
|
|
||||||
name="uname"
|
|
||||||
ng-model="ctrl.user.username"
|
|
||||||
required=""
|
|
||||||
placeholder="Username"
|
|
||||||
ng-minlength="4"/>
|
|
||||||
|
|
||||||
<input type="password"
|
|
||||||
class="password"
|
|
||||||
name="pad"
|
|
||||||
ng-model="ctrl.user.password"
|
|
||||||
required=""
|
|
||||||
placeholder="Password"
|
|
||||||
required=""/>
|
|
||||||
|
|
||||||
<p/>
|
|
||||||
|
|
||||||
<ng-form name="profile">
|
|
||||||
<input type="text"
|
|
||||||
name="firstName"
|
|
||||||
ng-model="ctrl.user.profile.firstName"
|
|
||||||
placeholder="First Name"
|
|
||||||
required/>
|
|
||||||
<input type="text"
|
|
||||||
name="middleName"
|
|
||||||
ng-model="ctrl.user.profile.middleName"
|
|
||||||
placeholder="Middle Name"/>
|
|
||||||
<input type="text"
|
|
||||||
name="lastName"
|
|
||||||
ng-model="ctrl.user.profile.lastName"
|
|
||||||
placeholder="Last Name"
|
|
||||||
required/>
|
|
||||||
|
|
||||||
<input type="date"
|
|
||||||
name="dob"
|
|
||||||
placeholder="Date of birth"
|
|
||||||
ng-model="ctrl.user.profile.dob"/>
|
|
||||||
</ng-form>
|
|
||||||
|
|
||||||
<span ng-show="myForm.profile.$invalid">
|
|
||||||
Please fill out the profile information
|
|
||||||
</span>
|
|
||||||
|
|
||||||
<p/>
|
|
||||||
|
|
||||||
<input type="submit"
|
|
||||||
value="Submit"
|
|
||||||
ng-disabled="myForm.$invalid"/>
|
|
||||||
</form>
|
|
||||||
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@ -1,47 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html ng-app="notesApp">
|
|
||||||
<head>
|
|
||||||
<title>Notes App</title>
|
|
||||||
<script src="../../tp/angular.js"></script>
|
|
||||||
</head>
|
|
||||||
<body ng-controller="MainCtrl as ctrl">
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<h2>What are your favorite sports?</h2>
|
|
||||||
<div ng-repeat="sport in ctrl.sports">
|
|
||||||
<label ng-bind="sport.label"></label>
|
|
||||||
<div>
|
|
||||||
With binding:
|
|
||||||
<input type="checkbox"
|
|
||||||
ng-model="sport.selected"
|
|
||||||
ng-true-value="'YES'"
|
|
||||||
ng-false-value="'NO'"/>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
using ng-checked:
|
|
||||||
<input type="checkbox"
|
|
||||||
ng-checked="sport.selected === 'YES'"/>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
Current state: {{sport.selected}}
|
|
||||||
</div>
|
|
||||||
<br/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<script type="text/javascript">
|
|
||||||
angular.module('notesApp', [])
|
|
||||||
.controller('MainCtrl', [function () {
|
|
||||||
var self = this;
|
|
||||||
self.sports = [
|
|
||||||
{label: 'Basketball', selected: 'YES'},
|
|
||||||
{label: 'Cricket', selected: 'NO'},
|
|
||||||
{label: 'Soccer', selected: 'NO'},
|
|
||||||
{label: 'Swimming', selected: 'YES'}
|
|
||||||
];
|
|
||||||
}]);
|
|
||||||
</script>
|
|
||||||
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@ -1,63 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html ng-app="notesApp">
|
|
||||||
<head>
|
|
||||||
<title>Notes App</title>
|
|
||||||
<script src="../../tp/angular.js"></script>
|
|
||||||
</head>
|
|
||||||
<body ng-controller="MainCtrl as ctrl">
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<h2>Radio Buttons</h2>
|
|
||||||
<div ng-init="user.gender = 'female'">
|
|
||||||
<input type="radio"
|
|
||||||
name="gender"
|
|
||||||
ng-model="user.gender"
|
|
||||||
value="male"/>Male
|
|
||||||
<input type="radio"
|
|
||||||
name="gender"
|
|
||||||
ng-model="user.gender"
|
|
||||||
value="female"/>Female
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<h2>Radio Buttons two</h2>
|
|
||||||
<div ng-init="user.gender2 = 'male'; otherGender = 'Other'">
|
|
||||||
<input type="radio"
|
|
||||||
name="gender2"
|
|
||||||
ng-model="user.gender2"
|
|
||||||
value="male"/>Male
|
|
||||||
<input type="radio"
|
|
||||||
name="gender2"
|
|
||||||
ng-model="user.gender2"
|
|
||||||
value="female"/>Female
|
|
||||||
<input type="radio"
|
|
||||||
name="gender2"
|
|
||||||
ng-model="user.gender2"
|
|
||||||
ng-value="otherGender"/>{{otherGender}}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<h2>Radio Buttons three</h2>
|
|
||||||
<div ng-repeat="ch in ctrl.choices">
|
|
||||||
<input type="radio"
|
|
||||||
name="choice"
|
|
||||||
ng-model="user.choice"
|
|
||||||
ng-value="ch"/>{{ch}}
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<script type="text/javascript">
|
|
||||||
angular.module('notesApp', [])
|
|
||||||
.controller('MainCtrl', [function () {
|
|
||||||
var self = this;
|
|
||||||
|
|
||||||
self.choices = ['foo', 'bar', 'baz', 'zoo', 'goo'];
|
|
||||||
}]);
|
|
||||||
</script>
|
|
||||||
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@ -1,41 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html ng-app="notesApp">
|
|
||||||
<head>
|
|
||||||
<title>Notes App</title>
|
|
||||||
<script src="../../tp/angular.js"></script>
|
|
||||||
</head>
|
|
||||||
<body ng-controller="MainCtrl as ctrl">
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<select ng-model="ctrl.selectedCountryId"
|
|
||||||
ng-options="c.id as c.label for c in ctrl.countries">
|
|
||||||
</select>
|
|
||||||
Selected Country ID: {{ctrl.selectedCountryId}}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<select ng-model="ctrl.selectedCountry"
|
|
||||||
ng-options="c.label for c in ctrl.countries track by c.id">
|
|
||||||
</select>
|
|
||||||
Selected Country: {{ctrl.selectedCountry}}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<script type="text/javascript">
|
|
||||||
angular.module('notesApp', [])
|
|
||||||
.controller('MainCtrl', [function () {
|
|
||||||
var self = this;
|
|
||||||
|
|
||||||
self.countries = [
|
|
||||||
{label: 'UK', id: 1},
|
|
||||||
{label: 'USA', id: 2},
|
|
||||||
{label: 'France', id: 3},
|
|
||||||
{label: 'Italy', id: 4}
|
|
||||||
];
|
|
||||||
var first = self.countries[0];
|
|
||||||
self.selectedCountryId = first.id;
|
|
||||||
self.selectedCountry = first;
|
|
||||||
}]);
|
|
||||||
</script>
|
|
||||||
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@ -1,34 +0,0 @@
|
|||||||
// ch05-01-need-for-service-app.js
|
|
||||||
|
|
||||||
angular.module('notesApp', [])
|
|
||||||
.controller('MainCtrl', [function () {
|
|
||||||
var self = this;
|
|
||||||
self.tab = 'first';
|
|
||||||
self.open = function (tab) {
|
|
||||||
self.tab = tab;
|
|
||||||
}
|
|
||||||
}])
|
|
||||||
.controller('SubCtrl', [function () {
|
|
||||||
var self = this;
|
|
||||||
self.list = [
|
|
||||||
{id: 0, label: 'Item 0'},
|
|
||||||
{id: 1, label: 'Item 1'}
|
|
||||||
];
|
|
||||||
|
|
||||||
self.add = function () {
|
|
||||||
var n = self.list.length;
|
|
||||||
self.list.push({
|
|
||||||
id: n,
|
|
||||||
label: 'Item ' + n
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}]);
|
|
||||||
|
|
||||||
/*
|
|
||||||
NOTE: When we use controllers, they are instances that get created and
|
|
||||||
destroyed as we navigate across the application. Any state they
|
|
||||||
hold is temporary at best, and cannot be communicated to other
|
|
||||||
controllers.
|
|
||||||
|
|
||||||
That's why we'd use "services" instead.
|
|
||||||
*/
|
|
||||||
@ -1,41 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html ng-app="notesApp">
|
|
||||||
<head>
|
|
||||||
<title>Notes App</title>
|
|
||||||
<script src="../../tp/angular.js"></script>
|
|
||||||
<script src="ch05-01-need-for-service-app.js"></script>
|
|
||||||
</head>
|
|
||||||
<body ng-controller="MainCtrl as mainCtrl">
|
|
||||||
|
|
||||||
<h1> Hello Controllers! </h1>
|
|
||||||
<button ng-click="mainCtrl.open('first')">Open First</button>
|
|
||||||
<button ng-click="mainCtrl.open('second')">Open Second</button>
|
|
||||||
|
|
||||||
<div ng-switch on="mainCtrl.tab">
|
|
||||||
|
|
||||||
<div ng-switch-when="first">
|
|
||||||
<div ng-controller="SubCtrl as ctrl">
|
|
||||||
<h3>First Tab</h3>
|
|
||||||
<button ng-click="ctrl.add()">Add more items</button>
|
|
||||||
<ul>
|
|
||||||
<li ng-repeat="item in ctrl.list">
|
|
||||||
<span ng-bind="item.label"></span>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div ng-switch-when="second">
|
|
||||||
<div ng-controller="SubCtrl as ctrl">
|
|
||||||
<h3>Second Tab</h3>
|
|
||||||
<button ng-click="ctrl.add()">Add more items</button>
|
|
||||||
<ul>
|
|
||||||
<li ng-repeat="item in ctrl.list">
|
|
||||||
<span ng-bind="item.label"></span>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@ -1,22 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html ng-app="notesApp">
|
|
||||||
<head>
|
|
||||||
<title>Notes App</title>
|
|
||||||
<script src="../../tp/angular.js"></script>
|
|
||||||
</head>
|
|
||||||
<body ng-controller="MainCtrl as mainCtrl">
|
|
||||||
|
|
||||||
<h1> Hello Services! </h1>
|
|
||||||
<button ng-click="mainCtrl.logStuff()">Log something</button>
|
|
||||||
|
|
||||||
<script type="text/javascript">
|
|
||||||
angular.module('notesApp', [])
|
|
||||||
.controller('MainCtrl', ['$log', function ($log) {
|
|
||||||
var self = this;
|
|
||||||
self.logStuff = function () {
|
|
||||||
$log.log('The button was pressed');
|
|
||||||
};
|
|
||||||
}]);
|
|
||||||
</script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@ -1,43 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html ng-app="notesApp">
|
|
||||||
<head>
|
|
||||||
<title>Notes App</title>
|
|
||||||
<script src="../../tp/angular.js"></script>
|
|
||||||
<script src="ch05-03-simple-angular-service.js"></script>
|
|
||||||
</head>
|
|
||||||
<body ng-controller="MainCtrl as mainCtrl">
|
|
||||||
|
|
||||||
<h1> Hello Controllers! </h1>
|
|
||||||
|
|
||||||
<button ng-click="mainCtrl.open('first')"> Open First </button>
|
|
||||||
<button ng-click="mainCtrl.open('second')"> Open Second </button>
|
|
||||||
|
|
||||||
<div ng-switch on="mainCtrl.tab">
|
|
||||||
|
|
||||||
<div ng-switch-when="first">
|
|
||||||
<div ng-controller="SubCtrl as ctrl">
|
|
||||||
<h3>First Tab</h3>
|
|
||||||
<button ng-click="ctrl.add()">Add item</button>
|
|
||||||
<ul>
|
|
||||||
<li ng-repeat="item in ctrl.list()">
|
|
||||||
<span ng-bind="item.label"></span>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div ng-switch-when="second">
|
|
||||||
<div ng-controller="SubCtrl as ctrl">
|
|
||||||
<h3>Second Tab</h3>
|
|
||||||
<button ng-click="ctrl.add()">Add item</button>
|
|
||||||
<ul>
|
|
||||||
<li ng-repeat="item in ctrl.list()">
|
|
||||||
<span ng-bind="item.label"></span>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@ -1,115 +0,0 @@
|
|||||||
// ch05-03-simple-angular-service.js
|
|
||||||
|
|
||||||
// this example shows three different ways of defining our own "service"...
|
|
||||||
|
|
||||||
// use 'factory()' for functions/plain objects API
|
|
||||||
// use 'service()' for JS class object API
|
|
||||||
// use 'provider()' for configurable service API
|
|
||||||
|
|
||||||
|
|
||||||
// this is a service definition
|
|
||||||
function ItemServiceTwo() {
|
|
||||||
var items = [
|
|
||||||
{id: 0, label: 'Item 0'},
|
|
||||||
{id: 1, label: 'Item 1'}
|
|
||||||
];
|
|
||||||
this.list = function () {
|
|
||||||
return items;
|
|
||||||
};
|
|
||||||
this.add = function (item) {
|
|
||||||
items.push(item);
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
// this is a provider definition
|
|
||||||
function ItemServiceThree(optItems) {
|
|
||||||
var items = optItems || [];
|
|
||||||
|
|
||||||
this.list = function () {
|
|
||||||
return items;
|
|
||||||
};
|
|
||||||
this.add = function (item) {
|
|
||||||
items.push(item);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
angular.module('notesApp', [])
|
|
||||||
|
|
||||||
// [provider] define item service as configurable provider
|
|
||||||
.provider('ItemServiceThree', function () {
|
|
||||||
var haveDefaultItems = true;
|
|
||||||
|
|
||||||
this.disableDefaultItems = function () {
|
|
||||||
haveDefaultItems = false;
|
|
||||||
};
|
|
||||||
|
|
||||||
// this function gets our dependencies..
|
|
||||||
this.$get = [function () {
|
|
||||||
var optItems = [];
|
|
||||||
if (haveDefaultItems) {
|
|
||||||
optItems = [
|
|
||||||
{id: 0, label: 'Item 0'},
|
|
||||||
{id: 1, label: 'Item 1'}
|
|
||||||
];
|
|
||||||
}
|
|
||||||
return new ItemServiceThree(optItems);
|
|
||||||
}];
|
|
||||||
})
|
|
||||||
|
|
||||||
// [provider] define configuration for provider
|
|
||||||
.config(['ItemServiceThreeProvider', function (ItemServiceThreeProvider) {
|
|
||||||
// to see how the provider can change configuration
|
|
||||||
// change the value of shouldHaveDefaults to true and
|
|
||||||
// try running the example
|
|
||||||
var shouldHaveDefaults = false;
|
|
||||||
|
|
||||||
// get configuration from server.
|
|
||||||
// set shouldHaveDefaults somehow
|
|
||||||
// assume it magically changes for now
|
|
||||||
if (!shouldHaveDefaults) {
|
|
||||||
ItemServiceThreeProvider.disableDefaultItems();
|
|
||||||
}
|
|
||||||
}])
|
|
||||||
|
|
||||||
// [service] define item service as a JS class
|
|
||||||
.service('ItemServiceTwo', [ItemServiceTwo])
|
|
||||||
|
|
||||||
// [factory] define item service factory
|
|
||||||
.factory('ItemService', [function () {
|
|
||||||
var items = [
|
|
||||||
{id: 0, label: 'Item 0'},
|
|
||||||
{id: 1, label: 'Item 1'}
|
|
||||||
];
|
|
||||||
return {
|
|
||||||
list: function () {
|
|
||||||
return items;
|
|
||||||
},
|
|
||||||
add: function (item) {
|
|
||||||
items.push(item);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
}])
|
|
||||||
|
|
||||||
// ======================================================================
|
|
||||||
// define controllers...
|
|
||||||
.controller('MainCtrl', [function () {
|
|
||||||
var self = this;
|
|
||||||
self.tab = 'first';
|
|
||||||
self.open = function (tab) {
|
|
||||||
self.tab = tab;
|
|
||||||
};
|
|
||||||
}])
|
|
||||||
|
|
||||||
.controller('SubCtrl', ['ItemService', function (ItemService) {
|
|
||||||
var self = this;
|
|
||||||
self.list = function () {
|
|
||||||
return ItemService.list();
|
|
||||||
};
|
|
||||||
self.add = function () {
|
|
||||||
var n = self.list().length;
|
|
||||||
ItemService.add({
|
|
||||||
id: n,
|
|
||||||
label: 'Item ' + n
|
|
||||||
});
|
|
||||||
};
|
|
||||||
}]);
|
|
||||||
@ -1,48 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<title>Filters in Action</title>
|
|
||||||
<script src="../../tp/angular.js"></script>
|
|
||||||
</head>
|
|
||||||
<body ng-app="filtersApp">
|
|
||||||
|
|
||||||
<div ng-controller="FilterCtrl as ctrl">
|
|
||||||
<div>
|
|
||||||
Amount as a number: {{ctrl.amount | number}}
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
Total cost as a currency: {{ctrl.totalCost | currency}}
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
Total cost in GBP: {{ctrl.totalCost | currency:'GBP '}}
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
Shout: {{ctrl.name | uppercase}}
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
Whisper: {{ctrl.name | lowercase}}
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
Start time: {{ctrl.startTime | date:'medium'}}
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
as JSON: {{ctrl.struct | json}}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<script type="text/javascript">
|
|
||||||
angular.module('filtersApp', [])
|
|
||||||
.controller('FilterCtrl', [function () {
|
|
||||||
var self = this;
|
|
||||||
self.amount = 1024;
|
|
||||||
self.totalCost = 4906;
|
|
||||||
self.name = 'Onos Rocks!';
|
|
||||||
self.startTime = new Date().getTime();
|
|
||||||
self.struct = {
|
|
||||||
foo: 'bar',
|
|
||||||
baz: 3.1415
|
|
||||||
};
|
|
||||||
}]);
|
|
||||||
</script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@ -1,83 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<title>Filters in Action</title>
|
|
||||||
<script src="../../tp/angular.js"></script>
|
|
||||||
</head>
|
|
||||||
<body ng-app="filtersApp">
|
|
||||||
|
|
||||||
<ul ng-controller="FilterCtrl as ctrl">
|
|
||||||
<li>
|
|
||||||
Amount - {{ctrl.amount}}
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
Amount - Default Currency: {{ctrl.amount | currency}}
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<!-- Using English pound sign -->
|
|
||||||
Amount - GBP Currency: {{ctrl.amount | currency:'£'}}
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
Amount - Number: {{ctrl.amount | number }}
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
Amount - Number (4 decimals): {{ctrl.amount | number:4}}
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
Amount - Yummy π = {{ctrl.pi | number:4 }}
|
|
||||||
</li>
|
|
||||||
|
|
||||||
<li>
|
|
||||||
Name - no filters: {{ctrl.name}}
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
Name - lowercase: {{ctrl.name | lowercase}}
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
Name - uppercase: {{ctrl.name | uppercase}}
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
Name - prefix: {{ctrl.name | limitTo:4}}
|
|
||||||
</li>
|
|
||||||
|
|
||||||
<li>
|
|
||||||
JSON filter: {{ctrl.struct | json}}
|
|
||||||
</li>
|
|
||||||
|
|
||||||
<li>
|
|
||||||
Timestamp: {{ctrl.startTime}}
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
Default Date filter: {{ctrl.startTime | date}}
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
Medium Date filter: {{ctrl.startTime | date:'medium'}}
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
Long Date filter: {{ctrl.startTime | date:'longDate'}}
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
Custom Date filter: {{ctrl.startTime | date:'M/dd, yyyy'}}
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
Custom Time filter: {{ctrl.startTime | date:'h:m a'}}
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
<script type="text/javascript">
|
|
||||||
angular.module('filtersApp', [])
|
|
||||||
.controller('FilterCtrl', [function () {
|
|
||||||
var self = this;
|
|
||||||
self.amount = 1024;
|
|
||||||
self.totalCost = 4906;
|
|
||||||
self.name = 'Onos Rocks!';
|
|
||||||
self.startTime = new Date().getTime();
|
|
||||||
self.struct = {
|
|
||||||
foo: 'bar',
|
|
||||||
baz: 3.1415
|
|
||||||
};
|
|
||||||
self.pi = Math.PI;
|
|
||||||
}]);
|
|
||||||
</script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@ -1,86 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<title>Filters in Action</title>
|
|
||||||
<script src="../../tp/angular.js"></script>
|
|
||||||
</head>
|
|
||||||
<body ng-app="filtersApp">
|
|
||||||
|
|
||||||
<div ng-controller="FilterCtrl as ctrl">
|
|
||||||
|
|
||||||
<table>
|
|
||||||
<tr>
|
|
||||||
<td>
|
|
||||||
<button ng-click="ctrl.currentFilter = 'string'">
|
|
||||||
Filter with string
|
|
||||||
</button>
|
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
Filter Text
|
|
||||||
<input type="text"
|
|
||||||
ng-model="ctrl.filterOptions['string']"/>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>
|
|
||||||
<button ng-click="ctrl.currentFilter = 'object'">
|
|
||||||
Filter with object
|
|
||||||
</button>
|
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
Show Done or Not Done
|
|
||||||
<input type="checkbox"
|
|
||||||
ng-model="ctrl.filterOptions['object'].done"/>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>
|
|
||||||
<button ng-click="ctrl.currentFilter = 'function'">
|
|
||||||
Filter with function
|
|
||||||
</button>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
</table>
|
|
||||||
<ul>
|
|
||||||
<li ng-repeat="note in ctrl.notes |
|
|
||||||
filter:ctrl.filterOptions[ctrl.currentFilter] |
|
|
||||||
orderBy:ctrl.sortOrder |
|
|
||||||
limitTo:5">
|
|
||||||
{{note.label}} - {{note.type}} - {{note.done}}
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<script type="text/javascript">
|
|
||||||
angular.module('filtersApp', [])
|
|
||||||
.controller('FilterCtrl', [function () {
|
|
||||||
var self = this;
|
|
||||||
|
|
||||||
self.notes = [
|
|
||||||
{label: 'FC Todo', type: 'chore', done: false},
|
|
||||||
{label: 'FT Todo', type: 'task', done: false},
|
|
||||||
{label: 'FF Todo', type: 'fun', done: true},
|
|
||||||
{label: 'SC Todo', type: 'chore', done: false},
|
|
||||||
{label: 'ST Todo', type: 'task', done: true},
|
|
||||||
{label: 'SF Todo', type: 'fun', done: true},
|
|
||||||
{label: 'TC Todo', type: 'chore', done: false},
|
|
||||||
{label: 'TT Todo', type: 'task', done: false},
|
|
||||||
{label: 'TF Todo', type: 'fun', done: false}
|
|
||||||
];
|
|
||||||
|
|
||||||
self.sortOrder = ['+type', '-label'];
|
|
||||||
|
|
||||||
self.filterOptions = {
|
|
||||||
'string': '',
|
|
||||||
'object': {done: false, label: 'F'},
|
|
||||||
'function': function (note) {
|
|
||||||
return note.type === 'task' && note.done === false;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
self.currentFilter = 'string';
|
|
||||||
}]);
|
|
||||||
</script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@ -1,61 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<title>Custom Filters in Action</title>
|
|
||||||
<script src="../../tp/angular.js"></script>
|
|
||||||
</head>
|
|
||||||
<body ng-app="filtersApp">
|
|
||||||
|
|
||||||
<div ng-controller="FilterCtrl as ctrl">
|
|
||||||
<div>
|
|
||||||
Start time (Timestamp): {{ctrl.startTime}}
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
Start time (Time): {{ctrl.startTime | date:'h:m a'}}
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
Start time (Our filter): {{ctrl.startTime | timeAgo}}
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
Start time (Our filter 2): {{ctrl.startTime | timeAgo:true}}
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
Some time ago (Computed): {{ctrl.someTimeAgo | date:'h:m a'}}
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
Some time ago (Our filter): {{ctrl.someTimeAgo | timeAgo}}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<script type="text/javascript">
|
|
||||||
angular.module('filtersApp', [])
|
|
||||||
.controller('FilterCtrl', [function () {
|
|
||||||
var self = this;
|
|
||||||
self.startTime = new Date().getTime();
|
|
||||||
self.someTimeAgo = self.startTime - (1000*3600*4);
|
|
||||||
}])
|
|
||||||
.filter('timeAgo', [function () {
|
|
||||||
var _m = 1000 * 60,
|
|
||||||
_h = _m * 60,
|
|
||||||
_d = _h * 24,
|
|
||||||
_mon = _d * 30;
|
|
||||||
|
|
||||||
return function (ts, ignoreSecs) {
|
|
||||||
var now = new Date().getTime(),
|
|
||||||
diff = now - ts;
|
|
||||||
if (diff < _m && !ignoreSecs) {
|
|
||||||
return 'seconds ago';
|
|
||||||
} else if (diff < _h) {
|
|
||||||
return 'minutes ago';
|
|
||||||
} else if (diff < _d) {
|
|
||||||
return 'hours ago';
|
|
||||||
} else if (diff < _mon) {
|
|
||||||
return 'days ago';
|
|
||||||
} else {
|
|
||||||
return 'months ago';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}]);
|
|
||||||
</script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@ -1,36 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<title>Simple Routing</title>
|
|
||||||
<script src="../../tp/angular.js"></script>
|
|
||||||
<script src="../../tp/angular-route.js"></script>
|
|
||||||
</head>
|
|
||||||
<body ng-app="routingApp">
|
|
||||||
|
|
||||||
<h2>Angular Routing</h2>
|
|
||||||
|
|
||||||
<ul>
|
|
||||||
<li><a href="#/">Default Route</a></li>
|
|
||||||
<li><a href="#/second">Second Route</a></li>
|
|
||||||
<li><a href="#/asdfertdfghsdfg">Non-existent Route</a></li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
<div ng-view></div>
|
|
||||||
|
|
||||||
<script type="text/javascript">
|
|
||||||
angular.module('routingApp', ['ngRoute'])
|
|
||||||
.config(['$routeProvider', function ($routeProvider) {
|
|
||||||
$routeProvider
|
|
||||||
.when('/', {
|
|
||||||
template: '<h5>This is the default route</h5>'
|
|
||||||
})
|
|
||||||
.when('/second', {
|
|
||||||
template: '<h5>This is the second route</h5>'
|
|
||||||
})
|
|
||||||
.otherwise({
|
|
||||||
redirectTo: '/'
|
|
||||||
});
|
|
||||||
}]);
|
|
||||||
</script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@ -1,17 +0,0 @@
|
|||||||
// Simple controller
|
|
||||||
|
|
||||||
angular.module('notesApp', [])
|
|
||||||
.controller('ListCtrl', [function () {
|
|
||||||
var self = this;
|
|
||||||
self.items = [
|
|
||||||
{id: 1, label: 'First', done: true},
|
|
||||||
{id: 2, label: 'Second', done: false}
|
|
||||||
];
|
|
||||||
|
|
||||||
self.getDoneClass = function (item) {
|
|
||||||
return {
|
|
||||||
finished: item.done,
|
|
||||||
unfinished: !item.done
|
|
||||||
};
|
|
||||||
};
|
|
||||||
}]);
|
|
||||||
@ -1,27 +0,0 @@
|
|||||||
// ch09-01-time-ago.js
|
|
||||||
|
|
||||||
angular.module('filterApp', [])
|
|
||||||
.filter('timeAgo', [function () {
|
|
||||||
var _m = 1000 * 60,
|
|
||||||
_h = _m * 60,
|
|
||||||
_d = _h * 24,
|
|
||||||
_mon = _d * 30;
|
|
||||||
|
|
||||||
return function (ts, ignoreSecs) {
|
|
||||||
var showSecs = !ignoreSecs,
|
|
||||||
now = new Date().getTime(),
|
|
||||||
diff = now - ts;
|
|
||||||
|
|
||||||
if (diff < _m && showSecs) {
|
|
||||||
return 'seconds ago';
|
|
||||||
} else if (diff < _h) {
|
|
||||||
return 'minutes ago';
|
|
||||||
} else if (diff < _d) {
|
|
||||||
return 'hours ago';
|
|
||||||
} else if (diff < _mon) {
|
|
||||||
return 'days ago';
|
|
||||||
} else {
|
|
||||||
return 'months ago';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}]);
|
|
||||||
@ -25,7 +25,7 @@
|
|||||||
<title>Layer Transformations</title>
|
<title>Layer Transformations</title>
|
||||||
|
|
||||||
<script src="../tp/d3.js"></script>
|
<script src="../tp/d3.js"></script>
|
||||||
<script src="../tp/jquery-2.1.1.min.js"></script>
|
<script src="../tp/angular.js"></script>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
html,
|
html,
|
||||||
@ -134,7 +134,7 @@
|
|||||||
|
|
||||||
// General functions ...
|
// General functions ...
|
||||||
function isF(f) {
|
function isF(f) {
|
||||||
return $.isFunction(f) ? f : null;
|
return angular.isFunction(f) ? f : null;
|
||||||
}
|
}
|
||||||
|
|
||||||
function translate(x,y) {
|
function translate(x,y) {
|
||||||
@ -151,7 +151,7 @@
|
|||||||
|
|
||||||
// Key Bindings...
|
// Key Bindings...
|
||||||
var keyHandler = {
|
var keyHandler = {
|
||||||
T: transform
|
Z: transform
|
||||||
};
|
};
|
||||||
|
|
||||||
function whatKey(code) {
|
function whatKey(code) {
|
||||||
@ -435,7 +435,7 @@
|
|||||||
|
|
||||||
function init() {
|
function init() {
|
||||||
svg.append('text')
|
svg.append('text')
|
||||||
.text('Press the "T" key....')
|
.text('Press the "Z" key....')
|
||||||
.attr({ dy: '1.2em', fill: '#999'})
|
.attr({ dy: '1.2em', fill: '#999'})
|
||||||
.style('font-size', '2.4pt')
|
.style('font-size', '2.4pt')
|
||||||
.style('font-style', 'italic');
|
.style('font-style', 'italic');
|
||||||
|
|||||||
@ -1,176 +0,0 @@
|
|||||||
<?xml version="1.0" encoding="utf-8"?>
|
|
||||||
<!-- Generator: Adobe Illustrator 18.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
|
||||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
|
||||||
viewBox="0 0 792 612" enable-background="new 0 0 792 612" xml:space="preserve">
|
|
||||||
<g>
|
|
||||||
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="293.4264" y1="313.4543" x2="293.7567" y2="294.5293">
|
|
||||||
<stop offset="0" style="stop-color:#007EC5"/>
|
|
||||||
<stop offset="1" style="stop-color:#00C0ED"/>
|
|
||||||
</linearGradient>
|
|
||||||
<path fill="url(#SVGID_1_)" d="M308,377.4c1.7,0,3.2-0.3,4.3-1c1.1-0.6,2-1.4,2.6-2.3c0.6-0.9,1.1-1.9,1.3-3c0.2-1.1,0.3-2.1,0.3-3
|
|
||||||
c0-0.9-0.1-1.9-0.3-3c-0.2-1.1-0.7-2.1-1.3-3c-0.6-0.9-1.5-1.7-2.6-2.3c-1.1-0.6-2.6-1-4.3-1h-31c-1.8,0-3.2,0.3-4.3,1
|
|
||||||
c-1.1,0.6-2,1.4-2.6,2.3c-0.6,0.9-1.1,1.9-1.3,3c-0.2,1.1-0.3,2.1-0.3,3c0,0.9,0.1,1.9,0.3,3c0.2,1.1,0.7,2.1,1.3,3
|
|
||||||
c0.6,0.9,1.5,1.7,2.6,2.3c1.1,0.6,2.5,1,4.3,1H308L308,377.4z M323.7,368c0,1.9-0.3,3.9-1,5.9c-0.6,2-1.6,3.8-2.8,5.4
|
|
||||||
c-1.2,1.6-2.7,2.9-4.5,4c-1.7,1-3.7,1.5-5.9,1.5h-35c-2.1-0.1-4-0.7-5.6-1.7c-1.6-1.1-3-2.4-4.2-4c-1.2-1.6-2-3.4-2.6-5.3
|
|
||||||
c-0.6-1.9-0.9-3.9-0.9-5.8c0-1.9,0.3-3.9,1-5.9c0.6-2,1.6-3.8,2.8-5.4c1.2-1.6,2.7-2.9,4.5-4c1.7-1,3.7-1.5,5.9-1.5h35
|
|
||||||
c2.1,0.1,4,0.7,5.6,1.7c1.6,1,3,2.4,4.2,4c1.2,1.6,2,3.4,2.6,5.3C323.4,364.2,323.7,366.1,323.7,368z"/>
|
|
||||||
<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="364.0253" y1="215.4108" x2="366.8113" y2="55.7995">
|
|
||||||
<stop offset="0" style="stop-color:#007EC5"/>
|
|
||||||
<stop offset="1" style="stop-color:#00C0ED"/>
|
|
||||||
</linearGradient>
|
|
||||||
<path fill="url(#SVGID_2_)" d="M383.7,368c0-0.9-0.1-1.9-0.3-3c-0.2-1.1-0.7-2.1-1.3-3c-0.6-0.9-1.5-1.7-2.6-2.3s-2.6-1-4.3-1
|
|
||||||
h-27.7c-1.8,0-3.2,0.3-4.3,1c-1.1,0.6-2,1.4-2.6,2.3c-0.6,0.9-1.1,1.9-1.3,3c-0.2,1.1-0.3,2.1-0.3,3v13.1c0,1-0.4,1.9-1.1,2.6
|
|
||||||
c-0.7,0.7-1.6,1.1-2.6,1.1c-1,0-1.9-0.4-2.6-1.1c-0.7-0.7-1.1-1.6-1.1-2.6V368c0-1.9,0.3-3.9,1-5.9c0.6-2,1.6-3.8,2.8-5.4
|
|
||||||
c1.2-1.6,2.7-2.9,4.5-4c1.7-1,3.7-1.5,5.9-1.5h32.2c2.1,0.1,4,0.7,5.6,1.7c1.6,1,3,2.4,4.2,4c1.2,1.6,2,3.4,2.6,5.3
|
|
||||||
c0.6,1.9,0.9,3.9,0.9,5.8v13.1c0,1-0.4,1.9-1.1,2.6c-0.7,0.7-1.6,1.1-2.6,1.1c-1,0-1.9-0.4-2.6-1.1c-0.7-0.7-1.1-1.6-1.1-2.6V368z"
|
|
||||||
/>
|
|
||||||
<linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="429.6967" y1="386.7026" x2="430.0228" y2="368.0231">
|
|
||||||
<stop offset="0" style="stop-color:#007EC5"/>
|
|
||||||
<stop offset="1" style="stop-color:#00C0ED"/>
|
|
||||||
</linearGradient>
|
|
||||||
<path fill="url(#SVGID_3_)" d="M445.5,377.4c1.7,0,3.2-0.3,4.3-1c1.1-0.6,2-1.4,2.6-2.3c0.6-0.9,1.1-1.9,1.3-3
|
|
||||||
c0.2-1.1,0.3-2.1,0.3-3c0-0.9-0.1-1.9-0.3-3c-0.2-1.1-0.7-2.1-1.3-3c-0.6-0.9-1.5-1.7-2.6-2.3c-1.1-0.6-2.6-1-4.3-1h-31
|
|
||||||
c-1.8,0-3.2,0.3-4.3,1c-1.1,0.6-2,1.4-2.6,2.3c-0.6,0.9-1.1,1.9-1.3,3c-0.2,1.1-0.3,2.1-0.3,3c0,0.9,0.1,1.9,0.3,3
|
|
||||||
c0.2,1.1,0.7,2.1,1.3,3c0.6,0.9,1.5,1.7,2.6,2.3c1.1,0.6,2.5,1,4.3,1H445.5L445.5,377.4z M461.3,368c0,1.9-0.3,3.9-1,5.9
|
|
||||||
c-0.6,2-1.6,3.8-2.8,5.4c-1.2,1.6-2.7,2.9-4.5,4c-1.7,1-3.7,1.5-5.9,1.5h-35c-2.1-0.1-4-0.7-5.6-1.7c-1.6-1.1-3-2.4-4.2-4
|
|
||||||
c-1.2-1.6-2-3.4-2.6-5.3c-0.6-1.9-0.9-3.9-0.9-5.8c0-1.9,0.3-3.9,1-5.9c0.6-2,1.6-3.8,2.8-5.4c1.2-1.6,2.7-2.9,4.5-4
|
|
||||||
c1.7-1,3.7-1.5,5.9-1.5h35c2.1,0.1,4,0.7,5.6,1.7c1.6,1,3,2.4,4.2,4c1.2,1.6,2,3.4,2.6,5.3C461,364.2,461.3,366.1,461.3,368z"/>
|
|
||||||
<linearGradient id="SVGID_4_" gradientUnits="userSpaceOnUse" x1="499.3867" y1="424.4887" x2="499.7166" y2="405.5856">
|
|
||||||
<stop offset="0" style="stop-color:#007EC5"/>
|
|
||||||
<stop offset="1" style="stop-color:#00C0ED"/>
|
|
||||||
</linearGradient>
|
|
||||||
<path fill="url(#SVGID_4_)" d="M479.2,371.7c-1.4,0-2.8-0.3-4-0.8c-1.2-0.5-2.3-1.3-3.2-2.2c-0.9-0.9-1.7-2-2.2-3.2
|
|
||||||
c-0.5-1.2-0.8-2.6-0.8-4c0-1.4,0.3-2.8,0.8-4c0.5-1.2,1.3-2.3,2.2-3.2c0.9-0.9,2-1.7,3.2-2.2c1.2-0.5,2.6-0.8,4-0.8h46.6
|
|
||||||
c1,0,1.9,0.4,2.6,1.1c0.7,0.7,1.1,1.6,1.1,2.6c0,1-0.4,1.9-1.1,2.6c-0.7,0.7-1.6,1.1-2.6,1.1H479c-0.8,0-1.4,0.3-2,0.8
|
|
||||||
c-0.6,0.5-0.9,1.2-0.9,2c0,0.8,0.3,1.4,0.9,2c0.6,0.6,1.3,0.8,2,0.8h42.5c1.4,0,2.8,0.3,4,0.8c1.3,0.5,2.3,1.3,3.3,2.2
|
|
||||||
c0.9,0.9,1.7,2,2.2,3.3c0.5,1.3,0.8,2.6,0.8,4c0,1.4-0.3,2.8-0.8,4c-0.5,1.2-1.3,2.3-2.2,3.2c-0.9,0.9-2,1.6-3.3,2.2
|
|
||||||
c-1.3,0.5-2.6,0.8-4,0.8H475c-1,0-1.9-0.4-2.6-1.1c-0.7-0.7-1.1-1.6-1.1-2.6c0-1,0.4-1.9,1.1-2.6c0.7-0.7,1.6-1.1,2.6-1.1h46.8
|
|
||||||
c0.8,0,1.4-0.3,2-0.8c0.6-0.5,0.8-1.2,0.8-2c0-0.8-0.3-1.5-0.8-2.1c-0.6-0.6-1.2-0.8-2-0.8H479.2z"/>
|
|
||||||
</g>
|
|
||||||
<g>
|
|
||||||
<g>
|
|
||||||
<path fill="#007EC5" d="M263,404.8c-1.2-1.2-1.8-2.7-1.8-4.6c0-1.9,0.6-3.4,1.8-4.6c1.2-1.2,2.7-1.8,4.5-1.8
|
|
||||||
c1.8,0,3.3,0.6,4.5,1.8c1.2,1.2,1.8,2.7,1.8,4.6c0,1.9-0.6,3.4-1.8,4.6c-1.2,1.2-2.7,1.8-4.5,1.8C265.6,406.6,264.1,406,263,404.8
|
|
||||||
L263,404.8z M263.7,396.4c-0.9,1-1.4,2.3-1.4,3.8c0,1.5,0.5,2.8,1.4,3.8c0.9,1,2.2,1.5,3.7,1.5c1.6,0,2.8-0.5,3.7-1.5
|
|
||||||
c0.9-1,1.4-2.3,1.4-3.8c0-1.5-0.5-2.8-1.4-3.8c-0.9-1-2.2-1.5-3.7-1.5C265.9,394.9,264.7,395.4,263.7,396.4z"/>
|
|
||||||
<path fill="#007EC5" d="M276.5,410.2v-11.8h1v1.4h0c0.3-0.5,0.7-0.9,1.3-1.2c0.6-0.3,1.2-0.4,1.8-0.4c1.2,0,2.2,0.4,3,1.2
|
|
||||||
c0.8,0.8,1.2,1.8,1.2,3c0,1.2-0.4,2.2-1.2,3c-0.8,0.8-1.8,1.2-3,1.2c-0.6,0-1.3-0.1-1.8-0.4c-0.6-0.3-1-0.7-1.3-1.2h0v5.3H276.5
|
|
||||||
L276.5,410.2z M278.4,400c-0.6,0.6-1,1.4-1,2.3c0,0.9,0.3,1.6,1,2.3c0.6,0.6,1.4,0.9,2.3,0.9c0.9,0,1.7-0.3,2.3-0.9
|
|
||||||
c0.6-0.6,0.9-1.4,0.9-2.3c0-0.9-0.3-1.7-0.9-2.3c-0.6-0.6-1.3-0.9-2.3-0.9C279.8,399.1,279,399.4,278.4,400z"/>
|
|
||||||
<path fill="#007EC5" d="M294.1,404.1l0.8,0.6c-0.8,1.1-1.9,1.7-3.4,1.7c-1.2,0-2.2-0.4-2.9-1.2c-0.7-0.8-1.1-1.8-1.1-3
|
|
||||||
c0-1.2,0.4-2.2,1.1-3c0.7-0.8,1.7-1.2,2.8-1.2c1.2,0,2.1,0.4,2.7,1.1c0.7,0.7,1,1.6,1,2.6v0.7h-6.6c0,0.2,0,0.4,0.1,0.6
|
|
||||||
c0.1,0.2,0.1,0.5,0.3,0.8c0.1,0.3,0.3,0.5,0.5,0.8c0.2,0.2,0.5,0.4,0.9,0.6c0.4,0.2,0.8,0.2,1.2,0.2c0.5,0,1-0.1,1.5-0.4
|
|
||||||
C293.5,404.9,293.8,404.6,294.1,404.1L294.1,404.1z M288.5,401.6h5.6c0-0.7-0.3-1.3-0.8-1.8c-0.5-0.5-1.2-0.8-1.9-0.8
|
|
||||||
c-0.5,0-1,0.1-1.4,0.3c-0.4,0.2-0.7,0.5-0.9,0.8c-0.2,0.3-0.3,0.6-0.4,0.8C288.5,401.3,288.5,401.5,288.5,401.6z"/>
|
|
||||||
<path fill="#007EC5" d="M298.1,406.3v-5.7c0-0.2,0-0.6,0-1.2c0-0.6,0-0.9,0-1.1h1c0,0.8,0,1.3,0.1,1.4h0.1
|
|
||||||
c0.2-0.5,0.6-0.8,1.1-1.1c0.5-0.3,1-0.5,1.7-0.5c2,0,3,1.1,3,3.4v4.7h-1v-4.7c0-1.7-0.7-2.5-2-2.5c-0.8,0-1.5,0.3-2,0.8
|
|
||||||
c-0.5,0.6-0.8,1.4-0.8,2.4v3.9H298.1z"/>
|
|
||||||
</g>
|
|
||||||
<g>
|
|
||||||
<polygon fill="#007EC5" points="313.1,406.3 313.1,394.2 314.5,394.2 321.9,404.8 321.9,404.8 321.9,394.2 323.1,394.2
|
|
||||||
323.1,406.3 321.6,406.3 314.2,395.7 314.2,395.7 314.2,406.3 "/>
|
|
||||||
<path fill="#007EC5" d="M333,404.1l0.8,0.6c-0.8,1.1-1.9,1.7-3.4,1.7c-1.2,0-2.2-0.4-2.9-1.2c-0.7-0.8-1.1-1.8-1.1-3
|
|
||||||
c0-1.2,0.4-2.2,1.1-3c0.7-0.8,1.7-1.2,2.8-1.2c1.2,0,2.1,0.4,2.7,1.1c0.7,0.7,1,1.6,1,2.6v0.7h-6.6c0,0.2,0,0.4,0.1,0.6
|
|
||||||
c0.1,0.2,0.1,0.5,0.3,0.8c0.1,0.3,0.3,0.5,0.5,0.8c0.2,0.2,0.5,0.4,0.9,0.6c0.4,0.2,0.8,0.2,1.2,0.2c0.5,0,1-0.1,1.5-0.4
|
|
||||||
C332.4,404.9,332.8,404.6,333,404.1L333,404.1z M327.4,401.6h5.6c0-0.7-0.3-1.3-0.8-1.8c-0.5-0.5-1.2-0.8-1.9-0.8
|
|
||||||
c-0.5,0-1,0.1-1.4,0.3c-0.4,0.2-0.7,0.5-0.9,0.8c-0.2,0.3-0.3,0.6-0.4,0.8C327.4,401.3,327.4,401.5,327.4,401.6z"/>
|
|
||||||
<path fill="#007EC5" d="M340.9,398.4v0.9h-2.3v5.1c0,0.4,0.1,0.6,0.3,0.8c0.2,0.2,0.5,0.3,0.8,0.3c0.4,0,0.7-0.1,1.2-0.3l0.1,0.9
|
|
||||||
c-0.5,0.2-0.9,0.3-1.3,0.3c-0.7,0-1.2-0.2-1.5-0.6c-0.3-0.4-0.5-0.9-0.5-1.5v-5.1h-1.7v-0.9h1.7v-2.3h1v2.3H340.9z"/>
|
|
||||||
<polygon fill="#007EC5" points="344.8,406.3 342.3,398.4 343.5,398.4 345.4,405 345.4,405 347.6,398.4 348.6,398.4 350.9,405
|
|
||||||
351,405 352.8,398.4 353.9,398.4 351.5,406.3 350.5,406.3 348.1,399.8 348.1,399.8 345.9,406.3 "/>
|
|
||||||
<path fill="#007EC5" d="M356.9,405.3c-0.8-0.8-1.2-1.8-1.2-3c0-1.2,0.4-2.2,1.2-3c0.8-0.8,1.8-1.2,3-1.2c1.2,0,2.2,0.4,3,1.2
|
|
||||||
c0.8,0.8,1.2,1.8,1.2,3c0,1.2-0.4,2.2-1.2,3c-0.8,0.8-1.8,1.2-3,1.2C358.7,406.5,357.7,406.1,356.9,405.3L356.9,405.3z M357.7,400
|
|
||||||
c-0.6,0.6-0.9,1.4-0.9,2.3c0,0.9,0.3,1.7,0.9,2.3c0.6,0.6,1.3,0.9,2.3,0.9c0.9,0,1.7-0.3,2.3-0.9c0.6-0.6,0.9-1.4,0.9-2.3
|
|
||||||
c0-0.9-0.3-1.7-0.9-2.3c-0.6-0.6-1.3-0.9-2.3-0.9C359,399.1,358.2,399.4,357.7,400z"/>
|
|
||||||
<path fill="#007EC5" d="M367.1,406.3v-5.7c0-0.2,0-0.6,0-1.2c0-0.6,0-0.9,0-1.1h1c0,0.8,0,1.3,0.1,1.4c0.6-1.1,1.4-1.6,2.5-1.6
|
|
||||||
c0.2,0,0.4,0,0.6,0.1l-0.1,1c-0.1,0-0.3-0.1-0.4-0.1c-0.9,0-1.5,0.3-1.9,0.8c-0.4,0.5-0.6,1.2-0.6,2v4.3H367.1z"/>
|
|
||||||
<polygon fill="#007EC5" points="373.5,406.3 373.5,393.3 374.5,393.3 374.5,402 378.4,398.4 379.9,398.4 375.9,402 380.4,406.3
|
|
||||||
378.9,406.3 374.5,402.1 374.5,406.3 "/>
|
|
||||||
</g>
|
|
||||||
<g>
|
|
||||||
<path fill="#007EC5" d="M388.2,404.8c-1.2-1.2-1.8-2.7-1.8-4.6c0-1.9,0.6-3.4,1.8-4.6c1.2-1.2,2.7-1.8,4.5-1.8
|
|
||||||
c1.8,0,3.3,0.6,4.5,1.8c1.2,1.2,1.8,2.7,1.8,4.6c0,1.9-0.6,3.4-1.8,4.6c-1.2,1.2-2.7,1.8-4.5,1.8
|
|
||||||
C390.8,406.6,389.3,406,388.2,404.8L388.2,404.8z M388.9,396.4c-0.9,1-1.4,2.3-1.4,3.8c0,1.5,0.5,2.8,1.4,3.8
|
|
||||||
c0.9,1,2.2,1.5,3.7,1.5c1.6,0,2.8-0.5,3.7-1.5c0.9-1,1.4-2.3,1.4-3.8c0-1.5-0.5-2.8-1.4-3.8c-0.9-1-2.2-1.5-3.7-1.5
|
|
||||||
C391.1,394.9,389.9,395.4,388.9,396.4z"/>
|
|
||||||
<path fill="#007EC5" d="M401.7,410.2v-11.8h1v1.4h0c0.3-0.5,0.7-0.9,1.3-1.2c0.6-0.3,1.2-0.4,1.8-0.4c1.2,0,2.2,0.4,3,1.2
|
|
||||||
c0.8,0.8,1.2,1.8,1.2,3c0,1.2-0.4,2.2-1.2,3c-0.8,0.8-1.8,1.2-3,1.2c-0.6,0-1.3-0.1-1.8-0.4c-0.6-0.3-1-0.7-1.3-1.2h0v5.3H401.7
|
|
||||||
L401.7,410.2z M403.6,400c-0.6,0.6-1,1.4-1,2.3c0,0.9,0.3,1.6,1,2.3c0.6,0.6,1.4,0.9,2.3,0.9c0.9,0,1.7-0.3,2.3-0.9
|
|
||||||
c0.6-0.6,0.9-1.4,0.9-2.3c0-0.9-0.3-1.7-0.9-2.3c-0.6-0.6-1.3-0.9-2.3-0.9C405,399.1,404.2,399.4,403.6,400z"/>
|
|
||||||
<path fill="#007EC5" d="M419.3,404.1l0.8,0.6c-0.8,1.1-1.9,1.7-3.4,1.7c-1.2,0-2.2-0.4-2.9-1.2c-0.7-0.8-1.1-1.8-1.1-3
|
|
||||||
c0-1.2,0.4-2.2,1.1-3s1.7-1.2,2.8-1.2c1.2,0,2.1,0.4,2.7,1.1c0.7,0.7,1,1.6,1,2.6v0.7h-6.6c0,0.2,0,0.4,0.1,0.6
|
|
||||||
c0.1,0.2,0.1,0.5,0.3,0.8c0.1,0.3,0.3,0.5,0.5,0.8c0.2,0.2,0.5,0.4,0.9,0.6c0.4,0.2,0.8,0.2,1.2,0.2c0.5,0,1-0.1,1.5-0.4
|
|
||||||
C418.7,404.9,419,404.6,419.3,404.1L419.3,404.1z M413.7,401.6h5.6c0-0.7-0.3-1.3-0.8-1.8c-0.5-0.5-1.2-0.8-1.9-0.8
|
|
||||||
c-0.5,0-1,0.1-1.4,0.3c-0.4,0.2-0.7,0.5-0.9,0.8c-0.2,0.3-0.3,0.6-0.4,0.8C413.7,401.3,413.7,401.5,413.7,401.6z"/>
|
|
||||||
<path fill="#007EC5" d="M423.3,406.3v-5.7c0-0.2,0-0.6,0-1.2c0-0.6,0-0.9,0-1.1h1c0,0.8,0,1.3,0.1,1.4c0.6-1.1,1.4-1.6,2.5-1.6
|
|
||||||
c0.2,0,0.4,0,0.6,0.1l-0.1,1c-0.1,0-0.3-0.1-0.4-0.1c-0.9,0-1.5,0.3-1.9,0.8c-0.4,0.5-0.6,1.2-0.6,2v4.3H423.3z"/>
|
|
||||||
<path fill="#007EC5" d="M435.9,401v1.9c0,1.4,0.1,2.5,0.2,3.3h-1c-0.1-0.4-0.1-0.8-0.1-1.3h0c-0.6,1-1.5,1.5-2.8,1.5
|
|
||||||
c-0.8,0-1.4-0.2-2-0.6c-0.5-0.4-0.8-1-0.8-1.8c0-1.8,1.5-2.7,4.4-2.7h1.2V401c0-0.6-0.2-1.1-0.6-1.4c-0.4-0.3-0.9-0.5-1.6-0.5
|
|
||||||
c-0.9,0-1.7,0.3-2.4,0.9l-0.6-0.7c0.4-0.3,0.8-0.6,1.4-0.8c0.6-0.2,1.1-0.3,1.6-0.3c1,0,1.8,0.2,2.3,0.7
|
|
||||||
C435.6,399.3,435.9,400,435.9,401L435.9,401z M434.9,402.3h-1.1c-1,0-1.8,0.1-2.4,0.4c-0.7,0.3-1,0.7-1,1.4c0,0.5,0.2,0.8,0.5,1.1
|
|
||||||
c0.4,0.3,0.8,0.4,1.2,0.4c1,0,1.7-0.3,2.1-0.8c0.4-0.5,0.6-1.2,0.6-1.9V402.3z"/>
|
|
||||||
<path fill="#007EC5" d="M443.2,398.4v0.9h-2.3v5.1c0,0.4,0.1,0.6,0.3,0.8c0.2,0.2,0.5,0.3,0.8,0.3c0.4,0,0.7-0.1,1.2-0.3l0.1,0.9
|
|
||||||
c-0.5,0.2-0.9,0.3-1.3,0.3c-0.7,0-1.2-0.2-1.5-0.6c-0.3-0.4-0.5-0.9-0.5-1.5v-5.1h-1.7v-0.9h1.7v-2.3h1v2.3H443.2z"/>
|
|
||||||
<path fill="#007EC5" d="M445.9,406.3v-7.9h1v7.9H445.9L445.9,406.3z M445.9,395.8c-0.1-0.1-0.2-0.3-0.2-0.5c0-0.2,0.1-0.4,0.2-0.5
|
|
||||||
c0.1-0.1,0.3-0.2,0.5-0.2c0.2,0,0.4,0.1,0.5,0.2c0.1,0.1,0.2,0.3,0.2,0.5c0,0.2-0.1,0.4-0.2,0.5c-0.1,0.1-0.3,0.2-0.5,0.2
|
|
||||||
C446.2,396,446,395.9,445.9,395.8z"/>
|
|
||||||
<path fill="#007EC5" d="M450.6,406.3v-5.7c0-0.2,0-0.6,0-1.2c0-0.6,0-0.9,0-1.1h1c0,0.8,0,1.3,0.1,1.4h0.1
|
|
||||||
c0.2-0.5,0.6-0.8,1.1-1.1c0.5-0.3,1-0.5,1.7-0.5c2,0,3,1.1,3,3.4v4.7h-1v-4.7c0-1.7-0.7-2.5-2-2.5c-0.8,0-1.5,0.3-2,0.8
|
|
||||||
c-0.5,0.6-0.8,1.4-0.8,2.4v3.9H450.6z"/>
|
|
||||||
<path fill="#007EC5" d="M468.7,398.4v7.4c0,0.8-0.1,1.4-0.3,2c-0.2,0.6-0.4,1-0.7,1.3c-0.3,0.3-0.6,0.6-1,0.8
|
|
||||||
c-0.4,0.2-0.8,0.3-1.1,0.4c-0.3,0.1-0.7,0.1-1.1,0.1c-0.8,0-1.6-0.1-2.3-0.4c-0.7-0.3-1.3-0.7-1.7-1.2l0.8-0.8
|
|
||||||
c0.7,1,1.7,1.5,3.1,1.5c2.1,0,3.2-1.2,3.2-3.6v-1.1h0c-0.6,1-1.6,1.5-3,1.5c-1.2,0-2.2-0.4-3-1.2c-0.8-0.8-1.2-1.7-1.2-2.9
|
|
||||||
c0-1.1,0.4-2.1,1.2-2.9c0.8-0.8,1.8-1.2,3-1.2c1.3,0,2.3,0.5,3,1.5h0v-1.3H468.7L468.7,398.4z M466.8,404.4
|
|
||||||
c0.6-0.6,0.9-1.3,0.9-2.2c0-0.9-0.3-1.6-0.9-2.2c-0.6-0.6-1.3-0.9-2.2-0.9c-0.9,0-1.6,0.3-2.2,0.9c-0.6,0.6-0.9,1.3-0.9,2.2
|
|
||||||
c0,0.9,0.3,1.6,0.9,2.2c0.6,0.6,1.3,0.9,2.2,0.9C465.5,405.3,466.2,405,466.8,404.4z"/>
|
|
||||||
</g>
|
|
||||||
<g>
|
|
||||||
<path fill="#007EC5" d="M476,404.7l1.1-0.7c0.6,1,1.5,1.5,2.8,1.5c0.8,0,1.4-0.2,1.9-0.6c0.5-0.4,0.8-1,0.8-1.7
|
|
||||||
c0-0.5-0.2-1-0.5-1.3c-0.3-0.3-0.7-0.6-1.2-0.7c-0.5-0.1-1-0.3-1.5-0.5c-0.5-0.2-1-0.4-1.5-0.6c-0.5-0.2-0.8-0.6-1.2-1
|
|
||||||
c-0.3-0.5-0.5-1.1-0.5-1.8c0-1,0.4-1.8,1.1-2.4c0.8-0.6,1.7-0.9,2.8-0.9c1.4,0,2.5,0.5,3.3,1.5l-1,0.7c-0.6-0.8-1.4-1.2-2.4-1.2
|
|
||||||
c-0.8,0-1.4,0.2-1.9,0.6c-0.5,0.4-0.8,1-0.8,1.7c0,0.5,0.1,0.9,0.3,1.2c0.2,0.3,0.5,0.6,0.9,0.8c0.4,0.2,0.8,0.3,1.2,0.5
|
|
||||||
c0.4,0.1,0.9,0.3,1.3,0.4c0.4,0.2,0.9,0.3,1.2,0.6c0.4,0.2,0.7,0.6,0.9,1c0.2,0.4,0.3,0.9,0.3,1.6c0,1-0.4,1.9-1.1,2.5
|
|
||||||
c-0.7,0.6-1.6,0.9-2.7,0.9C478.1,406.6,476.8,406,476,404.7z"/>
|
|
||||||
<path fill="#007EC5" d="M492.9,398.4l-4.1,10.3c-0.4,1.1-1.2,1.7-2.2,1.7c-0.3,0-0.6-0.1-1-0.2l0.1-1c0.4,0.1,0.7,0.2,0.9,0.2
|
|
||||||
c0.3,0,0.6-0.1,0.8-0.4c0.2-0.2,0.4-0.6,0.5-1l0.7-1.8l-3.2-7.9h1.1l2.6,6.7l2.5-6.7H492.9z"/>
|
|
||||||
<path fill="#007EC5" d="M494.4,404.9l0.9-0.6c0.2,0.4,0.5,0.7,0.9,1c0.4,0.2,0.9,0.3,1.4,0.3c0.5,0,0.9-0.1,1.3-0.4
|
|
||||||
c0.4-0.3,0.5-0.6,0.5-1.1c0-0.4-0.2-0.7-0.5-0.9c-0.3-0.2-0.7-0.4-1.2-0.5c-0.5-0.1-0.9-0.2-1.4-0.3c-0.5-0.1-0.9-0.3-1.2-0.7
|
|
||||||
c-0.3-0.3-0.5-0.8-0.5-1.3c0-0.7,0.3-1.3,0.8-1.7c0.5-0.4,1.2-0.6,1.9-0.6c1.4,0,2.3,0.5,2.8,1.5l-0.9,0.5c-0.4-0.7-1-1.1-1.9-1.1
|
|
||||||
c-0.4,0-0.8,0.1-1.1,0.3c-0.4,0.2-0.5,0.5-0.5,0.9c0,0.4,0.2,0.7,0.5,0.9c0.3,0.2,0.7,0.3,1.2,0.4c0.5,0.1,0.9,0.2,1.4,0.3
|
|
||||||
c0.5,0.1,0.9,0.3,1.2,0.7c0.3,0.3,0.5,0.8,0.5,1.4c0,0.8-0.3,1.4-0.8,1.8c-0.6,0.4-1.2,0.6-2,0.6
|
|
||||||
C496.1,406.5,495,405.9,494.4,404.9z"/>
|
|
||||||
<path fill="#007EC5" d="M507.2,398.4v0.9h-2.3v5.1c0,0.4,0.1,0.6,0.3,0.8c0.2,0.2,0.5,0.3,0.8,0.3c0.4,0,0.7-0.1,1.2-0.3l0.1,0.9
|
|
||||||
c-0.5,0.2-0.9,0.3-1.3,0.3c-0.7,0-1.2-0.2-1.5-0.6c-0.3-0.4-0.5-0.9-0.5-1.5v-5.1h-1.7v-0.9h1.7v-2.3h1v2.3H507.2z"/>
|
|
||||||
<path fill="#007EC5" d="M515.9,404.1l0.8,0.6c-0.8,1.1-1.9,1.7-3.4,1.7c-1.2,0-2.2-0.4-2.9-1.2c-0.7-0.8-1.1-1.8-1.1-3
|
|
||||||
c0-1.2,0.4-2.2,1.1-3s1.7-1.2,2.8-1.2c1.2,0,2.1,0.4,2.7,1.1c0.7,0.7,1,1.6,1,2.6v0.7h-6.6c0,0.2,0,0.4,0.1,0.6
|
|
||||||
c0.1,0.2,0.1,0.5,0.3,0.8c0.1,0.3,0.3,0.5,0.5,0.8c0.2,0.2,0.5,0.4,0.9,0.6c0.4,0.2,0.8,0.2,1.2,0.2c0.5,0,1-0.1,1.5-0.4
|
|
||||||
C515.3,404.9,515.7,404.6,515.9,404.1L515.9,404.1z M510.3,401.6h5.6c0-0.7-0.3-1.3-0.8-1.8c-0.5-0.5-1.2-0.8-1.9-0.8
|
|
||||||
c-0.5,0-1,0.1-1.4,0.3c-0.4,0.2-0.7,0.5-0.9,0.8c-0.2,0.3-0.3,0.6-0.4,0.8C510.3,401.3,510.3,401.5,510.3,401.6z"/>
|
|
||||||
<path fill="#007EC5" d="M520,406.3v-5.7c0-0.2,0-0.6,0-1.2c0-0.6,0-0.9,0-1.1h1c0,0.8,0,1.3,0.1,1.4h0.1c0.2-0.5,0.6-0.8,1.1-1.1
|
|
||||||
c0.5-0.3,1-0.5,1.7-0.5c0.5,0,1,0.1,1.5,0.4c0.4,0.3,0.7,0.7,0.9,1.3c0.2-0.6,0.6-1,1.1-1.3c0.5-0.3,1-0.4,1.6-0.4
|
|
||||||
c2,0,3,1.1,3,3.4v4.7h-1v-4.7c0-1.7-0.7-2.5-2-2.5c-0.4,0-0.8,0.1-1.2,0.3c-0.3,0.2-0.6,0.4-0.8,0.7c-0.2,0.3-0.3,0.6-0.4,0.9
|
|
||||||
c-0.1,0.3-0.1,0.6-0.1,0.9v4.4h-1v-4.8c0-0.8-0.1-1.3-0.4-1.8c-0.3-0.4-0.7-0.6-1.2-0.6c-0.8,0-1.5,0.3-2,0.8
|
|
||||||
c-0.5,0.6-0.8,1.4-0.8,2.4v3.9H520z"/>
|
|
||||||
</g>
|
|
||||||
</g>
|
|
||||||
<g>
|
|
||||||
|
|
||||||
<linearGradient id="SVGID_5_" gradientUnits="userSpaceOnUse" x1="280.7511" y1="468.8727" x2="530.5958" y2="160.3402" gradientTransform="matrix(-0.9595 0.2818 0.2818 0.9595 742.5177 -113.6192)">
|
|
||||||
<stop offset="0" style="stop-color:#C6262F"/>
|
|
||||||
<stop offset="1.288056e-03" style="stop-color:#C6262F"/>
|
|
||||||
<stop offset="0.3136" style="stop-color:#D64B43"/>
|
|
||||||
<stop offset="0.5951" style="stop-color:#E26255"/>
|
|
||||||
<stop offset="0.8334" style="stop-color:#EA6F61"/>
|
|
||||||
<stop offset="1" style="stop-color:#ED7466"/>
|
|
||||||
</linearGradient>
|
|
||||||
<path fill-rule="evenodd" clip-rule="evenodd" fill="url(#SVGID_5_)" d="M427.7,300.4c-6.9,0.6-13.1,5-19.2,7.1
|
|
||||||
c-18.1,6.2-33.9,9.1-56.5,4.7c24.6,17.2,36.6,13,63.7,0.1c-0.5,0.6-0.7,1.3-1.3,1.9c1.4-0.4,2.4-1.7,3.4-2.2
|
|
||||||
c-0.4,0.7-0.9,1.5-1.4,1.9c2.2-0.6,3.7-2.3,5.9-3.9c-2.4,2.1-4.2,5-6,8c-1.5,2.5-3.1,4.8-5.1,6.9c-1,1-1.9,1.9-2.9,2.9
|
|
||||||
c-1.4,1.3-2.9,2.5-5.1,2.9c1.7,0.1,3.6-0.3,6.5-1.9c-1.6,2.4-7.1,6.2-9.9,7.2c10.5-2.6,19.2-15.9,25.7-18
|
|
||||||
c18.3-5.9,13.8-3.4,27-14.2c1.6-1.3,3-1,5.1-0.8c1.1,0.1,2.1,0.3,3.2,0.5c0.8,0.2,1.4,0.4,2.2,0.8l1.8,0.9c-1.9-4.5-2.3-4.1-5.9-6
|
|
||||||
c-2.3-1.3-3.3-3.8-6.2-4.9c-7.1-2.6-11.9,11.7-11.7-5c0.1-8,4.2-14.4,6.4-22c1.1-3.8,2.3-7.6,2.4-11.5c0.1-2.3,0-4.7-0.4-7
|
|
||||||
c-2-11.2-8.4-21.5-19.7-24.8c-1-0.3-1.1-0.3-0.9,0c9.6,17.1,7.2,38.3,3.1,54.2C429.9,285.5,426.7,293.2,427.7,300.4z"/>
|
|
||||||
<path fill-rule="evenodd" clip-rule="evenodd" fill="#E6E7E8" d="M344.4,311.8c7.1,4.9,15,9.5,23.8,10.7
|
|
||||||
c-8.3-0.4-16.6-3.8-27.3-11.3C342,311.4,343.2,311.6,344.4,311.8z"/>
|
|
||||||
</g>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 17 KiB |
@ -1,58 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<!--
|
|
||||||
~ Copyright 2016-present Open Networking Laboratory
|
|
||||||
~
|
|
||||||
~ Licensed under the Apache License, Version 2.0 (the "License");
|
|
||||||
~ you may not use this file except in compliance with the License.
|
|
||||||
~ You may obtain a copy of the License at
|
|
||||||
~
|
|
||||||
~ http://www.apache.org/licenses/LICENSE-2.0
|
|
||||||
~
|
|
||||||
~ Unless required by applicable law or agreed to in writing, software
|
|
||||||
~ distributed under the License is distributed on an "AS IS" BASIS,
|
|
||||||
~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
||||||
~ See the License for the specific language governing permissions and
|
|
||||||
~ limitations under the License.
|
|
||||||
-->
|
|
||||||
|
|
||||||
<!--
|
|
||||||
ONOS -- Displaying icons with Angular test page
|
|
||||||
-->
|
|
||||||
|
|
||||||
<html>
|
|
||||||
<head lang="en">
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<title>Practice Table Formatting</title>
|
|
||||||
|
|
||||||
<script type="text/javascript" src="../tp/angular.js"></script>
|
|
||||||
<script type="text/javascript" src="../tp/angular-route.js"></script>
|
|
||||||
|
|
||||||
<script type="text/javascript" src="../tp/d3.js"></script>
|
|
||||||
|
|
||||||
<script type="text/javascript" src="practice-table.js"></script>
|
|
||||||
<script type="text/javascript" src="../app/fw/widget/widget.js"></script>
|
|
||||||
<script type="text/javascript" src="../app/fw/widget/table.js"></script>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
html,
|
|
||||||
body {
|
|
||||||
background-color: #ddf;
|
|
||||||
font-family: Arial, Helvetica, sans-serif;
|
|
||||||
font-size: 9pt;
|
|
||||||
}
|
|
||||||
|
|
||||||
h2 {
|
|
||||||
color: darkred;
|
|
||||||
}
|
|
||||||
|
|
||||||
</style>
|
|
||||||
|
|
||||||
</head>
|
|
||||||
<!-- outline for using a controller in Angular -->
|
|
||||||
<body ng-app="practiceTable">
|
|
||||||
<h2>Scrolling Table Practice</h2>
|
|
||||||
<div id="tableDiv" ng-controller="showTableCtrl as ctrl">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@ -1,273 +0,0 @@
|
|||||||
/*
|
|
||||||
* Copyright 2016-present Open Networking Laboratory
|
|
||||||
*
|
|
||||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
||||||
* you may not use this file except in compliance with the License.
|
|
||||||
* You may obtain a copy of the License at
|
|
||||||
*
|
|
||||||
* http://www.apache.org/licenses/LICENSE-2.0
|
|
||||||
*
|
|
||||||
* Unless required by applicable law or agreed to in writing, software
|
|
||||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
|
||||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
||||||
* See the License for the specific language governing permissions and
|
|
||||||
* limitations under the License.
|
|
||||||
*/
|
|
||||||
|
|
||||||
/*
|
|
||||||
ONOS GUI -- Showing Icons Test Module
|
|
||||||
*/
|
|
||||||
|
|
||||||
(function () {
|
|
||||||
'use strict';
|
|
||||||
|
|
||||||
var config = {
|
|
||||||
colIds: ['_iconid_available', 'id', 'mfr', 'hw', 'sw', 'serial',
|
|
||||||
'annotations'],
|
|
||||||
colText: ['Availability', 'URI', 'Vendor', 'Hardware Version',
|
|
||||||
'Software Version', 'Serial Number', 'Protocol']
|
|
||||||
},
|
|
||||||
deviceData = {
|
|
||||||
"devices": [{
|
|
||||||
"id": "of:0000000000000001",
|
|
||||||
"available": true,
|
|
||||||
"_iconid_available": "active",
|
|
||||||
"role": "MASTER",
|
|
||||||
"mfr": "Nicira, Inc.",
|
|
||||||
"hw": "Open vSwitch",
|
|
||||||
"sw": "2.0.1",
|
|
||||||
"serial": "None",
|
|
||||||
"annotations": {
|
|
||||||
"protocol": "OF_10"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "of:0000000000000004",
|
|
||||||
"available": false,
|
|
||||||
"_iconid_available": "inactive",
|
|
||||||
"role": "MASTER",
|
|
||||||
"mfr": "Nicira, Inc.",
|
|
||||||
"hw": "Open vSwitch",
|
|
||||||
"sw": "2.0.1",
|
|
||||||
"serial": "None",
|
|
||||||
"annotations": {
|
|
||||||
"protocol": "OF_10"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "of:0000000000000092",
|
|
||||||
"available": false,
|
|
||||||
"_iconid_available": "inactive",
|
|
||||||
"role": "MASTER",
|
|
||||||
"mfr": "Nicira, Inc.",
|
|
||||||
"hw": "Open vSwitch",
|
|
||||||
"sw": "2.0.1",
|
|
||||||
"serial": "None",
|
|
||||||
"annotations": {
|
|
||||||
"protocol": "OF_10"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "of:0000000000000092",
|
|
||||||
"available": false,
|
|
||||||
"_iconid_available": "inactive",
|
|
||||||
"role": "MASTER",
|
|
||||||
"mfr": "Nicira, Inc.",
|
|
||||||
"hw": "Open vSwitch",
|
|
||||||
"sw": "2.0.1",
|
|
||||||
"serial": "None",
|
|
||||||
"annotations": {
|
|
||||||
"protocol": "OF_10"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "of:0000000000000092",
|
|
||||||
"available": false,
|
|
||||||
"_iconid_available": "inactive",
|
|
||||||
"role": "MASTER",
|
|
||||||
"mfr": "Nicira, Inc.",
|
|
||||||
"hw": "Open vSwitch",
|
|
||||||
"sw": "2.0.1",
|
|
||||||
"serial": "None",
|
|
||||||
"annotations": {
|
|
||||||
"protocol": "OF_10"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "of:0000000000000092",
|
|
||||||
"available": false,
|
|
||||||
"_iconid_available": "inactive",
|
|
||||||
"role": "MASTER",
|
|
||||||
"mfr": "Nicira, Inc.",
|
|
||||||
"hw": "Open vSwitch",
|
|
||||||
"sw": "2.0.1",
|
|
||||||
"serial": "None",
|
|
||||||
"annotations": {
|
|
||||||
"protocol": "OF_10"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "of:0000000000000092",
|
|
||||||
"available": false,
|
|
||||||
"_iconid_available": "inactive",
|
|
||||||
"role": "MASTER",
|
|
||||||
"mfr": "Nicira, Inc.",
|
|
||||||
"hw": "Open vSwitch",
|
|
||||||
"sw": "2.0.1",
|
|
||||||
"serial": "None",
|
|
||||||
"annotations": {
|
|
||||||
"protocol": "OF_10"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "of:0000000000000092",
|
|
||||||
"available": false,
|
|
||||||
"_iconid_available": "inactive",
|
|
||||||
"role": "MASTER",
|
|
||||||
"mfr": "Nicira, Inc.",
|
|
||||||
"hw": "Open vSwitch",
|
|
||||||
"sw": "2.0.1",
|
|
||||||
"serial": "None",
|
|
||||||
"annotations": {
|
|
||||||
"protocol": "OF_10"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "of:0000000000000092",
|
|
||||||
"available": false,
|
|
||||||
"_iconid_available": "inactive",
|
|
||||||
"role": "MASTER",
|
|
||||||
"mfr": "Nicira, Inc.",
|
|
||||||
"hw": "Open vSwitch",
|
|
||||||
"sw": "2.0.1",
|
|
||||||
"serial": "None",
|
|
||||||
"annotations": {
|
|
||||||
"protocol": "OF_10"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "of:0000000000000092",
|
|
||||||
"available": false,
|
|
||||||
"_iconid_available": "inactive",
|
|
||||||
"role": "MASTER",
|
|
||||||
"mfr": "Nicira, Inc.",
|
|
||||||
"hw": "Open vSwitch",
|
|
||||||
"sw": "2.0.1",
|
|
||||||
"serial": "None",
|
|
||||||
"annotations": {
|
|
||||||
"protocol": "OF_10"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "of:0000000000000092",
|
|
||||||
"available": false,
|
|
||||||
"_iconid_available": "inactive",
|
|
||||||
"role": "MASTER",
|
|
||||||
"mfr": "Nicira, Inc.",
|
|
||||||
"hw": "Open vSwitch",
|
|
||||||
"sw": "2.0.1",
|
|
||||||
"serial": "None",
|
|
||||||
"annotations": {
|
|
||||||
"protocol": "OF_10"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "of:0000000000000092",
|
|
||||||
"available": false,
|
|
||||||
"_iconid_available": "inactive",
|
|
||||||
"role": "MASTER",
|
|
||||||
"mfr": "Nicira, Inc.",
|
|
||||||
"hw": "Open vSwitch",
|
|
||||||
"sw": "2.0.1",
|
|
||||||
"serial": "None",
|
|
||||||
"annotations": {
|
|
||||||
"protocol": "OF_10"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "of:0000000000000092",
|
|
||||||
"available": false,
|
|
||||||
"_iconid_available": "inactive",
|
|
||||||
"role": "MASTER",
|
|
||||||
"mfr": "Nicira, Inc.",
|
|
||||||
"hw": "Open vSwitch",
|
|
||||||
"sw": "2.0.1",
|
|
||||||
"serial": "None",
|
|
||||||
"annotations": {
|
|
||||||
"protocol": "OF_10"
|
|
||||||
}
|
|
||||||
}]
|
|
||||||
};
|
|
||||||
|
|
||||||
function setColWidth(t) {
|
|
||||||
var tHeaders, tdElement, colWidth;
|
|
||||||
|
|
||||||
tHeaders = t.selectAll('th');
|
|
||||||
|
|
||||||
// select each td in the first row and set the header's width to the
|
|
||||||
// corresponding td's width, if td is larger than header's width
|
|
||||||
tHeaders.each(function(thElement, index){
|
|
||||||
thElement = d3.select(this);
|
|
||||||
|
|
||||||
tdElement = t.select('td:nth-of-type(' + (index + 1) + ')');
|
|
||||||
colWidth = tdElement.style('width');
|
|
||||||
|
|
||||||
thElement.style('width', colWidth);
|
|
||||||
tdElement.style('width', colWidth);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function setCSS(thead, tbody, height) {
|
|
||||||
thead.style('display', 'block');
|
|
||||||
tbody.style({'display': 'block',
|
|
||||||
'height': height || '100px',
|
|
||||||
'overflow': 'auto'
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function fixTable(t, th, tb, height) {
|
|
||||||
setColWidth(t);
|
|
||||||
setCSS(th, tb, height);
|
|
||||||
}
|
|
||||||
|
|
||||||
angular.module('practiceTable', ['onosWidget'])
|
|
||||||
|
|
||||||
.controller('showTableCtrl', ['$log', '$scope', '$rootScope',
|
|
||||||
'$timeout', 'TableService',
|
|
||||||
function ($log, $scope, $rootScope, $timeout, ts) {
|
|
||||||
var self = this;
|
|
||||||
var table = ts.renderTable(d3.select('#tableDiv'), config, deviceData);
|
|
||||||
}])
|
|
||||||
|
|
||||||
.directive('fixedHeader', ['$log', '$timeout', '$compile',
|
|
||||||
function ($log, $timeout, $compile) {
|
|
||||||
return {
|
|
||||||
restrict: 'A',
|
|
||||||
scope: {
|
|
||||||
tHeight: '@'
|
|
||||||
},
|
|
||||||
|
|
||||||
link: function (scope, element, attrs) {
|
|
||||||
var table = d3.select(element[0]),
|
|
||||||
thead = table.select('thead'),
|
|
||||||
tbody = table.select('tbody');
|
|
||||||
|
|
||||||
// wait until the table is visible
|
|
||||||
scope.$watch(
|
|
||||||
function () { return (!(table.offsetParent === null)); },
|
|
||||||
function(newValue, oldValue) {
|
|
||||||
if (newValue === true) {
|
|
||||||
|
|
||||||
// ensure thead and tbody have no display
|
|
||||||
thead.style('display', null);
|
|
||||||
tbody.style('display', null);
|
|
||||||
|
|
||||||
$timeout(function () {
|
|
||||||
fixTable(table, thead, tbody, scope.tHeight);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
};
|
|
||||||
}]);
|
|
||||||
}());
|
|
||||||
@ -1,89 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<!--
|
|
||||||
~ Copyright 2016-present Open Networking Laboratory
|
|
||||||
~
|
|
||||||
~ Licensed under the Apache License, Version 2.0 (the "License");
|
|
||||||
~ you may not use this file except in compliance with the License.
|
|
||||||
~ You may obtain a copy of the License at
|
|
||||||
~
|
|
||||||
~ http://www.apache.org/licenses/LICENSE-2.0
|
|
||||||
~
|
|
||||||
~ Unless required by applicable law or agreed to in writing, software
|
|
||||||
~ distributed under the License is distributed on an "AS IS" BASIS,
|
|
||||||
~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
||||||
~ See the License for the specific language governing permissions and
|
|
||||||
~ limitations under the License.
|
|
||||||
-->
|
|
||||||
|
|
||||||
<!--
|
|
||||||
ONOS -- SVG mouse over d3 exercise html
|
|
||||||
-->
|
|
||||||
|
|
||||||
<html>
|
|
||||||
<head lang="en">
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<title>Upgrade Performance</title>
|
|
||||||
|
|
||||||
<script type="text/javascript" src="../tp/angular.js"></script>
|
|
||||||
<script type="text/javascript" src="../tp/d3.js"></script>
|
|
||||||
<script type="text/javascript" src="svg-exercise.js"></script>
|
|
||||||
<script type="text/javascript" src="../app/fw/util/util.js"></script>
|
|
||||||
<script type="text/javascript" src="../app/fw/util/fn.js"></script>
|
|
||||||
|
|
||||||
|
|
||||||
<style>
|
|
||||||
html,
|
|
||||||
body, div {
|
|
||||||
background-color: #eee;
|
|
||||||
font-family: Arial, Helvetica, sans-serif;
|
|
||||||
font-size: 9pt;
|
|
||||||
margin: 0;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
.button {
|
|
||||||
fill: #369;
|
|
||||||
filter: url(#buttonBevel);
|
|
||||||
}
|
|
||||||
svg text {
|
|
||||||
fill: white;
|
|
||||||
letter-spacing: .005em;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body ng-app="svgExercise">
|
|
||||||
|
|
||||||
<div id="svgExDiv" ng-controller="svgExCtrl as ctrl">
|
|
||||||
<improve-performance></improve-performance>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg"
|
|
||||||
viewBox="-10 -10 110 110"
|
|
||||||
visibility="hidden">
|
|
||||||
<filter id="buttonBevel"
|
|
||||||
filterUnits="objectBoundingBox"
|
|
||||||
x="-10%" y="-10%" width="110%" height="110%">
|
|
||||||
<feGaussianBlur in="SourceAlpha"
|
|
||||||
stdDeviation="4"
|
|
||||||
result="blur"/>
|
|
||||||
<feSpecularLighting in="blur"
|
|
||||||
surfaceScale="7"
|
|
||||||
specularConstant="0.6"
|
|
||||||
specularExponent="5"
|
|
||||||
result="spec"
|
|
||||||
lighting-color="#4E7199">
|
|
||||||
<fePointLight x="-5000" y="-10000" z="20000"/>
|
|
||||||
</feSpecularLighting>
|
|
||||||
<feComposite in="spec"
|
|
||||||
in2="SourceAlpha"
|
|
||||||
operator="in"
|
|
||||||
result="spec2"/>
|
|
||||||
<feComposite in="SourceGraphic"
|
|
||||||
in2="spec2"
|
|
||||||
operator="arithmetic"
|
|
||||||
k1="0" k2="1" k3="1" k4="0" />
|
|
||||||
</filter>
|
|
||||||
</svg>
|
|
||||||
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@ -1,170 +0,0 @@
|
|||||||
/*
|
|
||||||
* Copyright 2016-present Open Networking Laboratory
|
|
||||||
*
|
|
||||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
||||||
* you may not use this file except in compliance with the License.
|
|
||||||
* You may obtain a copy of the License at
|
|
||||||
*
|
|
||||||
* http://www.apache.org/licenses/LICENSE-2.0
|
|
||||||
*
|
|
||||||
* Unless required by applicable law or agreed to in writing, software
|
|
||||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
|
||||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
||||||
* See the License for the specific language governing permissions and
|
|
||||||
* limitations under the License.
|
|
||||||
*/
|
|
||||||
|
|
||||||
/*
|
|
||||||
ONOS GUI -- SVG mouse over d3 exercise module
|
|
||||||
*/
|
|
||||||
|
|
||||||
(function () {
|
|
||||||
'use strict';
|
|
||||||
|
|
||||||
// injected references
|
|
||||||
var $log, fs;
|
|
||||||
|
|
||||||
// constants
|
|
||||||
var btnWidth = 175,
|
|
||||||
btnHeight = 50,
|
|
||||||
hoverZone = 70,
|
|
||||||
sectorDivisions = 3,
|
|
||||||
margin = 10;
|
|
||||||
|
|
||||||
// svg elements
|
|
||||||
var svg, g;
|
|
||||||
|
|
||||||
// other variables
|
|
||||||
var winWidth, winHeight,
|
|
||||||
sectorWidth, sectorHeight,
|
|
||||||
currSector = 4, // always starts in the middle
|
|
||||||
mouse;
|
|
||||||
|
|
||||||
// ====================================================
|
|
||||||
|
|
||||||
function centeredOnWindow(axis, dim) {
|
|
||||||
return (axis / 2) - (dim / 2);
|
|
||||||
}
|
|
||||||
|
|
||||||
function onMouseMove() {
|
|
||||||
mouse = d3.mouse(this);
|
|
||||||
moveButton();
|
|
||||||
}
|
|
||||||
|
|
||||||
function removeMouseListener() {
|
|
||||||
g.on('mousemove', null);
|
|
||||||
}
|
|
||||||
|
|
||||||
function addMouseListener() {
|
|
||||||
g.on('mousemove', onMouseMove);
|
|
||||||
}
|
|
||||||
|
|
||||||
function selectSector() {
|
|
||||||
var sector, row, col,
|
|
||||||
currCol = currSector % sectorDivisions;
|
|
||||||
|
|
||||||
do {
|
|
||||||
sector = Math.floor((Math.random() * 9));
|
|
||||||
col = sector % sectorDivisions;
|
|
||||||
} while (col === currCol);
|
|
||||||
currSector = sector;
|
|
||||||
row = Math.floor(sector / sectorDivisions);
|
|
||||||
|
|
||||||
return {
|
|
||||||
xmin: (sectorWidth * col) + margin,
|
|
||||||
xmax: ((sectorWidth * col) + sectorWidth) - margin,
|
|
||||||
ymin: (sectorHeight * row) + margin,
|
|
||||||
ymax: ((sectorHeight * row) + sectorHeight) - margin
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
function selectXY(sectorCoords) {
|
|
||||||
var x, y, x1, y1;
|
|
||||||
|
|
||||||
do {
|
|
||||||
x = (Math.random() * sectorCoords.xmax) + sectorCoords.xmin;
|
|
||||||
y = (Math.random() * sectorCoords.ymax) + sectorCoords.ymin;
|
|
||||||
x1 = x + btnWidth;
|
|
||||||
y1 = y + btnHeight;
|
|
||||||
} while (x1 > sectorCoords.xmax || y1 > sectorCoords.ymax);
|
|
||||||
|
|
||||||
return {
|
|
||||||
x: x,
|
|
||||||
y: y
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
function gTranslate(x, y) {
|
|
||||||
return 'translate(' + x + ',' + y + ')';
|
|
||||||
}
|
|
||||||
|
|
||||||
function moveButton() {
|
|
||||||
var sec = selectSector(),
|
|
||||||
pos = selectXY(sec);
|
|
||||||
g.transition()
|
|
||||||
.duration(300)
|
|
||||||
.ease('cubic-out')
|
|
||||||
.each('start', removeMouseListener)
|
|
||||||
.attr('transform', gTranslate(pos.x, pos.y))
|
|
||||||
.each('end', addMouseListener);
|
|
||||||
}
|
|
||||||
|
|
||||||
angular.module('svgExercise', ['onosUtil'])
|
|
||||||
|
|
||||||
.controller('svgExCtrl', ['$log', function (_$log_) {
|
|
||||||
$log = _$log_;
|
|
||||||
}])
|
|
||||||
|
|
||||||
.directive('improvePerformance', ['FnService', function (_fs_) {
|
|
||||||
fs = _fs_;
|
|
||||||
return {
|
|
||||||
restrict: 'E',
|
|
||||||
link: function (scope, elem) {
|
|
||||||
winWidth = fs.windowSize().width;
|
|
||||||
winHeight = fs.windowSize().height;
|
|
||||||
sectorWidth = winWidth / sectorDivisions;
|
|
||||||
sectorHeight = winHeight / sectorDivisions;
|
|
||||||
|
|
||||||
svg = d3.select(elem[0])
|
|
||||||
.append('svg')
|
|
||||||
.attr({
|
|
||||||
width: winWidth + 'px',
|
|
||||||
height: winHeight + 'px'
|
|
||||||
});
|
|
||||||
|
|
||||||
g = svg.append('g');
|
|
||||||
|
|
||||||
g.append('rect')
|
|
||||||
.attr({
|
|
||||||
width: btnWidth + 'px',
|
|
||||||
height: btnHeight + 'px',
|
|
||||||
rx: '10px',
|
|
||||||
'class': 'button'
|
|
||||||
});
|
|
||||||
|
|
||||||
g.append('text')
|
|
||||||
.style('text-anchor', 'middle')
|
|
||||||
.text('Click for better performance.')
|
|
||||||
.attr({
|
|
||||||
x: btnWidth / 2,
|
|
||||||
y: (btnHeight / 2) + 5
|
|
||||||
});
|
|
||||||
|
|
||||||
g.append('rect')
|
|
||||||
.attr({
|
|
||||||
fill: 'none',
|
|
||||||
'pointer-events': 'all',
|
|
||||||
width: btnWidth + hoverZone + 'px',
|
|
||||||
height: btnHeight + hoverZone + 'px',
|
|
||||||
x: -(hoverZone / 2),
|
|
||||||
y: -(hoverZone / 2)
|
|
||||||
});
|
|
||||||
g.attr('transform',
|
|
||||||
gTranslate(centeredOnWindow(winWidth, btnWidth),
|
|
||||||
centeredOnWindow(winHeight, btnHeight)));
|
|
||||||
|
|
||||||
addMouseListener();
|
|
||||||
}
|
|
||||||
};
|
|
||||||
}]);
|
|
||||||
}());
|
|
||||||
@ -1,376 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<!--
|
|
||||||
*
|
|
||||||
* Copyright 2016-present Open Networking Laboratory
|
|
||||||
*
|
|
||||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
||||||
* you may not use this file except in compliance with the License.
|
|
||||||
* You may obtain a copy of the License at
|
|
||||||
*
|
|
||||||
* http://www.apache.org/licenses/LICENSE-2.0
|
|
||||||
*
|
|
||||||
* Unless required by applicable law or agreed to in writing, software
|
|
||||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
|
||||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
||||||
* See the License for the specific language governing permissions and
|
|
||||||
* limitations under the License.
|
|
||||||
*
|
|
||||||
-->
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<title>2-Letter, 3-Letter, Country Codes for All Countries in the World</title>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<script charset="utf-8" src="../../tp/jquery-2.1.1.min.js"></script>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
|
|
||||||
<style type="text/css" scoped>
|
|
||||||
body {
|
|
||||||
font-family: Helvetica Neue, Helvetica, Arial, sans-serif ;
|
|
||||||
background-color: #eef;
|
|
||||||
}
|
|
||||||
.mainContent {
|
|
||||||
margin: auto;
|
|
||||||
width: 800px;
|
|
||||||
background-color: #ddf;
|
|
||||||
padding: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
table {
|
|
||||||
margin: auto;
|
|
||||||
}
|
|
||||||
th {
|
|
||||||
font-style: italic;
|
|
||||||
text-align: left;
|
|
||||||
background-color: #aad;
|
|
||||||
color: #66c;
|
|
||||||
padding: 4px;
|
|
||||||
}
|
|
||||||
td {
|
|
||||||
padding: 4px;
|
|
||||||
}
|
|
||||||
td.code {
|
|
||||||
font-family: monospace;
|
|
||||||
font-size: 120%;
|
|
||||||
}
|
|
||||||
td.num {
|
|
||||||
text-align: right;
|
|
||||||
}
|
|
||||||
tr:nth-child(even) {
|
|
||||||
background-color: #dde;
|
|
||||||
}
|
|
||||||
tr:nth-child(odd) {
|
|
||||||
background-color: #eef;
|
|
||||||
}
|
|
||||||
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<div class="content">
|
|
||||||
<div class="mainContent">
|
|
||||||
<div class="miscTxt">
|
|
||||||
<header>
|
|
||||||
<h1>Complete List of Country Codes </h1>
|
|
||||||
</header>
|
|
||||||
<p>
|
|
||||||
The 2-letter codes shown below are supplied by the ISO
|
|
||||||
(<i>International Organization for Standardization</i>).
|
|
||||||
It bases its list of country names and abbreviations on
|
|
||||||
the list of names published by the United Nations.
|
|
||||||
The UN also uses 3-letter codes, and numerical codes
|
|
||||||
to identify nations.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<table>
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<th> Country </th>
|
|
||||||
<th> A2 (ISO) </th>
|
|
||||||
<th> A3 (UN) </th>
|
|
||||||
<th> NUM (UN) </th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody id="codes-body">
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<script type="text/javascript">
|
|
||||||
|
|
||||||
var data = [
|
|
||||||
[ 'Afghanistan', 'AF', 'AFG', 4 ],
|
|
||||||
[ 'Albania', 'AL', 'ALB', 8 ],
|
|
||||||
[ 'Algeria', 'DZ', 'DZA', 12 ],
|
|
||||||
[ 'American Samoa', 'AS', 'ASM', 16 ],
|
|
||||||
[ 'Andorra', 'AD', 'AND', 20 ],
|
|
||||||
[ 'Angola', 'AO', 'AGO', 24 ],
|
|
||||||
[ 'Anguilla', 'AI', 'AIA', 660 ],
|
|
||||||
[ 'Antarctica', 'AQ', 'ATA', 10 ],
|
|
||||||
[ 'Antigua and Barbuda', 'AG', 'ATG', 28 ],
|
|
||||||
[ 'Argentina', 'AR', 'ARG', 32 ],
|
|
||||||
[ 'Armenia', 'AM', 'ARM', 51 ],
|
|
||||||
[ 'Aruba', 'AW', 'ABW', 533 ],
|
|
||||||
[ 'Australia', 'AU', 'AUS', 36 ],
|
|
||||||
[ 'Austria', 'AT', 'AUT', 40 ],
|
|
||||||
[ 'Azerbaijan', 'AZ', 'AZE', 31 ],
|
|
||||||
[ 'Bahamas', 'BS', 'BHS', 44 ],
|
|
||||||
[ 'Bahrain', 'BH', 'BHR', 48 ],
|
|
||||||
[ 'Bangladesh', 'BD', 'BGD', 50 ],
|
|
||||||
[ 'Barbados', 'BB', 'BRB', 52 ],
|
|
||||||
[ 'Belarus', 'BY', 'BLR', 112 ],
|
|
||||||
[ 'Belgium', 'BE', 'BEL', 56 ],
|
|
||||||
[ 'Belize', 'BZ', 'BLZ', 84 ],
|
|
||||||
[ 'Benin', 'BJ', 'BEN', 204 ],
|
|
||||||
[ 'Bermuda', 'BM', 'BMU', 60 ],
|
|
||||||
[ 'Bhutan', 'BT', 'BTN', 64 ],
|
|
||||||
[ 'Bolivia', 'BO', 'BOL', 68 ],
|
|
||||||
[ 'Bonaire', 'BQ', 'BES', 535 ],
|
|
||||||
[ 'Bosnia and Herzegovina', 'BA', 'BIH', 70 ],
|
|
||||||
[ 'Botswana', 'BW', 'BWA', 72 ],
|
|
||||||
[ 'Bouvet Island', 'BV', 'BVT', 74 ],
|
|
||||||
[ 'Brazil', 'BR', 'BRA', 76 ],
|
|
||||||
[ 'British Indian Ocean Territory', 'IO', 'IOT', 86 ],
|
|
||||||
[ 'Brunei Darussalam', 'BN', 'BRN', 96 ],
|
|
||||||
[ 'Bulgaria', 'BG', 'BGR', 100 ],
|
|
||||||
[ 'Burkina Faso', 'BF', 'BFA', 854 ],
|
|
||||||
[ 'Burundi', 'BI', 'BDI', 108 ],
|
|
||||||
[ 'Cambodia', 'KH', 'KHM', 116 ],
|
|
||||||
[ 'Cameroon', 'CM', 'CMR', 120 ],
|
|
||||||
[ 'Canada', 'CA', 'CAN', 124 ],
|
|
||||||
[ 'Cape Verde', 'CV', 'CPV', 132 ],
|
|
||||||
[ 'Cayman Islands', 'KY', 'CYM', 136 ],
|
|
||||||
[ 'Central African Republic', 'CF', 'CAF', 140 ],
|
|
||||||
[ 'Chad', 'TD', 'TCD', 148 ],
|
|
||||||
[ 'Chile', 'CL', 'CHL', 152 ],
|
|
||||||
[ 'China', 'CN', 'CHN', 156 ],
|
|
||||||
[ 'Christmas Island', 'CX', 'CXR', 162 ],
|
|
||||||
[ 'Cocos (Keeling) Islands', 'CC', 'CCK', 166 ],
|
|
||||||
[ 'Colombia', 'CO', 'COL', 170 ],
|
|
||||||
[ 'Comoros', 'KM', 'COM', 174 ],
|
|
||||||
[ 'Congo', 'CG', 'COG', 178 ],
|
|
||||||
[ 'Democratic Republic of the Congo', 'CD', 'COD', 180 ],
|
|
||||||
[ 'Cook Islands', 'CK', 'COK', 184 ],
|
|
||||||
[ 'Costa Rica', 'CR', 'CRI', 188 ],
|
|
||||||
[ 'Croatia', 'HR', 'HRV', 191 ],
|
|
||||||
[ 'Cuba', 'CU', 'CUB', 192 ],
|
|
||||||
[ 'Curaçao', 'CW', 'CUW', 531 ],
|
|
||||||
[ 'Cyprus', 'CY', 'CYP', 196 ],
|
|
||||||
[ 'Czech Republic', 'CZ', 'CZE', 203 ],
|
|
||||||
[ 'Côte dIvoire', 'CI', 'CIV', 384 ],
|
|
||||||
[ 'Denmark', 'DK', 'DNK', 208 ],
|
|
||||||
[ 'Djibouti', 'DJ', 'DJI', 262 ],
|
|
||||||
[ 'Dominica', 'DM', 'DMA', 212 ],
|
|
||||||
[ 'Dominican Republic', 'DO', 'DOM', 214 ],
|
|
||||||
[ 'Ecuador', 'EC', 'ECU', 218 ],
|
|
||||||
[ 'Egypt', 'EG', 'EGY', 818 ],
|
|
||||||
[ 'El Salvador', 'SV', 'SLV', 222 ],
|
|
||||||
[ 'Equatorial Guinea', 'GQ', 'GNQ', 226 ],
|
|
||||||
[ 'Eritrea', 'ER', 'ERI', 232 ],
|
|
||||||
[ 'Estonia', 'EE', 'EST', 233 ],
|
|
||||||
[ 'Ethiopia', 'ET', 'ETH', 231 ],
|
|
||||||
[ 'Falkland Islands (Malvinas)', 'FK', 'FLK', 238 ],
|
|
||||||
[ 'Faroe Islands', 'FO', 'FRO', 234 ],
|
|
||||||
[ 'Fiji', 'FJ', 'FJI', 242 ],
|
|
||||||
[ 'Finland', 'FI', 'FIN', 246 ],
|
|
||||||
[ 'France', 'FR', 'FRA', 250 ],
|
|
||||||
[ 'French Guiana', 'GF', 'GUF', 254 ],
|
|
||||||
[ 'French Polynesia', 'PF', 'PYF', 258 ],
|
|
||||||
[ 'French Southern Territories', 'TF', 'ATF', 260 ],
|
|
||||||
[ 'Gabon', 'GA', 'GAB', 266 ],
|
|
||||||
[ 'Gambia', 'GM', 'GMB', 270 ],
|
|
||||||
[ 'Georgia', 'GE', 'GEO', 268 ],
|
|
||||||
[ 'Germany', 'DE', 'DEU', 276 ],
|
|
||||||
[ 'Ghana', 'GH', 'GHA', 288 ],
|
|
||||||
[ 'Gibraltar', 'GI', 'GIB', 292 ],
|
|
||||||
[ 'Greece', 'GR', 'GRC', 300 ],
|
|
||||||
[ 'Greenland', 'GL', 'GRL', 304 ],
|
|
||||||
[ 'Grenada', 'GD', 'GRD', 308 ],
|
|
||||||
[ 'Guadeloupe', 'GP', 'GLP', 312 ],
|
|
||||||
[ 'Guam', 'GU', 'GUM', 316 ],
|
|
||||||
[ 'Guatemala', 'GT', 'GTM', 320 ],
|
|
||||||
[ 'Guernsey', 'GG', 'GGY', 831 ],
|
|
||||||
[ 'Guinea', 'GN', 'GIN', 324 ],
|
|
||||||
[ 'Guinea-Bissau', 'GW', 'GNB', 624 ],
|
|
||||||
[ 'Guyana', 'GY', 'GUY', 328 ],
|
|
||||||
[ 'Haiti', 'HT', 'HTI', 332 ],
|
|
||||||
[ 'Heard Island and McDonald Mcdonald Islands', 'HM', 'HMD', 334 ],
|
|
||||||
[ 'Holy See (Vatican City State)', 'VA', 'VAT', 336 ],
|
|
||||||
[ 'Honduras', 'HN', 'HND', 340 ],
|
|
||||||
[ 'Hong Kong', 'HK', 'HKG', 344 ],
|
|
||||||
[ 'Hungary', 'HU', 'HUN', 348 ],
|
|
||||||
[ 'Iceland', 'IS', 'ISL', 352 ],
|
|
||||||
[ 'India', 'IN', 'IND', 356 ],
|
|
||||||
[ 'Indonesia', 'ID', 'IDN', 360 ],
|
|
||||||
[ 'Iran, Islamic Republic of', 'IR', 'IRN', 364 ],
|
|
||||||
[ 'Iraq', 'IQ', 'IRQ', 368 ],
|
|
||||||
[ 'Ireland', 'IE', 'IRL', 372 ],
|
|
||||||
[ 'Isle of Man', 'IM', 'IMN', 833 ],
|
|
||||||
[ 'Israel', 'IL', 'ISR', 376 ],
|
|
||||||
[ 'Italy', 'IT', 'ITA', 380 ],
|
|
||||||
[ 'Jamaica', 'JM', 'JAM', 388 ],
|
|
||||||
[ 'Japan', 'JP', 'JPN', 392 ],
|
|
||||||
[ 'Jersey', 'JE', 'JEY', 832 ],
|
|
||||||
[ 'Jordan', 'JO', 'JOR', 400 ],
|
|
||||||
[ 'Kazakhstan', 'KZ', 'KAZ', 398 ],
|
|
||||||
[ 'Kenya', 'KE', 'KEN', 404 ],
|
|
||||||
[ 'Kiribati', 'KI', 'KIR', 296 ],
|
|
||||||
[ 'Korea, Democratic People\'s Republic of', 'KP', 'PRK', 408 ],
|
|
||||||
[ 'Korea, Republic of', 'KR', 'KOR', 410 ],
|
|
||||||
[ 'Kuwait', 'KW', 'KWT', 414 ],
|
|
||||||
[ 'Kyrgyzstan', 'KG', 'KGZ', 417 ],
|
|
||||||
[ 'Lao People\'s Democratic Republic', 'LA', 'LAO', 418 ],
|
|
||||||
[ 'Latvia', 'LV', 'LVA', 428 ],
|
|
||||||
[ 'Lebanon', 'LB', 'LBN', 422 ],
|
|
||||||
[ 'Lesotho', 'LS', 'LSO', 426 ],
|
|
||||||
[ 'Liberia', 'LR', 'LBR', 430 ],
|
|
||||||
[ 'Libya', 'LY', 'LBY', 434 ],
|
|
||||||
[ 'Liechtenstein', 'LI', 'LIE', 438 ],
|
|
||||||
[ 'Lithuania', 'LT', 'LTU', 440 ],
|
|
||||||
[ 'Luxembourg', 'LU', 'LUX', 442 ],
|
|
||||||
[ 'Macao', 'MO', 'MAC', 446 ],
|
|
||||||
[ 'Macedonia, the Former Yugoslav Republic of', 'MK', 'MKD', 807 ],
|
|
||||||
[ 'Madagascar', 'MG', 'MDG', 450 ],
|
|
||||||
[ 'Malawi', 'MW', 'MWI', 454 ],
|
|
||||||
[ 'Malaysia', 'MY', 'MYS', 458 ],
|
|
||||||
[ 'Maldives', 'MV', 'MDV', 462 ],
|
|
||||||
[ 'Mali', 'ML', 'MLI', 466 ],
|
|
||||||
[ 'Malta', 'MT', 'MLT', 470 ],
|
|
||||||
[ 'Marshall Islands', 'MH', 'MHL', 584 ],
|
|
||||||
[ 'Martinique', 'MQ', 'MTQ', 474 ],
|
|
||||||
[ 'Mauritania', 'MR', 'MRT', 478 ],
|
|
||||||
[ 'Mauritius', 'MU', 'MUS', 480 ],
|
|
||||||
[ 'Mayotte', 'YT', 'MYT', 175 ],
|
|
||||||
[ 'Mexico', 'MX', 'MEX', 484 ],
|
|
||||||
[ 'Micronesia, Federated States of', 'FM', 'FSM', 583 ],
|
|
||||||
[ 'Moldova, Republic of', 'MD', 'MDA', 498 ],
|
|
||||||
[ 'Monaco', 'MC', 'MCO', 492 ],
|
|
||||||
[ 'Mongolia', 'MN', 'MNG', 496 ],
|
|
||||||
[ 'Montenegro', 'ME', 'MNE', 499 ],
|
|
||||||
[ 'Montserrat', 'MS', 'MSR', 500 ],
|
|
||||||
[ 'Morocco', 'MA', 'MAR', 504 ],
|
|
||||||
[ 'Mozambique', 'MZ', 'MOZ', 508 ],
|
|
||||||
[ 'Myanmar', 'MM', 'MMR', 104 ],
|
|
||||||
[ 'Namibia', 'NA', 'NAM', 516 ],
|
|
||||||
[ 'Nauru', 'NR', 'NRU', 520 ],
|
|
||||||
[ 'Nepal', 'NP', 'NPL', 524 ],
|
|
||||||
[ 'Netherlands', 'NL', 'NLD', 528 ],
|
|
||||||
[ 'New Caledonia', 'NC', 'NCL', 540 ],
|
|
||||||
[ 'New Zealand', 'NZ', 'NZL', 554 ],
|
|
||||||
[ 'Nicaragua', 'NI', 'NIC', 558 ],
|
|
||||||
[ 'Niger', 'NE', 'NER', 562 ],
|
|
||||||
[ 'Nigeria', 'NG', 'NGA', 566 ],
|
|
||||||
[ 'Niue', 'NU', 'NIU', 570 ],
|
|
||||||
[ 'Norfolk Island', 'NF', 'NFK', 574 ],
|
|
||||||
[ 'Northern Mariana Islands', 'MP', 'MNP', 580 ],
|
|
||||||
[ 'Norway', 'NO', 'NOR', 578 ],
|
|
||||||
[ 'Oman', 'OM', 'OMN', 512 ],
|
|
||||||
[ 'Pakistan', 'PK', 'PAK', 586 ],
|
|
||||||
[ 'Palau', 'PW', 'PLW', 585 ],
|
|
||||||
[ 'Palestine, State of', 'PS', 'PSE', 275 ],
|
|
||||||
[ 'Panama', 'PA', 'PAN', 591 ],
|
|
||||||
[ 'Papua New Guinea', 'PG', 'PNG', 598 ],
|
|
||||||
[ 'Paraguay', 'PY', 'PRY', 600 ],
|
|
||||||
[ 'Peru', 'PE', 'PER', 604 ],
|
|
||||||
[ 'Philippines', 'PH', 'PHL', 608 ],
|
|
||||||
[ 'Pitcairn', 'PN', 'PCN', 612 ],
|
|
||||||
[ 'Poland', 'PL', 'POL', 616 ],
|
|
||||||
[ 'Portugal', 'PT', 'PRT', 620 ],
|
|
||||||
[ 'Puerto Rico', 'PR', 'PRI', 630 ],
|
|
||||||
[ 'Qatar', 'QA', 'QAT', 634 ],
|
|
||||||
[ 'Romania', 'RO', 'ROU', 642 ],
|
|
||||||
[ 'Russian Federation', 'RU', 'RUS', 643 ],
|
|
||||||
[ 'Rwanda', 'RW', 'RWA', 646 ],
|
|
||||||
[ 'Reunion', 'RE', 'REU', 638 ],
|
|
||||||
[ 'Saint Barthalemy', 'BL', 'BLM', 652 ],
|
|
||||||
[ 'Saint Helena', 'SH', 'SHN', 654 ],
|
|
||||||
[ 'Saint Kitts and Nevis', 'KN', 'KNA', 659 ],
|
|
||||||
[ 'Saint Lucia', 'LC', 'LCA', 662 ],
|
|
||||||
[ 'Saint Martin (French part)', 'MF', 'MAF', 663 ],
|
|
||||||
[ 'Saint Pierre and Miquelon', 'PM', 'SPM', 666 ],
|
|
||||||
[ 'Saint Vincent and the Grenadines', 'VC', 'VCT', 670 ],
|
|
||||||
[ 'Samoa', 'WS', 'WSM', 882 ],
|
|
||||||
[ 'San Marino', 'SM', 'SMR', 674 ],
|
|
||||||
[ 'Sao Tome and Principe', 'ST', 'STP', 678 ],
|
|
||||||
[ 'Saudi Arabia', 'SA', 'SAU', 682 ],
|
|
||||||
[ 'Senegal', 'SN', 'SEN', 686 ],
|
|
||||||
[ 'Serbia', 'RS', 'SRB', 688 ],
|
|
||||||
[ 'Seychelles', 'SC', 'SYC', 690 ],
|
|
||||||
[ 'Sierra Leone', 'SL', 'SLE', 694 ],
|
|
||||||
[ 'Singapore', 'SG', 'SGP', 702 ],
|
|
||||||
[ 'Sint Maarten (Dutch part)', 'SX', 'SXM', 534 ],
|
|
||||||
[ 'Slovakia', 'SK', 'SVK', 703 ],
|
|
||||||
[ 'Slovenia', 'SI', 'SVN', 705 ],
|
|
||||||
[ 'Solomon Islands', 'SB', 'SLB', 90 ],
|
|
||||||
[ 'Somalia', 'SO', 'SOM', 706 ],
|
|
||||||
[ 'South Africa', 'ZA', 'ZAF', 710 ],
|
|
||||||
[ 'South Georgia and the South Sandwich Islands', 'GS', 'SGS', 239 ],
|
|
||||||
[ 'South Sudan', 'SS', 'SSD', 728 ],
|
|
||||||
[ 'Spain', 'ES', 'ESP', 724 ],
|
|
||||||
[ 'Sri Lanka', 'LK', 'LKA', 144 ],
|
|
||||||
[ 'Sudan', 'SD', 'SDN', 729 ],
|
|
||||||
[ 'Suriname', 'SR', 'SUR', 740 ],
|
|
||||||
[ 'Svalbard and Jan Mayen', 'SJ', 'SJM', 744 ],
|
|
||||||
[ 'Swaziland', 'SZ', 'SWZ', 748 ],
|
|
||||||
[ 'Sweden', 'SE', 'SWE', 752 ],
|
|
||||||
[ 'Switzerland', 'CH', 'CHE', 756 ],
|
|
||||||
[ 'Syrian Arab Republic', 'SY', 'SYR', 760 ],
|
|
||||||
[ 'Taiwan, Province of China', 'TW', 'TWN', 158 ],
|
|
||||||
[ 'Tajikistan', 'TJ', 'TJK', 762 ],
|
|
||||||
[ 'United Republic of Tanzania', 'TZ', 'TZA', 834 ],
|
|
||||||
[ 'Thailand', 'TH', 'THA', 764 ],
|
|
||||||
[ 'Timor-Leste', 'TL', 'TLS', 626 ],
|
|
||||||
[ 'Togo', 'TG', 'TGO', 768 ],
|
|
||||||
[ 'Tokelau', 'TK', 'TKL', 772 ],
|
|
||||||
[ 'Tonga', 'TO', 'TON', 776 ],
|
|
||||||
[ 'Trinidad and Tobago', 'TT', 'TTO', 780 ],
|
|
||||||
[ 'Tunisia', 'TN', 'TUN', 788 ],
|
|
||||||
[ 'Turkey', 'TR', 'TUR', 792 ],
|
|
||||||
[ 'Turkmenistan', 'TM', 'TKM', 795 ],
|
|
||||||
[ 'Turks and Caicos Islands', 'TC', 'TCA', 796 ],
|
|
||||||
[ 'Tuvalu', 'TV', 'TUV', 798 ],
|
|
||||||
[ 'Uganda', 'UG', 'UGA', 800 ],
|
|
||||||
[ 'Ukraine', 'UA', 'UKR', 804 ],
|
|
||||||
[ 'United Arab Emirates', 'AE', 'ARE', 784 ],
|
|
||||||
[ 'United Kingdom', 'GB', 'GBR', 826 ],
|
|
||||||
[ 'United States', 'US', 'USA', 840 ],
|
|
||||||
[ 'United States Minor Outlying Islands', 'UM', 'UMI', 581 ],
|
|
||||||
[ 'Uruguay', 'UY', 'URY', 858 ],
|
|
||||||
[ 'Uzbekistan', 'UZ', 'UZB', 860 ],
|
|
||||||
[ 'Vanuatu', 'VU', 'VUT', 548 ],
|
|
||||||
[ 'Venezuela', 'VE', 'VEN', 862 ],
|
|
||||||
[ 'Viet Nam', 'VN', 'VNM', 704 ],
|
|
||||||
[ 'British Virgin Islands', 'VG', 'VGB', 92 ],
|
|
||||||
[ 'US Virgin Islands', 'VI', 'VIR', 850 ],
|
|
||||||
[ 'Wallis and Futuna', 'WF', 'WLF', 876 ],
|
|
||||||
[ 'Western Sahara', 'EH', 'ESH', 732 ],
|
|
||||||
[ 'Yemen', 'YE', 'YEM', 887 ],
|
|
||||||
[ 'Zambia', 'ZM', 'ZMB', 894 ],
|
|
||||||
[ 'Zimbabwe', 'ZW', 'ZWE', 716 ],
|
|
||||||
[ 'Aland Islands', 'AX', 'ALA', 248 ]
|
|
||||||
];
|
|
||||||
|
|
||||||
var bod = $('#codes-body');
|
|
||||||
|
|
||||||
function addRow(name, a2, a3, num) {
|
|
||||||
bod.append('<tr>' +
|
|
||||||
'<td>'+ name + '</td>' +
|
|
||||||
'<td class="code">'+ a2 + '</td>' +
|
|
||||||
'<td class="code">'+ a3 + '</td>' +
|
|
||||||
'<td class="num">'+ num + '</td>' +
|
|
||||||
'</tr>');
|
|
||||||
}
|
|
||||||
|
|
||||||
function loadRows() {
|
|
||||||
data.forEach(function (d) {
|
|
||||||
if (d.length) {
|
|
||||||
addRow(d[0], d[1], d[2], d[3]);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
loadRows();
|
|
||||||
</script>
|
|
||||||
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@ -1,87 +0,0 @@
|
|||||||
<!--
|
|
||||||
-- Sample code to show extracting country data from a countries TopoJSON
|
|
||||||
-- file and projecting it into an SVG layer.
|
|
||||||
--
|
|
||||||
-- See: http://bl.ocks.org/pnavarrc/62047b5638d624cfa9cb
|
|
||||||
-->
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<title>S America</title>
|
|
||||||
|
|
||||||
<script charset="utf-8" src="../../tp/d3.min.js"></script>
|
|
||||||
<script charset="utf-8" src="../../tp/topojson.v1.min.js"></script>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
svg {
|
|
||||||
border: 1px solid #888;
|
|
||||||
}
|
|
||||||
.country {
|
|
||||||
fill: #bcd1ff;
|
|
||||||
stroke: #7c79e6;
|
|
||||||
stroke-width: 1;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
|
||||||
<div id="map"></div>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
var datapath = '../../data/map/countries.topojson',
|
|
||||||
height = 500,
|
|
||||||
width = 500;
|
|
||||||
|
|
||||||
// create geographic projection
|
|
||||||
var projection = d3.geo.mercator()
|
|
||||||
.translate([width/2, height/2]);
|
|
||||||
|
|
||||||
// configure path generator
|
|
||||||
var pathGenerator = d3.geo.path()
|
|
||||||
.projection(projection);
|
|
||||||
|
|
||||||
var div = d3.select('#map'),
|
|
||||||
svg = div.append('svg'),
|
|
||||||
grp = svg.append('g');
|
|
||||||
|
|
||||||
svg.attr('width', width).attr('height', height);
|
|
||||||
|
|
||||||
d3.json(datapath, function (error, data) {
|
|
||||||
if (error) {
|
|
||||||
console.error(error);
|
|
||||||
throw error;
|
|
||||||
}
|
|
||||||
|
|
||||||
var features = topojson.feature(data, data.objects.countries).features;
|
|
||||||
|
|
||||||
// S.America
|
|
||||||
var southAmerica = features.filter(function (country) {
|
|
||||||
return country.properties.continent === 'South America';
|
|
||||||
});
|
|
||||||
|
|
||||||
var southAmericaFeature = {
|
|
||||||
type: 'FeatureCollection',
|
|
||||||
features: southAmerica
|
|
||||||
};
|
|
||||||
|
|
||||||
// compute bounds and centroid
|
|
||||||
var bounds = d3.geo.bounds(southAmericaFeature),
|
|
||||||
center = d3.geo.centroid(southAmericaFeature);
|
|
||||||
|
|
||||||
// compute angular distance between bound corners
|
|
||||||
var distance = d3.geo.distance(bounds[0], bounds[1]),
|
|
||||||
scale = height / distance / Math.sqrt(2);
|
|
||||||
|
|
||||||
// update projection
|
|
||||||
projection.scale(scale).center(center);
|
|
||||||
|
|
||||||
// draw
|
|
||||||
var countries = grp.selectAll('path.country')
|
|
||||||
.data([southAmericaFeature]);
|
|
||||||
countries.enter().append('path').classed('country', true);
|
|
||||||
countries.attr('d', pathGenerator);
|
|
||||||
countries.exit().remove();
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
</body>
|
|
||||||
|
|
||||||
</html>
|
|
||||||
@ -1,64 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<!--
|
|
||||||
~ Copyright 2016-present Open Networking Laboratory
|
|
||||||
~
|
|
||||||
~ Licensed under the Apache License, Version 2.0 (the "License");
|
|
||||||
~ you may not use this file except in compliance with the License.
|
|
||||||
~ You may obtain a copy of the License at
|
|
||||||
~
|
|
||||||
~ http://www.apache.org/licenses/LICENSE-2.0
|
|
||||||
~
|
|
||||||
~ Unless required by applicable law or agreed to in writing, software
|
|
||||||
~ distributed under the License is distributed on an "AS IS" BASIS,
|
|
||||||
~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
||||||
~ See the License for the specific language governing permissions and
|
|
||||||
~ limitations under the License.
|
|
||||||
-->
|
|
||||||
|
|
||||||
<!--
|
|
||||||
ONOS -- Sample use of trie functions in fn.js
|
|
||||||
-->
|
|
||||||
|
|
||||||
<html>
|
|
||||||
<head lang="en">
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<title>Test Trie Functions</title>
|
|
||||||
|
|
||||||
<script type="text/javascript" src="../tp/angular.js"></script>
|
|
||||||
<script type="text/javascript" src="../tp/angular-route.js"></script>
|
|
||||||
|
|
||||||
<script type="text/javascript" src="../tp/d3.js"></script>
|
|
||||||
|
|
||||||
<script type="text/javascript" src="../app/fw/util/util.js"></script>
|
|
||||||
<script type="text/javascript" src="../app/fw/util/fn.js"></script>
|
|
||||||
|
|
||||||
<script type="text/javascript" src="trie-test.js"></script>
|
|
||||||
|
|
||||||
<link rel="stylesheet" href="../app/common.css">
|
|
||||||
|
|
||||||
<style>
|
|
||||||
html,
|
|
||||||
body {
|
|
||||||
background-color: #ddf;
|
|
||||||
font-family: Arial, Helvetica, sans-serif;
|
|
||||||
font-size: 9pt;
|
|
||||||
}
|
|
||||||
|
|
||||||
h2 {
|
|
||||||
color: darkred;
|
|
||||||
}
|
|
||||||
|
|
||||||
#output div {
|
|
||||||
font-family: monospace;
|
|
||||||
white-space: pre;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<!-- outline for using a controller in Angular -->
|
|
||||||
<body class="light" ng-app="trie" ng-controller="OvTrieTest as ctrl">
|
|
||||||
<h2>Testing the Trie Functions</h2>
|
|
||||||
<div id="output"></div>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@ -1,116 +0,0 @@
|
|||||||
/*
|
|
||||||
* Copyright 2016-present Open Networking Laboratory
|
|
||||||
*
|
|
||||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
||||||
* you may not use this file except in compliance with the License.
|
|
||||||
* You may obtain a copy of the License at
|
|
||||||
*
|
|
||||||
* http://www.apache.org/licenses/LICENSE-2.0
|
|
||||||
*
|
|
||||||
* Unless required by applicable law or agreed to in writing, software
|
|
||||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
|
||||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
||||||
* See the License for the specific language governing permissions and
|
|
||||||
* limitations under the License.
|
|
||||||
*/
|
|
||||||
|
|
||||||
/*
|
|
||||||
ONOS GUI -- Test code illustrating use of trie functions
|
|
||||||
*/
|
|
||||||
|
|
||||||
(function () {
|
|
||||||
'use strict';
|
|
||||||
|
|
||||||
// injected refs
|
|
||||||
var $log, fs;
|
|
||||||
|
|
||||||
// internal state
|
|
||||||
var out,
|
|
||||||
trie = {},
|
|
||||||
counter = 5000;
|
|
||||||
|
|
||||||
function write(string) {
|
|
||||||
out.append('div').text(string);
|
|
||||||
}
|
|
||||||
|
|
||||||
function lookup(word) {
|
|
||||||
var result = fs.trieLookup(trie, word),
|
|
||||||
f = fs.isF(result),
|
|
||||||
show = f ? '{function}' : result;
|
|
||||||
|
|
||||||
|
|
||||||
write('------> ' + word + ' ==> ' + show);
|
|
||||||
|
|
||||||
f && f();
|
|
||||||
}
|
|
||||||
|
|
||||||
function add(word, data) {
|
|
||||||
var result = fs.addToTrie(trie, word, data);
|
|
||||||
write(' ADD> ' + word + ' [' + data + '] ==> ' + result);
|
|
||||||
}
|
|
||||||
|
|
||||||
function remove(word) {
|
|
||||||
var result = fs.removeFromTrie(trie, word);
|
|
||||||
write('REMOVE> ' + word + ' ==> ' + result);
|
|
||||||
}
|
|
||||||
|
|
||||||
function func1() {
|
|
||||||
counter++;
|
|
||||||
write('** function call ** ' + counter);
|
|
||||||
}
|
|
||||||
|
|
||||||
function func2() {
|
|
||||||
counter += 11;
|
|
||||||
write('** alternate call ** ' + counter);
|
|
||||||
}
|
|
||||||
|
|
||||||
function runTests() {
|
|
||||||
lookup('cat');
|
|
||||||
|
|
||||||
add('cat', 101);
|
|
||||||
|
|
||||||
lookup('ca');
|
|
||||||
lookup('cat');
|
|
||||||
lookup('cats');
|
|
||||||
|
|
||||||
add('cab', 103);
|
|
||||||
add('cog', 105);
|
|
||||||
|
|
||||||
lookup('cut');
|
|
||||||
lookup('cab');
|
|
||||||
|
|
||||||
remove('cab');
|
|
||||||
|
|
||||||
lookup('cab');
|
|
||||||
lookup('cat');
|
|
||||||
|
|
||||||
add('fun', func1);
|
|
||||||
|
|
||||||
lookup('fun');
|
|
||||||
lookup('fun');
|
|
||||||
lookup('fun');
|
|
||||||
lookup('cat');
|
|
||||||
lookup('fun');
|
|
||||||
|
|
||||||
add('fun', func2);
|
|
||||||
|
|
||||||
lookup('fun');
|
|
||||||
lookup('fun');
|
|
||||||
lookup('fun');
|
|
||||||
|
|
||||||
remove('fun');
|
|
||||||
|
|
||||||
lookup('fun');
|
|
||||||
}
|
|
||||||
|
|
||||||
angular.module('trie', ['onosUtil'])
|
|
||||||
.controller('OvTrieTest', ['$log', 'FnService',
|
|
||||||
|
|
||||||
function (_$log_, _fs_) {
|
|
||||||
$log = _$log_;
|
|
||||||
fs = _fs_;
|
|
||||||
out = d3.select('#output');
|
|
||||||
|
|
||||||
runTests();
|
|
||||||
}]);
|
|
||||||
}());
|
|
||||||
Loading…
x
Reference in New Issue
Block a user