Angular animation

when adding element to baskt

bower.json

@@ -6,6 +6,7 @@
  "angular-mocks": "latest",
  "angular-resource": "latest",
  "angular-route": "latest",
+ "angular-animate": "1.3",
  "angular-sanitize": "latest",
  "angular-ui-router": "latest",
  "angular-ui-select": "*",

gulpfile.js

@@ -27,6 +27,7 @@ var vendorJsFiles = [
  'static/bower_components/angular-route/angular-route.min.js',
  'static/bower_components/angular-sanitize/angular-sanitize.min.js',
  'static/bower_components/angular-cookies/angular-cookies.min.js',
+ 'static/bower_components/angular-animate/angular-animate.min.js',
  'static/bower_components/angular-ui-router/release/angular-ui-router.min.js',
  'static/bower_components/angular-ui-select/dist/select.js',
  'static/bower_components/underscore/underscore-min.js',

search/static/search/style.css

@@ -27,4 +27,67 @@
 
 .mouse-pointer {
  cursor: pointer;
+}
+
+/* Angular animation for ng-repeat */
+
+/*
+ We're using CSS transitions for when
+ the enter and move events are triggered
+ for the element that has the .repeated-item
+ class
+*/
+.repeated-item.ng-enter, .repeated-item.ng-move {
+ -webkit-transition:0.5s linear all;
+ -moz-transition:0.5s linear all;
+ -o-transition:0.5s linear all;
+ transition:0.5s linear all;
+ opacity:0;
+}
+
+/*
+ The ng-enter-active and ng-move-active
+ are where the transition destination properties
+ are set so that the animation knows what to
+ animate.
+*/
+.repeated-item.ng-enter.ng-enter-active,
+.repeated-item.ng-move.ng-move-active {
+ opacity:1;
+}
+
+/*
+ We're using CSS keyframe animations for when
+ the leave event is triggered for the element
+ that has the .repeated-item class
+*/
+.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;
+}
+
+@keyframes my_animation {
+ from { opacity:1; }
+ to { opacity:0; }
+}
+
+/*
+ Unfortunately each browser vendor requires
+ its own definition of keyframe animation code...
+*/
+@-webkit-keyframes my_animation {
+ from { opacity:1; }
+ to { opacity:0; }
+}
+
+@-moz-keyframes my_animation {
+ from { opacity:1; }
+ to { opacity:0; }
+}
+
+@-o-keyframes my_animation {
+ from { opacity:1; }
+ to { opacity:0; }
 }

static/js/app/app.js

@@ -8,6 +8,7 @@ angular.module('abelujo', [
  'ngCookies',
  'ngResource',
  'ngSanitize',
+ 'ngAnimate',
  'ui.router',
  'ui.select',
  'ui.bootstrap',

static/js/app/controllers/basketsController.ls

@@ -16,7 +16,7 @@
 
 angular.module "abelujo" .controller 'basketsController', ['$http', '$scope', '$timeout', '$filter', '$window', '$uibModal', '$log', 'utils', ($http, $scope, $timeout, $filter, $window, $uibModal, $log, utils) !->
 
- {Obj, join, reject, sum, map, filter, find, lines} = require 'prelude-ls'
+ {Obj, join, reject, sum, map, filter, find, lines, sort-by, find-index} = require 'prelude-ls'
 
  $scope.baskets = []
  $scope.copies = []
@@ -47,6 +47,7 @@ angular.module "abelujo" .controller 'basketsController', ['$http', '$scope', '$
  .then (response) !->
  $scope.baskets[item].copies = response.data.data
  $scope.copies = response.data
+ |> sort-by (.title)
 
  else
  $scope.copies = $scope.cur_basket.copies
@@ -83,24 +84,33 @@ angular.module "abelujo" .controller 'basketsController', ['$http', '$scope', '$
  tmpcard = $scope.cards_fetched
  |> find (.repr == card_repr.repr)
  tmpcard = tmpcard.item
- $scope.copies.push tmpcard
+ # $scope.copies.push tmpcard
+ # Insert at the right sorted place
+ index = 0
+ index = find-index ( -> tmpcard.title < it.title), $scope.copies
+ if not index
+ index = $scope.copies.length
+ $scope.copies.splice index, 0, tmpcard
  $scope.copy_selected = undefined
  # TODO: save
  $scope.save_card_to_basket tmpcard.id, $scope.cur_basket.id
 
  $scope.save_card_to_basket = (card_id, basket_id) !->
+ # XXX seems redundant with save_quantity below
  coma_sep = "#{card_id}"
  params = do
  card_ids: coma_sep
  $http.post "/api/baskets/#{basket_id}/add/", params
  .then (response) !->
- $scope.alerts = response.data.msgs
+ null
+ # $scope.alerts = response.data.msgs # the confirmation alert should be less intrusive
  , (response) !->
  ... # error
 
  $scope.save_quantity = (index) !->
  """Save the item quantity.
  """
+ # XXX see save_card_to_basket above
  card = $scope.copies[index]
  utils.save_quantity card, $scope.cur_basket.id
 

templates/search/baskets.jade

@@ -100,7 +100,11 @@ div(ng-cloak, ng-controller="basketsController")
  th {% trans "Price" %}
  th
  tbody
- tr(ng-repeat="it in copies", ng-mouseenter="show_buttons[$index] = true", ng-mouseleave="show_buttons[$index] = false")
+ tr.repeated-item(
+ ng-repeat="it in copies"
+ ng-mouseenter="show_buttons[$index] = true"
+ ng-mouseleave="show_buttons[$index] = false")
+
  td: a(href="{{ 'it.get_absolute_url' | ng}}") {{ 'it.title' | ng }}
  td {{ 'it.quantity' | ng}}
  td {{ 'it.price' | ng }} €