Permalink
Switch branches/tags
Nothing to show
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
176 lines (145 sloc) 6.56 KB
<!DOCTYPE html>
<html>
<head>
<title>Dragon Drop for AngularJS</title>
<link rel="stylesheet" href="bootstrap.min.css">
<style>
[btf-dragon] {
padding: 20px;
border: 1px solid red;
}
</style>
</head>
<body ng-app="ExampleApp">
<div class="container" ng-controller="MainCtrl">
<div class="row">
<h1>Dragon Drop Example</h1>
</div>
<hr>
<div class="row">
<div class="span6">
<h3>Things</h3>
<div btf-dragon="thing in things">{{thing}}</div>
</div>
<div class="span6">
<h3>Other Things</h3>
<div id="otherthingselt" btf-dragon="thing in otherThings">{{thing}}</div>
</div>
</div>
<hr>
<div class="row">
<div class="span6">
<h3>Things</h3>
<pre>{{things | json}}</pre>
</div>
<div class="span6">
<h3>Other Things</h3>
<pre>{{otherThings | json}}</pre>
</div>
</div>
<div>
<h3>Drop Down Test</h3>
<!--
_cat.core.plugin("dom").actions.fire("mousedown", {element: "#select_test"});
$("#select_test")[0][0].selected = true;
_cat.core.plugin("dom").actions.fire("mousedown", {element: "#select_test"});
-->
<select id="select_test" data-ng-options="o.name for o in options" data-ng-model="selectedOption" ng-change="update(selectedOption, '{{selectedOption}}')"></select>
</div>
</div>
<!-- 1.3.13 -->
<script src="bower_components/angular/angular.js"></script>
<script src="dragon-drop.js"></script>
<!--
@[scrap
@@name catImport
@@import[
cat/lib/cat.js
]
]@
-->
<script>
angular.module('ExampleApp', ['btford.dragon-drop']).
controller('MainCtrl', function ($scope) {
$scope.things = ['one', 'two', 'three'];
$scope.otherThings = [];
// drop down demo data
$scope.options = [{ name: "cell 1", id: 1 }, { name: "cell 2", id: 2 }, { name: "cell 3", id: 3 }];
$scope.selectedOption = $scope.options[1];
$scope.update = function(e) {
console.log("select-option change occured... ", e);
};
angular.element(document).ready(function () {
// track event listeners stack
var a, fnc = function(e){
console.log(e.type, e.target);
};
elt = document.querySelector("#select_test");
for (a in elt) {
if (a.indexOf("on")===0) {
// elt.addEventListener(a.substring(2), fnc);
}
}
function _addEventListener(event, elem, fn) {
if (!elem) {
return undefined;
}
if (elem.addEventListener) {
elem.addEventListener(event, fn, false);
} else {
elem.attachEvent("on" + event, function () {
return(fn.call(elem, window.event));
});
}
}
function _mouseSniffer(elt) {
if (elt) {
if (elt[0]) {
elt = elt[0];
}
for (var key in elt) {
if (key.indexOf("on") === 0) {
_addEventListener(key.substring(2), elt, function(e) {
console.log("event:", e.type, " tag: ", e.target.tagName, " class: ", e.target.className, " page: ", e.pageX, e.pageY );
})
}
}
}
}
/*
@[scrap
@@name eventDragElementTest
@@dom fire("mousedown", {element: document.querySelector("#dragelt_one"), cords: true})
@@dom fire("mousemove", {element: document.querySelector("#dragelt_one"), cords:true, steps: {count: 20, delay:20}, offset: {x:500, y:0}})
@@dom fire("mouseup", {element: document.querySelector("#dragelt_one"), cords: true})
]@
@[scrap
@@name eventDragDocumentTest1
@@dom fire("mousedown", {element: document, cords: document.querySelector("#dragelt_two")})
@@dom fire("mousemove", {element: document, cords:document.querySelector("#dragelt_two"), steps: {count: 20, delay:20}, offset: {x:500, y:0}})
@@dom fire("mouseup", {element: document, cords:document.querySelector("#dragelt_two")})
]@
@[scrap
@@name eventDragDocumentTest2
@@dom fire("mousedown", {element: document, cords: document.querySelector("#dragelt_two")})
@@dom fire("mousemove", {element: document, cords:document.querySelector("#dragelt_two"), steps: {count: 20, delay:20}, offset: {x:-500, y:0}})
@@dom fire("mouseup", {element: document, cords:document.querySelector("#dragelt_two")})
]@
@[scrap
@@name selectOptionTest1
@@dom fire("mousedown", {element: document.querySelector("#select_test")})
@@dom fire("mouseup", {element: document.querySelector("#select_test")})
@@js document.querySelector("#select_test")[2].selected = true
@@dom fire("mousedown", {element: document.querySelector("#select_test")})
@@dom fire("mouseup", {element: document.querySelector("#select_test")})
]@
@[scrap
@@name selectOptionTest2
@@dom select({element: "#select_test"}, 2)
]@
*/
});
});
</script>
</body>
</html>