YaWK  24.1
Yet another WebKit
template-customcss.php
Go to the documentation of this file.
1 <?php
2 
3 use YAWK\backend;
4 use YAWK\db;
5 use YAWK\language;
6 use YAWK\settings;
7 use YAWK\template;
8 use YAWK\user;
9 
10 /** @var $db db */
11 /** @var $lang language */
12 
13 // new template object if not exists
14 if (!isset($template)) { $template = new template(); }
15 
16 // check if any action is requested
17 if (isset($_POST['save']) && (isset($_GET['action']) && (isset($_GET['id']))))
18 {
19  if (isset($_POST) && (!empty($_POST)))
20  {
21  if (isset($_GET['action']))
22  {
23  // process only if $_POST data is set and not empty
24  // walk through save requests
25  // position properties
26  if ($_GET['action'] === "template-customcss")
27  {
28  if (isset($_POST['customCSS']) && (!empty($_POST['customCSS'])))
29  {
30  // save the content to /system/template/$NAME/css/custom.css
31  $template->setCustomCssFile($db, $_POST['customCSS'], 0, $_GET['id']);
32  // save a minified version to /system/template/$NAME/css/custom.min.css
33  $template->setCustomCssFile($db, $_POST['customCSS'], 1, $_GET['id']);
34  }
35  }
36  }
37  }
38 }
39 ?>
40 <?php
41 // get settings for editor
42 $editorSettings = settings::getEditorSettings($db, 14);
43 ?>
44 <!-- include summernote css/js-->
45 <!-- include codemirror (codemirror.css, codemirror.js, xml.js) -->
46 <link rel="stylesheet" type="text/css" href="../system/engines/codemirror/codemirror.min.css">
47 <link rel="stylesheet" type="text/css" href="../system/engines/codemirror/themes/<?php echo $editorSettings['editorTheme']; ?>.css">
48 <link rel="stylesheet" type="text/css" href="../system/engines/codemirror/show-hint.min.css">
49 <script type="text/javascript" src="../system/engines/codemirror/codemirror-compressed.js"></script>
50 <script type="text/javascript" src="../system/engines/codemirror/auto-refresh.js"></script>
51 
52 <!-- SUMMERNOTE -->
53 <link href="../system/engines/summernote/dist/summernote.css" rel="stylesheet">
54 <script src="../system/engines/summernote/dist/summernote.min.js"></script>
55 <script src="../system/engines/summernote/dist/summernote-cleaner.js"></script>
56 <script src="../system/engines/summernote/dist/summernote-image-attributes.js"></script>
57 <script src="../system/engines/summernote/dist/summernote-floats-bs.js"></script>
58 
59 <script type="text/javascript">
60  $(document).ready(function() {
61  // TRY TO DISABLE CTRL-S browser hotkey
62  function saveHotkey() {
63  // simply disables save event for chrome
64  $(window).keypress(function (event) {
65  if (!(event.which === 115 && (navigator.platform.match("Mac") ? event.metaKey : event.ctrlKey)) && !(event.which === 19)) return true;
66  event.preventDefault();
67  formmodified=0; // do not warn user, just save.
68  return false;
69  });
70  // used to process the cmd+s and ctrl+s events
71  $(document).keydown(function (event) {
72  if (event.which === 83 && (navigator.platform.match("Mac") ? event.metaKey : event.ctrlKey)) {
73  event.preventDefault();
74  $('#savebutton').click(); // SAVE FORM AFTER PRESSING STRG-S hotkey
75  formmodified=0; // do not warn user, just save.
76  // save(event);
77  return false;
78  }
79  });
80  }
81  saveHotkey();
82 
83  // textarea that will be transformed into editor
84  const editor = ('textarea#summernote');
85  const savebutton = ('#savebutton');
86  const savebuttonIcon = ('#savebuttonIcon');
87  // ok, lets go...
88  // we need to check if user clicked on save button
89  $(savebutton).click(function() {
90  $(savebutton).removeClass('btn btn-success').addClass('btn btn-warning disabled');
91  $(savebuttonIcon).removeClass('fa fa-check').addClass('fa fa-spinner fa-spin fa-fw');
92  // to save, even if the editor is currently opened in code view
93  // we need to check if codeview is currently active:
94  if ($(editor).summernote('codeview.isActivated')) {
95  // if so, turn it off.
96  $(editor).summernote('codeview.deactivate');
97  }
98  // to display images in frontend correctly, we need to change the path of every image.
99  // to do that, the current value of textarea will be read into var text and search/replaced
100  // and written back into the textarea. utf-8 encoding/decoding happens in php, before saving into db.
101  // get the value of summernote textarea
102  const text = $(editor).val();
103  // search for <img> tags and revert src ../ to set correct path for frontend
104  const frontend = text.replace(/<img src=\"..\/media/g,"<img src=\"media");
105  // put the new string back into <textarea>
106  $(editor).val(frontend); // to make sure that saving works
107  });
108 
109  // BEFORE SUMMERNOTE loads: 3 important lines of code!
110  // to display images in backend correctly, we need to change the path of every image.
111  // procedure is the same as above (see #savebutton.click)
112  // get the value of summernote textarea
113  const text = $(editor).val();
114  // search for <img> tags and update src ../ to get images viewed in summernote
115  const backend = text.replace(/<img src=\"media/g,"<img src=\"../media");
116  // put the new string back into <textarea>
117  $(editor).val(backend); // set new value into textarea
118 
119  // summernote.init -
120  // LOAD SUMMERNOTE IN CODEVIEW ON STARTUP
121  $(editor).on('summernote.init', function() {
122  // toggle editor to codeview
123  $(editor).summernote('codeview.toggle');
124  });
125 
126  // INIT SUMMERNOTE EDITOR
127  $(editor).summernote({ // set editor itself
128  height: <?php echo $editorSettings['editorHeight']; ?>, // set editor height
129  minHeight: null, // set minimum height of editor
130  maxHeight: null, // set maximum height of editor
131  focus: true, // set focus to editable area after initializing summernote
132  toolbar: [
133  // load an empty toolbar.
134  // in that case: just a plain code editor. no mice cinema.
135  ],
136  // popover tooltips
137  popover: {
138  image: [
139  ['imagesize', ['imageSize100', 'imageSize50', 'imageSize25']],
140  /* ['float', ['floatLeft', 'floatRight', 'floatNone']], // those are the old regular float buttons */
141  ['floatBS', ['floatBSLeft', 'floatBSNone', 'floatBSRight']], // bootstrap class buttons (float/pull)
142  ['custom', ['imageAttributes', 'imageShape']], // forked plugin: image-attributes.js
143  ['remove', ['removeMedia']]
144  ]
145  },
146  // language for plugin image-attributes.js
147  lang: '<?php echo $lang['CURRENT_LANGUAGE']; ?>',
148 
149  // powerup the codeview with codemirror theme
150  codemirror: { // codemirror options
151  theme: '<?php echo $editorSettings['editorTheme']; ?>', // codeview theme
152  lineNumbers: true, // display lineNumbers true|false
153  undoDepth: <?php echo $editorSettings['editorUndoDepth']; ?>, // how many undo steps should be saved? (default: 200)
154  smartIndent: <?php echo $editorSettings['editorSmartIndent']; ?>, // better indent
155  indentUnit: <?php echo $editorSettings['editorIndentUnit']; ?>, // how many spaces auto indent? (default: 2)
156  scrollbarStyle: null, // styling of the scrollbars
157  matchBrackets: <?php echo $editorSettings['editorMatchBrackets']; ?>, // highlight corresponding brackets
158  autoCloseBrackets: <?php echo $editorSettings['editorCloseBrackets'];?>, // auto insert close brackets
159  autoCloseTags: <?php echo $editorSettings['editorCloseTags']; ?>, // auto insert close tags after opening
160  value: "<html>\n " + document.documentElement.innerHTML + "\n</html>", // all html
161  mode: "css", // editor mode
162  matchTags: {bothTags: <?php echo $editorSettings['editorMatchTags']; ?>}, // hightlight matching tags: both
163  extraKeys: {
164  "Ctrl-J": "toMatchingTag", // CTRL-J to jump to next matching tab
165  "Ctrl-Space": "autocomplete" // CTRL-SPACE to open autocomplete window
166  },
167  styleActiveLine: <?php echo $editorSettings['editorActiveLine']; ?>, // highlight the active line (where the cursor is)
168  autoRefresh: true
169  },
170 
171  // plugin: summernote-cleaner.js
172  // this allows to copy/paste from word, browsers etc.
173  cleaner: { // does the job well: no messy code anymore!
174  action: 'both', // both|button|paste 'button' only cleans via toolbar button, 'paste' only clean when pasting content, both does both options.
175  newline: '<br>' // Summernote's default is to use '<p><br></p>'
176 
177  // silent mode:
178  // from my pov it is not necessary to notify the user about the code cleaning process.
179  // it throws just a useless, annoying bubble everytime you hit the save button.
180  // BUT: if you need this notification, you can enable it by uncommenting the following 3 lines
181  // notTime:2400, // Time to display notifications.
182  // notStyle:'position:absolute;bottom:0;left:2px', // Position of notification
183  // icon:'<i class="note-icon">[Your Button]</i>' // Display an icon
184  }
185  }); // end summernote
186 
187  }); // end document ready
188 </script>
189 <?php
190 // new template object if not exists
191 if (!isset($template)) { $template = new template(); }
192 // new user object if not exists
193 if (!isset($user)) { $user = new user($db); }
194 // $_GET['id'] or $_POST['id'] holds the template ID to edit.
195 // If any one of these two is set, we're in "preview mode" - this means:
196 // The user database holds two extra cols: overrideTemplate(int|0,1) and templateID
197 // Any user who is allowed to override the Template, can edit a template and view it
198 // in the frontend. -Without affecting the current active theme for any other user.
199 // This is pretty cool when working on a new design: because you see changes, while others wont.
200 // In theory, thereby every user can have a different frontend template activated.
201 
202 // load properties of current active template
203 // get ID of current active template
204 $getID = settings::getSetting($db, "selectedTemplate");
205 // load properties of current active template
206 $template->loadProperties($db, $getID);
207 ?>
208 
209 <?php
210 // TEMPLATE WRAPPER - HEADER & breadcrumbs
211 echo "
212  <!-- Content Wrapper. Contains page content -->
213  <div class=\"content-wrapper\" id=\"content-FX\">
214  <!-- Content Header (Page header) -->
215  <section class=\"content-header\">";
216 // draw Title on top
217 echo backend::getTitle($lang['TPL'], "custom.css");
218 echo backend::getTemplateBreadcrumbs($lang);
219 echo"</section><!-- Main content -->
220  <section class=\"content\">";
221 /* page content start here */
222 ?>
223 <form id="template-edit-form" action="index.php?page=template-customcss&action=template-customcss&id=<?php echo $getID; ?>" method="POST">
224  <!-- title header -->
225  <!-- REDESIGN -->
226  <div class="box">
227  <div class="box-body">
228  <div class="col-md-10">
229  <?php echo "<h4><i class=\"fa fa-css3\"></i> &nbsp;Custom.CSS <small>$lang[TPL_CUSTOMCSS_SUBTEXT]</small></h4>"; ?>
230  </div>
231  <div class="col-md-2">
232  <button class="btn btn-success pull-right" id="savebutton" name="save" style="margin-top:2px;"><i class="fa fa-check" id="savebuttonIcon"></i>&nbsp;&nbsp;<?php echo $lang['CUSTOM_CSS_SAVE']; ?></button>
233  </div>
234  </div>
235  </div>
236 
237  <!-- CUSTOM CSS -->
238  <div class="row">
239  <div class="col-md-8 animated fadeIn">
240  <?php $customCSS = $template->getCustomCSSFile($db, $template->id); ?>
241  <textarea name="customCSS" cols="64" rows="28" id="summernote"><?php echo $customCSS; ?></textarea>
242  <label for="summernote"><small><?php echo $lang['YOU_EDIT']; ?>:</small> &nbsp;system/templates/<?php echo $template->name; ?>/css/custom.css</label>
243  </div>
244  <div class="col-md-4">
245  <div class="box box-default">
246  <div class="box-header with-border">
247  <h3 class="box-title"><?php echo $template->name; ?>/css/custom.css</h3>
248  </div>
249  <div class="box-body">
250  <?php echo $lang['CUSTOM_CSS_DESC']; ?>
251  <br><br>
252  <i><?php echo $lang['CUSTOM_CSS_HELP']; ?></i><br>
253  &raquo; <a href="http://www.w3schools.com/css/" title="open CSS overview in new TAB" target="_blank">w3schools.com/css/</a>
254 
255  <hr>
256  <b><i class="fa fa-lightbulb-o"></i> <?php echo $lang['DID_YOU_KNOW']; ?></b><br>
257  <i><?php echo $lang['TIP_STRG_S']; ?></i>
258  </div>
259 
260  </div>
261  </div>
262  </div>
263 </form>
$lang
print $lang['FILEMAN_UPLOAD']
Definition: filemanager.php:385
YAWK\backend
Backend class serves a few useful functions for the admin backend.
Definition: backend.php:27
YAWK\db
Mysqli database class; returns db connection object.
Definition: db.php:16
YAWK\language
The language class - support multilingual backend.
Definition: language.php:17
YAWK\settings
Settings class: get and set YaWK system settings.
Definition: settings.php:9
YAWK\template
The template controller - get and set template settings.
Definition: template.php:16
YAWK\user
The default user class. Provide all functions to handle the user object.
Definition: user.php:17
window
function window
Definition: fuckAdBlock.js:8
on
FuckAdBlock prototype on
Definition: fuckAdBlock.js:227
b
function b(a)
Definition: browser.js:14
a
function a
Definition: browser.js:14
event
c jPlayer event
Definition: jquery.jplayer.min.js:16
type
type
Definition: menu-new.php:35
title
print $page title
Definition: page-edit.php:377
$_GET
print $_GET['id']
Definition: page-edit.php:357
i
function i(e, t)
Definition: plyr.js:1
nbsp
<!-- backend language -->< h3 >< i class="fa fa-language"></i > & nbsp
Definition: settings-language.php:206
name
$template name
Definition: template-assets.php:26
$editorSettings
if(!isset($template)) if(isset($_POST['save']) &&(isset($_GET['action']) &&(isset($_GET['id'])))) $editorSettings
Definition: template-customcss.php:42
$getID
if(!isset($template)) if(!isset($user)) $getID
Definition: template-customcss.php:204
ready
document ready(function() { $('a[data-confirm]').click(function(ev) { modal='#dataConfirmModal';var href=$(this).attr('href');var title=$(this).attr('title');var icon=$(this).attr('data-icon');if(!icon) { icon='fa fa-trash-o';} if(!$(modal).length) { $('body').append('< div id="dataConfirmModal" class="modal fade" role="dialog" aria-labelledby="dataConfirmLabel" aria-hidden="true">< div class="modal-dialog">< div class="modal-content">< div class="modal-header">< button type="button" class="close" data-dismiss="modal" aria-hidden="true">< i class="fa fa-times"></i ></button >< br >< div class="col-md-1">< h3 class="modal-title">< i class="'+icon+'"></i ></h3 ></div >< div class="col-md-11">< h3 class="modal-title" id="dataConfirmLabel">'+title+'</h3 ></div ></h3 ></div >< div class="modal-body"></div >< div class="modal-footer">< button type="button" class="btn btn-default" data-dismiss="modal" aria-hidden="true">Abbrechen</button >< a type="button" class="btn btn-danger" id="dataConfirmOK">< i class="'+icon+'"></i > L &ouml;schen</a ></div ></div ></div ></div >');} $(modal).find('.modal-body').text($(this).attr('data-confirm'));$('#dataConfirmOK').attr('href', href);$(modal).modal({show:true});return false;});$('#terminateUser').click(function() { var terminate=window.confirm("ACHTUNG!\nDas wird Deinen Account permanent deaktivieren.\n"+"Bist Du Dir sicher, dass Du das tun willst?");if(terminate===true) { var terminateUser=window.confirm("Bist Du Dir wirklich ganz sicher?\n"+"Diese Aktion kann nicht rueckgaengig gemacht werden.");if(terminateUser===true) { $.get('system/templates/YaWK-bootstrap3/js/terminate-user.php', function(data) { if(data==="true") { setTimeout("window.location='logout.html'", 0);} else { alert("Fehler: "+data);} });} } });function dismissNotifications() { $.ajax({ url:'js/dismiss-notifications.php', type:'POST', success:function(data) { if(!data) { alert('Something went wrong!');return false;} } });$("#bell-label").fadeOut();$('#notification-header').html('You have 0 notifications');$('#notification-menu').fadeOut();} $("#dismiss").click(function() { dismissNotifications();});function disableButtons(delay) { $('#loginButton').removeClass().addClass('btn btn-success disabled').attr('id', 'LOGIN_FORBIDDEN');$('#resetPasswordButton').removeClass().addClass('btn btn-danger disabled');setTimeout(function() { $('#LOGIN_FORBIDDEN').attr('id', 'loginButton').removeClass().addClass('btn btn-success');$('#resetPasswordButton').removeClass().addClass('btn btn-danger');}, delay);} $("#loginButton").click(function(){ if($('#loginButton').length > 0) { if($('#loginButton').hasClass('btn') &&$('#loginButton').hasClass('btn-success') &&$('#loginButton').hasClass('disabled')) { } else { $("#loginForm").submit();disableButtons(10000);} } else if($('#LOGIN_FORBIDDEN').length > 0) { if($('#LOGIN_FORBIDDEN').hasClass('btn') &&$('#LOGIN_FORBIDDEN').hasClass('btn-success') &&$('#LOGIN_FORBIDDEN').hasClass('disabled')) { } else { } } });$("#blockedBtn").hover(function() { $("#blockedBtn").hide();$("#askBtn").fadeIn(820);});})