Commit 48f934ec authored by mostafabarmshory's avatar mostafabarmshory
Browse files

Support image in-line edit

parent df3a3dba
Pipeline #15276610 passed with stage
in 1 minute and 48 seconds
......@@ -31,6 +31,18 @@
<div
layout="row"
layout-fill>
<am-wb-inline
ng-model="symbol"
am-wb-inline-type="image"
am-wb-inline-label="Gate symbol"
am-wb-inline-enable="true"
am-wb-inline-on-save="update()">
<img
width="300px"
height="300px"
ng-src="{{symbol}}" />
</am-wb-inline>
<div layout="column" flex>
<!-- Custom button group -->
<!-- See: https://material.angularjs.org/latest/CSS/button#grouping-with-css-overrides -->
......@@ -53,6 +65,8 @@
<wb-icon>insert_photo</wb-icon>
</md-button>
</section>
<textarea ng-show="showContent">{{model}}</textarea>
<div
layout="row"
......
......@@ -409,7 +409,7 @@ angular.module('ngMaterialWeburgerCommon')
* @name amWbInline
* @description # amWbInline
*/
.directive('amWbInline', function($q, $parse) {
.directive('amWbInline', function($q, $parse, $resource) {
/**
* Link data and view
......@@ -432,6 +432,21 @@ angular.module('ngMaterialWeburgerCommon')
scope.amWbInlineOnSave(scope);
}
}
/**
* Select image url
*/
scope.updateImage = function(){
return $resource.get('image', {
style : {
title : 'Select image'
},
data : scope.myDataModel
}) //
.then(function(url){
scope.ok(url);
});
}
}
return {
......@@ -767,7 +782,7 @@ angular.module('ngMaterialWeburgerCommon').run(['$templateCache', function($temp
$templateCache.put('views/directives/am-wb-inline.html',
"<div ng-switch=amWbInlineType> <div ng-switch-when=text editable-text=$parent.myDataModel onaftersave=$parent.ok($data) layout=row ng-class=\"{'my-editable' : $parent.amWbInlineEnable}\" md-colors=\"::{borderColor: 'primary-100'}\"> <ng-transclude flex></ng-transclude> <div class=xedit-icon ng-show=$parent.amWbInlineEnable md-colors=\"::{color: 'primary',backgroundColor: 'primary-100', borderColor: 'primary-100'}\"> <wb-icon>edit</wb-icon> </div> </div> <div ng-switch-when=textarea editable-textarea=$parent.myDataModel onaftersave=$parent.ok($data) layout=row ng-class=\"{'my-editable' : $parent.amWbInlineEnable}\" md-colors=\"::{borderColor: 'primary-100'}\"> <ng-transclude flex></ng-transclude> <div class=xedit-icon ng-show=$parent.amWbInlineEnable md-colors=\"::{color: 'primary',backgroundColor: 'primary-100', borderColor: 'primary-100'}\"> <wb-icon>edit</wb-icon> </div> </div> <div ng-switch-when=email editable-email=$parent.myDataModel onaftersave=$parent.ok($data) layout=row ng-class=\"{'my-editable' : $parent.amWbInlineEnable}\" md-colors=\"::{borderColor: 'primary-100'}\"> <ng-transclude flex></ng-transclude> <div class=xedit-icon ng-show=$parent.amWbInlineEnable md-colors=\"::{color: 'primary',backgroundColor: 'primary-100', borderColor: 'primary-100'}\"> <wb-icon>edit</wb-icon> </div> </div> <div ng-switch-when=tel editable-tel=$parent.myDataModel onaftersave=$parent.ok($data) layout=row ng-class=\"{'my-editable' : $parent.amWbInlineEnable}\" md-colors=\"::{borderColor: 'primary-100'}\"> <ng-transclude flex></ng-transclude> <div class=xedit-icon ng-show=$parent.amWbInlineEnable md-colors=\"::{color: 'primary',backgroundColor: 'primary-100', borderColor: 'primary-100'}\"> <wb-icon>edit</wb-icon> </div> </div> <div ng-switch-when=number editable-number=$parent.myDataModel onaftersave=$parent.ok($data) layout=row ng-class=\"{'my-editable' : $parent.amWbInlineEnable}\" md-colors=\"::{borderColor: 'primary-100'}\"> <ng-transclude flex></ng-transclude> <div class=xedit-icon ng-show=$parent.amWbInlineEnable md-colors=\"::{color: 'primary',backgroundColor: 'primary-100', borderColor: 'primary-100'}\"> <wb-icon>edit</wb-icon> </div> </div> <div ng-switch-when=range editable-range=$parent.myDataModel onaftersave=$parent.ok($data) layout=row ng-class=\"{'my-editable' : $parent.amWbInlineEnable}\" md-colors=\"::{borderColor: 'primary-100'}\"> <ng-transclude flex></ng-transclude> <div class=xedit-icon ng-show=$parent.amWbInlineEnable md-colors=\"::{color: 'primary',backgroundColor: 'primary-100', borderColor: 'primary-100'}\"> <wb-icon>edit</wb-icon> </div> </div> <div ng-switch-when=url editable-url=$parent.myDataModel onaftersave=$parent.ok($data) layout=row ng-class=\"{'my-editable' : $parent.amWbInlineEnable}\" md-colors=\"::{borderColor: 'primary-100'}\"> <ng-transclude flex></ng-transclude> <div class=xedit-icon ng-show=$parent.amWbInlineEnable md-colors=\"::{color: 'primary',backgroundColor: 'primary-100', borderColor: 'primary-100'}\"> <wb-icon>edit</wb-icon> </div> </div> <div ng-switch-when=search editable-search=$parent.myDataModel onaftersave=$parent.ok($data) layout=row ng-class=\"{'my-editable' : $parent.amWbInlineEnable}\" md-colors=\"::{borderColor: 'primary-100'}\"> <ng-transclude flex></ng-transclude> <div class=xedit-icon ng-show=$parent.amWbInlineEnable md-colors=\"::{color: 'primary',backgroundColor: 'primary-100', borderColor: 'primary-100'}\"> <wb-icon>edit</wb-icon> </div> </div> <div ng-switch-when=color editable-color=$parent.myDataModel onaftersave=$parent.ok($data) layout=row ng-class=\"{'my-editable' : $parent.amWbInlineEnable}\" md-colors=\"::{borderColor: 'primary-100'}\"> <ng-transclude flex></ng-transclude> <div class=xedit-icon ng-show=$parent.amWbInlineEnable md-colors=\"::{color: 'primary',backgroundColor: 'primary-100', borderColor: 'primary-100'}\"> <wb-icon>edit</wb-icon> </div> </div> <div ng-switch-when=date editable-date=$parent.myDataModel onaftersave=$parent.ok($data) layout=row ng-class=\"{'my-editable' : $parent.amWbInlineEnable}\" md-colors=\"::{borderColor: 'primary-100'}\"> <ng-transclude flex></ng-transclude> <div class=xedit-icon ng-show=$parent.amWbInlineEnable md-colors=\"::{color: 'primary',backgroundColor: 'primary-100', borderColor: 'primary-100'}\"> <wb-icon>edit</wb-icon> </div> </div> <div ng-switch-when=time editable-time=$parent.myDataModel onaftersave=$parent.ok($data) layout=row ng-class=\"{'my-editable' : $parent.amWbInlineEnable}\" md-colors=\"::{borderColor: 'primary-100'}\"> <ng-transclude flex></ng-transclude> <div class=xedit-icon ng-show=$parent.amWbInlineEnable md-colors=\"::{color: 'primary',backgroundColor: 'primary-100', borderColor: 'primary-100'}\"> <wb-icon>edit</wb-icon> </div> </div> <div ng-switch-when=month editable-month=$parent.myDataModel onaftersave=$parent.ok($data) layout=row ng-class=\"{'my-editable' : $parent.amWbInlineEnable}\" md-colors=\"::{borderColor: 'primary-100'}\"> <ng-transclude flex></ng-transclude> <div class=xedit-icon ng-show=$parent.amWbInlineEnable md-colors=\"::{color: 'primary',backgroundColor: 'primary-100', borderColor: 'primary-100'}\"> <wb-icon>edit</wb-icon> </div> </div> <div ng-switch-when=week editable-week=$parent.myDataModel onaftersave=$parent.ok($data) layout=row ng-class=\"{'my-editable' : $parent.amWbInlineEnable}\" md-colors=\"::{borderColor: 'primary-100'}\"> <ng-transclude flex></ng-transclude> <div class=xedit-icon ng-show=$parent.amWbInlineEnable md-colors=\"::{color: 'primary',backgroundColor: 'primary-100', borderColor: 'primary-100'}\"> <wb-icon>edit</wb-icon> </div> </div> <div ng-switch-when=password editable-password=$parent.myDataModel onaftersave=$parent.ok($data) layout=row ng-class=\"{'my-editable' : $parent.amWbInlineEnable}\" md-colors=\"::{borderColor: 'primary-100'}\"> <ng-transclude flex></ng-transclude> <div class=xedit-icon ng-show=$parent.amWbInlineEnable md-colors=\"::{color: 'primary',backgroundColor: 'primary-100', borderColor: 'primary-100'}\"> <wb-icon>edit</wb-icon> </div> </div> <div ng-switch-when=datetime editable-datetime-local=$parent.myDataModel onaftersave=$parent.ok($data) layout=row ng-class=\"{'my-editable' : $parent.amWbInlineEnable}\" md-colors=\"::{borderColor: 'primary-100'}\"> <ng-transclude flex></ng-transclude> <div class=xedit-icon ng-show=$parent.amWbInlineEnable md-colors=\"::{color: 'primary',backgroundColor: 'primary-100', borderColor: 'primary-100'}\"> <wb-icon>edit</wb-icon> </div> </div> <div ng-switch-when=file editable-file=$parent.myDataModel onaftersave=$parent.ok($data) layout=row ng-class=\"{'my-editable' : $parent.amWbInlineEnable}\" md-colors=\"::{borderColor: 'primary-100'}\"> <ng-transclude flex></ng-transclude> <div class=xedit-icon ng-show=$parent.amWbInlineEnable md-colors=\"::{color: 'primary',backgroundColor: 'primary-100', borderColor: 'primary-100'}\"> <wb-icon>edit</wb-icon> </div> </div> </div>"
"<div ng-switch=amWbInlineType> <div ng-switch-when=image ng-click=updateImage() ng-class=\"{'my-editable' : $parent.amWbInlineEnable}\" md-colors=\"::{borderColor: 'primary-100'}\"> <ng-transclude flex></ng-transclude> <div class=xedit-icon ng-show=$parent.amWbInlineEnable md-colors=\"::{color: 'primary',backgroundColor: 'primary-100', borderColor: 'primary-100'}\"> <wb-icon>edit</wb-icon> </div> </div> <div ng-switch-when=text editable-text=$parent.myDataModel onaftersave=$parent.ok($data) layout=row ng-class=\"{'my-editable' : $parent.amWbInlineEnable}\" md-colors=\"::{borderColor: 'primary-100'}\"> <ng-transclude flex></ng-transclude> <div class=xedit-icon ng-show=$parent.amWbInlineEnable md-colors=\"::{color: 'primary',backgroundColor: 'primary-100', borderColor: 'primary-100'}\"> <wb-icon>edit</wb-icon> </div> </div> <div ng-switch-when=textarea editable-textarea=$parent.myDataModel onaftersave=$parent.ok($data) layout=row ng-class=\"{'my-editable' : $parent.amWbInlineEnable}\" md-colors=\"::{borderColor: 'primary-100'}\"> <ng-transclude flex></ng-transclude> <div class=xedit-icon ng-show=$parent.amWbInlineEnable md-colors=\"::{color: 'primary',backgroundColor: 'primary-100', borderColor: 'primary-100'}\"> <wb-icon>edit</wb-icon> </div> </div> <div ng-switch-when=email editable-email=$parent.myDataModel onaftersave=$parent.ok($data) layout=row ng-class=\"{'my-editable' : $parent.amWbInlineEnable}\" md-colors=\"::{borderColor: 'primary-100'}\"> <ng-transclude flex></ng-transclude> <div class=xedit-icon ng-show=$parent.amWbInlineEnable md-colors=\"::{color: 'primary',backgroundColor: 'primary-100', borderColor: 'primary-100'}\"> <wb-icon>edit</wb-icon> </div> </div> <div ng-switch-when=tel editable-tel=$parent.myDataModel onaftersave=$parent.ok($data) layout=row ng-class=\"{'my-editable' : $parent.amWbInlineEnable}\" md-colors=\"::{borderColor: 'primary-100'}\"> <ng-transclude flex></ng-transclude> <div class=xedit-icon ng-show=$parent.amWbInlineEnable md-colors=\"::{color: 'primary',backgroundColor: 'primary-100', borderColor: 'primary-100'}\"> <wb-icon>edit</wb-icon> </div> </div> <div ng-switch-when=number editable-number=$parent.myDataModel onaftersave=$parent.ok($data) layout=row ng-class=\"{'my-editable' : $parent.amWbInlineEnable}\" md-colors=\"::{borderColor: 'primary-100'}\"> <ng-transclude flex></ng-transclude> <div class=xedit-icon ng-show=$parent.amWbInlineEnable md-colors=\"::{color: 'primary',backgroundColor: 'primary-100', borderColor: 'primary-100'}\"> <wb-icon>edit</wb-icon> </div> </div> <div ng-switch-when=range editable-range=$parent.myDataModel onaftersave=$parent.ok($data) layout=row ng-class=\"{'my-editable' : $parent.amWbInlineEnable}\" md-colors=\"::{borderColor: 'primary-100'}\"> <ng-transclude flex></ng-transclude> <div class=xedit-icon ng-show=$parent.amWbInlineEnable md-colors=\"::{color: 'primary',backgroundColor: 'primary-100', borderColor: 'primary-100'}\"> <wb-icon>edit</wb-icon> </div> </div> <div ng-switch-when=url editable-url=$parent.myDataModel onaftersave=$parent.ok($data) layout=row ng-class=\"{'my-editable' : $parent.amWbInlineEnable}\" md-colors=\"::{borderColor: 'primary-100'}\"> <ng-transclude flex></ng-transclude> <div class=xedit-icon ng-show=$parent.amWbInlineEnable md-colors=\"::{color: 'primary',backgroundColor: 'primary-100', borderColor: 'primary-100'}\"> <wb-icon>edit</wb-icon> </div> </div> <div ng-switch-when=search editable-search=$parent.myDataModel onaftersave=$parent.ok($data) layout=row ng-class=\"{'my-editable' : $parent.amWbInlineEnable}\" md-colors=\"::{borderColor: 'primary-100'}\"> <ng-transclude flex></ng-transclude> <div class=xedit-icon ng-show=$parent.amWbInlineEnable md-colors=\"::{color: 'primary',backgroundColor: 'primary-100', borderColor: 'primary-100'}\"> <wb-icon>edit</wb-icon> </div> </div> <div ng-switch-when=color editable-color=$parent.myDataModel onaftersave=$parent.ok($data) layout=row ng-class=\"{'my-editable' : $parent.amWbInlineEnable}\" md-colors=\"::{borderColor: 'primary-100'}\"> <ng-transclude flex></ng-transclude> <div class=xedit-icon ng-show=$parent.amWbInlineEnable md-colors=\"::{color: 'primary',backgroundColor: 'primary-100', borderColor: 'primary-100'}\"> <wb-icon>edit</wb-icon> </div> </div> <div ng-switch-when=date editable-date=$parent.myDataModel onaftersave=$parent.ok($data) layout=row ng-class=\"{'my-editable' : $parent.amWbInlineEnable}\" md-colors=\"::{borderColor: 'primary-100'}\"> <ng-transclude flex></ng-transclude> <div class=xedit-icon ng-show=$parent.amWbInlineEnable md-colors=\"::{color: 'primary',backgroundColor: 'primary-100', borderColor: 'primary-100'}\"> <wb-icon>edit</wb-icon> </div> </div> <div ng-switch-when=time editable-time=$parent.myDataModel onaftersave=$parent.ok($data) layout=row ng-class=\"{'my-editable' : $parent.amWbInlineEnable}\" md-colors=\"::{borderColor: 'primary-100'}\"> <ng-transclude flex></ng-transclude> <div class=xedit-icon ng-show=$parent.amWbInlineEnable md-colors=\"::{color: 'primary',backgroundColor: 'primary-100', borderColor: 'primary-100'}\"> <wb-icon>edit</wb-icon> </div> </div> <div ng-switch-when=month editable-month=$parent.myDataModel onaftersave=$parent.ok($data) layout=row ng-class=\"{'my-editable' : $parent.amWbInlineEnable}\" md-colors=\"::{borderColor: 'primary-100'}\"> <ng-transclude flex></ng-transclude> <div class=xedit-icon ng-show=$parent.amWbInlineEnable md-colors=\"::{color: 'primary',backgroundColor: 'primary-100', borderColor: 'primary-100'}\"> <wb-icon>edit</wb-icon> </div> </div> <div ng-switch-when=week editable-week=$parent.myDataModel onaftersave=$parent.ok($data) layout=row ng-class=\"{'my-editable' : $parent.amWbInlineEnable}\" md-colors=\"::{borderColor: 'primary-100'}\"> <ng-transclude flex></ng-transclude> <div class=xedit-icon ng-show=$parent.amWbInlineEnable md-colors=\"::{color: 'primary',backgroundColor: 'primary-100', borderColor: 'primary-100'}\"> <wb-icon>edit</wb-icon> </div> </div> <div ng-switch-when=password editable-password=$parent.myDataModel onaftersave=$parent.ok($data) layout=row ng-class=\"{'my-editable' : $parent.amWbInlineEnable}\" md-colors=\"::{borderColor: 'primary-100'}\"> <ng-transclude flex></ng-transclude> <div class=xedit-icon ng-show=$parent.amWbInlineEnable md-colors=\"::{color: 'primary',backgroundColor: 'primary-100', borderColor: 'primary-100'}\"> <wb-icon>edit</wb-icon> </div> </div> <div ng-switch-when=datetime editable-datetime-local=$parent.myDataModel onaftersave=$parent.ok($data) layout=row ng-class=\"{'my-editable' : $parent.amWbInlineEnable}\" md-colors=\"::{borderColor: 'primary-100'}\"> <ng-transclude flex></ng-transclude> <div class=xedit-icon ng-show=$parent.amWbInlineEnable md-colors=\"::{color: 'primary',backgroundColor: 'primary-100', borderColor: 'primary-100'}\"> <wb-icon>edit</wb-icon> </div> </div> <div ng-switch-when=file editable-file=$parent.myDataModel onaftersave=$parent.ok($data) layout=row ng-class=\"{'my-editable' : $parent.amWbInlineEnable}\" md-colors=\"::{borderColor: 'primary-100'}\"> <ng-transclude flex></ng-transclude> <div class=xedit-icon ng-show=$parent.amWbInlineEnable md-colors=\"::{color: 'primary',backgroundColor: 'primary-100', borderColor: 'primary-100'}\"> <wb-icon>edit</wb-icon> </div> </div> </div>"
);
}]);
......@@ -28,7 +28,7 @@ angular.module('ngMaterialWeburgerCommon')
* @name amWbInline
* @description # amWbInline
*/
.directive('amWbInline', function($q, $parse) {
.directive('amWbInline', function($q, $parse, $resource) {
/**
* Link data and view
......@@ -51,6 +51,21 @@ angular.module('ngMaterialWeburgerCommon')
scope.amWbInlineOnSave(scope);
}
}
/**
* Select image url
*/
scope.updateImage = function(){
return $resource.get('image', {
style : {
title : 'Select image'
},
data : scope.myDataModel
}) //
.then(function(url){
scope.ok(url);
});
}
}
return {
......
<div ng-switch="amWbInlineType">
<!-- IMAGE -->
<div ng-switch-when="image"
ng-click="updateImage()"
ng-class="{'my-editable' : $parent.amWbInlineEnable}"
md-colors="::{borderColor: 'primary-100'}">
<ng-transclude flex></ng-transclude>
<div
class="xedit-icon"
ng-show="$parent.amWbInlineEnable"
md-colors="::{color: 'primary',backgroundColor: 'primary-100', borderColor: 'primary-100'}">
<wb-icon>edit</wb-icon>
</div>
</div>
<!-- TEXT -->
<div ng-switch-when="text"
editable-text="$parent.myDataModel"
......
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 to comment