I have 2 sortable lists and I'm trying to connect them so that I can drag items from one list to the other. When I drag an item I get an error in sortable.js. callbacks.update is referencing ui.item.sortable._connectedSortables but it is undefined so when it gets to the getElementScope function, it throws the error.
UPDATE
I little more background as to how I got here. Initially, I had this working. I setup a draggable list and connected it to the sortable list and all was working fine. The issue I had then was when dragging within the sortable list, the model wasn't getting updated. Once I added the ui-sortable tag the model started getting updated when reordering the list, but after that change is when the previous mentioned error started happening. The differences between the 2 pieces of code are in the first example I am setting up the sortable like this:
$('#testQuestionsTEI').sortable({//code});
and there was no ui-sortable attribute in the markup. Now I have ui-sortable="sortable" in the markup and have $scope.sortable = {//code}.
The first list I have is the accepting list.
<div id ="testQuestionsTEI" class="connectedSortable" ui-sortable="sortable" ng-model="test.questions" style="overflow-x:auto; overflow-y: scroll">
<div class="TestQuestion" ng-repeat="currQuestionObj in test.questions" style="border:1px solid;padding:7px 7px 7px 7px;margin-top:3px;margin-bottom:3px">
<!--do some stuff-->
</div>
</div>
The js to setup the sortable is here...
$scope.sortable = {
placeholder: 'questionPlaceholderTEI',
connectWith: '.connectedSortable',
start: function (event, ui) {
ui.item.startPos = ui.item.index(); //add startPos to item to use in stop event
},
stop: function (event, ui) {
//Do stuff
}
},
update: function (event, ui) {
//Do stuff
}
};
The 2nd list is built after an ajax call and the html for it is...
<div id="SearchResultItems" ui-sortable="sortable" class="col-md-12 connectedSortable" style="border:1px solid;padding:0 5px 0 5px;" ng-cloak>
<div class="SearchResultItem" index="{{currQuestionObj.id}}" QuestionID="{{currQuestionObj.questionId}}" ngc-done="'setupDraggableItems'" ng-repeat="currQuestionObj in ItemSearchResult.questions" style="border:1px solid;padding:7px 7px 7px 7px;margin-top:3px;margin-bottom:3px" >
<!--more stuff-->
</div>
After the data is returned I setup the draggable and sortable
function setupDraggableItems() {
$('div.SearchResultItem').draggable({
revert: 'clone',
scroll: false,
helper: 'clone',
cursor: 'move',
appendTo: 'body',
connectToSortable: '#testQuestionsTEI',
});
$('#SearchResultItems').sortable({
placeholder: 'questionPlaceholderTEI',
connectWith: '.connectedSortable'
});
}
I have also tried without the .draggable and I get a different error. In callbacks.update there is a reference to ui.item.sortable.isCanceled() and the error is "Object doesn't support property or method 'isCanceled'
I found that the problem was that when creating the sortables the 2 different ways I was doing them were actually different implementations. One was using Jquery-ui directly and the other was angular's ui-sortable. So I went back to using $('#testQuestionsTEI').sortable which users Jquery-ui. The other issue where the model wasn't getting updated was fixed by calling $scope.$apply().
Related
I am dropping an external object into angular-ui-calendar using angular-dragdrop.
The external object is coming from this list:
<div class="fc-event" data-drag="true"
jqyoui-draggable="{animate:true}"
ng-model="test_object"
ng-repeat="test_object in test_objects">
Draggable - {{ test_object.name }}
</div>
The fullcalendar is set up with:
<div id="ApptsCalendar" calendar="ApptsCalendar"
ui-calendar="calendarOptions.calendar"
ng-model="eventSources" data-drop="true"
jqyoui-droppable="{multiple:true, onDrop: 'drop_function'}"
data-jqyoui-options>
</div>
When dropped, I can process that event using fullcalendar 'drop' method with:
$scope.calendarOptions = {
calendar: {
editable: true,
droppable: true,
drop: function(date,jsEvent,ui,resourceId){
console.log("Dropped from calendarOptions")
console.log(resourceId);
$scope.eventSources[0].push({
id:5,
title: 'dropped event (fake)',
start: date
});
}
}
};
or from the angular-dragdrop 'onDrop' callback to call a 'drop' function:
jqyoui-droppable="{multiple:true, onDrop: 'drop'}"
Both can trigger when I want, but neither seem to have the two pieces I need. I need to have the object value being dropped (defined in ng-model) and the date being dropped into.
Basically, I want to push the event to the the eventSources with:
$scope.eventSources[0].push({
id:5,
title: '...name of object...',
start: '...date of target dropped on...'
});
http://plnkr.co/edit/fj858Htb2FRUg5h1pucP?p=preview
Well, one of the things you wanted is already there. It's date on which the event is dropped. You get it from the first argument of the drop function. It's a moment object (according to the docs) so you might want to use .toDate() in order to get the JS Date object.
The other thing is the value of the event which got dropped. According to the same docs page, the DOM object of the event is accessible using this inside drop function.
Now, this is a bit unconventional way (I don't see many choices here), what you can do is, with the ng-repeat iterating over event objects, you can keep an attribute with value from each object which can later be accessed inside the drop function. For example, see how I added customEventName="{{test_object.name}}" in here:
<div class="fc-event tech_draggable" data-drag="true" id="{{test_object.name}}"
customEventName="{{test_object.name}}" jqyoui-draggable="{animate:true}"
ng-model="test_object" ng-repeat="test_object in test_objects" ...>
Draggable - {{ test_object.name }}
</div>
Then, in the drop function, that can be accessed using this.getAttribute('customEventName') like this:
$scope.calendarOptions = {
calendar: {
editable: true,
droppable: true,
drop: function(momentDate, jsEvent, ui, resourceId) {
console.log(momentDate.toDate()) // gives JS Date object
console.log(this.getAttribute('customEventName')); // gives event2/event3 etc.
//... more
}
}
};
An alternative is to make an attribute with a string representing the scope variable name:
<div ng-repeat="test_object in test_objects">
<div class="fc-event tech_draggable"
data-drag="true"
jqyoui-draggable="{animate:true}"
ng-repeat="test_object in test_objects"
style="margin-bottom:1px;"
data-jqyoui-options="{helper: 'clone'}"
scope-data-name="test_objects[{{$index}}]"
>
Draggable - {{ test_object.name }}
</div>
</div>
And using $scope.$eval to get the actual object:
$scope.calendarOptions = {
calendar: {
editable: true,
droppable: true,
drop: function(date,jsEvent,ui,resourceId){
var scopeDataName = this.getAttribute('scope-data-name');
var data = $scope.$eval(scopeDataName);
$scope.eventSources[1].push({
id: $scope.eventSources[0].length,
title: `${data.name} ${data.description}`,
start: date
});
}
}
};
The DEMO on PLNKR
After some more research, I think fullcalendar has the solution already.
I can use data-event attribute in the element:
data-event='{"title":"{{ test_object.name }}"}'
With that, there is no need to even have a 'drop' function... fullcalendar natively supports drag and drop.
I can then optionally use eventReceive to handle a drop from an external resource and use eventDrop to handle an internal event move.
http://plnkr.co/edit/fj858Htb2FRUg5h1pucP?p=preview
I have an md-card with this code:
<md-card ng-style="{ width: pageWidth > 900 ? '40vw' : '80vw' }">...</md-card>
pageWidth is a $scope variable bound to $(window).width(). Here is the code for that:
$scope.pageWidth = $(window).width();
$(window).resize(() => {
$scope.pageWidth = $(window).width();
console.log('page width: ' + $scope.pageWidth);
})
$(document).ready(() => {
$(window).resize(() => {
$scope.pageWidth = $(window).width();
console.log('page width: ' + $scope.pageWidth);
})
})
The style is applied correctly when the page loads, but not when I manually resize the page. As you can see in the second code block, I added a console.log statement to the handlers, so I know that $scope.pageWidth is updating with every pixel of width I change. However, the width of the md-card never changes from one to the other. What's going on here?
And before you mark this as a duplicate, people have asked this before, but not in a way where their answers apply to my situation.
Sorry, I'm not posting an answer for this other then that you have a typo in first line should be:
<md-card ng-style="{ width: pageWidth > 900 ? '40vw' : '80vw' }">...</md-card>
But from what I can see what you are doing can be done much more efficiently using normal CSS - no need to put javascript logic for that. Also I would advise using AngularJS $window (you will need to inject it) instead of global window object and I'm against using Jquery in Angular applications and Jquery DOM manipulations unless it's really really (and I will say again really) necessary.
Check this link about media queries:
https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
You will see that you can easily check max-width and max-height, also min-width/height and tons of different things that might solve your problems with pure CSS and no need for Javascript/Jquery mixed with AngularJS.
Your CSS would be something like:
#media screen and (max-width: 900px) {
md-card {
width: 80vw;
}
}
#media screen and (min-width: 901px) {
md-card {
width: 40vw;
}
}
Of course this would be globally on all md-card elements if you need it more specific add classes on each element and change media queries.
Inside a Kendo Tree List for Angular Js I have added a Graph as a kendo template.
<script id="progressStatus" type="text/x-kendo-template">
<div ng-if="'#:Status#' == 'Loading'">
<div kendo-progress-bar="progressBar1" k-min="0" k-max="100" k-value="#:Percentage#" style="width: 100%;"></div>
</div>
</script>
And I bind it to the tree list as part of column declaration
{ field: "Status", template: $("#progressStatus").html(), width: "170px" }
So far good. And I am able to display the value in UI.
However I am not sure how to show following
How to make it of type percent, i tried with k-type='percent' but no luck
If Percentage > 50 show the graph in yellow and text (50%) in red
Unfortunately, some options seems not to work with angular directives. I could not get to work k-type (like you). In my dojo that attribute seems to break the widget. After checking this page, I could use type the following way:
<div kendo-progress-bar="progressBar1" k-options="progressBarOptions" style="width: 100%;"></div>
.controller("MyController", function($scope) {
$scope.dataSource = [
'foo', 'bar', 'baz'
];
$scope.progressBarOptions = {
min: 0,
max: 100,
value: 50,
type: "percent"
};
});
Demo. That will make percent type work.
Now, changing the color of the widget based on the value is another problem. The ProgressBar don't have any kind templates and it is poor in events(only complete and change). It seems that your bar doesn't changes it's value, it's is static, right? So I tried to realize a way to call change event with animation which should call change after being complete. It would be like an initialization event. But, animation doesn't seems to work either. I tried with k-animation and in the init options, but no luck. Double checked for typos but I'm sure that wasn't the case. It's a shame.
Anyway, you can use the ugly and non-straightforward way using a function which you should call in your grid's dataBound event:
var changeBarColor = function()
{
$('[data-role="progressbar"]').each(function() {
$(this).find(".k-state-selected").addClass(
$(this).data("kendoProgressBar").value() < 50
? "yellow-bar"
: "red-bar"
);
});
};
Demo. Again: It's a shame the widget lacks of such a simple and useful feature like that.
I hope I'm wrong but that is the far I could get on this. Good luck.
I'm working to develop a mobile app using Ionic.
A bit of background first as to what I am trying to achieve.
I've got a challenging bit of design I am coding in. I am placing an image of fixed height, in the bottom right hand corner of a div which has a flexible height. The text within the div then needs to wrap around the image.
Like this:
What the end result should be like
The HTML and CSS side of things
I've got the CSS and HTML sussed (at least I think!). The HTML is:
//this line is in the head
<style ng-bind-html="myStyles"></style>
//the rest is in the body of the HTML
<div class="score_block">
<div class="description">
<div class="image_container">
<img src="img/emotional_man.png">
</div>
<p>{{area.levelling.description}}</p>
<div class="habits_button">
<button ng-click="$state.go('app.planner')" class="button button-stable button-icon button-block">Plan habits</button>
</div>
</div>
</div>
And the CSS (written using SASS) is like this:
.score_block {
text-align: center;
position: relative;
.description {
text-align: left;
margin: 10px 0;
}
.image_container {
clear: both;
float: right;
width: 100px;
height: 100px;
img {
height: 100px;
width: 100px;
}
}
}
.score_block:before {
content: "";
float: right;
height: 200px;
width: 0;
}
If I change the height of the 'score_block:before' class I can reposition the image just I need.
The Javascript so far
So with the Javascript side of things I'm hoping that if I can figure out the height of the .description div, I can subtract the height of the image from it and tell the CSS how to position the image. I need some AngularJS to do this - I think that's what I need as JQuery doesn't work in Ionic as far as I know.
So far I have JS code that does this:
.controller('emotionalCtrl', function ($scope, $state, AreasService, _) {
//these commented out lines are to show things I have tried but don't work
//var blockH = $(".description").height();
//var descriptionHeight = angular.element('description');
//var number = descriptionHeight('offsetHeight');
var number = 0;
$scope.myStyles = "#habit_area_homepage .score_block:before { height:" + number + "px; }";
})
I'm looking to do a calculation on the variable number and pass that back in. I can manually change the value of number of it works fine so I know everything else is good. I've read some stuff about doing directives etc but all the examples I've seen confuse me. Maybe I need to put a directive in here or something to help me get the height of the .description element but I just can't figure out to do this. I've spent nearly two days getting this far!
I'm pretty new to AngularJS and Ionic so any help would be really appreciated. Thanks!
There are multiple ways to accomplish dynamic styles.
According to your provided code. I recommend you add styles to head.
Run below codes in your controller or "run":
angular.module("app",[]).run(function(){
var stylesTpl="<style>#habit_area_homepage .score_block:before { height:" + number + "px; } </style>";
angular.element(document).find("head").append(stylesTpl);
})
Check this post for built-in directives of angular to achieve dynamic styles:
How do I conditionally apply CSS styles in AngularJS?
If you want to get the height of a specific div, you have two ways:
Assign an id to the div, and use
var element = document.getElementById("id");
console.log(element.offsetHeight);
Use querySelectors, this returns the first and only one element:
var element = document.querySelector(".description");
console.log(element.offsetHeight);
Using directive is also a good way, check:
Get HTML Element Height without JQuery in AngularJS
I have a dynamic list of items using ng-repeat. When something happens an item may disappear. I have handled smoothly animating the removal of these items using ng-animate, but after they are gone, the remaining items simply snap to their new position. How can I animate this movement smoothly?
I've tried applying an "all" transition to the repeated class and using ng-move with no success.
You can achieve this by animating the max-height property. Check out this sample:
http://jsfiddle.net/k4sR3/8/
You will need to pick a sufficiently high value for max-height (in my sample, I used 90px). When an item is initially being added, you want it to start off with 0 height (I'm also animating left to have the item slide in from the left, as well as opacity, but you can remove these if they don't jibe with what you're doing):
.repeated-item.ng-enter {
-webkit-transition:0.5s linear all;
-moz-transition:0.5s linear all;
-o-transition:0.5s linear all;
transition:0.5s linear all;
max-height: 0;
opacity: 0;
left: -50px;
}
Then, you set the final values for these properties in the ng-enter-active rule:
.repeated-item.ng-enter.ng-enter-active {
max-height: 90px;
opacity: 1;
left: 0;
}
Item removal is a bit trickier, as you will need to use keyframe-based animations. Again, you want to animate max-height, but this time you want to start off at 90px and decrease it down to 0. As the animation runs, the item will shrink, and all the following items will slide up smoothly.
First, define the animation that you will be using:
#keyframes my_animation {
from {
max-height: 90px;
opacity: 1;
left: 0;
}
to {
max-height: 0;
opacity: 0;
left: -50px;
}
}
(For brevity, I'm omitting the vendor-specific definitions here, #-webkit-keyframes, #-moz-keyframes, etc - check out the jsfiddle above for the full sample.)
Then, declare that you will be using this animation for ng-leave as follows:
.repeated-item.ng-leave {
-webkit-animation:0.5s my_animation;
-moz-animation:0.5s my_animation;
-o-animation:0.5s my_animation;
animation:0.5s my_animation;
}
Basics
In case anyone is struggling with figuring out how to get AngularJS animations to work at all, here's an abbreviated guide.
First, to enable animation support, you will need to include an additional file, angular-animate.js, after you load up angular.js. E.g.:
<script type="text/javascript" src="angular-1.2/angular.js"></script>
<script type="text/javascript" src="angular-1.2/angular-animate.js"></script>
Next, you will need to load ngAnimate by adding it to the list of your module's dependencies (in the 2nd parameter):
var myApp = angular.module('myApp', ['ngAnimate']);
Then, assign a class to your ng-repeat item. You will be using this class name to assign the animations. In my sample, I used repeated-item as the name:
<li ng-repeat="item in items" class="repeated-item">
Then, you define your animations in the CSS using the repeated-item class, as well as the special classes ng-enter, ng-leave, and ng-move that Angular adds to the item when it is being added, removed, or moved around.
The official documentation for AngularJS animations is here:
http://docs.angularjs.org/guide/animations
TLDR: Jank is bad, do animations with transform. Check out this fiddle for css and demo.
Explanation
Note that animating height, max-height, top, ... is really bad performance wise because they cause reflows and thus jank (more information on html5rocks|high-performance-animations).
There is however a method getting this type of animation using only transforms by utilizing the sibling selector.
When elements are added there is one reflow because of the new item, all items below are transformed up so they stay at the same position and then the transformation is removed for a smooth slide-in.
In reverse when elements are removed they are transformed to the new position for a smooth slide-out and when the element is finally removed there is again one reflow and the transform is removed instantly so they stay at their position (this is also why it is important to only have transition set on ng-animate).
Alternatively to the example you could also do a transform: scaleY(0) on the deleted item and only transform: translateY() the siblings.
Caveat
Note that this snippet has trouble when multiple elements are removed in quick succession (before the previous animation has completed).
This can be fixed by having an animation time faster than the time a user takes to delete another item or by doing some more work on the animation (out of scope of this answer).
Finally some code
Note: apparently SO breaks the demo with multiple deletes - check out the fiddle to see it in work.
angular.module('app', ['ngAnimate'])
.controller('testCtrl', ['$scope', function($scope) {
var self = this;
self.items = [];
var i = 65;
for(; i < 72; i++)
{
self.items.push({ value: String.fromCharCode(i) });
}
self.addItem = function()
{
self.items.push({ value: String.fromCharCode(i) });
i++;
}
self.removeItemAt = function(index)
{
self.items.splice(index, 1);
}
}])
li
{
height: 48px;
width: 300px;
border: 1px solid lightgrey;
background-color: white;
position: relative;
list-style: none;
}
li.ng-enter,
li.ng-enter ~ li {
transform: translateY(-100%);
}
li.ng-enter.ng-enter-active,
li.ng-enter.ng-enter-active ~ li {
transform: translateY(0);
}
li.ng-animate {
z-index: -1;
}
li.ng-animate,
li.ng-animate ~ li {
transition: transform 0.6s;
}
li.ng-leave,
li.ng-leave ~ li {
transform: translateY(0);
}
li.ng-leave.ng-leave-active,
li.ng-leave.ng-leave-active ~ li {
transform: translateY(-100%);
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.23/angular-animate.js"></script>
<div ng-app="app" ng-controller="testCtrl as ctrl">
<ul>
<li ng-repeat="item in ctrl.items" ng-bind="item.value">
</li>
</ul>
<button ng-click="ctrl.addItem()">
Add
</button>
<button ng-click="ctrl.removeItemAt(5)">
Remove at 5
</button>
</div>