I am new to ArcGIS JavaScript API programming and I am trying to implement navigation toolbar along with basemap gallery but I am getting the following error:
Uncaught Error: Tried to register widget with id==map but that id is already registered
I have tried to destroy the widget but still does not work.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" />
<title>Tabs inside accordion</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.23/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.23/esri/css/esri.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.23/dojox/layout/resources/ExpandoPane.css">
<link rel="stylesheet" href="css/layout.css">
<style>
html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
#map {
padding: 0;
}
.zoominIcon {
background-image: url(images/nav_zoomin.png);
width: 16px;
height: 16px;
}
.zoomfullextIcon {
background-image: url(images/nav_fullextent.png);
width: 16px;
height: 16px;
}
.zoomprevIcon {
background-image: url(images/nav_previous.png);
width: 16px;
height: 16px;
}
.zoomnextIcon {
background-image: url(images/nav_next.png);
width: 16px;
height: 16px;
}
.panIcon {
background-image: url(images/nav_pan.png);
width: 16px;
height: 16px;
}
.identifyIcon {
background-image: url(images/info_blue2.png);
width: 16px;
height: 16px;
}
</style>
<script src="https://js.arcgis.com/3.23/"></script>
<script>
var map, navToolbar;
require([
"esri/map",
"esri/dijit/BasemapGallery",
"esri/arcgis/utils",
"dojo/parser",
"dijit/layout/BorderContainer",
"dijit/layout/ContentPane",
"dijit/layout/TabContainer",
"dijit/layout/AccordionContainer",
"dojox/layout/ExpandoPane",
"dijit/TitlePane",
"esri/toolbars/navigation",
"dojo/on",
"dijit/registry",
"dijit/Toolbar",
"dijit/form/Button",
"dojo/domReady!"
],
function(Map, BasemapGallery, arcgisUtils,parser,Navigation,on,registry,navToolbar)
{
parser.parse();
map = new Map("map", {
basemap: "topo",
center: [73.88381, 10.5327242],
zoom: 7
});
navToolbar = new Navigation(map);
on(navToolbar, "onExtentHistoryChange", extentHistoryChangeHandler);
registry.byId("zoomin").on("click", function () {
navToolbar.activate(Navigation.ZOOM_IN);
});
registry.byId("zoomout").on("click", function () {
navToolbar.activate(Navigation.ZOOM_OUT);
});
registry.byId("zoomfullext").on("click", function () {
navToolbar.zoomToFullExtent();
});
registry.byId("zoomprev").on("click", function () {
navToolbar.zoomToPrevExtent();
});
registry.byId("zoomnext").on("click", function () {
navToolbar.zoomToNextExtent();
});
registry.byId("pan").on("click", function () {
navToolbar.activate(Navigation.PAN);
});
registry.byId("deactivate").on("click", function () {
navToolbar.deactivate();
});
function extentHistoryChangeHandler () {
registry.byId("zoomprev").disabled = navToolbar.isFirstExtent();
registry.byId("zoomnext").disabled = navToolbar.isLastExtent();
}
//add the basemap gallery, in this case we'll display maps from ArcGIS.com including bing maps
var basemapGallery = new BasemapGallery({
showArcGISBasemaps: true,
map: map
}, "basemapGallery");
basemapGallery.startup();
basemapGallery.on("error", function(msg) {
console.log("basemap gallery error: ", msg);
});
});
</script>
</head>
<body class="claro">
<div class="mainWindow" data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design:'headline', gutters:false" style="width:100%; height:100%;">
<div id="header" data-dojo-type="dijit/layout/ContentPane" style="text-align:center;" data-dojo-props="region:'top'">
<div style="display: width:100%;overflow:hidden;">
<div style="float:left;"><img src="..\images\cmfri-logo.png" /></div>
<div style="float:right;"><img src="../images/icar-logo.png" /></div>
<div style="float:right;"><img src="../images/platinumlogo.jpg" /></div>
<div style="float:center;text-align:center;">Indian Council of Agricultural Research<br>CENTRAL MARINE FISHERIES RESEARCH INSTITUTE</div>
</div>
</div>
<div data-dojo-type="dojox/layout/ExpandoPane"
data-dojo-props="duration:300, title:'Details', region:'left', maxWidth:'220px', easeIn:'easing.linear', easeOut:'easing.linear'"
style="width:300px;">
<div data-dojo-type="dijit/layout/ContentPane" style="text-align:center;" data-dojo-props="region:'left'" id="leftPane">
<div id="navToolbar" data-dojo-type="dijit.Toolbar">
<div data-dojo-type="dijit/form/Button" id="zoomin" data-dojo-props="iconClass:'zoominIcon'">Zoom In</div>
<div data-dojo-type="dijit/form/Button" id="zoomout" data-dojo-props="iconClass:'zoomoutIcon'">Zoom Out</div>
<div data-dojo-type="dijit/form/Button" id="zoomfullext" data-dojo-props="iconClass:'zoomfullextIcon'">Full Extent</div>
<div data-dojo-type="dijit/form/Button" id="zoomprev" data-dojo-props="iconClass:'zoomprevIcon'">Prev Extent</div>
<div data-dojo-type="dijit/form/Button" id="zoomnext" data-dojo-props="iconClass:'zoomnextIcon'">Next Extent</div>
<div data-dojo-type="dijit/form/Button" id="pan" data-dojo-props="iconClass:'panIcon'">Pan</div>
<div data-dojo-type="dijit/form/Button" id="deactivate" data-dojo-props="iconClass:'deactivateIcon'">Deactivate</div>
</div>
</div>
<div data-dojo-type="dijit/layout/AccordionContainer">
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="title:'Basemap Gallery'" style="width:380px; height:280px; overflow:auto;">
<div id="basemapGallery"></div>
</div>
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="title:'Pane 2'" style="width:380px; height:280px; overflow:auto;">
<div data-dojo-type="dijit/layout/TabContainer">
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="title:'Tab 1', selected:'true'">
Content for the first tab
</div>
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="title:'Tab 2'">
Content for the second tab
</div>
</div>
</div>
</div>
</div>
</div>
<div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'" style="padding:0;"> </div>
</div>
</body>
</html>
Your problem here is just that you does a mistake in your require function. You add navToolbar variable that don't match any library. Furthermore the order matter, the corresponding variable must have same position as the library.
Try with this :
require([
"esri/map",
"esri/dijit/BasemapGallery",
"esri/arcgis/utils",
"dojo/parser",
"esri/toolbars/navigation",
"dojo/on",
"dijit/registry",
"dijit/Toolbar",
"dijit/layout/BorderContainer",
"dijit/layout/ContentPane",
"dijit/layout/TabContainer",
"dijit/layout/AccordionContainer",
"dojox/layout/ExpandoPane",
"dijit/TitlePane",
"dijit/form/Button",
"dojo/domReady!"
],
function(Map, BasemapGallery, arcgisUtils,parser,Navigation,on,registry)
{
It works for me, here is a working example with your code sample :
Plunker
Hope it helps!
Related
I am learning angularjs and I came across some behaviour that I can't understand. I render a list of items in ng-repeat, each has a button to remove itself from the $scope's array - this works as expected but once I added a sortable to the list strange things started to happen.
Here is the running example showing the issue:
https://embed.plnkr.co/eQWcxZ7p8CcACfk6Z53X/
In the example - if I move [^] item 4 (Rocket Launcher) to position 1 and use Rocket Launcher's delete [X] button the list gets updated (i.e. item 4 - Rocket Launcher - that was on position 1 is removed) but the other items delete buttons stop working. Basically moving items and deleting them somehow break the bindings (?).
The code:
(function() {
'use strict';
var app = angular.module('myApp', []);
app.controller('myAppController', function($scope) {
$scope.boxes = [];
$scope.removeBoxItem = function(box, item) {
console.log('Removing "' + item.name + '" form box "' + box.name + '"...');
var index = box.items.indexOf(item);
box.items.splice(index, 1);
console.log(box);
};
this.init = function() {
var e;
e = new Box({
name: 'Red box'
});
$scope.boxes.push(e);
e.items.push(new Item({
index: 1,
name: 'Rock'
}));
e.items.push(new Item({
index: 2,
name: 'Scissors'
}));
e.items.push(new Item({
index: 3,
name: 'Paper'
}));
e.items.push(new Item({
index: 4,
name: 'Rocket launcher'
}));
e = new Box({
name: 'Green box'
});
e.items.push(new Item({
index: 1,
name: 'Chuck the Plant'
}));
e.items.push(new Item({
index: 2,
name: 'Hamster'
}));
e.items.push(new Item({
index: 3,
name: 'Tentacle Chow'
}));
$scope.boxes.push(e);
};
this.init();
});
app.directive("sortable", ["$timeout", function($timeout) {
return {
template: '<div class="sortable" ng-transclude></div>',
transclude: true,
scope: {
'handle': '#'
},
link: function(scope, element, attrs) {
$timeout(function() {
//console.log(element)
var sortable = element.find('> div');
console.log(sortable[0]);
scope.sortable = Sortable.create(sortable[0], {
handle: scope.handle || null
});
});
}
};
}]);
}());
function Box(args) {
this.name = args.name || null;
this.items = [];
}
function Item(args) {
this.index = args.index || null;
this.name = args.name || null;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="style.css" />
<style>
.container {
border: 1px solid #929292;
padding: 5px;
}
.header {
font-size: 1.2rem;
padding: 10px 15px;
background-color: #F5F5F5;
border-bottom: 2px solid #E2E2E2;
}
.body {
background-color: #F2F2F2;
padding: 10px 10px;
margin-bottom: 10px;
}
.body .item {
border: 1px solid #D2D2D2;
padding: 5px;
margin-bottom: 5px;
}
.body .options {
float: right;
}
.body .options .delete {
cursor: pointer;
}
.body .options .handle {
cursor: move;
}
.debug {
margin-top: 20px;
border-top: 1px dotted #929292;
}
</style>
</head>
<body>
<div ng-app="myApp" ng-controller="myAppController as appCtrl">
<div class="container">
<div ng-repeat="box in boxes">
<div class="header">{{ box.name }}</div>
<div class="body">
<div data-sortable="" data-handle=".handle">
<div class="item" ng-repeat="item in box.items">
{{item.index }}) {{ item.name }}
<div class="options">
<span ng-click="removeBoxItem(box, item)" class="delete">[X]</span>
<span class="handle">[^]</span>
</div>
</div>
</div>
</div>
</div>
<div class="debug">
<pre>{{ boxes | json }}
</pre>
</div>
</div>
</div>
<script data-require="jquery#3.1.1" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script data-require="Sortable.js#1.6.0" data-semver="1.6.0" src="https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.6.0/Sortable.js"></script>
<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.js"></script>
<script src="script.js"></script>
</body>
</html>
I am confused by this, in my real code things get even more broken - I made a collapsible directive that surrounds the "Boxes" so I can open and manipulate one at a time - in that case moving item 4 to position 1 and deleting it removes all items from the view (but not from the $scope). Than adding new item to the $scope's array causes items to correctly reappear. For now I created simpler version as I guess this is all somehow connected.
I am aware the sortable should set the objects indexes etc but for now I'd like to understand what is happening. I suspect I have some issues with understanding what is going on with scopes (?). Would be grateful for any help.
I was having a problem getting the simple demo to work found here.
I'm getting the two lists to show up, however I am unable to drag and drop items. The demo is very simple, just an html file, javascript file and css file.
Here's my index.html file:
<!DOCTYPE html>
<html ng-app="demo">
<head lang="en">
<meta charset="utf-8">
<title>Drag & Drop Demo</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
<script src="bower_components/angular-drag-and-drop-lists/angular-drag-and-drop-lists.min.js"></script>
<script src="Scripts/my-app.js"></script>
<link href="Content/my-styling.css" rel="stylesheet" />
</head>
<body class="simpleDemo" ng-controller="SimpleDemoController">
<ul dnd-list="list">
<li ng-repeat="item in models.lists.A"
dnd-draggable="item"
dnd-moved="models.lists.A.splice($index, 1)"
dnd-effect-allowed="move"
dnd-selected="models.selected = item"
ng-class="{'selected': models.selected === item}">
{{item.label}}
</li>
</ul>
<ul dnd-list="list">
<li ng-repeat="item in models.lists.B"
dnd-draggable="item"
dnd-moved="models.lists.B.splice($index, 1)"
dnd-effect-allowed="move"
dnd-selected="models.selected = item"
ng-class="{'selected': models.selected === item}">
{{item.label}}
</li>
</ul>
</body>
</html>
Here's my js file:
angular.module("demo", []).controller("SimpleDemoController", function ($scope) {
$scope.models = {
selected: null,
lists: { "A": [], "B": [] }
};
// Generate initial model
for (var i = 1; i <= 3; ++i) {
$scope.models.lists.A.push({ label: "Item A" + i });
$scope.models.lists.B.push({ label: "Item B" + i });
}
// Model to JSON for demo purpose
$scope.$watch('models', function (model) {
$scope.modelAsJson = angular.toJson(model, true);
}, true);
});
And here's my css file:
.simpleDemo ul[dnd-list],
.simpleDemo ul[dnd-list] > li {
position: relative;
}
.simpleDemo ul[dnd-list] {
min-height: 42px;
padding-left: 0px;
}
.simpleDemo ul[dnd-list] .dndDraggingSource {
display: none;
}
.simpleDemo ul[dnd-list] .dndPlaceholder {
display: block;
background-color: #ddd;
min-height: 42px;
}
.simpleDemo ul[dnd-list] li {
background-color: #fff;
border: 1px solid #ddd;
border-top-right-radius: 4px;
border-top-left-radius: 4px;
display: block;
padding: 10px 15px;
margin-bottom: -1px;
}
.simpleDemo ul[dnd-list] li.selected {
background-color: #dff0d8;
color: #3c763d;
}
This code is simply copied and pasted from the simple demo, just slightly modified to show lists A and B. Does anyone know what's wrong?
You're forgetting Dependency Injection just replace
angular.module("demo", [])
with
angular.module("demo", ['dndLists'])
and it should work..
plunk
--Update--
I found some problem with your Markup as well you are referencing list in <ul dnd-list="list>" this will not work as you're referencing an undefined variable, you should be referencing the list you are using in the drag-able. for example for the first list you can change.
<ul dnd-list="list">
to
<ul dnd-list="models.lists.A">
and that should work properly now..
P.S I've updated the plunk
you need the next: (that is the dependency injection)
app.requires.push('dndLists');
you are missing the ng-repeat in your angular it should look like this: (ng-repeat="(listName, list) in models.lists")
<div ng-repeat="(listName, list) in models.lists" class="col-md-6 ng-scope">
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title ng-binding">List A</h3>
</div>
<div class="panel-body ng-scope">
<ul dnd-list="list" class="ng-scope">
<li ng-repeat="item in list"
dnd-draggable="item"
dnd-moved="list.splice($index, 1)"
dnd-effect-allowed="move"
dnd-selected="models.selected = item"
ng-class="{'selected': models.selected === item}"
dnd-disable-if="list.length < 2"
class="ng-binding ng-scope"
draggable="true">
{{item.label}}
</li>
</ul>
</div>
</div>
</div>
I have problem with swapping the dragged/dropped elements.
DOM / Angular Structure:
angular.module('app', ['ngDragDrop'])
.controller('controller', function($scope) {
$scope.listItems = [
{name: "some name", title: "title"},
{name: "some name2", title: "title2"},
];
$scope.input = {};
$scope.draggableOprions = {
revert: 'invalid'
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script src="https://code.angularjs.org/1.4.9/angular.js"></script>
<script src="https://cdn.jsdelivr.net/angular.dragdrop/1.07/angular-dragdrop.min.js"></script>
<div ng-app="app">
<div ng-controller="controller">
<div class="container">
<ul>
<li data-drag="true"
data-jqyoui-options="draggableOprions"
jqyoui-draggable="{animate:true}"
ng-model="item" ng-repeat="item in listItems track by $index">
{{item.title}}
</li>
</ul>
</div>
<div class="container"
data-drop="true"
data-jqyoui-options jqyoui-droppable
ng-model="input">
<input ng-model="input.name">
</div>
</div>
</div>
The problem:
While I drag and drop an list item 1 - the name property of the list item 1 comes to the input model. But no longer is available in list item 1. Actually the list item 1 value goes undefined || null after I drop it in the input. If I now try to drag-n-drop list item 2 item in the input - the values swapping (list item 1 = undefined || null ? and list item 2 = list item 1 value and input model equal to list item 2 value`. So everything shuffle.
What I need:
I need to drag and drop list items in the input, avoiding losing values in list items. Every time i drop list item in the input, I need it's value to bind to the input.
Out of the box
I can change the drag and drop library, or even use source code, but the library is the better choice. I accept almost every good working answer which didn't broke any standards of good code (I mean that I need code which will not broke the other code and has good structure).
I suggest to use ngDraggable, an Angular module with no depency from jQuery or jQuery-ui.
Here below is a working snippet or check my Codepen:
angular.module('app', ['ngDraggable'])
.controller('controller', function($scope) {
$scope.listItems = [{
name: "some name",
title: "title1"
}, {
name: "some name2",
title: "title2"
}, {
name: "some name3",
title: "title3"
}, ];
$scope.droppedObjects = [];
$scope.input = {};
// drag complete over drop area
$scope.onDragComplete = function(data, evt) {
console.log("drag success, data:", data);
var index = $scope.droppedObjects.indexOf(data);
if (index > -1) {
$scope.droppedObjects.splice(index, 1);
}
}
// drop complete over drop area
$scope.onDropComplete = function(data, evt) {
console.log("drop success, data:", data);
var index = $scope.droppedObjects.indexOf(data);
if (index == -1)
$scope.droppedObjects.push(data);
}
// drop complete over input box
$scope.onDropCompleteInput = function(data, evt) {
console.log("drop on input success, data:", data);
$scope.input = data;
}
// drop complete over items area (remove from dropped list)
$scope.onDropCompleteRemove = function(data, evt) {
console.log("drop success - remove, data:", data);
var index = $scope.droppedObjects.indexOf(data);
if (index != -1)
$scope.droppedObjects.splice(index);
}
// other draggable events handlers
var onDraggableEvent = function(evt, data) {
console.log("128", "onDraggableEvent", evt, data);
}
$scope.$on('draggable:start', onDraggableEvent);
//$scope.$on('draggable:move', onDraggableEvent);
$scope.$on('draggable:end', onDraggableEvent);
});
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
[ng-drag] {
-moz-user-select: -moz-none;
-khtml-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
}
.item {
width: 100px;
height: 60px;
background: rgba(255, 0, 0, 0.5);
color: white;
text-align: center;
padding-top: 5%;
display: inline-block;
margin: 0 10px;
cursor: move;
}
ul.draggable-objects:after {
display: block;
content: "";
clear: both;
}
.draggable-objects li {
float: left;
display: block;
width: 120px;
height: 100px;
}
[ng-drag].drag-over {
border: solid 1px red;
}
[ng-drag].dragging {
opacity: 0.5;
}
.drop-container {
background: rgba(0, 255, 0, 0.5);
text-align: center;
width: 600px;
height: 200px;
padding-top: 90px;
display: block;
margin: 20px auto;
position: relative;
}
.drop-input {
width: 200px;
height: 40px;
}
.drag-enter {
border: solid 5px red;
}
.drop-container span.title {
display: block;
position: absolute;
top: 10%;
left: 50%;
width: 200px;
height: 20px;
margin-left: -100px;
margin-top: -10px;
}
.drop-container div {
position: relative;
z-index: 2;
}
<script src="//code.angularjs.org/1.4.8/angular.js"></script>
<script src="//rawgit.com/fatlinesofcode/ngDraggable/master/ngDraggable.js"></script>
<body ng-app="app">
<div ng-controller="controller">
<div class="row">
<h1>ngDraggable Example</h1>
</div>
<div ng-drop="true" ng-drop-success="onDropCompleteRemove($data,$event)">
<ul class="draggable-objects">
<li ng-repeat="obj in listItems">
<div ng-drag="true" ng-drag-data="obj" data-allow-transform="true" class="item"> {{obj.title}} </div>
</li>
</ul>
</div>
<hr/>
<div ng-drop="true" ng-drop-success="onDropComplete($data,$event)" class="drop-container">
<span class="title">Drop area</span>
<div ng-repeat="obj in droppedObjects" ng-drag="true" ng-drag-data="obj" ng-drag-success="onDragComplete($data,$event)" class="item">
{{obj.title}}
</div>
</div>
<hr/>
<div class="container">
Drop on input:
<input ng-model="input.name" class="drop-input" ng-drop="true" ng-drop-success="onDropCompleteInput($data,$event)">
</div>
<br>
<hr/>
<pre>listItems = {{listItems|json}}</pre>
<pre>input = {{input|json}}</pre>
<pre>droppedObjects = {{droppedObjects|json}}</pre>
</div>
</body>
<!DOCTYPE html>
<html>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script src="https://code.angularjs.org/1.4.9/angular.js"></script>
<script src="https://cdn.jsdelivr.net/angular.dragdrop/1.07/angular-dragdrop.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="MyController">
<div id="products">
<h1 class="ui-widget-header">Products</h1>
<div id="catalog">
<div>
<ul>
<li ng-repeat='item in list1' ng-show="item.title" data-drag="true" data-jqyoui-options="{revert: 'invalid', helper: 'clone'}" ng-model="list1" jqyoui-draggable="{index: {{$index}}, animate: true, placeholder: 'keep'}">{{item.title}}</li>
</ul>
</div>
</div>
</div>
<div id="cart">
<h1 class="ui-widget-header">Shopping Cart</h1>
<div class="ui-widget-content">
<ol data-drop="true" ng-model='list4' jqyoui-droppable="{multiple:true}">
<li ng-repeat="item in list4 track by $index" ng-show="item.title" data-drag="true" data-jqyoui-options="{revert: 'invalid', helper: 'clone'}" ng-model="list4" jqyoui-draggable="{index: {{$index}},animate:true}">{{item.title}}</li>
<li class="placeholder" ng-hide="hideMe()">Add your items here</li>
</ol>
</div>
</div>
</div>
<script>
var app = angular.module('myApp', ['ngDragDrop']);
app.controller('MyController', function ($scope,$http,$sce)
{
$scope.list1 = [{'title': 'Lolcat Shirt'},{'title': 'Cheezeburger Shirt'},{'title': 'Buckit Shirt'}];
$scope.list4 = [];
$scope.hideMe = function()
{
return $scope.list4.length > 0;
}
});
</script>
</body>
</html>
You have to use helper: 'clone' in data-jqyoui-options
Am creating an image slider with Angularjs using the codes from here
Using AngularJS 1.15, I could get the image to slide in. But when the second image comes in, the first image will disappear instead of sliding out. Can someone help?
NOTE: this does not work on Firefox and IE but works on Chrome.
Here are my codes
HTML
<div ng-controller="slideShowController" class="imageslide" ng-switch='slideshow' ng-animate="'animate'">
<div class="slider-content" ng-switch-when="1">
<img src="asset/building.jpg" width="100%" height="400px"/>
</div>
<div class="slider-content" ng-switch-when="2">
<img src="asset/slide-2.jpg" width="100%" height="400px"/>
</div>
<div class="slider-content" ng-switch-when="3">
<img src="asset/slide-3.jpg" width="100%" height="400px"/>
</div>
<div class="slider-content" ng-switch-when="4">
<img src="asset/slide-4.jpg" width="100%" height="400px"/>
</div>
</div>
Javascript
function slideShowController($scope, $timeout) {
var slidesInSlideshow = 4;
var slidesTimeIntervalInMs = 3000;
$scope.slideshow = 1;
var slideTimer =
$timeout(function interval() {
$scope.slideshow = ($scope.slideshow % slidesInSlideshow) + 1;
slideTimer = $timeout(interval, slidesTimeIntervalInMs);
}, slidesTimeIntervalInMs);
}
CSS
.imageslide{
width:100%;
height:400px;
margin: 0 auto;
margin-bottom: 20px;
}
.imageslide .slider-content {
position: absolute;
width:100%;
height:400px;
}
.animate-enter,.animate-leave {
-webkit-transition:1000ms cubic-bezier(.165,.84,.44,1) all;
-moz-transition:1000ms cubic-bezier(.165,.84,.44,1) all;
-ms-transition:1000ms cubic-bezier(.165,.84,.44,1) all;
-o-transition:1000ms cubic-bezier(.165,.84,.44,1) all;
transition:1000ms cubic-bezier(.165,.84,.44,1) all;
}
.animate-enter {
left:100%;
}
.animate-leave.animate-leave-active {
left:-100%;
}
.animate-enter.animate-enter-active,.animate-leave {
left:0;
}
The biggest issue I see with your plunker is the lack of an ng-app attribute on the page. After adding that and changing the animate out to use margin-left it works fine:
.animate-leave.animate-leave-active {
margin-left:-100%;
}
Forked plunkr:
http://plnkr.co/edit/BxWNlYVJUCNL7C1K65aU?p=preview
Below is the code I have refer from this page and tested. It worked for me now.
I just need to make it dynamic passing image url from Jsp custom tags.
Note :
It is working for me in Chrome and Firefox.
But it did not work for In IE 10.
I could not understand why it wont working in IE 10 can any one tell? Even it does not show any error in console.
<html ng-app>
<head>
<script data-require="angular.js#1.1.5" data-semver="1.1.5" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.js"></script>
<script>
function slideShowController($scope, $timeout) {
var slidesInSlideshow = 4;
var slidesTimeIntervalInMs = 3000;
$scope.slideshow = 1;
var slideTimer =
$timeout(function interval() {
$scope.slideshow = ($scope.slideshow % slidesInSlideshow) + 1;
slideTimer = $timeout(interval, slidesTimeIntervalInMs);
}, slidesTimeIntervalInMs);
}
</script>
<style>
.imageslide{
width:100%;
height:400px;
margin: 0 auto;
margin-bottom: 20px;
}
.imageslide .slider-content {
position: absolute;
width:100%;
height:400px;
}
.animate-enter,.animate-leave {
-webkit-transition:1000ms cubic-bezier(.165,.84,.44,1) all;
-moz-transition:1000ms cubic-bezier(.165,.84,.44,1) all;
-ms-transition:1000ms cubic-bezier(.165,.84,.44,1) all;
-o-transition:1000ms cubic-bezier(.165,.84,.44,1) all;
transition:1000ms cubic-bezier(.165,.84,.44,1) all;
}
.animate-enter {
left:100%;
}
.animate-leave.animate-leave-active {
left:-100%;
}
.animate-enter.animate-enter-active,.animate-leave {
left:0;
}
</style>
</head>
<body>
<div ng-controller="slideShowController" class="imageslide" ng-switch='slideshow' ng-animate="'animate'">
<div class="slider-content" ng-switch-when="1">
<img src="http://digitalresult.com/wp-content/uploads/2015/10/fox-animal-hd-wallpapers-47.jpeg" width="100%" height="400px"/>
</div>
<div class="slider-content" ng-switch-when="2">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTewdD9dUZGbaCaRtV2Ggz_YxQq1tbhVcSphtRUjosU8a0_JOZF" width="100%" height="400px"/>
</div>
<div class="slider-content" ng-switch-when="3">
<img src="https://s-media-cache-ak0.pinimg.com/736x/4e/ac/4e/4eac4e00cebdea7f62359bfd1b2ca51b.jpg" width="100%" height="400px"/>
</div>
<div class="slider-content" ng-switch-when="4">
<img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcTrBU0M7EwiGepnnccRoe7jA5_fQ-AaOiu6WpehFqz85HhYhKHk" width="100%" height="400px"/>
</div>
</div>
</body>
</html>
i created an shopping cart using using angularJS drag and drop. when i drag the item from catalog to cart and drop it, it goes successfully in the cart,
the problem is when i drag and drop same item in the cart, it again accept the product and add it in the cart.
how to remove this cloning?
to access the complete code please download it from here click to download the .rar file
or here is the code of main index file
the bold code below is attachment of CSS and script you can download the same version from the .rar file above or by googling the script name.
`
<meta charset="utf-8" />
<title>Drag & Drop</title>
**<script src="js/jquery.min.js"></script>**
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js">
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.0.7/angular.min.js">
**<script src="angular_drag_drop/angular-dragdrop.js"></script>
<link href="assets/css/jquery-ui.css" rel="stylesheet">**
<style>
.thumbnail { height: 280px !important; }
.btn-droppable { width: 180px; height: 30px; padding-left: 4px; }
.btn-draggable { width: 160px; }
.emage { height: 215px; }
h1 { padding: .2em; margin: 0; }
#products { float:left; width: 500px; margin-right: 2em; }
#cart { width: 200px; float: left; margin-top: 1em; }
#cart ol { margin: 0; padding: 1em 0 1em 3em; }
</style>
<script>
$(function() {
$("#catalog").accordion();
});
var App = angular.module('drag-and-drop', ['ngDragDrop']);
App.controller('oneCtrl', function($scope, $timeout) {
$scope.list1 = [{'title': 'Lolcat Shirt'},{'title': 'Cheezeburger Shirt'},{'title': 'Buckit Shirt'}];
$scope.list4 = [];
$scope.hideMe = function() {
$scope.list1 = [{'title': 'Lolcat Shirt'},{'title': 'Cheezeburger Shirt'},{'title': 'Buckit Shirt'}];
return $scope.list4.length > 0;
}
});
</script>
<body ng-controller="oneCtrl">
<div id="products">
<h1 class="ui-widget-header">Products</h1>
<div id="catalog">
<h2>T-Shirts</h2>
<div data-drop="true" ng-model='list1' jqyoui-droppable="{multiple:true}">
<ul>
<li ng-repeat='item in list1' ng-show="item.title" data-drag="true" data-jqyoui-options="{revert: 'invalid', helper: 'clone'}" ng-model="list1" jqyoui-draggable="{index: {{$index}}, animate: true, placeholder: 'keep'}">{{item.title}} {{list1.length}}
</li>
</ul>
</div>
</div>
</div>
<div id="cart">
<h1 class="ui-widget-header">Shopping Cart</h1>
<div class="ui-widget-content">
<ol data-drop="true" ng-model='list4' jqyoui-droppable="{multiple:true}">
<li ng-repeat="item in list4" ng-show="item.title" data-drag="true" data-jqyoui-options="{revert: 'invalid', helper: 'clone'}" ng-model="list4" jqyoui-draggable="{index: {{$index}},animate:true}">
{{item.title}}
</li>
<li class="placeholder" ng-hide="hideMe()">
Add your items here
</li>
</ol>
</div>
</div>
</body>
</html>`
If your shopping cart is the only use-case for drag and drop, then you could tackle this by disabling dragging once the object is in the cart. You can do this by binding the draggable class to an expression which checks whether the object is in the cart.
<div ng-class="{draggable: cart.indexOf(object) != -1}"></div>
Here is a basic fiddle to show you what I mean - note, this doesn't include any dragging or dropping, but is just to highlight the class binding, and get you started.
Fiddle