promethee 1.0.19 → 1.0.20

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA1:
3
- metadata.gz: ff4222a60ff026188abda14dedaef525f7af012a
4
- data.tar.gz: 8272fbd675688bb2b8c079c1c61b922f6b86a992
3
+ metadata.gz: 932ca1d52484c654de7f178f55548aa6753942cd
4
+ data.tar.gz: a998da307c6021b046a87230f97301c522638757
5
5
  SHA512:
6
- metadata.gz: 3fa8ec13bc82dc0b430724afad25795c56166774a792a934b72160d9977d07f9c2e296ebfd268e76852f88fbb23e60a4fbad956a5c46a173c69853c101dd58b6
7
- data.tar.gz: 30c2f867088622d787d15727d8fb5117f564ddaac82c005e4577289f9baf3bff5e2f3b3965f68f425b067130952a55a4c82d4e75f82a19424a4f502a10f96299
6
+ metadata.gz: ec99cb5ea11a85d88149dacfbc2c4e266b85d6642f93e3cda86d8e92dd2e724729a5abc4b5e9dbcf7f02e1d00eff3172464c682c1df5fbfea4a6c5cc3052ef9d
7
+ data.tar.gz: 63d672f686c5a4b9bb793fef19c422b107f8daf40fe780950bd83d69c956c5898862cfbeac50a319fdcba59476b065cc4b0b7f3b99af46f69f6556dd83c14867
data/README.md CHANGED
@@ -311,6 +311,9 @@ This would do quite the same thing:
311
311
  - Gallery
312
312
  - Menu
313
313
  - Tab
314
+ - Better col sizing/positioning UX
315
+ - Grid background helper
316
+ - File upload?
314
317
  - ~~Cover~~
315
318
  - ~~Chapter (or maybe it's a cover too? *Yes it is, but see next line*)~~
316
319
  - Section (in order to organize page contents within distincts parts which can be referenced. eg: scrollspy, hyperlink, tabs, ...)
@@ -48,4 +48,40 @@ $promethee-color: #ff9900 !default
48
48
  &__wrapper
49
49
  padding: 10px
50
50
 
51
+ &__component-selected
52
+ border: 2px solid transparent
51
53
 
54
+ &--visible
55
+ border-color: $promethee-color
56
+
57
+ &__inspector
58
+ background: #fff
59
+ border: 1px solid rgba(0, 0, 0, .1)
60
+ width: 300px
61
+ height: calc(100vh - 30px)
62
+ top: 15px
63
+ left: 100%
64
+ margin-left: -15px
65
+ transform: translateX(-100%)
66
+ z-index: 1000
67
+ display: none
68
+ position: fixed
69
+
70
+ &--open
71
+ display: block
72
+
73
+ &__inspector-header
74
+ padding: 15px
75
+ border-bottom: 1px solid rgba(0, 0, 0, .1)
76
+
77
+ &, h5
78
+ font-size: 11px
79
+
80
+ h5
81
+ margin: 0
82
+ font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif
83
+ font-weight: bold
84
+ text-transform: uppercase
85
+
86
+ .promethee-editor__inspector-content
87
+ padding: 15px
@@ -47,6 +47,7 @@ promethee_data = Promethee::Data.new master_data
47
47
  .module('Promethee', ['summernote', 'ngAnimate'])
48
48
  .value('data', <%= promethee_data.to_json.html_safe %>)
49
49
  .value('definitions', [])
50
+ .value('inspected', {component: null})
50
51
  .value('action', new State('write'))
51
52
  .value('preview', new State('desktop'))
52
53
  .value('fullscreen', new State(false))
@@ -68,9 +69,40 @@ promethee_data = Promethee::Data.new master_data
68
69
  val = (val + '').replace(/_/g, ' ').replace(/([A-Z])/g, ' $1').replace(/\s\s+/, ' ').trim();
69
70
  return val[0].toUpperCase() + val.substring(1).toLowerCase();
70
71
  };
72
+ })
73
+ .filter('textContentFromHTML', function() {
74
+ return function(val, distinctParagraphs) {
75
+ var element = document.createElement('div');
76
+ element.innerHTML = val;
77
+
78
+ if(distinctParagraphs === 'distinctParagraphs') {
79
+ var paragraphs = element.querySelectorAll('p');
80
+ for(var i = 0; i < paragraphs.length; i++) paragraphs[i].textContent += ' ';
81
+ }
82
+
83
+ return element.textContent;
84
+ }
85
+ })
86
+ .filter('numberOfCharacters', function() {
87
+ return function(val) {
88
+ return val.length;
89
+ };
90
+ })
91
+ .filter('numberOfWords', function() {
92
+ return function(val) {
93
+ var words = val
94
+ .replace(/\bhttps?:\/\/[a-z0-9\-\._]+(?:\/[^\s\n\r]+)?/gi, 'a') // A URL is one word
95
+ .replace(/\b[a-z0-9\-\._]+@[a-z0-9\-\._]+\.[a-z0-9\-\._]+\b/gi, 'a') // An email is one word
96
+ .replace(/[^a-z0-9\s\n\r]/gi, ' ')
97
+ .replace(/[\s\n\r]+/g, ' ')
98
+ .trim()
99
+ .split(' ');
100
+
101
+ return words[0] === '' ? 0 : words.length;
102
+ };
71
103
  });
72
104
 
73
- promethee.controller('PrometheeController', ['data', '$scope', 'definitions', '$http', 'action', 'preview', 'fullscreen', function(data, $scope, definitions, $http, action, preview, fullscreen) {
105
+ promethee.controller('PrometheeController', ['data', '$scope', 'definitions', '$http', 'action', 'preview', 'fullscreen', 'inspected', function(data, $scope, definitions, $http, action, preview, fullscreen, inspected) {
74
106
 
75
107
  // Data (TODO use Adder and probably page definition to init)
76
108
  if(data === null || data === '') {
@@ -83,6 +115,7 @@ promethee_data = Promethee::Data.new master_data
83
115
  }
84
116
 
85
117
  $scope.data = $scope.component = data;
118
+ $scope.inspected = inspected;
86
119
 
87
120
  // Application states
88
121
  $scope.action = action;
@@ -5,13 +5,13 @@
5
5
  <% Dir[__dir__ + '/write/component/_*.html.erb'].map do |file| %>
6
6
  <%= render "promethee/edit/write/component/#{File.basename(file, '.html.erb').sub(/\A_/, '')}" %>
7
7
  <% end %>
8
- <% Dir[__dir__ + '/write/toolbar/_*.html.erb'].map do |file| %>
9
- <%= render "promethee/edit/write/toolbar/#{File.basename(file, '.html.erb').sub(/\A_/, '')}" %>
8
+ <% Dir[__dir__ + '/inspector/component/_*.html.erb'].map do |file| %>
9
+ <%= render "promethee/edit/inspector/component/#{File.basename(file, '.html.erb').sub(/\A_/, '')}" %>
10
10
  <% end %>
11
11
 
12
12
  <script type="text/ng-template" id="promethee/write">
13
13
  <div class="promethee-editor__page">
14
- <div ng-class="{ 'container': fullscreen }">
14
+ <div ng-class="{ 'container': fullscreen.enabled, 'container-fluid': fullscreen.disabled }">
15
15
  <div
16
16
  ng-init="component = component || data"
17
17
  class="promethee-editor__component promethee-editor__component--page"
@@ -21,4 +21,17 @@
21
21
  </div>
22
22
  <ng-include src="'promethee/write/add_button'"></ng-include>
23
23
  </div>
24
+
25
+ <div class="promethee-editor__inspector" ng-class="{'promethee-editor__inspector--open': inspected.component}">
26
+ <div class="promethee-editor__inspector-header">
27
+ <div class="pull-right">
28
+ <span ng-click="inspected.component = null"><%= fa_icon 'window-close' %></span>
29
+ </div>
30
+ <h5 ng-if="inspected.component">{{inspected.component.type}}</h5>
31
+ </div>
32
+
33
+ <div ng-if="inspected.component" class="promethee-editor__inspector-content">
34
+ <ng-include src="'promethee/inspector/component/' + inspected.component.type"></ng-include>
35
+ </div>
36
+ </div>
24
37
  </script>
@@ -0,0 +1,10 @@
1
+ <script type="text/ng-template" id="promethee/inspector/component/column">
2
+ <div class="form-group">
3
+ <label class="label-control">Size</label>
4
+ <input ng-model="inspected.component.attributes.size" class="form-control" type="number"/>
5
+ </div>
6
+ <div class="form-group">
7
+ <label class="label-control">Offset</label>
8
+ <input ng-model="inspected.component.attributes.offset" class="form-control" type="number"/>
9
+ </div>
10
+ </script>
@@ -0,0 +1,6 @@
1
+ <script type="text/ng-template" id="promethee/inspector/component/cover">
2
+ <div class="form-group">
3
+ <label class="label-control">Image Url</label>
4
+ <input ng-model="inspected.component.attributes.src" class="form-control" type="text"/>
5
+ </div>
6
+ </script>
@@ -0,0 +1,6 @@
1
+ <script type="text/ng-template" id="promethee/inspector/component/details">
2
+ <div class="form-group">
3
+ <label class="label-control">Summary</label>
4
+ <input ng-model="inspected.component.attributes.summary" class="form-control" type="text"/>
5
+ </div>
6
+ </script>
@@ -0,0 +1,23 @@
1
+ <script type="text/ng-template" id="promethee/inspector/component/image">
2
+ <div class="form-group">
3
+ <label class="label-control">Url</label>
4
+ <input class="form-control" ng-model="inspected.component.attributes.src">
5
+ </div>
6
+
7
+ <div class="form-group">
8
+ <label class="label-control">Alt</label>
9
+ <input class="form-control" ng-model="inspected.component.attributes.alt">
10
+ </div>
11
+
12
+ <div class="form-group">
13
+ <label class="label-control">Caption</label>
14
+ <summernote config="{
15
+ toolbar: [
16
+ ['headline', ['style']],
17
+ ['style', ['bold', 'italic']],
18
+ ['alignment', ['ul', 'ol', 'paragraph']],
19
+ ['code', ['codeview']]
20
+ ]
21
+ }" ng-model="inspected.component.attributes.caption"></summernote>
22
+ </div>
23
+ </script>
@@ -0,0 +1,3 @@
1
+ <script type="text/ng-template" id="promethee/inspector/component/row">
2
+ No option for row.
3
+ </script>
@@ -0,0 +1,3 @@
1
+ <script type="text/ng-template" id="promethee/inspector/component/slider">
2
+ No option for slider.
3
+ </script>
@@ -0,0 +1,13 @@
1
+ <script type="text/ng-template" id="promethee/inspector/component/text">
2
+ <ul class="list-group">
3
+ <li class="list-group-item">
4
+ Number of words
5
+ <span class="badge badge-primary badge-pill">{{inspected.component.attributes.body | textContentFromHTML: 'distinctParagraphs' | numberOfWords}}</span>
6
+ </li>
7
+
8
+ <li class="list-group-item">
9
+ Number of characters
10
+ <span class="badge badge-primary badge-pill">{{inspected.component.attributes.body | textContentFromHTML | numberOfCharacters}}</span>
11
+ </li>
12
+ </ul>
13
+ </script>
@@ -0,0 +1,6 @@
1
+ <script type="text/ng-template" id="promethee/inspector/component/video">
2
+ <div class="form-group">
3
+ <label class="label-control">Url</label>
4
+ <input ng-model="inspected.component.attributes.url" class="form-control" type="text"/>
5
+ </div>
6
+ </script>
@@ -1,6 +1,5 @@
1
1
  <script type="text/ng-template" id="promethee/write/toolbar">
2
2
  <div class="pull-right">
3
- <span ng-click="toggleEdit()" class="promethee-editor__button"><%= fa_icon 'pencil-square' %></span>
4
3
  <span ng-click="remove(component, components)" class="promethee-editor__button"><%= fa_icon 'window-close' %></span>
5
4
  </div>
6
5
  </script>
@@ -8,48 +8,46 @@
8
8
  promethee-editor__component--column
9
9
  "
10
10
  ng-controller="ColumnController"
11
+ ng-click="edit($event);"
11
12
  >
12
- <div class="promethee-editor__toolbar">
13
- Column
14
- <ng-include src="'promethee/write/toolbar'"></ng-include>
15
- </div>
16
- <div ng-show="editing" class="promethee-editor__wrapper">
17
- <div class="form-group">
18
- <label class="label-control">Size</label>
19
- <input ng-model="component.attributes.size" class="form-control" type="number"/>
20
- </div>
21
- <div class="form-group">
22
- <label class="label-control">Offset</label>
23
- <input ng-model="component.attributes.offset" class="form-control" type="number"/>
13
+ <div class="promethee-editor__component-selected" ng-class="{'promethee-editor__component-selected--visible': inspected.component === component}">
14
+ <div class="promethee-editor__toolbar">
15
+ Column
16
+ <ng-include src="'promethee/write/toolbar'"></ng-include>
24
17
  </div>
25
- </div>
26
18
 
27
- <ng-include src="'promethee/write/components'"></ng-include>
19
+ <ng-include src="'promethee/write/components'"></ng-include>
28
20
 
29
- <span
30
- type="button"
31
- class="btn btn-default btn-block"
32
- ng-click="addComponentTo(component.children)"
33
- >
34
- Add component
35
- </span>
21
+ <span
22
+ type="button"
23
+ class="btn btn-default btn-block"
24
+ ng-click="addComponentTo(component.children)"
25
+ >
26
+ Add component
27
+ </span>
28
+ </div>
36
29
  </div>
37
30
  </script>
38
31
 
39
32
  <script>
40
- promethee.controller('ColumnController', ['$scope', function($scope) {
41
- $scope.editing = false;
33
+ promethee.controller('ColumnController', ['$scope', 'inspected', function($scope, inspected) {
34
+ Object.defineProperty($scope, 'editing', {
35
+ get: function() {
36
+ return inspected.component == $scope.component;
37
+ }
38
+ });
42
39
 
43
- $scope.edit = function() {
44
- $scope.editing = true;
40
+ $scope.edit = function(event) {
41
+ event.stopPropagation();
42
+ inspected.component = $scope.component;
45
43
  };
46
44
 
47
45
  $scope.complete = function() {
48
- $scope.editing = false;
46
+ inspected.component = null;
49
47
  };
50
48
 
51
49
  $scope.toggleEdit = function() {
52
- $scope.editing = !$scope.editing;
50
+ $scope[$scope.editing ? 'complete' : 'edit']();
53
51
  };
54
52
  }]);
55
53
  </script>
@@ -1,30 +1,30 @@
1
1
  <script type="text/ng-template" id="promethee/write/component/cover">
2
- <div ng-controller="CoverController" class="promethee-editor__component promethee-editor__component--cover">
3
- <div class="promethee-editor__toolbar">
4
- Cover
5
- <ng-include src="'promethee/write/toolbar'"></ng-include>
6
- </div>
7
- <div ng-show="editing" class="promethee-editor__wrapper">
8
- <div class="form-group">
9
- <label class="label-control">Image Url</label>
10
- <input ng-model="component.attributes.src" class="form-control" type="text"/>
2
+ <div
3
+ ng-controller="CoverController"
4
+ class="promethee-editor__component promethee-editor__component--cover"
5
+ ng-click="edit($event);"
6
+ >
7
+ <div class="promethee-editor__component-selected" ng-class="{'promethee-editor__component-selected--visible': inspected.component === component}">
8
+ <div class="promethee-editor__toolbar">
9
+ Cover
10
+ <ng-include src="'promethee/write/toolbar'"></ng-include>
11
11
  </div>
12
- </div>
13
12
 
14
- <div
15
- ng-hide="editing"
16
- class="promethee-editor__wrapper promethee-editor__cover-content"
17
- ng-bind-html="component.attributes.body | htmlSafe"
18
- ng-click="edit()"
19
- style="background-image: url('{{component.attributes.src}}')"
20
- ></div>
13
+ <div
14
+ ng-hide="editing"
15
+ class="promethee-editor__wrapper promethee-editor__cover-content"
16
+ ng-bind-html="component.attributes.body | htmlSafe"
17
+ ng-click="edit()"
18
+ style="background-image: url('{{component.attributes.src}}')"
19
+ ></div>
21
20
 
22
- <div
23
- ng-show="editing"
24
- class="promethee-editor__wrapper promethee-editor__cover-content"
25
- style="background-image: url('{{component.attributes.src}}')"
26
- >
27
- <summernote config="options" ng-model="component.attributes.body"></summernote>
21
+ <div
22
+ ng-show="editing"
23
+ class="promethee-editor__wrapper promethee-editor__cover-content"
24
+ style="background-image: url('{{component.attributes.src}}')"
25
+ >
26
+ <summernote config="options" ng-model="component.attributes.body"></summernote>
27
+ </div>
28
28
  </div>
29
29
  </div>
30
30
  </script>
@@ -37,25 +37,29 @@
37
37
  type: 'cover',
38
38
  attributes: {
39
39
  src: 'https://picsum.photos/1920/1080/?random',
40
- alt: '',
41
- caption: ''
40
+ body: ''
42
41
  }
43
42
  }
44
43
  });
45
44
 
46
- promethee.controller('CoverController', ['$scope', function($scope) {
47
- $scope.editing = false;
45
+ promethee.controller('CoverController', ['$scope', 'inspected', function($scopen, inspected) {
46
+ Object.defineProperty($scope, 'editing', {
47
+ get: function() {
48
+ return inspected.component == $scope.component;
49
+ }
50
+ });
48
51
 
49
- $scope.edit = function() {
50
- $scope.editing = true;
52
+ $scope.edit = function(event) {
53
+ event.stopPropagation();
54
+ inspected.component = $scope.component;
51
55
  };
52
56
 
53
57
  $scope.complete = function() {
54
- $scope.editing = false;
58
+ inspected.component = null;
55
59
  };
56
60
 
57
61
  $scope.toggleEdit = function() {
58
- $scope.editing = !$scope.editing;
62
+ $scope[$scope.editing ? 'complete' : 'edit']();
59
63
  };
60
64
 
61
65
  $scope.options = {
@@ -1,30 +1,28 @@
1
1
  <script type="text/ng-template" id="promethee/write/component/details">
2
- <div ng-controller="DetailsController"
3
- class="promethee-editor__component promethee-editor__component--details">
4
- <div class="promethee-editor__toolbar">
5
- Details
6
- <ng-include src="'promethee/write/toolbar'"></ng-include>
7
- </div>
8
-
9
- <div ng-show="editing" class="promethee-editor__wrapper">
10
- <div class="form-group">
11
- <label class="label-control">Summary</label>
12
- <input ng-model="component.attributes.summary" class="form-control" type="text"/>
2
+ <div
3
+ ng-controller="DetailsController"
4
+ class="promethee-editor__component promethee-editor__component--details"
5
+ ng-click="edit($event);"
6
+ >
7
+ <div class="promethee-editor__component-selected" ng-class="{'promethee-editor__component-selected--visible': inspected.component === component}">
8
+ <div class="promethee-editor__toolbar">
9
+ Details
10
+ <ng-include src="'promethee/write/toolbar'"></ng-include>
13
11
  </div>
14
- </div>
15
12
 
16
- <details>
17
- <summary>{{component.attributes.summary}}</summary>
18
- <ng-include src="'promethee/write/components'"></ng-include>
13
+ <details>
14
+ <summary>{{component.attributes.summary}}</summary>
15
+ <ng-include src="'promethee/write/components'"></ng-include>
19
16
 
20
- <span
21
- type="button"
22
- class="btn btn-default btn-block"
23
- ng-click="addComponentTo(component.children)"
24
- >
25
- Add component
26
- </span>
27
- </details>
17
+ <span
18
+ type="button"
19
+ class="btn btn-default btn-block"
20
+ ng-click="addComponentTo(component.children)"
21
+ >
22
+ Add component
23
+ </span>
24
+ </details>
25
+ </div>
28
26
  </div>
29
27
  </script>
30
28
 
@@ -41,19 +39,24 @@
41
39
  }
42
40
  });
43
41
 
44
- promethee.controller('DetailsController', ['$scope', function($scope) {
45
- $scope.editing = false;
42
+ promethee.controller('DetailsController', ['$scope', 'inspected', function($scope, inspected) {
43
+ Object.defineProperty($scope, 'editing', {
44
+ get: function() {
45
+ return inspected.component == $scope.component;
46
+ }
47
+ });
46
48
 
47
- $scope.edit = function() {
48
- $scope.editing = true;
49
+ $scope.edit = function(event) {
50
+ event.stopPropagation();
51
+ inspected.component = $scope.component;
49
52
  };
50
53
 
51
54
  $scope.complete = function() {
52
- $scope.editing = false;
55
+ inspected.component = null;
53
56
  };
54
57
 
55
58
  $scope.toggleEdit = function() {
56
- $scope.editing = !$scope.editing;
59
+ $scope[$scope.editing ? 'complete' : 'edit']();
57
60
  };
58
61
 
59
62
  $scope.options = {
@@ -1,30 +1,24 @@
1
1
  <script type="text/ng-template" id="promethee/write/component/image">
2
- <div ng-controller="ImageController" class="promethee-editor__component promethee-editor__component--image">
3
- <div class="promethee-editor__toolbar">
4
- Image
5
- <ng-include src="'promethee/write/toolbar'"></ng-include>
6
- </div>
7
- <div ng-show="editing" class="promethee-editor__wrapper">
8
- <div class="form-group">
9
- <label class="label-control">Url</label>
10
- <input ng-model="component.attributes.src" class="form-control" type="text"/>
11
- </div>
12
- <div class="form-group">
13
- <label class="label-control">Alt</label>
14
- <input ng-model="component.attributes.alt" class="form-control" type="text"/>
2
+ <div
3
+ ng-controller="ImageController"
4
+ class="promethee-editor__component promethee-editor__component--image"
5
+ ng-click="edit($event);"
6
+ >
7
+ <div class="promethee-editor__component-selected" ng-class="{'promethee-editor__component-selected--visible': inspected.component === component}">
8
+ <div class="promethee-editor__toolbar">
9
+ Image
10
+ <ng-include src="'promethee/write/toolbar'"></ng-include>
15
11
  </div>
16
- <div class="form-group">
17
- <label class="label-control">Caption</label>
18
- <summernote config="options" ng-model="component.attributes.caption"></summernote>
12
+
13
+ <figure ng-show="component.attributes.src">
14
+ <img ng-src="{{component.attributes.src}}" class="img-responsive">
15
+ <figcaption ng-show="component.attributes.caption" ng-bind-html="component.attributes.caption | htmlSafe"></figcaption>
16
+ </figure>
17
+
18
+ <div ng-hide="component.attributes.src">
19
+ <p ng-hide="editing" class="text-center">Click to set the image</p>
19
20
  </div>
20
21
  </div>
21
- <figure ng-show="component.attributes.src">
22
- <img ng-click="edit()" ng-src="{{component.attributes.src}}" class="img-responsive">
23
- <figcaption ng-show="component.attributes.caption" ng-bind-html="component.attributes.caption | htmlSafe"></figcaption>
24
- </figure>
25
- <div ng-hide="component.attributes.src">
26
- <p ng-hide="editing" ng-click="edit()" class="text-center">Click to set the image</p>
27
- </div>
28
22
  </div>
29
23
  </script>
30
24
 
@@ -42,19 +36,24 @@
42
36
  }
43
37
  });
44
38
 
45
- promethee.controller('ImageController', ['$scope', function($scope) {
46
- $scope.editing = false;
39
+ promethee.controller('ImageController', ['$scope', 'inspected', function($scope, inspected) {
40
+ Object.defineProperty($scope, 'editing', {
41
+ get: function() {
42
+ return inspected.component == $scope.component;
43
+ }
44
+ });
47
45
 
48
- $scope.edit = function() {
49
- $scope.editing = true;
46
+ $scope.edit = function(event) {
47
+ event.stopPropagation();
48
+ inspected.component = $scope.component;
50
49
  };
51
50
 
52
51
  $scope.complete = function() {
53
- $scope.editing = false;
52
+ inspected.component = null;
54
53
  };
55
54
 
56
55
  $scope.toggleEdit = function() {
57
- $scope.editing = !$scope.editing;
56
+ $scope[$scope.editing ? 'complete' : 'edit']();
58
57
  };
59
58
 
60
59
  $scope.options = {
@@ -1,15 +1,18 @@
1
1
  <script type="text/ng-template" id="promethee/write/component/row">
2
- <div ng-controller="RowController"
3
- class="row promethee-editor__component promethee-editor__component--row">
4
- <div class="promethee-editor__toolbar">
5
- Row
6
- <ng-include src="'promethee/write/toolbar'"></ng-include>
2
+ <div
3
+ ng-controller="RowController"
4
+ class="row promethee-editor__component promethee-editor__component--row"
5
+ ng-click="edit($event);"
6
+ >
7
+ <div class="promethee-editor__component-selected" ng-class="{'promethee-editor__component-selected--visible': inspected.component === component}">
8
+ <div class="promethee-editor__toolbar">
9
+ Row
10
+ <ng-include src="'promethee/write/toolbar'"></ng-include>
11
+ </div>
12
+ <ng-include src="'promethee/write/components'"></ng-include>
13
+ <div class="clearfix"></div>
14
+ <span class="btn btn-default btn-block" ng-click="addColumn()" style="margin: 0 6px 6px 6px;width: auto">Add column</span>
7
15
  </div>
8
- <div ng-show="editing" class="promethee-editor__wrapper">
9
- </div>
10
- <ng-include src="'promethee/write/components'"></ng-include>
11
- <div class="clearfix"></div>
12
- <span class="btn btn-default btn-block" ng-click="addColumn()" style="margin: 0 6px 6px 6px;width: auto">Add column</span>
13
16
  </div>
14
17
  </script>
15
18
 
@@ -24,7 +27,25 @@
24
27
  }
25
28
  });
26
29
 
27
- promethee.controller('RowController', ['$scope', function($scope) {
30
+ promethee.controller('RowController', ['$scope', 'inspected', function($scope, inspected) {
31
+ Object.defineProperty($scope, 'editing', {
32
+ get: function() {
33
+ return inspected.component == $scope.component;
34
+ }
35
+ });
36
+
37
+ $scope.edit = function(event) {
38
+ event.stopPropagation();
39
+ inspected.component = $scope.component;
40
+ };
41
+
42
+ $scope.complete = function() {
43
+ inspected.component = null;
44
+ };
45
+
46
+ $scope.toggleEdit = function() {
47
+ $scope[$scope.editing ? 'complete' : 'edit']();
48
+ };
28
49
 
29
50
  $scope.allowedTypes = ['column'];
30
51
 
@@ -38,19 +59,5 @@
38
59
  children: []
39
60
  })
40
61
  }
41
-
42
- $scope.editing = false;
43
-
44
- $scope.edit = function() {
45
- $scope.editing = true;
46
- };
47
-
48
- $scope.complete = function() {
49
- $scope.editing = false;
50
- };
51
-
52
- $scope.toggleEdit = function() {
53
- $scope.editing = !$scope.editing;
54
- };
55
62
  }]);
56
63
  </script>
@@ -1,39 +1,44 @@
1
1
  <script type="text/ng-template" id="promethee/write/component/slider">
2
- <div ng-controller="SliderController"
3
- class="row promethee-editor__component promethee-editor__component--slider">
4
- <div class="promethee-editor__toolbar">
5
- Slider
2
+ <div
3
+ ng-controller="SliderController"
4
+ class="row promethee-editor__component promethee-editor__component--slider"
5
+ ng-click="edit($event);"
6
+ >
7
+ <div class="promethee-editor__component-selected" ng-class="{'promethee-editor__component-selected--visible': inspected.component === component}">
8
+ <div class="promethee-editor__toolbar">
9
+ Slider
6
10
 
7
- <ng-include src="'promethee/write/toolbar'"></ng-include>
11
+ <ng-include src="'promethee/write/toolbar'"></ng-include>
8
12
 
9
- <div class="pull-right">
10
- <span ng-show="editing" ng-click="prev()" class="promethee-editor__button"><%= fa_icon 'chevron-left' %></span>
11
- <span ng-show="editing" ng-click="next()" class="promethee-editor__button"><%= fa_icon 'chevron-right' %></span>
13
+ <div class="pull-right">
14
+ <span ng-show="editing" ng-click="prev()" class="promethee-editor__button"><%= fa_icon 'chevron-left' %></span>
15
+ <span ng-show="editing" ng-click="next()" class="promethee-editor__button"><%= fa_icon 'chevron-right' %></span>
16
+ </div>
12
17
  </div>
13
- </div>
14
18
 
15
- <div id="{{sliderId}}" class="carousel slide" data-ride="carousel" ng-init="components = component.children">
16
- <div class="carousel-inner" style="min-height: 100px">
17
- <div ng-repeat="component in components track by $index" class="item" ng-class="{active: $index === 0}">
18
- <ng-include src="'promethee/' + (editing ? 'write' : 'move') + '/component'"></ng-include>
19
+ <div id="{{sliderId}}" class="carousel slide" data-ride="carousel" ng-init="components = component.children">
20
+ <div class="carousel-inner" style="min-height: 100px">
21
+ <div ng-repeat="component in components track by $index" class="item" ng-class="{active: $index === 0}">
22
+ <ng-include src="'promethee/' + (editing ? 'write' : 'move') + '/component'"></ng-include>
23
+ </div>
19
24
  </div>
25
+
26
+ <a ng-hide="editing" ng-click="$event.preventDefault()" class="left carousel-control fontawesome-carousel-control" href="#{{sliderId}}" data-slide="prev">
27
+ <%= fa_icon 'angle-left' %>
28
+ </a>
29
+ <a ng-hide="editing" ng-click="$event.preventDefault()" class="right carousel-control fontawesome-carousel-control" href="#{{sliderId}}" data-slide="next">
30
+ <%= fa_icon 'angle-right' %>
31
+ </a>
20
32
  </div>
21
33
 
22
- <a ng-hide="editing" ng-click="$event.preventDefault()" class="left carousel-control fontawesome-carousel-control" href="#{{sliderId}}" data-slide="prev">
23
- <%= fa_icon 'angle-left' %>
24
- </a>
25
- <a ng-hide="editing" ng-click="$event.preventDefault()" class="right carousel-control fontawesome-carousel-control" href="#{{sliderId}}" data-slide="next">
26
- <%= fa_icon 'angle-right' %>
27
- </a>
34
+ <span
35
+ type="button"
36
+ class="btn btn-default btn-block"
37
+ ng-click="addComponentTo(component.children);goToLastItem();"
38
+ >
39
+ Add item
40
+ </span>
28
41
  </div>
29
-
30
- <span
31
- type="button"
32
- class="btn btn-default btn-block"
33
- ng-click="addComponentTo(component.children);goToLastItem();"
34
- >
35
- Add item
36
- </span>
37
42
  </div>
38
43
  </script>
39
44
 
@@ -48,7 +53,24 @@
48
53
  }
49
54
  });
50
55
 
51
- promethee.controller('SliderController', ['$scope', '$element', function($scope, $element) {
56
+ promethee.controller('SliderController', ['$scope', '$element', 'inspected', function($scope, $element, inspected) {
57
+ $scope.editing = false;
58
+
59
+ $scope.edit = function(event) {
60
+ event.stopPropagation();
61
+ $scope.editing = true;
62
+ inspected.component = $scope.component;
63
+ };
64
+
65
+ $scope.complete = function() {
66
+ $scope.editing = false;
67
+ inspected.component = null;
68
+ };
69
+
70
+ $scope.toggleEdit = function() {
71
+ $scope[$scope.editing ? 'complete' : 'edit']();
72
+ };
73
+
52
74
  $scope.sliderId = 'slider-' + Date.now() + '-' + Math.floor(Math.random()*1000000);
53
75
 
54
76
  $scope.$watch('editing', function(newVal) {
@@ -71,7 +93,5 @@
71
93
  };
72
94
 
73
95
  $element.find('.carousel').carousel();
74
-
75
- // element.ready(function() { this.find('.carousel').carousel() });
76
96
  }]);
77
97
  </script>
@@ -1,15 +1,20 @@
1
1
  <script type="text/ng-template" id="promethee/write/component/text">
2
- <div ng-controller="TextController"
3
- class="promethee-editor__component promethee-editor__component--text">
4
- <div class="promethee-editor__toolbar">
5
- Text
6
- <ng-include src="'promethee/write/toolbar'"></ng-include>
7
- </div>
8
- <div ng-show="editing">
9
- <summernote config="options" ng-model="component.attributes.body"></summernote>
10
- </div>
11
- <div ng-hide="editing">
12
- <div class="promethee-editor__wrapper" ng-bind-html="component.attributes.body | htmlSafe" ng-click="edit()"></div>
2
+ <div
3
+ ng-controller="TextController"
4
+ class="promethee-editor__component promethee-editor__component--text"
5
+ ng-click="edit($event);"
6
+ >
7
+ <div class="promethee-editor__component-selected" ng-class="{'promethee-editor__component-selected--visible': inspected.component === component}">
8
+ <div class="promethee-editor__toolbar">
9
+ Text
10
+ <ng-include src="'promethee/write/toolbar'"></ng-include>
11
+ </div>
12
+ <div ng-show="editing">
13
+ <summernote config="options" ng-model="component.attributes.body"></summernote>
14
+ </div>
15
+ <div ng-hide="editing">
16
+ <div class="promethee-editor__wrapper" ng-bind-html="component.attributes.body | htmlSafe"></div>
17
+ </div>
13
18
  </div>
14
19
  </div>
15
20
  </script>
@@ -26,19 +31,24 @@
26
31
  }
27
32
  });
28
33
 
29
- promethee.controller('TextController', ['$scope', function($scope) {
30
- $scope.editing = false;
34
+ promethee.controller('TextController', ['$scope', 'inspected', function($scope, inspected) {
35
+ Object.defineProperty($scope, 'editing', {
36
+ get: function() {
37
+ return inspected.component == $scope.component;
38
+ }
39
+ });
31
40
 
32
- $scope.edit = function() {
33
- $scope.editing = true;
41
+ $scope.edit = function(event) {
42
+ event.stopPropagation();
43
+ inspected.component = $scope.component;
34
44
  };
35
45
 
36
46
  $scope.complete = function() {
37
- $scope.editing = false;
47
+ inspected.component = null;
38
48
  };
39
49
 
40
50
  $scope.toggleEdit = function() {
41
- $scope.editing = !$scope.editing;
51
+ $scope[$scope.editing ? 'complete' : 'edit']();
42
52
  };
43
53
 
44
54
  $scope.options = {
@@ -1,18 +1,18 @@
1
1
  <script type="text/ng-template" id="promethee/write/component/video">
2
- <div ng-controller="VideoController"
3
- class="promethee-editor__component promethee-editor__component--video">
4
- <div class="promethee-editor__toolbar">
5
- Video
6
- <ng-include src="'promethee/write/toolbar'"></ng-include>
7
- </div>
8
- <div ng-show="editing" class="promethee-editor__wrapper">
9
- <div class="form-group">
10
- <label class="label-control">Url</label>
11
- <input ng-model="component.attributes.url" class="form-control" type="text"/>
2
+ <div
3
+ ng-controller="VideoController"
4
+ class="promethee-editor__component promethee-editor__component--video"
5
+ ng-click="edit($event);"
6
+ >
7
+ <div class="promethee-editor__component-selected" ng-class="{'promethee-editor__component-selected--visible': inspected.component === component}">
8
+ <div class="promethee-editor__toolbar">
9
+ Video
10
+ <ng-include src="'promethee/write/toolbar'"></ng-include>
11
+ </div>
12
+
13
+ <div class="embed-responsive embed-responsive-16by9">
14
+ <iframe ng-if="embed" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen="allowfullscreen" ng-src="{{embed | urlSafe}}"></iframe>
12
15
  </div>
13
- </div>
14
- <div class="embed-responsive embed-responsive-16by9">
15
- <iframe ng-if="embed" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen="allowfullscreen" ng-src="{{embed | urlSafe}}"></iframe>
16
16
  </div>
17
17
  </div>
18
18
  </script>
@@ -29,19 +29,24 @@
29
29
  }
30
30
  });
31
31
 
32
- promethee.controller('VideoController', ['$scope', function($scope) {
33
- $scope.editing = false;
32
+ promethee.controller('VideoController', ['$scope', 'inspected', function($scope, inspected) {
33
+ Object.defineProperty($scope, 'editing', {
34
+ get: function() {
35
+ return inspected.component == $scope.component;
36
+ }
37
+ });
34
38
 
35
- $scope.edit = function() {
36
- $scope.editing = true;
39
+ $scope.edit = function(event) {
40
+ event.stopPropagation();
41
+ inspected.component = $scope.component;
37
42
  };
38
43
 
39
44
  $scope.complete = function() {
40
- $scope.editing = false;
45
+ inspected.component = null;
41
46
  };
42
47
 
43
48
  $scope.toggleEdit = function() {
44
- $scope.editing = !$scope.editing;
49
+ $scope[$scope.editing ? 'complete' : 'edit']();
45
50
  };
46
51
 
47
52
  Object.defineProperty($scope, 'embed', {
@@ -1,5 +1,5 @@
1
1
  module Promethee
2
2
  module Rails
3
- VERSION = '1.0.19'
3
+ VERSION = '1.0.20'
4
4
  end
5
5
  end
metadata CHANGED
@@ -1,7 +1,7 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: promethee
3
3
  version: !ruby/object:Gem::Version
4
- version: 1.0.19
4
+ version: 1.0.20
5
5
  platform: ruby
6
6
  authors:
7
7
  - Julien Dargelos
@@ -11,7 +11,7 @@ authors:
11
11
  autorequire:
12
12
  bindir: bin
13
13
  cert_chain: []
14
- date: 2018-01-05 00:00:00.000000000 Z
14
+ date: 2018-01-08 00:00:00.000000000 Z
15
15
  dependencies:
16
16
  - !ruby/object:Gem::Dependency
17
17
  name: rails
@@ -239,6 +239,14 @@ files:
239
239
  - app/views/promethee/edit/_move.html.erb
240
240
  - app/views/promethee/edit/_preview.html.erb
241
241
  - app/views/promethee/edit/_write.html.erb
242
+ - app/views/promethee/edit/inspector/component/_column.html.erb
243
+ - app/views/promethee/edit/inspector/component/_cover.html.erb
244
+ - app/views/promethee/edit/inspector/component/_details.html.erb
245
+ - app/views/promethee/edit/inspector/component/_image.html.erb
246
+ - app/views/promethee/edit/inspector/component/_row.html.erb
247
+ - app/views/promethee/edit/inspector/component/_slider.html.erb
248
+ - app/views/promethee/edit/inspector/component/_text.html.erb
249
+ - app/views/promethee/edit/inspector/component/_video.html.erb
242
250
  - app/views/promethee/edit/move/_component.html.erb
243
251
  - app/views/promethee/edit/move/_components.html.erb
244
252
  - app/views/promethee/edit/move/component/_column.html.erb
@@ -371,7 +379,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
371
379
  version: '0'
372
380
  requirements: []
373
381
  rubyforge_project:
374
- rubygems_version: 2.6.12
382
+ rubygems_version: 2.6.13
375
383
  signing_key:
376
384
  specification_version: 4
377
385
  summary: Bring fire to your page