I want to display a drop-down list of buttons in the left panel, one button for one "need".
Later, the user will be able to add a new need-button to the list.
I use a panel with "itemArray" binding.
But the button is not displayed when sentence: addNeed("My new need"); is executed.
I checked with the "dynamicPorts sample but I can't understand why it doesn't work.
<!DOCTYPE html>
<html>
<head>
<meta name="minimumCode" content="width=device-width, initial-scale=1">
<title>minimumCode</title>
<meta name="description" content="Iso prototype Leon Levy" />
<!-- Copyright 1998-2017 by Northwoods Software Corporation. -->
<meta charset="UTF-8">
<script src="https://unpkg.com/gojs/release/go-debug.js"></script>
<span id="diagramEventsMsg" style="color: red"></span>
<script id="code">
var ellipseStrokeWidth=3;
var ellipseWidth = 80;
var ellipseHeight = 25;
var myFont = "16px sans-serif";
var myFontMedium = "23px sans-serif";
var myFontLarge = "30px sans-serif";
var needWidth = 170;
var needHeight = 20;
var needStrokeWidth = 0;
var needColor = 'purple';
var portSize = new go.Size(8, 8);
function init() {
var $ = go.GraphObject.make; //for conciseness in defining node templates
myDiagram =
$(go.Diagram, "myDiagramDiv",
{
"undoManager.isEnabled": true
});
myBannerNeeds =
$(go.Diagram, "myBannerNeedsDiv",
{ layout: $(go.GridLayout, { wrappingColumn: 1, alignment: go.GridLayout.Position
})}
);
myBannerNeeds.nodeTemplate =
$(go.Node,
$(go.Panel, "Vertical", //needs list buttons
{ alignment: new go.Spot(0, 0), row: 0, column: 0},
new go.Binding("itemArray", "needsDataArray"),
{ itemTemplate:
$(go.Panel,
$(go.Shape, "Rectangle",
{ stroke: "red", strokeWidth: 2,
height: 30, width: 30}
),
$(go.TextBlock, { text: "...", stroke: "gray" },
new go.Binding("text", "key"))
) // end itemTemplate
}
) // end Vertical Panel
);
// Add a button to the needs panel.
function addNeed(newNeedName) {
myDiagram.startTransaction("addNeed");
var button = $('Button',
$(go.Shape, "Rectangle",
{ width: needWidth, height: needHeight, margin: 4, fill: "white",
stroke: "rgb(227, 18, 18)", strokeWidth: needStrokeWidth}),
$(go.TextBlock, newNeedName, // the content is just the text label
{stroke: needColor, font: myFont }),
{click: function(e, obj) { needSelected(newNeedName); } }
);
var needsNode = needsDataArray; //document.getElementById("ForNeeds");
if (needsNode) { showMessage("needsNode is true; " + button)}
else {showMessage("needsNode is false")};
myDiagram.model.insertArrayItem(needsNode, -1, button);
myDiagram.commitTransaction("addNeed");
}// end function addNeed
var needsDataArray = [];
var linksNeedsDataArray = []; // always empty
myBannerNeeds.model = new go.GraphLinksModel( needsDataArray, linksNeedsDataArray);
myDiagram.grid.visible = true;
myDiagram.model.copiesArrays = true;
myDiagram.model.copiesArrayObjects = true;
addNeed("My new need");
function needSelected(e,obj) {
alert("e:" + e + "; obj:" + obj + ' selected')
}; //end function flowTypeSelected
function showMessage(s) {
document.getElementById("diagramEventsMsg").textContent = s;
}
}// end function init
</script>
</head>
<body onload="init()">
<div id="container" style= "display: grid; grid-template-columns: 1fr 5fr; margin:0 ; height: 800px; width:1080px; font-size:0; position: relative; ">
<div id="ForNeeds">
<div id="myBannerNeedsDiv" style="display: inline-block; width: 200px; min-height: 400px; background: whitesmoke; margin-right: 0px; border: solid 1px purple;">
</div>
</div>
<div id="myDiagramDiv" style="flex-grow: 1; width: 804px;height: 100%; border: solid 1px black;">
</div>
</div>
</body>
</html>
Here's a basic demonstration of what I think you are asking for:
<!DOCTYPE html>
<html>
<head>
<title>Minimal GoJS Sample</title>
<!-- Copyright 1998-2019 by Northwoods Software Corporation. -->
<meta charset="UTF-8">
<script src="go.js"></script>
<script id="code">
function init() {
var $ = go.GraphObject.make;
myDiagram =
$(go.Diagram, "myDiagramDiv",
{ "undoManager.isEnabled": true });
myDiagram.nodeTemplate =
$(go.Node, "Auto",
$(go.Shape,
{ fill: "white" }),
$(go.Panel, "Vertical",
$(go.TextBlock,
{ margin: 4 },
new go.Binding("text")),
$(go.Panel, "Vertical",
new go.Binding("itemArray", "buttons"),
{
itemTemplate:
$("Button",
$(go.TextBlock, new go.Binding("text", "")),
{
click: function(e, button) {
alert(button.data);
}
}
)
}
)
)
);
myDiagram.model = new go.GraphLinksModel(
[
{ key: 1, text: "Alpha", buttons: ["one", "two"] },
{ key: 2, text: "Beta", buttons: ["one"] }
],
[
{ from: 1, to: 2 }
]);
}
function test() {
myDiagram.commit(function(diag) {
diag.selection.each(function(n) {
if (n instanceof go.Node) {
diag.model.addArrayItem(n.data.buttons, "another");
}
})
})
}
</script>
</head>
<body onload="init()">
<div id="myDiagramDiv" style="border: solid 1px black; width:100%; height:600px"></div>
<button onclick="test()">Test</button>
</body>
</html>
Select a Node and then click the HTML "Test" Button. It will add an item to the node's data.buttons Array, which causes a copy of the Panel.itemTemplate to be added to that Panel. In this case, that item template is just a GoJS "Button" which when clicked calls alert with the value of the item, a string.
Note how the value added to the JavaScript Array in the data is just a simple object -- in this case just a string, although it is commonplace to have each Array item be a JavaScript Object with various properties. I think your problem is that you are trying to add GraphObjects to the Array. That's a no-no -- you should not be mixing the Diagram's GraphObjects with the Model data.
Related
I have a made a quiz code that displays 10 questions. I want the function to load as soon as the page loads. In javascript , it was onload, here in angular I have used angular.element(document).ready(function(){....}); after defining in the controller. It is not getting loaded. Also I want to know if my code is proper, I have used an ng-click for submit inside the controller, it worked when I did the program in javascript,not sure of angularjs. Also please check if my foreach in checkAnswer() function is proper. And if any other bug please let me know.
<html ng-app="Swabhav.Quiz">
<head>
<title>Quiz code</title>
<script src="angular.js"></script>
<style>
h1 {
text-align: center;
background-color: lightcoral;
}
#head {
text-decoration: underline;
text-decoration-color: maroon;
}
#select1 {
align-self: center;
text-align: center;
font-family: 'Trebuchet MS';
font-size: 20px;
color: indigo;
margin-top: 30px;
margin-bottom: 50px;
padding: 30px;
}
</style>
</head>
<body>
<div ng-controller="QuizController">
<h1>QUIZ</h1>
<div id="head" ng-bind="head"></div>
<div id="select1" ng-bind="selection"></div>
</div>
<script>
angular.module("Swabhav.Quiz", [])
.controller("QuizController", ["$scope", "$log", function ($scope,
$log) {
angular.element(document).ready(function () {
var choiceA, choiceB, choiceC, choiceD, answer, element,
correct = 0, wrong = 0;
var index = 0, choices, choice, position = 0;
$scope.questions = [
{ question: "How many strokes in the Ashoka Chakra?" },
{ question: "What is 30*2?" },
{ question: " What is largest fish? " },
{ question: "What is the currency of Europe and America
respectively?" },
{ question: "What is the seven wonders of the World
amongst these?" },
{ question: "What is the main source of travel in
Mumbai?" },
{ question: "How many continents in the World?" },
{ question: "What Ocean surrounds India ?" },
{ question: "What station does not come in Mumbai-
Railway-Western-Line?" },
{ question: "Who is the CEO of Google parent company-
Alphabet Inc.?" }
];
$scope.options =
[{ A: "12", B: "24", C: "32", D: "10" },
{ A: "60", B: "50", C: "20", D: "10" },
{ A: "Blue Whale", B: "Megaladon", C: "Hammer-head
shark", D: "All the sharks" },
{ A: "Dollar and Euro", B: "Euro and Dollar", C: "Yen
and Rupees", D: "Rupees and Yen" },
{ A: "Taj Mahal", B: "Great Wall Of China", C: "Victoria
Falls", D: "All of these" },
{ A: "Trains", B: "Aeroplane", C: "Autorickshaw", D:
"Motorcycle" },
{ A: "3", B: "4", C: "5", D: "6" },
{ A: "Indian Ocean", B: "Pacific Ocean", C: "Atlantic
Ocean", D: "Arctic Ocean" },
{ A: "Sandhurst Road", B: "Andheri", C: "Borivali", D:
"Naigaon" },
{ A: "Madhuri Dixit", B: "Narendra Modi", C: "Tim Cook",
D: "Sundar Pichai" }
]
$scope.answers =
[
{ answer: "B" },
{ answer: "A" },
{ answer: "B" },
{ answer: "B" },
{ answer: "D" },
{ answer: "A" },
{ answer: "C" },
{ answer: "A" },
{ answer: "A" },
{ answer: "D" }
]
var row = 0;
$scope.selectQuestion = function (index) {
$scope.choicesIndex = 4;
if (row == $scope.questions.length) {
alert("you have " + correct + " correct answers
and " + wrong + " wrong answers out of 10 !");
return false;
}
$scope.head = "<b>" + "Question " + ++index + " of 10" +
"<b>";
question = $scope.questions[row];
choiceA = options.A[row];
choiceB = options.B[row];
choiceC = options.C[row];
choiceD = options.D[row];
answer = answers.answer[row];
$scope.selection = index + ". " + question + "<br>"
+ "<input type='radio' name='choices' value='A'>" +
choiceA + "<br>"
+ "<input type='radio' name='choices' value='B'>" +
choiceB + "<br>"
+ "<input type='radio' name='choices' value='C'>" +
choiceC + "<br>"
+ "<input type='radio' name='choices' value='D'>" +
choiceD + "<br>";
+"<button type='button' ng-click='checkAnswer()'> Submit
</button>" + "<br>"
}
$scope.checkAnswer = function () {
$scope.choices.push(choiceA);
$scope.choices.push(choiceB);
$scope.choices.push(choiceC);
$scope.choices.push(choiceD);
angular.array.forEach($scope.choices, function (value,
key) {
if ($scope.choicesIndex != 0) {
if
($scope.choices[$scope.choicesIndex].value.checked) {
$scope.selectedChoice =
$scope.choices[$scope.choicesIndex].key;
$log.log("$scope.selectedChoice = " +
$scope.selectedChoice);
$scope.choicesIndex--;
}
}
});
if ($scope.selectedChoice == answer) {
correct++;
}
else if ($scope.selectedChoice == "" ||
$scope.selectedChoice != answer) {
wrong++;
}
row++;
$scope.selectQuestion();
}
});
}]);
</script>
</body>
</html>
As #Arash mentioned, you are coding angularjs in a wrong way.
It will be better if you go through some angularjs kick start tuitorials.
Below is the working angularjs code
<html ng-app="Swabhav.Quiz">
<head>
<title>Quiz code</title>
<script data-require="angular.js#1.6.6" data-semver="1.6.6" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
<style>
h1 {
text-align: center;
background-color: lightcoral;
}
#head {
text-decoration: underline;
text-decoration-color: maroon;
}
#select1 {
align-self: center;
text-align: center;
font-family: 'Trebuchet MS';
font-size: 20px;
color: indigo;
margin-top: 30px;
margin-bottom: 50px;
padding: 30px;
}
.mt-10{
margin-top: 10px;
}
</style>
</head>
<body>
<div ng-controller="QuizController">
<h1>QUIZ</h1>
<!--<div id="head" ng-bind="head"></div>
<div id="select1" ng-bind="selection"></div>-->
<div ng-repeat="question in questions" ng-show="currentQuestion==$index+1">
<h3>Question {{currentQuestion}} of {{questions.length}}</h3>
<h4>{{question.question}}</h4>
<label ng-repeat="(key,value) in options[$index]">
<input type="radio" ng-value="key" name="{{question.question}}" ng-model="question.selected"> {{value}}
<br/>
</label>
</div>
<input class="mt-10" type="button" value="Next"
ng-click="nextQuestion()"
ng-disabled="!(questions.length>=currentQuestion && questions[currentQuestion-1].selected)"
ng-hide="questions.length==currentQuestion || showResult"/>
<input class="mt-10" type="button" value="Submit"
ng-click="checkAnswers()"
ng-show="questions.length==currentQuestion"/>
<div ng-show="showResult">you have {{correctAnswerCount}} correct answers and {{questions.length-correctAnswerCount}} wrong answers out of {{questions.length}} !</div>
</div>
<script>
angular.module("Swabhav.Quiz", [])
.controller("QuizController", ["$scope", "$log", function($scope,
$log) {
$scope.questions = [{"question":"How many strokes in the Ashoka Chakra?"},{"question":"What is 30*2?"},{"question":" What is largest fish? "},{"question":"What is the currency of Europe and America respectively ? "},{"question":"What is the seven wonders of the World amongst these ? "},{"question":"What is the main source of travel in Mumbai ? "},{"question":"How many continents in the World?"},{"question":"What Ocean surrounds India ?"},{"question":"What station does not come in Mumbai-Railway - Western - Line ? "},{"question":"Who is the CEO of Google parent company-Alphabet Inc. ? "}];
$scope.options = [{"A":"12","B":"24","C":"32","D":"10"},{"A":"60","B":"50","C":"20","D":"10"},{"A":"Blue Whale","B":"Megaladon","C":"Hammer-head shark ","D":"All the sharks "},{"A":"Dollar and Euro","B":"Euro and Dollar","C":"Yen and Rupees ","D":"Rupees and Yen "},{"A":"Taj Mahal","B":"Great Wall Of China","C":"Victoria Falls ","D":"All of these "},{"A":"Trains","B":"Aeroplane","C":"Autorickshaw","D":"Motorcycle"},{"A":"3","B":"4","C":"5","D":"6"},{"A":"Indian Ocean","B":"Pacific Ocean","C":"Atlantic Ocean ","D":"Arctic Ocean "},{"A":"Sandhurst Road","B":"Andheri","C":"Borivali","D":"Naigaon"},{"A":"Madhuri Dixit","B":"Narendra Modi","C":"Tim Cook","D":"Sundar Pichai"}];
$scope.answers = [{"answer":"B"},{"answer":"A"},{"answer":"B"},{"answer":"B"},{"answer":"D"},{"answer":"A"},{"answer":"C"},{"answer":"A"},{"answer":"A"},{"answer":"D"}];
$scope.currentQuestion = 1;
$scope.nextQuestion = function(){
if($scope.currentQuestion < $scope.questions.length){
$scope.currentQuestion++;
}
};
$scope.correctAnswerCount = 0;
$scope.checkAnswers = function(){
$scope.correctAnswerCount = 0;
angular.forEach($scope.questions, function(question, index) {
if(question.selected && question.selected == $scope.answers[index].answer){
$scope.correctAnswerCount++;
}
});
$scope.currentQuestion = undefined;
$scope.showResult = true;
};
}]);
</script>
</body>
</html>
I am using QuillJS and I need to add some controls to toolbar during runtime. Is there any way to make it from code after whole Quill has been initialized?
This is how I make it now.
quillEditor.getModule('toolbar').addHandler('color', (value) => {
if (value == 'new-color') {
value = prompt('Give me hex color baby!');
// unfortunately this code does not work
let n = toolbar.querySelector('select.ql-color');
n.innerHTML += '<option value="'+value+'"></option>';
}
quillEditor.format('color', value);
console.log("Color handler", value);
});
It looks like you're only adding the new options to the select element which is hidden. The element used in the UI to select colors is a span with the class ql-picker-options.
Check out this snippet
var tools = [
['bold', 'italic', 'underline', 'strike'],
[{'color': ['red', 'blue', 'green', 'new-color']}]
]
var quillEditor = new Quill('#editor-container', {
modules: {
toolbar: tools
},
theme: 'snow'
});
var toolbar = document.querySelector('.ql-toolbar');
quillEditor.getModule('toolbar').addHandler('color', (value) => {
if (value == 'new-color') {
value = prompt('Give me hex color baby!');
// This element is what the user sees
let uiSelect = toolbar.querySelector('.ql-color .ql-picker-options');
// This is a hidden element
let select = toolbar.querySelector('select.ql-color');
uiSelect.innerHTML += '<span class="ql-picker-item ql-primary" data-value="'+value+'" style="background-color: '+value+';"></span>';
select.innerHTML += '<option value="'+value+'"></option>';
}
quillEditor.format('color', value);
});
.ql-color .ql-picker-options [data-value=new-color] {
background: none !important;
width: 90px !important;
height: 20px !important;
}
.ql-color .ql-picker-options [data-value=new-color]:before {
content: 'New Color';
}
<script src="//cdn.quilljs.com/1.3.4/quill.min.js"></script>
<link href="//cdn.quilljs.com/1.0.0/quill.snow.css" rel="stylesheet"/>
<link href="//cdn.quilljs.com/1.3.4/quill.core.css" rel="stylesheet"/>
<div id="editor-container"></div>
Then with insertBefore(), you could keep the "New Color" option at the end.
I'm trying to use Angularjs multi-select into my project.
The following html is my multi-select div.
<div
multi-select
input-model="marks"
output-model="filters.marks"
button-label="name"
item-label="name"
tick-property="ticked"
selection-mode="multiple"
helper-elements="all none filter"
on-item-click="fClick( data )"
default-label="Select marks"
max-labels="1"
max-height="250px"
>
</div>
I know that I can use $scope.marks=data in the controller.
But the problem is $scope.marks is a global variable which I couldn't change..
Is there any way to set the values in multi-select without using the input-model?
Well, doing some tests here, i could get something with multiselecting:
var languages = ["C#", "Java", "Ruby", "Go", "C++", "Pascal", "Assembly"]; //The items.
var myApp = angular.module('myApp', []);
myApp.controller('MyCtrl', function($scope) {
$scope.marks = {};
for (lang in languages) {
$scope.marks[lang] = {
name: languages[lang],
marked: false
};
}
$scope.marks[3].marked = true; //mark "Go" and "C++" by default.
$scope.marks[4].marked = true;
$scope.theMarkedOnes = function() {
outp = "";
for (m in $scope.marks) {
if ($scope.marks[m].marked)
outp += $scope.marks[m].name + ", ";
}
if (outp.length == 0) {
return "(none)";
} else {
return outp.substr(0, outp.length - 2);
}
}
$scope.setMark = function(markone) {
markone.marked = !markone.marked;
}
})
*,
*:before,
*:after {
box-sizing: border-box;
}
body {
font-family: sans-serif;
font-size: 0.7em;
}
::-webkit-scrollbar {
width: 7px;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
border-radius: 10px;
}
::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
}
.multiselector {
background-color: #CCCCCC;
overflow-y: scroll;
width: 17em;
height: 13em;
border-radius: 0.7em;
}
.multiselector .item {
cursor: pointer;
padding: 0.2em 0.3em 0.2em 0.0em;
}
.itemtrue {
background-color: #9999AA;
}
.msshow {
background-color: #cccccc;
border-radius: 0.7em;
margin-top: 1em;
padding: 0.6em;
width: 17em;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
<div class="multiselector">
<div ng-repeat="mark in marks" class="item item{{mark.marked}}" ng-click="setMark(mark)">{{mark.name}}</div>
</div>
<div class="msshow"> <b>Selected:</b> {{theMarkedOnes()}}</div>
</div>
Set & Get selected values, name and text of Angularjs isteven-multi-select
<div isteven-multi-select
input-model="marks"
output-model="filters.marks"
button-label="name"
item-label="name"
tick-property="ticked"
selection-mode="multiple"
helper-elements="all none filter"
on-item-click="fClick( data )"
default-label="Select marks"
max-labels="1"
max-height="250px">
</div>
Add items
$scope.marks= [
{ name: 'Mark I', value: 'Mark i', text: 'This is Mark 1', ticked: true },
{ name: 'Mark II', value: 'Mark ii', text: 'This is Mark 2' },
{ name: 'Mark III', value: 'Mark iii', text: 'This is Mark 3' }
];
Get selected item (on change)
$scope.fClick = function (data) {
console.log(data.name);
console.log(data.value);
console.log(data.text);
return;
}
Select item (with code)
$scope.abc = function (data) {
console.log(data.element1, data.element2);
angular.forEach($scope.marks, function (item) {
if (item.value == data.element1) {
item.ticked = true;
}
else {
item.ticked = false;
}
});
}
Deselect item (clear)
$scope.ClearClick = function () {
$scope.Filter = { selectMarks: 'Mark i' };
$scope.marks.map(function (item) {
if ($scope.Filter.selectMarks == item.value)
item.ticked = true;
else
item.ticked = false;
});
}
I've just stumbled upon the new famous 0.5 release and things seem to be quite different (looking good). I want to implement a draggable element with inertia, but I can't figure it out by looking at the new docs.
Can anyone give me some tip on how to do this?
Here is a simple example of using the GestureHandler to track the start, move and end of a drag in the famous engine. The Position component will place our node with respect to the delta of our drag event. Notice how the node is passed to the GestureHandler to track our drag events.
Warning: As of this posting, the engine is still in Beta (0.5.2), so there is an edge case issue with trying to drag too close to the outside of the element. It may have to do with the default interval of render updates.
var rootScene = FamousEngine.createScene('body');
var rootNode = rootScene.addChild();
rootNode.setAlign(0.5, 0.5);
function Draggable(root) {
this.node = root;
this.node
.setProportionalSize(0.5, 0.5)
.setMountPoint(0.5, 0.5);
this.position = new Position(this.node);
console.log(this.position);
var base = (Math.random() * 360) | 0;
this.el = new DOMElement(this.node, {
properties: {
'textAlign': 'center',
'color': 'white',
'fontSize': '30px',
'lineHeight': '40px',
'background': 'hsl(' + ((base += 37) % 360) + ',40%,50%)',
'cursor': 'pointer'
}
});
this.el.setContent('Drag Me');
var gestures = new GestureHandler(this.node, [{
event: 'drag',
callback: drag.bind(this)
}]);
function drag(e) {
//console.log('drag', e.status, e);
switch (e.status) {
case 'start':
console.log('start drag', this.position.getValue());
break;
case 'end':
console.log('end drag', this.position.getValue());
break;
case 'move':
var d = e.centerDelta;
console.log('move drag', this.position.getValue(), d);
var pos = this.position.getValue();
this.position.set(pos.x + d.x, pos.y + d.y, pos.z);
break;
}
}
}
var dragger = new Draggable(rootNode);
FamousEngine.init();
Run the snippet example
var DOMElement = famous.domRenderables.DOMElement;
var Position = famous.components.Position;
var FamousEngine = famous.core.FamousEngine;
var GestureHandler = famous.components.GestureHandler;
var rootScene = FamousEngine.createScene('body');
var rootNode = rootScene.addChild();
rootNode.setAlign(0.5, 0.5);
function Draggable(root) {
this.node = root;
this.node
.setProportionalSize(0.5, 0.5)
.setMountPoint(0.5, 0.5);
this.position = new Position(this.node);
console.log(this.position);
var base = (Math.random() * 360) | 0;
this.el = new DOMElement(this.node, {
properties: {
'textAlign': 'center',
'color': 'white',
'fontSize': '30px',
'lineHeight': '40px',
'background': 'hsl(' + ((base += 37) % 360) + ',40%,50%)',
'cursor': 'pointer'
}
});
this.el.setContent('Drag Me<hr>');
var gestures = new GestureHandler(this.node, [{
event: 'drag',
callback: drag.bind(this)
}]);
function drag(e) {
//console.log('drag', e.status, e);
switch (e.status) {
case 'start':
console.log('start drag', this.position.getValue());
break;
case 'end':
console.log('end drag', this.position.getValue());
break;
case 'move':
var d = e.centerDelta;
console.log('move drag', this.position.getValue(), d);
var pos = this.position.getValue();
this.position.set(pos.x + d.x, pos.y + d.y, pos.z);
break;
}
}
}
var dragger = new Draggable(rootNode);
FamousEngine.init();
html,
body {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
}
body {
position: absolute;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-font-smoothing: antialiased;
-webkit-tap-highlight-color: transparent;
-webkit-perspective: 0;
perspective: none;
overflow: hidden;
}
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="icon" href="favicon.ico?v=1" type="image/x-icon">
<meta name="description" content="Draggable Famous#0.5.2">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="http://code.famo.us/famous/0.5.2/famous.min.js"></script>
I am new to angularjs and I would like to understand what the directives do but I can't find a tutorial with different example by complexity and I was curios if I could move the following code in a directive.
This is my javascript file(controller.js):
function TestCtrl(){
var json = {
id:"judge_id",
name:"Test",
children: [ {
id:"filter_1",
name:'Filter 1',
children:[{id:"case_1",name:"CaseA",children:[]},{id:"case_2",name:"CaseB",children:[]},{id:"case_3",name:"CaseC",children:[]}]
},
{
id:"filter_2",
name:'Filter 2',
children:[]
},
{
id:"filter_3",
name:'Filter 3',
children:[]
},
{
id:"filter_4",
name:'Filter 4',
children:[]
},
{
id:"filter_5",
name:'Filter 5',
children:[]
},
{
id:"filter_6",
name:'Filter 6',
children:[]
}
]
};
var rgraph = new $jit.RGraph({
//Where to append the visualization
injectInto: 'infovis',
background: {
CanvasStyles: {
strokeStyle: '#555'
}
},
//Add navigation capabilities:
//zooming by scrolling and panning.
Navigation: {
enable: true,
panning: true,
zooming: 10
},
//Set Node and Edge styles.
Node: {
color: '#ddeeff'
},
Edge: {
color: '#C17878',
lineWidth:1.5
},
//Add the name of the node in the correponding label
//and a click handler to move the graph.
//This method is called once, on label creation.
onCreateLabel: function(domElement, node){
domElement.innerHTML = node.name;
domElement.onclick = function(){
rgraph.onClick(node.id, {
onComplete: function() {
Log.write("done");
}
});
};
},
//Change some label dom properties.
//This method is called each time a label is plotted.
onPlaceLabel: function(domElement, node){
var style = domElement.style;
style.display = '';
style.cursor = 'pointer';
if (node._depth <= 1) {
style.fontSize = "0.8em";
style.color = "#ccc";
} else if(node._depth == 2){
style.fontSize = "0.7em";
style.color = "#494949";
} else {
style.display = 'none';
}
var left = parseInt(style.left);
var w = domElement.offsetWidth;
style.left = (left - w / 2) + 'px';
}
});
//load JSON data
rgraph.loadJSON(json);
//trigger small animation
rgraph.graph.eachNode(function(n) {
var pos = n.getPos();
pos.setc(-200, -200);
});
rgraph.compute('end');
rgraph.fx.animate({
modes:['polar'],
duration: 2000
});
}
ANd my html file is like this:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<script src="http://philogb.github.io/jit/static/v20/Jit/jit-yc.js"></script>
<script src="..js/controller.js"></script>
<link type="text/css" href="../base.css" rel="stylesheet" />
<title></title>
</head>
<body onload="TestCtrl();">
<div id="center-container">
<div id="infovis"></div>
</div>
</body>
</html>
Thanks
Sabbu