1
Modelde 'orderNumber' özelliği olan bir avatar koleksiyonum var. 'OrderNumber' alanına göre sıralamak için avatar koleksiyonuma ihtiyacım var. Her bir nesnenin orderNumber'i vardır ve örneğin robomongo'daki orderNumber of object öğesini değiştirirseniz, 'orderNumber' numarası nedeniyle nesneler değişir.Nesneleri belirliliğe göre sırala AngularJS
var mongoose = require('mongoose');
var Schema = mongoose.Schema;
var CollectionSchema = new Schema({
name: {
type: String,
required: 'Name is required!'
},
description: {
type: String
},
orderNumber:{
type: Number
},
defaultAvatar: [{
type: Schema.Types.ObjectId,
ref: 'Part'
}],
designer_id: {
type: Schema.Types.ObjectId,
ref: 'Designer'
},
pipeline: [{
name: {
type: String,
required: 'Pipeline step name is required!'
},
zoom: Boolean,
templates: [{
name: {
type: String,
required: 'Template name is required!'
},
parts: [{
type: Schema.Types.ObjectId,
ref: 'Part'
}]
}]
}]
});
module.exports = mongoose.model('Collection', CollectionSchema);>
İşte benim denetleyicisi
(function() {
'use strict';
angular
.module('mainApp')
.controller('simpleACController', simpleACController);
function simpleACController($scope, $location, $compile, $localStorage, CanvasRendererFactory, WrapUnwrapFactory,
PremadeAvatarManager, PartsFactory, AvatarConstructorFactory, UserAvatarsFactory,
JqueryRenderFactory, UserFactory) {
var vm = this; // ViewModel, you are free of controller's name in html
var canvas = new fabric.StaticCanvas('');
vm.showPreviousButton = false;
vm.showNextButton = true;
var savedAvatarMiniatures = [];
var savedPipelineNumber;
// var canvas = new fabric.StaticCanvas('simpleAvatarCanvas');
var pipelineNumber; // -1
var previousPipeline;
var selectedType;
var selectedIndex = 0;
var previousIndex = 0;
var miniatureCarousel;
var avatarCarousel;
var transitionInProgress = false;
vm.avatars = [];
var initialAvatars = [];
var pipelineNames = {};
var pipelineZooms;
vm.select = function (index) {
savedAvatarMiniatures = vm.avatars;
selectedIndex = index;
if (pipelineNumber == -1) {
selectedType = index;
}
var wasSelected = vm.avatars[index].selected;
for (var i = 0; i < vm.avatars.length; i++) {
vm.avatars[i].selected = false;
}
vm.avatars[index].selected = !wasSelected;
if (pipelineNumber == -1) {
vm.avatarName = vm.avatars[index].name;
}
vm.showPreviousButton = (index != 0);
vm.showNextButton = (index != (vm.avatars.length - 1));
};
vm.selectNext = function() {
previousIndex = selectedIndex;
if (selectedIndex < vm.avatars.length - 1) {
changeMiniatureCarousel(++selectedIndex);
}
};
vm.selectPrevious = function() {
previousIndex = selectedIndex;
if (selectedIndex > 0) {
changeMiniatureCarousel(--selectedIndex);
}
};
vm.onMiniatureClick = function (index) {
if (!transitionInProgress) {
vm.select(index);
}
};
vm.prevPipeLine = function() {
var avatar = getSelectedAvatar();
if (avatar != null) {
if (pipelineNumber < getPipelineCount(avatar)) {
previousPipeline = pipelineNumber;
pipelineNumber--;
updatePipeline();
} else {
pipelineNumber--;
}
vm.switchCarousel(true);
}
updateText();
};
vm.nextPipeLine = function() {
if (getSelectedAvatar() != null) {
previousPipeline = pipelineNumber;
pipelineNumber++;
updatePipeline();
}
updateText();
};
vm.showCarousel = true;
vm.switchCarousel = function (flag) {
vm.showCarousel = flag;
};
vm.saveAvatar = function() {
if (!UserFactory.IsLoggedIn()) {
$localStorage.anonymousAvatar = getSelectedAvatar();
UserFactory.showLoginModal(function() {
save();
}, function (err) {
console.log('saveAvatar Error');
console.log(err);
});
} else {
save();
}
function save() {
var avatar = getSelectedAvatar();
var partIds = WrapUnwrapFactory.unwrapPartIds(avatar);
UserAvatarsFactory.saveAvatar(avatar.orderNumber, vm.avatarName, partIds, function() {
$location.path('/avatarmanager');
$scope.$apply();
});
}
};
vm.toFullAC = function() {
if (!UserFactory.IsLoggedIn()) {
UserFactory.showLoginModal(function() {
toFullAC(getSelectedAvatar());
}, function (err) {
console.log('toFullAC Error');
console.log(err);
});
} else {
toFullAC(getSelectedAvatar());
}
};
function changeMiniatureCarousel(index) {
refresh(index);
miniatureCarousel.trigger('to.owl.carousel', [index]);
}
function selectMiniatureCarousel() {
var index = (pipelineNumber == -1 && selectedType != undefined) ? selectedType : 0;
changeMiniatureCarousel(index)
}
function getSelectedAvatar() {
var avatar = null;
if (vm.avatars.length > 0) {
for (var i = 0; i < vm.avatars.length; i++) {
if (vm.avatars[i].selected == true) {
avatar = vm.avatars[i];
}
}
}
return avatar;
}
function updatePipeline() {
var avatar = getSelectedAvatar();
if (avatar) {
if (pipelineNumber < getPipelineCount(avatar)) {
updateMiniatures(avatar).then(function() {
return true;
});
} else {
if (!UserFactory.IsLoggedIn()) {
updateViewModel();
vm.switchCarousel(false);
} else {
toFullAC(avatar);
}
}
}
return false;
}
function updateText() {
var avatar = getSelectedAvatar();
if (pipelineNames.length != 0) {
var names = ['type'];
for (var i = 1; i < pipelineNames[avatar.orderNumber].length; i++) {
names.push(pipelineNames[avatar.orderNumber][i]);
}
if (pipelineNumber > -2) {
vm.heading = 'Select avatar ' + names[pipelineNumber + 1];
}
if (pipelineNumber >= getPipelineCount(avatar)) {
vm.heading = "Your avatar is ready! Save?"
}
}
}
function getPipelineCount(avatar) {
return PremadeAvatarManager.getPipelineCount(avatar);
}
function updateCarousels() {
renderAvatars();
renderMiniatures();
bindCarousels();
}
function renderMiniatures() {
var slideCount = 6;
slideCount = (vm.avatars.length < slideCount) ? vm.avatars.length : slideCount;
var settings = {
array: vm.avatars,
imageProperty: 'premade',
type: 'canvas',
width: 150,
height: 100,
vmArray: 'simpleAC.avatars',
oldCarousel: '#simpleACcarousel',
carouselRoot: '#miniatures-carousel-root',
containerClass: "as-slider",
containerID: "simpleACcarousel",
divClick: ' ng-click="simpleAC.onMiniatureClick',
slideCount: slideCount,
centerMode: false,
needsText: true,
selectable: true
};
var divNroot = JqueryRenderFactory.render(settings, $scope, $compile);
miniatureCarousel = divNroot.div;
//divNroot.root.append(miniatureCarousel);
$compile(divNroot.root)($scope);
CanvasRendererFactory.renderAvatarsToCanvasesInCarousel(vm.avatars, miniatureCarousel);
miniatureCarousel.owlCarousel({
responsive: {
0: {
items: 5,
},
1439: {
items: 7,
}
},
animateIn: 'fadeIn',
animateOut: 'fadeOut',
center: true,
loop: false,
margin: 10,
mouseDrag: false,
touchDrag: false,
nav: false
});
}
function renderAvatars() {
var slideCount = 3;
slideCount = (vm.avatars.length - 1 < slideCount) ? 1 : slideCount;
var settings = {
array: vm.avatars,
imageProperty: 'premade',
type: 'canvas',
width: 480,
height: 320,
vmArray: 'simpleAC.avatars',
oldCarousel: '#simpleACavatarCarousel',
carouselRoot: '#avatars-carousel-root',
containerClass: "ag-slider",
containerID: "simpleACavatarCarousel",
divClick: ' ',
slideCount: slideCount,
centerMode: true,
needsText: false,
selectable: false
};
var divNroot = JqueryRenderFactory.render(settings, $scope, $compile);
avatarCarousel = divNroot.div;
//divNroot.root.append(avatarCarousel);
$compile(divNroot.root)($scope);
CanvasRendererFactory.renderAvatarsToCanvasesInCarousel(vm.avatars, avatarCarousel);
avatarCarousel.owlCarousel({
animateIn: 'fadeIn',
animateOut: 'fadeOut',
items: 5,
center: true,
loop: false,
margin: 10,
mouseDrag: false,
touchDrag: false,
nav: false
});
var items = $('.owl-item');
items.removeClass('medium');
items.eq(1).addClass('medium');
avatarCarousel.on('translate.owl.carousel', function (e) {
var index = e.item.index;
var items = $('.owl-item');
items.removeClass('medium');
items.eq(index - 1).addClass('medium');
items.eq(index + 1).addClass('medium');
});
}
function renderCanvasesInCarousel(carousel) {
var canvasArray = carousel.find("canvas");
for (var i = 0; i < vm.avatars.length; i++) {
var canvas = new fabric.StaticCanvas(canvasArray[i]);
canvasArray[i].removeAttribute('style');
WrapUnwrapFactory.unwrapAvatar(vm.avatars[i], {x: canvas.width, y: canvas.height},
function (canvas) {
return function (array) {
CanvasRendererFactory.drawAvatar(canvas, array);
}
}(canvas)
);
}
}
function bindCarousels() {
var changing = false;
var changed;
var duration = 300;
avatarCarousel.on('changed.owl.carousel', function (e) {
if (!changing) {
changing = true;
miniatureCarousel.trigger('to.owl.carousel', [e.item.index, 0]);
changing = false;
}
});
miniatureCarousel.on('click', '.owl-item', function() {
if (!transitionInProgress) {
var index = $(this).index();
avatarCarousel.trigger('to.owl.carousel', [index, 0]);
}
});
miniatureCarousel.on('translate.owl.carousel', function (e) {
transitionInProgress = true;
});
miniatureCarousel.on('translated.owl.carousel', function (e) {
transitionInProgress = false;
});
miniatureCarousel.on('changed.owl.carousel', function (e) {
if (!changing) {
changing = true;
avatarCarousel.trigger('to.owl.carousel', [e.item.index, 0]);
refresh(e.item.index);
if (!$scope.$$phase) {
$scope.$apply();
}
changing = false;
}
});
}
function initpipelineNames() {
vm.avatars.forEach(function(avatar) {
var resultArray = [];
PremadeAvatarManager.getPipeline(avatar).forEach(function(pipeline) {
resultArray.push(pipeline.name);
});
pipelineNames[avatar.orderNumber] = resultArray;
});
AvatarConstructorFactory.SimpleACpipelineNames(pipelineNames);
}
function updateViewModel() {
vm.backButtonHidden = (pipelineNumber == -1);
}
function updateMiniatures(avatar) {
return new Promise(function (resolve) {
PremadeAvatarManager.getAvatarArray(avatar, pipelineNumber).then(function (collection) {
vm.avatars = collection;
console.log(avatars);
if (pipelineNumber == -1) {
initialAvatars = collection;
}
// var index = (pipelineNumber == -1 && selectedType != undefined) ? selectedType : 0;
updateViewModel();
updateAvatarConstructorFactory();
updateCarousels();
selectMiniatureCarousel();
switchZoom();
if (!$scope.$$phase) {
$scope.$apply();
}
resolve()
});
});
//return (vm.avatars != undefined);
}
function changeLocationAfterLoaded(avatar) {
AvatarConstructorFactory.SelectedAvatarToFullAC(avatar);
$location.path('/fullac');
if (!$scope.$$phase) {
$scope.$apply();
}
}
function toFullAC(avatar) {
var defaultTypes = PartsFactory.getDefaultPartTypes(avatar.orderNumber);
var avatarTypes = WrapUnwrapFactory.unwrapTypes(avatar);
var filtered = _.filter(defaultTypes, function (type) {
return avatarTypes.indexOf(type) >= 0; // contains
});
var typesStack = PartsFactory.getPartsByTypeArray(avatar.orderNumber, filtered);
AvatarConstructorFactory.TypesStack(typesStack);
changeLocationAfterLoaded(avatar);
}
function refresh(index) {
index = (index == undefined) ? 0 : index;
if (vm.avatars[index].selected) {
vm.select(index);
}
vm.select(index);
}
function updateAvatarConstructorFactory() {
AvatarConstructorFactory.SimpleACavatarMiniatures(vm.avatars);
AvatarConstructorFactory.SimpleACpipelineNumber(pipelineNumber);
}
function switchZoom() {
var items = $('.avatar-gallery .owl-item');
if (pipelineNumber > -1 && pipelineZooms == undefined) {
var avatar = getSelectedAvatar();
var collection = PartsFactory.findCollection(avatar.orderNumber);
pipelineZooms = [];
collection.pipeline.forEach(function (pipeline) {
if (pipeline.zoom) {
pipelineZooms.push(true);
} else {
pipelineZooms.push(false);
}
});
setZoom();
} else if (pipelineNumber > -1) {
setZoom();
}
function setZoom() {
if (pipelineZooms[pipelineNumber + 1]) {
items.addClass('zoom');
} else {
items.removeClass('zoom');
}
}
}
function activate() {
PartsFactory.registerCollectionObserverCallback(internalActivate);
if (PartsFactory.areCollectionsInitialized()) {
internalActivate();
}
function internalActivate() {
if (!AvatarConstructorFactory.isInit()) {
pipelineNumber = -1;
updateMiniatures().then(function() {
initpipelineNames();
updateText();
if (!$scope.$$phase) {
$scope.$apply();
}
vm.selectNext()
})
} else {
updateViewModel();
pipelineNumber = AvatarConstructorFactory.SimpleACpipelineNumber();
vm.avatars = AvatarConstructorFactory.SimpleACavatarMiniatures();
pipelineNames = AvatarConstructorFactory.SimpleACpipelineNames();
updateCarousels();
selectMiniatureCarousel();
switchZoom();
updateText();
refresh();
if (!$scope.$$phase) {
$scope.$apply();
}
vm.selectNext()
}
}
}
activate();
}
})();
ve görünümü
<div ng-controller="simpleACController as simpleAC" class="inner-bg clearfix">
<div class="inner avatar-generator">
<div class="character-bg">
<div class="layer-one"></div>
<div class="layer-two"></div>
</div>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="avatar-gallery">
<div class="controls">
<div class="add-name">
<form action="">
<input type="text"
class="cell"
ng-hide="simpleAC.showCarousel"
ng-model="simpleAC.avatarName">
</form>
</div>
</div>
<div class="ag-controls">
<i class="ag-prev" ng-show="simpleAC.showCarousel && simpleAC.showPreviousButton"
ng-click="simpleAC.selectPrevious()">prev</i>
<i class="ag-next" ng-show="simpleAC.showCarousel && simpleAC.showNextButton"
ng-click="simpleAC.selectNext()">next</i>
</div>
<div id="avatars-carousel-root"></div>
</div>
</div>
</div>
<div class="avatar-details">
<div class="container">
<div class="title">
<span class="back button"
ng-hide="simpleAC.backButtonHidden"
ng-click="simpleAC.prevPipeLine()">back</span>
<h2 ng-bind="simpleAC.heading">Select avatar type</h2>
<span class="next button"
ng-show="simpleAC.showCarousel"
ng-click="simpleAC.nextPipeLine()">next</span>
</div>
<div class="avatar-styles">
<div ng-show="simpleAC.showCarousel">
<div class="as-controls">
<i class="as-prev" ng-show="simpleAC.showPreviousButton"
ng-click="simpleAC.selectPrevious()">prev</i>
<i class="as-next" ng-show="simpleAC.showNextButton" ng-click="simpleAC.selectNext()">next</i>
</div>
<div id="miniatures-carousel-root">
</div>
</div>
<div ng-show="!simpleAC.showCarousel">
<div class="done-controls">
<a class="btn fakelink" ng-click="simpleAC.toFullAC()">Edit details</a>
<a class="btn button-blue fakelink" ng-click="simpleAC.saveAvatar()">Save</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>