Skip to content

yotta / pictogram

Go to a project
Commit 17c926dd by Arturo Montejo Ráez
Options

own pictos image cropping working

parent 53fac9d4
Inline Side-by-side
Showing with 131 additions and 57 deletions
sails/src/assets/app/bower.json
......@@ -14,8 +14,7 @@
"angular-translate": "~2.6.0",
"angular-translate-loader-static-files": "~2.6.1",
"angular-bootstrap": "~0.12.1",
"angular-file-upload": "~1.1.5",
"ng-file-upload": "~3.2.4",
"ng-file-upload": "12.2.x",
"ngImgCrop": "~0.3.2",
"angular-ui-router": "~0.2.13",
"angular-filter": "~0.5.4",
......
sails/src/assets/app/i18n/en-gb.json
......@@ -188,6 +188,7 @@
"msg_change_password": "Please enter a new password for your account:",
"msg_request_change_password": "Enter your email to request for a password change. An e-mail will be sent to access password change form.",
"name": "Name",
"new_img": "New image",
"new_instruction": "New instruction",
"new_method": "New method",
"new_objective": "New objective",
......@@ -271,6 +272,7 @@
"select_a_method": "-- Select a method --",
"select_method": "-- Select a method or create it --",
"select_office": "Select an office from the list",
"select_file": "Select file",
"send": "Send",
"September": "September",
"serial": "Serial number",
......
sails/src/assets/app/i18n/es-es.json
......@@ -188,6 +188,7 @@
"msg_change_password": "Por favor, introduzca la nueva clave para su cuenta:",
"msg_request_change_password": "Introduzca su correo electrónico para solicitar el cambio de clave. Recibirá un correo con la dirección de acceso al formulario de cambio de clave.",
"name": "Nombre",
"new_img": "Nueva imagen",
"new_instruction": "Nueva instrucción",
"new_method": "Nuevo método",
"new_objective": "Nuevo objetivo",
......@@ -273,6 +274,7 @@
"select_a_method": "-- Selecciona un método --",
"select_method": "-- Selecciona un método o créalo --",
"select_office": "Seleccione una oficina/centro de la lista",
"select_file": "Seleccionar imagen",
"send": "Enviar",
"September": "Septiembre",
"serial": "Número de serie",
......
sails/src/assets/scripts/app.js
......@@ -9,7 +9,8 @@ var dashboardApp = angular.module('dashboardApp', [
'dashboardDirectives',
'pascalprecht.translate',
'ui.bootstrap',
'angularFileUpload',
'ngFileUpload',
'ngImgCrop',
'angular.filter',
'timer',
'ngAnimate',
......
sails/src/assets/scripts/modules/student/controllers/addpicto.js
......@@ -11,17 +11,22 @@ dashboardControllers.controller('AddPictoCtrl', function (
config,
$window,
$filter,
$upload,
Upload,
$timeout,
$modal,
$translate,
ngToast,
supervisor,
student) {
$scope.source = 'symbolstx';
$scope.pictos = [];
$scope.symbolstxCats = [];
$scope.breadcrumbs = [];
$scope.loadingCatPictos = false;
$scope.croppedImg = null;
$scope.radioModel = 'Middle';
$scope.breadcrumbs.push({
id: 0,
......@@ -66,6 +71,9 @@ dashboardControllers.controller('AddPictoCtrl', function (
//
$scope.load_own_pictos = function () {
$scope.source = 'ownpictos';
$('#own_group').fadeIn();
$http.get(config.backend + '/sup/' + supervisor.id + '/pictos')
.success(function (data) {
if (data) {
......@@ -116,6 +124,7 @@ dashboardControllers.controller('AddPictoCtrl', function (
//
$scope.open_category_from_bc = function (categoryId) {
$scope.source = 'symbolstx';
// Delete from breadcrumbs
for(var i=($scope.breadcrumbs.length-1); i>=0; i--){
if($scope.breadcrumbs[i].id == categoryId){
......@@ -143,37 +152,38 @@ dashboardControllers.controller('AddPictoCtrl', function (
* @param {Array of Objects} $files Array of pictos to be uploaded the file
* itself (as binary data) will be sent.
*/
$scope.onPictoSelect = function ($files) {
$files.forEach(function (file) {
if (file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/gif') {
$upload.upload({
url: '/picto/upload',
method: 'POST',
fields: { owner: supervisor.id },
file: file
}).success(function (picto) {
$translate('picto_upload_success').then(function (translation) {
ngToast.success(translation);
});
$scope.upload = function (dataUrl, name) {
// Show own pictos
$scope.source = 'newfile';
$scope.progress = 0;
Upload.upload({
url: '/picto/upload',
method: 'POST',
data: {
owner: supervisor.id,
file: Upload.dataUrltoBlob(dataUrl, name)
}
})
.then(
function (res) {
var picto = res.data;
$timeout(function () {
picto.expressions = [];
$scope.pictos.push(picto);
$scope.open_exp(picto);
}).error(function (err) {
if (err.code == "E_EXCEEDS_UPLOAD_LIMIT")
$translate('picto_upload_limit').then(function (translation) {
ngToast.danger(translation);
});
else
$translate('picto_upload_error').then(function (translation) {
ngToast.danger(translation);
});
});
} else {
$translate('invalid_file_type').then(function (translation) {
ngToast.danger(translation);
$scope.open_exp(picto, () => {
$scope.pictos.push(picto);
$scope.load_own_pictos();
});
});
}
});
},
function (res) {
if (res.status < 0)
ngToast.danger($translate.instant('picto_upload_error'));
},
function (evt) {
$scope.progress = parseInt(100.0 * evt.loaded / evt.total);
});
};
//
......@@ -216,7 +226,7 @@ dashboardControllers.controller('AddPictoCtrl', function (
//
// Modal window to open picto expression
//
$scope.open_exp = function (picto) {
$scope.open_exp = function (picto, cb) {
var modalInstance = $modal.open({
animation: true,
templateUrl: 'modules/student/views/pictoexp.html',
......@@ -235,6 +245,7 @@ dashboardControllers.controller('AddPictoCtrl', function (
// Returned data from the modal window
modalInstance.result.then((exp) => {
picto.expressions.push(exp);
if (cb) {cb()};
});
};
});
sails/src/assets/scripts/modules/student/views/addpicto.html
<div>
<div class="modal-header">
<div class="btn-group">
<button class="btn btn-default" ng-model="source" uib-btn-radio="'symbolstx'" ng-click="open_category_from_bc('0')">SymbolStix</button>
<button class="btn btn-default" ng-model="source" uib-btn-radio="'ownpictos'" ng-click="load_own_pictos()" translate>own_pictos</button>
<label class="btn btn-default" ng-model="source" uib-btn-radio="'symbolstx'" ng-click="open_category_from_bc('0')">
<span class="glyphicon glyphicon-th"></span> SymbolStix
</label>
<label class="btn btn-default" ng-model="source" uib-btn-radio="'ownpictos'" ng-click="load_own_pictos()">
<span class="glyphicon glyphicon-picture"></span> {{ 'own_pictos' | translate }}
</label>
</div>
</div>
<div class="modal-body">
<div ng-show="source == 'symbolstx'" class="panel panel-default" id="bread_and_categories">
<div class="panel-heading">
......@@ -23,17 +29,12 @@
</div>
</div>
</div>
<div ng-show="source == 'ownpictos'" id="upload_pictos">
<button style="border:none" class="glyphicon glyphicon-picture" type="file" ng-file-select="onPictoSelect($files)" ng-model="picFile" accept="image/*" popover="{{ 'upload_image' | translate }}" popover-trigger="mouseenter"></button>
<button style="border:none" class="btn btn-md glyphicon glyphicon-camera" disabled="disabled"></button>
<button class="btn btn-md" disabled="disabled">
<span class="glyphicon glyphicon-pencil"></span>
</button>
</div>
<div>
<alert ng-show="alert.show" ng-model="alert" type="{{alert.type}}" close="closeAlert()">{{alert.msg}}</alert>
</div>
<div class="row">
<div class="row" ng-show="source != 'newfile'">
<div id="collections" class="col-md-12 category-collection"
ng-class="{ 'category-collection-loading': loadingCatPictos }"
data-loading="{{ 'loading_pictos' | translate }}">
......@@ -41,6 +42,11 @@
<input type="text" class="form-control" placeholder="{{ 'filter' | translate }}" ng-model="srch_term_picto" id="srch_term_picto">
<span class="input-group-addon glyphicon glyphicon-search" id="basic-addon2" aria-hidden="true"></span>
</div>
<div ng-show="source == 'ownpictos'" class="input-group">
<button class="btn btn-success" ngf-select ng-model="picFile" accept="image/*" ng-click="source = 'newfile'">
<span class="glyphicon glyphicon-folder-open"></span> {{ 'new_img' | translate }}
</label>
</div>
<!-- Galería de pictos -->
<div
class="picto_peq pull-left"
......@@ -66,7 +72,41 @@
<div class="clearfix"></div>
</div>
</div>
</div>
<!-- crop view -->
<div id="crop_area" ng-show="source == 'newfile'">
<div class="row">
<div class="col-md-8">
<div ngf-drop ng-model="picFile" ngf-pattern="image/*" class="cropArea">
<img-crop
image="picFile | ngfDataUrl"
result-image="croppedDataUrl" ng-init="croppedDataUrl=''"
area-type="square"
result-image-size="200"
>
</img-crop>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<img ng-src="{{ croppedDataUrl }}" />
</div>
<div class="form-group">
<button class="btn btn-default" ng-click="upload(croppedDataUrl, picFile.name)" ng-model="picFile" accept="image/*">
<span class="glyphicon glyphicon-upload"></span> {{ 'upload_image' | translate }}
</button>
</div>
<div class="form-group">
<span class="progress" ng-show="progress >= 0">
<div style="width:{{progress}}%" ng-bind="progress + '%'"></div>
</span>
</div>
</div>
</div>
</div>
</div> <!-- /modal-body -->
<div class="modal-footer">
<button class="btn btn-primary" ng-click="cancel()">{{ 'close' | translate }}</button>
</div>
......
sails/src/assets/styles/main.css
......@@ -916,13 +916,6 @@ input[type=range]:focus::-ms-fill-upper {
margin-top: 10px;
}
.cropArea {
background: #E4E4E4;
overflow: hidden;
width:300px;
height:240px;
}
/* Se aplica de Dispositivos medianos en adelante
(tablets, ordenadores, anchura mayor o igual a 768px) */
@media (min-width: 768px) {
......@@ -962,3 +955,26 @@ input[type=range]:focus::-ms-fill-upper {
.input-group-addon:first-child{
top: 0px;
}
/*
ng-file-upload and ngImgCrop
*/
.cropArea {
background: #E4E4E4;
overflow: hidden;
width:500px;
height:350px;
}
form .progress {
line-height: 15px;
}
.progress {
display: inline-block;
width: 100px;
border: 3px groove #CCC;
}
.progress div {
font-size: smaller;
background: orange;
width: 0;
}
sails/src/assets/styles/main.less
......@@ -2,6 +2,7 @@
@import (less) '../app/bower_components/bootstrap/dist/css/bootstrap-theme.css';
@import (less) '../app/bower_components/ngtoast/dist/ngToast.css';
@import (less) '../app/bower_components/ngtoast/dist/ngToast-animations.css';
@import (less) '../app/bower_components/ngImgCrop/compile/minified/ng-img-crop.css';
@import (less) 'cropper.css';
@import (less) 'main.css';
@import (less) 'font-awesome.min.css';
......
sails/src/tasks/config/concat.js
......@@ -2,13 +2,12 @@ module.exports = function (grunt) {
/* eslint-disable max-len */
var jsLibs = [
'assets/app/bower_components/jquery/dist/jquery.min.js',
'assets/app/bower_components/angular/angular.js',
'assets/app/bower_components/angular-bootstrap/ui-bootstrap.js',
'assets/app/bower_components/angular-bootstrap/ui-bootstrap-tpls.js',
'assets/app/bower_components/angular/angular.min.js',
'assets/app/bower_components/angular-bootstrap/ui-bootstrap.min.js',
'assets/app/bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js',
'assets/app/bower_components/angular-ui-router/release/angular-ui-router.js',
'assets/app/bower_components/angular-translate/angular-translate.js',
'assets/app/bower_components/angular-translate-loader-static-files/angular-translate-loader-static-files.js',
'assets/app/bower_components/ng-file-upload/angular-file-upload.js',
'assets/app/bower_components/angular-filter/dist/angular-filter.js',
'assets/app/bower_components/angular-timer/dist/assets/js/angular-timer-bower.js',
......@@ -25,7 +24,9 @@ module.exports = function (grunt) {
'assets/app/bower_components/chart.js/dist/Chart.min.js',
'assets/app/bower_components/angular-chart.js/dist/angular-chart.min.js',
'assets/app/bower_components/ng-lodash/build/ng-lodash.js',
'assets/app/bower_components/ng-file-upload/angular-file-upload-shim.js',
'assets/app/bower_components/ng-file-upload/ng-file-upload-shim.min.js',
'assets/app/bower_components/ng-file-upload/ng-file-upload.min.js',
'assets/app/bower_components/ngImgCrop/compile/minified/ng-img-crop.js',
'assets/app/bower_components/bootstrap-filestyle/src/bootstrap-filestyle.min.js',
'assets/app/bower_components/ngMask/dist/ngMask.min.js',
......@@ -60,6 +61,7 @@ module.exports = function (grunt) {
'assets/scripts/modules/student/controllers/pictoconfig.js',
'assets/scripts/modules/student/controllers/pictoexp.js',
'assets/scripts/modules/student/controllers/instructiondetail.js',
'assets/scripts/modules/student/controllers/imgcrop.js',
'assets/scripts/modules/translate/controllers/translate.js',
'assets/scripts/services/services.js',
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment