promethee 0.1.3 → 0.1.5
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/README.md +53 -50
- data/app/assets/javascripts/promethee-editor.js +8 -0
- data/app/assets/javascripts/promethee.js +0 -59
- data/app/assets/stylesheets/promethee-editor.sass +23 -78
- data/app/assets/stylesheets/promethee-editor/_component.sass +10 -0
- data/app/assets/stylesheets/promethee-editor/_mover.sass +67 -0
- data/app/assets/stylesheets/promethee-editor/_preview.sass +25 -0
- data/app/assets/stylesheets/promethee.sass +1 -2
- data/app/controllers/promethee_controller.rb +8 -0
- data/app/views/promethee/_edit.html.erb +52 -123
- data/app/views/promethee/_show.html.erb +1 -1
- data/app/views/promethee/components/_children.html.erb +4 -0
- data/app/views/promethee/components/_children_edit.html.erb +5 -0
- data/app/views/promethee/components/_column.html.erb +1 -1
- data/app/views/promethee/components/_column_edit.html.erb +35 -33
- data/app/views/promethee/components/_image_edit.html.erb +23 -28
- data/app/views/promethee/components/_page.html.erb +1 -0
- data/app/views/promethee/components/_page_edit.html.erb +10 -0
- data/app/views/promethee/components/_row.html.erb +1 -4
- data/app/views/promethee/components/_row_edit.html.erb +19 -22
- data/app/views/promethee/components/_text_edit.html.erb +16 -20
- data/app/views/promethee/components/_video_edit.html.erb +23 -22
- data/app/views/promethee/partials/_adder.html.erb +64 -0
- data/app/views/promethee/partials/_include_components.html.erb +9 -0
- data/app/views/promethee/partials/_mover.html.erb +98 -0
- data/app/views/promethee/partials/_navbar.html.erb +26 -0
- data/app/views/promethee/partials/_page.html.erb +6 -0
- data/app/views/promethee/partials/_preview.html.erb +12 -0
- data/app/views/promethee/partials/_toolbar_buttons.html.erb +2 -2
- data/app/views/promethee/preview.html.erb +1 -0
- data/config/routes.rb +3 -0
- data/lib/promethee.rb +2 -21
- data/lib/promethee/core_ext/tags.rb +2 -5
- data/lib/promethee/rails/version.rb +1 -1
- metadata +34 -27
- data/app/assets/javascripts/promethee/controller.js +0 -22
- data/app/assets/stylesheets/promethee-editor/_mixins.sass +0 -19
- data/app/assets/stylesheets/promethee-editor/_variables.sass +0 -4
- data/app/views/promethee/components/_index.html.erb +0 -3
- data/app/views/promethee/components/_index_edit.html.erb +0 -7
- data/app/views/promethee/components/_show.html.erb +0 -4
- data/app/views/promethee/components/_show_edit.html.erb +0 -3
- data/lib/promethee/component.rb +0 -28
- data/lib/promethee/component/attribute.rb +0 -42
- data/lib/promethee/component/attribute/boolean.rb +0 -4
- data/lib/promethee/component/attribute/float.rb +0 -3
- data/lib/promethee/component/attribute/integer.rb +0 -3
- data/lib/promethee/component/attribute/string.rb +0 -3
- data/lib/promethee/component/attributes.rb +0 -50
- data/lib/promethee/component/attributes/definer.rb +0 -13
- data/lib/promethee/component/base.rb +0 -68
- data/lib/promethee/component/collection.rb +0 -17
- data/lib/promethee/component/column.rb +0 -8
- data/lib/promethee/component/image.rb +0 -6
- data/lib/promethee/component/row.rb +0 -3
- data/lib/promethee/component/text.rb +0 -5
- data/lib/promethee/component/video.rb +0 -5
- data/lib/promethee/grid.rb +0 -52
- data/vendor/assets/javascripts/angular-drag-and-drop-lists.js +0 -49
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA1:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 713537989be982b85b811ad216982e6f8fe8b381
|
4
|
+
data.tar.gz: 4ce491f4b51ec1e55e66e096061a63648caf4f72
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 9d3c1a3f84b077d64559f399577b642ab2f792ceddb944ed3963f071d3eb8b18840f98faa6bbc3aa98eaf6d138cb2102b3340593a980aaf56859e3ef5f3bc8af
|
7
|
+
data.tar.gz: b83effefd44a2d04dde64173b458a01171809747490b4b447b75d5e5861f51927877ed3c6d0ef48e30555b7431e7bd16bb2ced012ad62b0409ecaf421badd11d
|
data/README.md
CHANGED
@@ -62,35 +62,38 @@ In this example, we have a page with a title (string) and a data (jsonb) attribu
|
|
62
62
|
The data is:
|
63
63
|
|
64
64
|
```ruby
|
65
|
-
@page.data =
|
66
|
-
|
67
|
-
|
68
|
-
|
69
|
-
|
70
|
-
|
71
|
-
|
72
|
-
|
73
|
-
|
74
|
-
|
75
|
-
|
76
|
-
{
|
77
|
-
type: 'text',
|
78
|
-
attributes: {
|
79
|
-
body: '<p><b>This</b> is a text</p>'
|
80
|
-
}
|
65
|
+
@page.data = {
|
66
|
+
type: 'page',
|
67
|
+
children: [
|
68
|
+
{
|
69
|
+
type: 'row',
|
70
|
+
children: [
|
71
|
+
{
|
72
|
+
type: 'col',
|
73
|
+
attributes: {
|
74
|
+
size: 4,
|
75
|
+
offset: 0
|
81
76
|
},
|
82
|
-
|
83
|
-
|
84
|
-
|
85
|
-
|
86
|
-
|
77
|
+
children: [
|
78
|
+
{
|
79
|
+
type: 'text',
|
80
|
+
attributes: {
|
81
|
+
body: '<p><b>This</b> is a text</p>'
|
82
|
+
}
|
83
|
+
},
|
84
|
+
{
|
85
|
+
type: 'image',
|
86
|
+
attributes: {
|
87
|
+
src: 'https://c1.staticflickr.com/5/4089/4975306844_f849232195_b.jpg',
|
88
|
+
alt: 'Prométhée'
|
89
|
+
}
|
87
90
|
}
|
88
|
-
|
89
|
-
|
90
|
-
|
91
|
-
|
92
|
-
|
93
|
-
|
91
|
+
]
|
92
|
+
}
|
93
|
+
]
|
94
|
+
}
|
95
|
+
]
|
96
|
+
}
|
94
97
|
```
|
95
98
|
|
96
99
|
The view is:
|
@@ -102,13 +105,15 @@ The view is:
|
|
102
105
|
Which renders to:
|
103
106
|
|
104
107
|
```html
|
105
|
-
<div class="
|
106
|
-
<div class="
|
107
|
-
<div class="promethee__component promethee__component--
|
108
|
-
<
|
109
|
-
|
110
|
-
|
111
|
-
<
|
108
|
+
<div class="promethee">
|
109
|
+
<div class="row promethee__component promethee__component--row">
|
110
|
+
<div class="col-md-4 promethee__component promethee__component--col">
|
111
|
+
<div class="promethee__component promethee__component--text">
|
112
|
+
<p><b>This</b> is a text</p>
|
113
|
+
</div>
|
114
|
+
<div class="promethee__component promethee__component--image">
|
115
|
+
<img src="https://c1.staticflickr.com/5/4089/4975306844_f849232195_b.jpg" alt="Prométhée">
|
116
|
+
</div>
|
112
117
|
</div>
|
113
118
|
</div>
|
114
119
|
</div>
|
@@ -142,6 +147,7 @@ This would do quite the same thing:
|
|
142
147
|
With javascript set:
|
143
148
|
```
|
144
149
|
//= require promethee
|
150
|
+
//= require promethee-editor
|
145
151
|
```
|
146
152
|
|
147
153
|
With stylesheets set:
|
@@ -168,17 +174,12 @@ In the edit, the component description looks like:
|
|
168
174
|
}
|
169
175
|
```
|
170
176
|
|
171
|
-
####
|
177
|
+
#### The editor previews in an iframe
|
172
178
|
|
173
|
-
|
174
|
-
When
|
175
|
-
This is the first problem of the kind, but many others would follow: stylesheet conflicts, bootstrap parameters (number of columns...) conflicts, maybe javascript conflicts...
|
179
|
+
To be able to preview responsivity, there is a POST "promethee/preview" route.
|
180
|
+
When you send your data, it renders the page in the default layout.
|
176
181
|
|
177
|
-
|
178
|
-
The editor creates an iframe.
|
179
|
-
The global scheme is illustrated in docs/iframe.html.
|
180
|
-
The idea is to create the angular app inside the iframe so it's completely independant.
|
181
|
-
Before the form is submit, we take the data from the angular app (through a plain javascript variable) and put it in the form input.
|
182
|
+
This is used to generate a live responsive preview.
|
182
183
|
|
183
184
|
### Roadmap
|
184
185
|
- ~~Gem setup~~
|
@@ -191,20 +192,22 @@ Before the form is submit, we take the data from the angular app (through a plai
|
|
191
192
|
- ~~Show Image (http)~~
|
192
193
|
- ~~Show Video (http vimeo / youtube)~~
|
193
194
|
- ~~Edit Row~~
|
194
|
-
- ~~Edit Col~~
|
195
195
|
- ~~Edit Text~~
|
196
196
|
- ~~Edit Image (http)~~
|
197
197
|
- ~~Edit Video (http)~~
|
198
|
-
-
|
199
|
-
-
|
198
|
+
- ~~Preview in iframe~~
|
199
|
+
- ~~Preview~~
|
200
|
+
- ~~Fullscreen~~
|
200
201
|
- Hooks (needed for image and video)
|
202
|
+
- promethee-i18n
|
203
|
+
- Component versioning
|
204
|
+
- Edit in a column
|
205
|
+
- UI et branding
|
201
206
|
- Gallery
|
202
207
|
- Menu
|
203
208
|
- Tab
|
204
209
|
- Cover
|
205
210
|
- Chapter (or maybe it's a cover too?)
|
206
|
-
- Preview
|
207
|
-
- Fullscreen
|
208
211
|
|
209
212
|
## Development
|
210
213
|
After checking out the repo, run `bin/setup` to install dependencies. You can also run `bin/console` for an interactive prompt that will allow you to experiment.
|
@@ -212,7 +215,7 @@ After checking out the repo, run `bin/setup` to install dependencies. You can al
|
|
212
215
|
To install this gem onto your local machine, run `bundle exec rake install`. To release a new version, update the version number in `version.rb`, and then run `bundle exec rake release`, which will create a git tag for the version, push git commits and tags, and push the `.gem` file to [rubygems.org](https://rubygems.org).
|
213
216
|
|
214
217
|
## Contributing
|
215
|
-
Bug reports and pull requests are welcome on GitHub at https://github.com/
|
218
|
+
Bug reports and pull requests are welcome on GitHub at https://github.com/lespoupeesrusses/promethee. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the [Contributor Covenant](http://contributor-covenant.org) code of conduct.
|
216
219
|
|
217
220
|
## Code of Conduct
|
218
|
-
Everyone interacting in the Promethee project’s codebases, issue trackers, chat rooms and mailing lists is expected to follow the [code of conduct](https://github.com/
|
221
|
+
Everyone interacting in the Promethee project’s codebases, issue trackers, chat rooms and mailing lists is expected to follow the [code of conduct](https://github.com/lespoupeesrusses/promethee/blob/master/CODE_OF_CONDUCT.md).
|
@@ -1,59 +0,0 @@
|
|
1
|
-
//= require tinymce
|
2
|
-
//= require jquery
|
3
|
-
//= require bootstrap
|
4
|
-
//= require angular
|
5
|
-
//= require angular-ui-tinymce-rails
|
6
|
-
//= require angular-drag-and-drop-lists
|
7
|
-
//= require_self
|
8
|
-
//= require_tree './promethee'
|
9
|
-
|
10
|
-
Promethee = function(id, data) {
|
11
|
-
this.id = id;
|
12
|
-
this.data = data;
|
13
|
-
};
|
14
|
-
|
15
|
-
Promethee.prototype = {
|
16
|
-
constructor: Promethee,
|
17
|
-
dependencies: ['ui.tinymce', 'dndLists'],
|
18
|
-
|
19
|
-
get app() {
|
20
|
-
if(!this.initialized) this.initialize();
|
21
|
-
return this._app;
|
22
|
-
},
|
23
|
-
|
24
|
-
get initialized() {
|
25
|
-
return !!this._app;
|
26
|
-
},
|
27
|
-
|
28
|
-
initialize: function() {
|
29
|
-
this._app = angular
|
30
|
-
.module(this.id, this.dependencies)
|
31
|
-
.constant('promethee', this)
|
32
|
-
.value('state', {
|
33
|
-
editing: false
|
34
|
-
})
|
35
|
-
|
36
|
-
this.app.filter('htmlSafe', ['$sce', function($sce) {
|
37
|
-
return function(val) {
|
38
|
-
return $sce.trustAsHtml(val);
|
39
|
-
};
|
40
|
-
}]);
|
41
|
-
|
42
|
-
this.app.filter('urlSafe', ['$sce', function($sce) {
|
43
|
-
return function(val) {
|
44
|
-
return $sce.trustAsResourceUrl(val);
|
45
|
-
};
|
46
|
-
}]);
|
47
|
-
|
48
|
-
this.app.filter('humanize', function() {
|
49
|
-
return function(val) {
|
50
|
-
val = (val + '').replace(/_/g, ' ').replace(/([A-Z])/g, ' $1').replace(/\s\s+/, ' ').trim();
|
51
|
-
return val[0].toUpperCase() + val.substring(1).toLowerCase();
|
52
|
-
};
|
53
|
-
});
|
54
|
-
|
55
|
-
this.constructor.Controller.initialize(this);
|
56
|
-
|
57
|
-
Promethee.app = this.app;
|
58
|
-
}
|
59
|
-
};
|
@@ -1,89 +1,41 @@
|
|
1
1
|
@import 'bootstrap'
|
2
|
-
|
3
|
-
@import 'promethee-editor/variables'
|
4
2
|
@import 'font-awesome.css'
|
5
3
|
@import 'material_icons.css'
|
6
|
-
@import 'promethee-editor/mixins'
|
7
4
|
|
5
|
+
$promethee-grey: #bbb
|
6
|
+
$promethee-transparent-grey: transparentize($promethee-grey, .8)
|
7
|
+
$promethee-light-grey: #eee
|
8
8
|
$promethee-color: #ff9900
|
9
9
|
|
10
|
-
|
11
|
-
|
10
|
+
@import 'promethee-editor/mover'
|
11
|
+
@import 'promethee-editor/preview'
|
12
|
+
@import 'promethee-editor/component'
|
12
13
|
|
14
|
+
.promethee-editor
|
13
15
|
background: white
|
16
|
+
position: relative
|
17
|
+
&--fullscreen
|
18
|
+
position: fixed
|
19
|
+
left: 0
|
20
|
+
right: 0
|
21
|
+
bottom: 0
|
22
|
+
top: 0
|
23
|
+
overflow: auto
|
24
|
+
&--preview
|
25
|
+
overflow: hidden
|
14
26
|
|
15
|
-
|
27
|
+
&__navbar
|
16
28
|
border-radius: 0
|
17
29
|
border: none
|
18
30
|
border-bottom: 2px solid $promethee-color
|
19
31
|
background: transparent
|
20
32
|
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
list-style: none
|
25
|
-
margin: 6px
|
26
|
-
|
27
|
-
&__page
|
28
|
-
margin-left: -6px
|
29
|
-
margin-right: -6px
|
30
|
-
|
31
|
-
&--preview
|
32
|
-
.promethee-editor__toolbar
|
33
|
-
display: none
|
34
|
-
.promethee-editor__component
|
35
|
-
border: none
|
36
|
-
margin: 0
|
37
|
-
.promethee-editor__page
|
38
|
-
margin: 0 auto
|
39
|
-
&--mobile
|
40
|
-
.promethee-editor__page
|
41
|
-
width: 375px
|
42
|
-
border-left: 1px dotted #eee
|
43
|
-
border-right: 1px dotted #eee
|
44
|
-
&--tablet
|
45
|
-
.promethee-editor__page
|
46
|
-
width: 768px
|
47
|
-
border-left: 1px dotted #eee
|
48
|
-
border-right: 1px dotted #eee
|
49
|
-
|
50
|
-
&__sidebar
|
51
|
-
background: $promethee-light-grey
|
52
|
-
width: 300px
|
53
|
-
flex-grow: 0
|
54
|
-
flex-shrink: 0
|
55
|
-
|
56
|
-
&__content
|
57
|
-
flex-grow: 1
|
58
|
-
flex-shrink: 1
|
59
|
-
|
60
|
-
&__components
|
61
|
-
min-height: 30px
|
62
|
-
|
63
|
-
&__component
|
64
|
-
background: #fff
|
65
|
-
border: 1px solid #eee
|
66
|
-
margin: 6px
|
67
|
-
overflow: auto
|
68
|
-
|
69
|
-
&--text
|
70
|
-
.mce-tinymce
|
71
|
-
border: none
|
72
|
-
|
73
|
-
.mce-panel
|
74
|
-
border-top-color: $promethee-transparent-grey
|
75
|
-
|
76
|
-
.mce-btn-group:not(:first-child)
|
77
|
-
border-left-color: $promethee-transparent-grey
|
78
|
-
|
79
|
-
.mce-top-part::before
|
80
|
-
box-shadow: none
|
81
|
-
|
82
|
-
&--final
|
83
|
-
background: #fff
|
33
|
+
&__button
|
34
|
+
color: $promethee-color
|
35
|
+
margin-left: 10px
|
84
36
|
|
85
37
|
&__toolbar
|
86
|
-
background: #
|
38
|
+
background: #eee
|
87
39
|
padding: 10px
|
88
40
|
font-size: 11px
|
89
41
|
text-transform: uppercase
|
@@ -91,15 +43,8 @@ $promethee-color: #ff9900
|
|
91
43
|
color: $promethee-color
|
92
44
|
&, *
|
93
45
|
user-select: none
|
94
|
-
cursor: move
|
95
46
|
|
96
47
|
&__wrapper
|
97
48
|
padding: 10px
|
98
49
|
|
99
|
-
|
100
|
-
position: fixed
|
101
|
-
left: 0
|
102
|
-
right: 0
|
103
|
-
bottom: 0
|
104
|
-
top: 0
|
105
|
-
overflow: auto
|
50
|
+
|
@@ -0,0 +1,67 @@
|
|
1
|
+
.promethee-editor__mover
|
2
|
+
transform-origin: top
|
3
|
+
transition: transform ease-out 0.5s
|
4
|
+
transform: scale(0.3)
|
5
|
+
&.ng-hide
|
6
|
+
transform: scale(1)
|
7
|
+
.row, .col
|
8
|
+
position: relative
|
9
|
+
&--draggable
|
10
|
+
h4
|
11
|
+
font-size: 11px
|
12
|
+
text-transform: uppercase
|
13
|
+
font-weight: bold
|
14
|
+
color: $promethee-color
|
15
|
+
padding: 0 0 0 3px
|
16
|
+
margin: 0
|
17
|
+
&--row
|
18
|
+
padding-left: 10px
|
19
|
+
&--droppable
|
20
|
+
position: relative
|
21
|
+
background: white
|
22
|
+
width: 200px
|
23
|
+
height: 50px
|
24
|
+
&--hidden
|
25
|
+
visibility: hidden
|
26
|
+
&--row
|
27
|
+
display: none
|
28
|
+
&--first
|
29
|
+
display: block
|
30
|
+
position: absolute
|
31
|
+
top: 0
|
32
|
+
left: -25px
|
33
|
+
width: 50px
|
34
|
+
height: 200px
|
35
|
+
&--inside-column
|
36
|
+
position: absolute
|
37
|
+
top: 0
|
38
|
+
right: -25px
|
39
|
+
width: 50px
|
40
|
+
height: 200px
|
41
|
+
&--dragged
|
42
|
+
opacity: 0.25
|
43
|
+
.ui-droppable-hover
|
44
|
+
opacity: 1 !important
|
45
|
+
margin-bottom: 0
|
46
|
+
.ui-droppable-active
|
47
|
+
background: $promethee-color
|
48
|
+
opacity: 0.5
|
49
|
+
// By default, nothing is dropped in rows
|
50
|
+
&--dragging
|
51
|
+
.promethee-editor__mover--droppable.promethee-editor__mover--droppable--row
|
52
|
+
display: none
|
53
|
+
// Except for columns, which can be dropped only on rows
|
54
|
+
&--dragging.promethee-editor__mover--dragging--column
|
55
|
+
.promethee-editor__mover--droppable
|
56
|
+
display: none
|
57
|
+
// It's a little specific, columns can be dropped on rows "first droppable", or on columns "inside droppables"
|
58
|
+
&.promethee-editor__mover--droppable.promethee-editor__mover--droppable--row--inside-column,
|
59
|
+
&.promethee-editor__mover--droppable.promethee-editor__mover--droppable--row--first
|
60
|
+
display: block
|
61
|
+
.video-neutralizing-overlay
|
62
|
+
background: transparent
|
63
|
+
position: absolute
|
64
|
+
top: 0
|
65
|
+
left: 0
|
66
|
+
right: 0
|
67
|
+
bottom: 0
|
@@ -0,0 +1,25 @@
|
|
1
|
+
.promethee-editor__preview
|
2
|
+
position: relative
|
3
|
+
height: 100%
|
4
|
+
min-height: 500px
|
5
|
+
background: black
|
6
|
+
margin-top: -20px
|
7
|
+
&--frame
|
8
|
+
transition: width 1s, left 1s, margin 1s
|
9
|
+
position: absolute
|
10
|
+
height: 100%
|
11
|
+
&--mobile
|
12
|
+
.promethee-editor__preview--frame
|
13
|
+
left: 50%
|
14
|
+
margin-left: -187px
|
15
|
+
width: 375px
|
16
|
+
&--tablet
|
17
|
+
.promethee-editor__preview--frame
|
18
|
+
left: 50%
|
19
|
+
margin-left: -384px
|
20
|
+
width: 768px
|
21
|
+
&--desktop
|
22
|
+
.promethee-editor__preview--frame
|
23
|
+
width: 100%
|
24
|
+
left: 0
|
25
|
+
right: 0
|