├── lang
├── de_de.lang
└── en_en.lang
├── package.yml
├── boot.php
├── LICENSE
├── assets
├── css
│ └── frontend_edit.css
└── js
│ ├── frontend_edit.js
│ └── jquery-3.1.1.min.js
├── lib
├── frontend_edit.php
└── frontend_edit_abstract.php
└── README.md
/lang/de_de.lang:
--------------------------------------------------------------------------------
1 | accessdenied_blocked = gesperrt
2 |
3 | # Benennung für die Addonrechte, sichtbar innerhalb der REDAXO-Administration unter Benutzer > Rollen > Allgemein
4 |
5 | perm_general_accessdenied[] = Recht Für Accessdenied-AddOn
6 |
--------------------------------------------------------------------------------
/lang/en_en.lang:
--------------------------------------------------------------------------------
1 | accessdenied_blocked = blocked
2 |
3 | # Benennung für die Addonrechte, sichtbar innerhalb der REDAXO-Administration unter Benutzer > Rollen > Allgemein
4 |
5 | perm_general_accessdenied[] = Rights for accessdenied Addon
6 |
--------------------------------------------------------------------------------
/package.yml:
--------------------------------------------------------------------------------
1 | package: frontend_edit
2 | version: '1.0.0-alpha1'
3 | author: FriendsOfREDAXO
4 | supportpage: github.com/FriendsOfREDAXO/frontend_edit
5 |
6 | requires:
7 | packages:
8 | structure: '^2.1.0'
9 | redaxo: '^5.1.0'
10 | php:
11 | version: '>=5.6'
12 |
--------------------------------------------------------------------------------
/boot.php:
--------------------------------------------------------------------------------
1 | isAdmin()) {
11 |
12 | rex_extension::register('PACKAGES_INCLUDED', array('frontend_edit', 'init'), rex_extension::LATE);
13 |
14 | rex_extension::register('ART_INIT', function (rex_extension_point $ep) {
15 | $article = $ep->getParam('article');
16 | //$article->setSliceRevision($version);
17 | if ($article instanceof rex_article_content) {
18 | $article->getContentAsQuery();
19 | }
20 | $article->setEval(true);
21 | });
22 |
23 | rex_extension::register('OUTPUT_FILTER', ['frontend_edit', 'outputFilter'], rex_extension::LATE);
24 | }
25 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | The MIT License (MIT)
2 |
3 | Copyright (c) 2016 Friends Of REDAXO
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/assets/css/frontend_edit.css:
--------------------------------------------------------------------------------
1 | body {
2 | margin-top: 35px;
3 | }
4 | rex-frontend-edit, rex-frontend-edit-inner {
5 | display: none;
6 | }
7 |
8 | rex-frontend-edit.initialized {
9 | }
10 |
11 | rex-frontend-edit.initialized.rfe-buttons-visible {
12 | display: block;
13 | }
14 |
15 | rex-frontend-edit {
16 | position: absolute;
17 | margin: 0;
18 | z-index: 99999;
19 | background: #2e8f75;
20 | opacity: .5;
21 | min-width: 150px;
22 | box-shadow: 1px 1px 2px #000;
23 | }
24 |
25 | rex-frontend-edit:hover {
26 | opacity: 1;
27 | }
28 |
29 | rex-frontend-edit a {
30 | color: #fff;
31 | display: block;
32 | padding: 10px;
33 | }
34 |
35 | rex-frontend-edit-toolbar {
36 | position: fixed;
37 | top: 0;
38 | left: 0;
39 | z-index: 999999;
40 | width: 100%;
41 | height: 35px;
42 | background: #2e8f75;
43 | opacity: 1;
44 | }
45 |
46 | rex-frontend-edit-toolbar:hover {
47 | opacity: 1;
48 | }
49 |
50 | .rex-frontend-edit-toolbar-inner {
51 | color: #fff;
52 | padding: 0px 20px;
53 | position: absolute;
54 | top: 50%;
55 | transform: translateY(-50%);
56 | }
57 |
58 | .rfe-title {
59 | font-weight: bold;
60 | text-transform: uppercase;
61 | display: inline-block;
62 | }
63 |
64 | .rfe-title span:first-child {
65 | color: #d76f8a;
66 | }
67 |
68 | .rfe-title span:last-child {
69 | color: #fff;
70 | }
71 |
72 | .rex-frontend-edit-toolbar-inner ul {
73 | list-style: none;
74 | display: block;
75 | display: inline-block;
76 | margin-left: 50px;
77 | }
78 |
79 | .rex-frontend-edit-toolbar-inner ul li {
80 | list-style-type: none;
81 | display: inline-block;
82 | margin-left: 20px;
83 | cursor: pointer;
84 | }
85 |
86 | .rex-frontend-edit-toolbar a {
87 | color: #fff;
88 | }
89 |
--------------------------------------------------------------------------------
/lib/frontend_edit.php:
--------------------------------------------------------------------------------
1 | getSubject();
29 | $params = $ep->getParams();
30 |
31 |
32 | $module = rex_sql::factory();
33 | $module->setQuery('SELECT name FROM ' . rex::getTable('module') . ' WHERE id = ' . $params['module_id']);
34 |
35 | $slice_content = 'Block: ' . $module->getValue('name') . ' bearbeiten'.$subject;
43 |
44 | $ep->setSubject(trim($slice_content));
45 | }
46 |
47 | public static function outputFilter(rex_extension_point $ep)
48 | {
49 | $content = $ep->getSubject();
50 |
51 | // CSS-First in den head einbinden
52 | $before_head = '';
53 | $content = str_replace('', $before_head . '', $content);
54 |
55 | $before_body= '';
59 | $content = str_replace('', $before_body . '', $content);
60 |
61 | return $content;
62 | }
63 | }
64 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Frontend Edit - αlpha
2 |
3 | Vermutlich wird kein Feature für REDAXO so sehr gewünscht, wie Frontend Edit. Ich habe mit diesem AddOn den Startschuss gesetzt und bereits einen großen Teil der Logik als Proof-of-Concept realisiert.
4 |
5 | * Es wird bereits eine Toolbar ausgegeben (ähnlich wie bei Wordpress)
6 | * Der erste Button der Toolbar funktioniert bereits (die Slice-Edit-Buttons anzeigen)
7 | * Die Slice Edit Buttons werden schon an richtiger Stelle ausgegeben (siehe Tickets für weitere Hinweise)
8 |
9 | Layout und Codebasis sind nicht ausgearbeitet und werden noch überarbeitet und benötigen teilweise ein Refactoring. Ich möchte aber ungerne alles alleine machen und deshalb die ganze Community darum bitten, mitzumachen.
10 |
11 | 
12 | 
13 |
14 |
15 | Hinweise
16 | ----------
17 | * Ich habe bereits ein paar Tickets mit Infos geschrieben, bitte lesen!
18 | * Das AddOn ist noch nicht für den Produktiveinsatz nutzbar, da die meisten Funktionen noch fehlen
19 | * Das AddOn ist nur sichtbar wenn man im Backend eingeloggt und Admin ist (Admin-Mode wird im Final-Release entfernt)
20 | * Die Edit Buttons bekommen volle Opacity beim hovern.
21 |
22 | ToDo's
23 | ------------
24 | # Phase 1:
25 | * ~~Die Edit-Buttons mit dem Backend verlinken (easy)~~ (partly) done
26 | * Delete Cache Funktion mittels Parameter umsetzen und rex_article_cache::delete($aid, $clang) aufrufen (easy)
27 | * Layout optimieren, Icons hinzufügen
28 | * Code bereinigen und verbessern
29 | * Ggf. komplett auf jQuery verzichten (aktuell wird geprüft, ob jQuery im Frontend zur Verfügung steht, ansonsten nachgeladen. Ich hatte zuerst einen Vanilla-JS Ansatz gestartet, war mir aber vorerst für einen PoC zu aufwändig)
30 |
31 | # Phase 2:
32 | * Edit Button öffnet Modal im Frontend mit Slice-Block im Edit-Modus (iFrame Lösung o.Ä. tbd.)
33 | * Weitere Funktionen besprechen und API zur Verfügung stellen, damit Moduloutputs Inline-Editing anbieten können (über Classes)
34 |
35 | Wenn wir hier zusammen arbeiten, können wir ein tolles AddOn entwickeln, das der kompletten REDAXO-Gemeinschaft weiterhilft.
36 | FOR, ihr seid dran!
37 |
38 | Installation
39 | ------------
40 | Hinweis: dies ist kein Plugin!
41 |
42 | * Release herunterladen und entpacken.
43 | * Ordner umbenennen in `frontend_edit`.
44 | * In den Addons-Ordner legen: `/redaxo/src/addons`.
45 |
46 | Oder du benutzt das "zip_install" AddOn!
47 |
48 | Credits
49 | ---------------
50 | * AddOn by @Hirbod
51 | * Hilfe und Support @gharlan
52 | * Codeteilestücke aus: version, bloecks, css_above_the_fold (Danke an die Entwickler)
53 |
--------------------------------------------------------------------------------
/lib/frontend_edit_abstract.php:
--------------------------------------------------------------------------------
1 | isAvailable())
47 | {
48 | return $addon;
49 | }
50 | }
51 | return null;
52 | }
53 |
54 | /**
55 | * Returns the plugin class if this is extending a plugin
56 | * @return [type] [description]
57 | */
58 | protected static function plugin()
59 | {
60 | $addon = static::addon();
61 |
62 | if($addon && !empty(static::$plugin_name) && $addon->pluginExists(static::$plugin_name))
63 | {
64 | $plugin = $addon->getPlugin(static::$plugin_name);
65 | if($plugin->isAvailable())
66 | {
67 | return $plugin;
68 | }
69 | }
70 |
71 | return null;
72 | }
73 |
74 | public static function settings($key = null, $default = null)
75 | {
76 | return static::package()->getConfig($key, $default);
77 | }
78 |
79 | /**
80 | * Selects a value of a slice from the database
81 | * @param (int) $slice_id ID of the slice
82 | * @param (string) $key name of the value
83 | * @param (mixed) $default if the value is not contained in the database or set to NULL return this value (default is NULL)
84 | * @return (mixed) The slice's value
85 | */
86 | public static function getValueOfSlice($slice_id, $key, $default = null)
87 | {
88 | $slice_id = (int) $slice_id;
89 | $value = $default;
90 |
91 | if(!is_nan($slice_id) && $slice_id > 0)
92 | {
93 | $sql = rex_sql::factory();
94 | $sql->setTable(rex::getTablePrefix().'article_slice');
95 | $sql->setWhere(array('id' => $slice_id));
96 | $sql->select();
97 |
98 | if($sql->hasValue($key))
99 | {
100 | $value = $sql->getValue($key);
101 | }
102 |
103 | unset($sql);
104 | }
105 |
106 | return $value;
107 | }
108 | }
109 |
--------------------------------------------------------------------------------
/assets/js/frontend_edit.js:
--------------------------------------------------------------------------------
1 | var frontend_edit = frontend_edit || {};
2 |
3 | frontend_edit = {
4 | init: function() {
5 | this.checkForJquery(jqueryPath, function() {
6 | console.info('Frontend Editor is ready');
7 | frontend_edit.ready();
8 | });
9 | },
10 |
11 | ready: function() {
12 | this.createElements();
13 | this.setupFrontend();
14 | this.setupListener();
15 | },
16 |
17 | checkForJquery: function(url, callback) {
18 | if (typeof jQuery != 'undefined') {
19 | console.info('jQuery already available, skip loading!');
20 | callback();
21 | } else {
22 |
23 | console.info('WILL TRY TO LOAD LOAD JQUERY');
24 |
25 | // Adding the script tag to the head as suggested before
26 | var head = document.getElementsByTagName('head')[0];
27 | var script = document.createElement('script');
28 | script.type = 'text/javascript';
29 | script.src = url;
30 |
31 | // Then bind the event to the callback function.
32 | // There are several events for cross browser compatibility.
33 | script.onreadystatechange = callback;
34 | script.onload = callback;
35 |
36 | // Fire the loading
37 | head.appendChild(script);
38 |
39 | }
40 | },
41 |
42 | createElements: function() {
43 | document.createElement('rex-frontend-edit');
44 | document.createElement('rex-frontend-edit-toolbar');
45 | document.createElement('rex-frontend-edit-inner');
46 | document.createElement('rex-frontend-edit-elements');
47 | },
48 |
49 | debounce: function(func, wait, immediate) {
50 | var timeout;
51 | return function() {
52 | var context = this,
53 | args = arguments;
54 | var later = function() {
55 | timeout = null;
56 | if (!immediate) func.apply(context, args);
57 | };
58 | var callNow = immediate && !timeout;
59 | clearTimeout(timeout);
60 | timeout = setTimeout(later, wait);
61 | if (callNow) func.apply(context, args);
62 | };
63 | },
64 |
65 | setupFrontend: function() {
66 | $('rex-frontend-edit').each(function(index) {
67 |
68 | if(!$(this).hasClass('initialized')) {
69 | $(this).addClass('initialized');
70 | }
71 | var editableElement = $(this).nextAll(':not(rex-frontend-edit):visible:first').children(':first');
72 | var editableElementCenter = editableElement.height() / 2;
73 |
74 | /* TODO: need to discuss
75 | //var buttonPositionCentered = editableElement.offset().top + editableElementCenter - $(this).height();
76 |
77 | // element could be too high. If it's more then 300 px, we position it to the top
78 | if (buttonPositionCentered >= 300) {
79 | buttonPositionCentered = editableElement.offset().top > 50 ? editableElement.offset().top : 50;
80 | }
81 | */
82 |
83 | var buttonPositionCentered = editableElement.offset().top > 50 ? editableElement.offset().top : 50;
84 |
85 | if(editableElement == lastElement) {
86 | buttonPositionCentered = buttonPositionCentered + 50;
87 | }
88 |
89 | $(this).css({
90 | left: editableElement.offset().left,
91 | top: buttonPositionCentered
92 | });
93 |
94 | var lastElement = editableElement;
95 |
96 | });
97 |
98 | $('rex-frontend-edit + rex-frontend-edit').remove();
99 |
100 | if(!$('rex-frontend-edit-toolbar').length) {
101 | $('body').append('