YaWK  24.1
Yet another WebKit
template-typography.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 <!-- color picker -->
14 <script type="text/javascript" src="../system/engines/jquery/jscolor/jscolor.js"></script>
15 <!-- TAB collapse -->
16 <script type="text/javascript" src="../system/engines/jquery/bootstrap-tabcollapse.js"></script>
17 <!-- Javascript for positions tab -->
18 <script type="text/javascript">
19  /* reminder: check if form has changed and warns the user that he needs to save. */
20  $(document).ready(function () {
21 
22  // re-init js color to fix dynamic loading
23  jscolor.init();
24 
25  // TRY TO DISABLE CTRL-S browser hotkey
26  function saveHotkey() {
27  // simply disables save event for chrome
28  $(window).keypress(function (event) {
29  if (!(event.which === 115 && (navigator.platform.match("Mac") ? event.metaKey : event.ctrlKey)) && !(event.which === 19)) return true;
30  event.preventDefault();
31  formmodified=0; // do not warn user, just save.
32  return false;
33  });
34  // used to process the cmd+s and ctrl+s events
35  $(document).keydown(function (event) {
36  if (event.which === 83 && (navigator.platform.match("Mac") ? event.metaKey : event.ctrlKey)) {
37  event.preventDefault();
38  $('#savebutton').click(); // SAVE FORM AFTER PRESSING STRG-S hotkey
39  formmodified=0; // do not warn user, just save.
40  // save(event);
41  return false;
42  }
43  });
44  }
45  saveHotkey();
46 
47  formmodified=0; // status
48  $('form *').change(function(){ // if form has changed
49  formmodified=1; // set status
50  $('#savebutton').click(function(){ // if user clicked save
51  formmodified=0; // do not warn user, just save.
52  });
53  $('#addbutton').click(function(){ // if user clicked add new theme
54  formmodified=0; // do not warn user, just save the new theme.
55  });
56  });
57 
58  // now the function:
59  window.onbeforeunload = confirmExit; // before close
60  function confirmExit() { // dialog
61  if (formmodified === 1) { // if form has changed
62  return "<?php echo $lang['LEAVE_REQUEST']; ?>";
63  }
64  }
65  $(function() {
66  // for bootstrap 3 use 'shown.bs.tab', for bootstrap 2 use 'shown' in the next line
67  $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
68  // save the latest tab; use cookies if you like 'em better:
69  localStorage.setItem('lastTab', $(this).attr('href'));
70  });
71  // go to the latest tab, if it exists:
72  const lastTab = localStorage.getItem('lastTab');
73  if (lastTab) {
74  $('[href="' + lastTab + '"]').tab('show');
75  // to work correctly, we need to lowercase
76  const activeTab = lastTab.toLowerCase();
77  // and remove the first char (#)
78  const activeFolder = activeTab.slice(1);
79  // all done: set select default selected option
80  $('select option[value="'+activeFolder+'"]').prop('selected', true);
81  }
82  });
83 
84  // call tabCollapse: make the default bootstrap tabs responsive for handheld devices
85  $('#tabs').tabCollapse({
86  tabsClass: 'hidden-sm hidden-xs',
87  accordionClass: 'visible-sm visible-xs'
88  });
89 
90  $('[data-toggle="tooltip"]').tooltip();
91 
92  });
93 </script>
94 
95 <?php
96 // new template object if not exists
97 if (!isset($template)) { $template = new template(); }
98 // new user object if not exists
99 if (!isset($user)) { $user = new user($db); }
100 
101 // check, if a session is already running
102 if (!isset($_SESSION) || (empty($_SESSION)))
103 { // if not...
104  session_start();
105  $_SESSION['template'] = $template;
106 }
107 
108 // get ID of current active template
109 $selectedTemplateID = settings::getSetting($db, "selectedTemplate");
110 // load properties of current active template
111 $template->loadProperties($db, $selectedTemplateID);
112 // previewButton is an empty string - why? this should be checked
113 $previewButton = "";
114 // load all template settings into array
115 $templateSettings = template::getAllSettingsIntoArray($db, $user);
116 
117 ?>
118 <?php
119 // TEMPLATE WRAPPER - HEADER & breadcrumbs
120 echo "
121  <!-- Content Wrapper. Contains page content -->
122  <div class=\"content-wrapper\" id=\"content-FX\">
123  <!-- Content Header (Page header) -->
124  <section class=\"content-header\">";
125 // draw Title on top
126 echo backend::getTitle($lang['TPL'], $lang['DESIGN']);
127 echo backend::getTemplateBreadcrumbs($lang);
128 echo"</section><!-- Main content -->
129  <section class=\"content\">";
130 /* page content start here */
131 ?>
132 <form id="template-edit-form" action="index.php?page=template-save&action=template-typography&id=<?php echo $template->id; ?>" method="POST">
133  <!-- title header -->
134  <!-- REDESIGN -->
135  <div class="box">
136  <div class="box-body">
137  <div class="col-md-10">
138  <?php echo "<h4><i class=\"fa fa-text-height\"></i> &nbsp;$lang[TYPOGRAPHY] <small>$lang[TYPO_DETAILS]</small></h4>"; ?>
139  </div>
140  <div class="col-md-2">
141  <button class="btn btn-success pull-right" id="savebutton" name="save" style="margin-top:2px;"><i class="fa fa-check"></i>&nbsp;&nbsp;<?php echo $lang['TYPO_SAVE']; ?></button>
142  </div>
143  </div>
144  </div>
145 
146  <div class="box">
147  <div class="box-body">
148 
149  <h3><?php echo "$lang[FONTS_TYPES] <small>$lang[TPL_FONTS_SUBTEXT]"; ?></small></h3>
150  <div class="row">
151  <div class="col-md-6">
152 
153  <label for="testText"><?php echo $lang['TPL_FORM_TESTFIELD']; ?></label>
154  <div class="input-group">
155  <!-- <div class="input-group-addon" id="switchPreview" style="cursor: pointer;"><i class="fa fa-link" title="switch preview"></i></div> -->
156  <input id="testText" name="testText" placeholder="<?php echo $lang['TPL_FORM_TESTFIELD_PLACEHOLDER']; ?>" maxlength="84" class="form-control">
157  <span class="input-group-btn">
158  <button type="button" disabled id="resetTestText" class="btn btn-default" title="<?php echo $lang['RESET']; ?>"><i class="fa fa-refresh"></i></button>
159  </span>
160  </div>
161  <!-- common text settings (size, shadow, color...) -->
162  <?php // $template->getFormElements($db, $templateSettings, 2, $lang, $user); ?>
163  <?php // $template->getFormElements($db, $templateSettings, 3, $lang, $user); ?>
164  </div>
165  <div class="col-md-6">
166 
167  </div>
168  </div>
169  <hr>
170  <div class="row animated fadeIn">
171  <?php
172  $template->getFontRow($db, $lang, "h1", "h1", $templateSettings);
173  $template->getFontRow($db, $lang, "h2", "h2", $templateSettings);
174  $template->getFontRow($db, $lang, "h3", "h3", $templateSettings);
175  $template->getFontRow($db, $lang, "h4", "h4", $templateSettings);
176  $template->getFontRow($db, $lang, "h5", "h5", $templateSettings);
177  $template->getFontRow($db, $lang, "h6", "h6", $templateSettings);
178  ?>
179  </div>
180  <hr>
181  <div class="row">
182  <?php
183  $template->getFontRow($db, $lang, "globaltext", "globaltext", $templateSettings);
184  // $template->getFontRow($db, $lang, "menufont", "menufont", $templateSettings);
185  ?>
186  </div>
187 
188  <script>
189  $(document).ready(function () {
190 
191  // switch preview from text to link
192 
193  // call set default values and preview font function
194  previewFont($("#h1-fontfamily"), 'H1 Heading', 'h1-preview', $("#h1-preview"), $("#h1-size"), $("#h1-fontcolor"), $("#h1-fontshadowsize"), $("#h1-fontshadowcolor"), $("#h1-fontweight"), $("#h1-fontstyle"), $("#h1-textdecoration"));
195  previewFont($("#h2-fontfamily"), 'H2 Heading', 'h2-preview', $("#h2-preview"), $("#h2-size"), $("#h2-fontcolor"), $("#h2-fontshadowsize"), $("#h2-fontshadowcolor"), $("#h2-fontweight"), $("#h2-fontstyle"), $("#h2-textdecoration"));
196  previewFont($("#h3-fontfamily"), 'H3 Heading', 'h3-preview', $("#h3-preview"), $("#h3-size"), $("#h3-fontcolor"), $("#h3-fontshadowsize"), $("#h3-fontshadowcolor"), $("#h3-fontweight"), $("#h3-fontstyle"), $("#h3-textdecoration"));
197  previewFont($("#h4-fontfamily"), 'H4 Heading', 'h4-preview', $("#h4-preview"), $("#h4-size"), $("#h4-fontcolor"), $("#h4-fontshadowsize"), $("#h4-fontshadowcolor"), $("#h4-fontweight"), $("#h4-fontstyle"), $("#h4-textdecoration"));
198  previewFont($("#h5-fontfamily"), 'H5 Heading', 'h5-preview', $("#h5-preview"), $("#h5-size"), $("#h5-fontcolor"), $("#h5-fontshadowsize"), $("#h5-fontshadowcolor"), $("#h5-fontweight"), $("#h5-fontstyle"), $("#h5-textdecoration"));
199  previewFont($("#h6-fontfamily"), 'H6 Heading', 'h6-preview', $("#h6-preview"), $("#h6-size"), $("#h6-fontcolor"), $("#h6-fontshadowsize"), $("#h6-fontshadowcolor"), $("#h6-fontweight"), $("#h6-fontstyle"), $("#h6-textdecoration"));
200  previewFont($("#globaltext-fontfamily"), 'Default Text', 'globaltext-preview', $("#globaltext-preview"), $("#globaltext-size"), $("#globaltext-fontcolor"), $("#globaltext-fontshadowsize"), $("#globaltext-fontshadowcolor"), $("#globaltext-fontweight"), $("#globaltext-fontstyle"), $("#globaltext-textdecoration"));
201 
202  /*
203  * obj font-family select field
204  * string heading
205  * string preview field as string
206  * obj h1-preview
207  * obj h1-size
208  * obj h1-color
209  * obj h1-fontshadowsize
210  * obj h1-fontshadowcolor
211  */
212  function previewFont(font, heading, previewString, previewField, fontsize, fontcolor, fontshadowsize, fontshadowcolor, fontweight, fontstyle, textdecoration)
213  {
214  // what to do if click on reset text button
215  $("#resetTestText").click(function()
216  { // reset preview: set default value
217  $(previewField).html(heading);
218  // empty the input field also
219  $("#testText").val('');
220  // and disable button
221  $('#resetTestText').prop('disabled', true); // enable reset btn if key up on testText field
222  });
223 
224  // if test text changes due input via keyup
225  $('#testText').keyup(function(){
226  // enable reset text button
227  $('#resetTestText').prop('disabled', false);
228  // update text preview with values from testText field
229  $(previewField).html($(this).val());
230  });
231 
232  // LOAD DEFAULT (CURRENT) PREVIEW
233  // SET DEFAULT VALUES
234  const selectedFont = $(font).val();
235  const pathAndFont = '../system/fonts/' + selectedFont;
236 
237  // check if font is a custom font (from system/fonts)
238  // check if fontfamily contains the string ttf
239  if ($(font).val().toLowerCase().indexOf("-ttf") >= 0)
240  {
241  // workaround: remove the last 4 chars (-ttf)
242  let fn = pathAndFont.slice(0,-4);
243  // workaround: add file extension
244  fn += '.ttf';
245 
246  // append external font to head
247  $("head").append("<style>" +
248  "@font-face {\n" +
249  "\tfont-family: '"+selectedFont+"';\n" +
250  "\tsrc: url("+fn+");\n" +
251  "}\n" +
252  "\t."+previewString+" {\n" +
253  "\tfont-family: '"+selectedFont+"' !important;\n" +
254  "}\n" +
255  "</style>");
256  // set preview to selected true type font
257  $(previewField).css("font-family", selectedFont);
258  }
259  // check if fontfamily contains the string otf
260  else if ($(font).val().toLowerCase().indexOf("-otf") >= 0)
261  {
262  // workaround: remove the last 4 chars (-otf)
263  let fn = pathAndFont.slice(0,-4);
264  // workaround: add file extension
265  fn += '.otf';
266 
267  // append external font to head
268  $("head").append("<style>" +
269  "@font-face {\n" +
270  "\tfont-family: '"+selectedFont+"';\n" +
271  "\tsrc: url("+fn+");\n" +
272  "}\n" +
273  "\t."+previewString+" {\n" +
274  "\tfont-family: '"+selectedFont+"' !important;\n" +
275  "}\n" +
276  "</style>");
277  // set preview to selected true type font
278  $(previewField).css("font-family", selectedFont);
279  }
280  // check if fontfamily contains the string otf
281  else if ($(font).val().toLowerCase().indexOf("-woff") >= 0)
282  {
283  // workaround: remove the last 5 chars (-woff)
284  let fn = pathAndFont.slice(0,-5);
285  // workaround: add file extension
286  fn += '.woff';
287 
288  // append external font to head
289  $("head").append("<style>" +
290  "@font-face {\n" +
291  "\tfont-family: '"+selectedFont+"';\n" +
292  "\tsrc: url("+fn+");\n" +
293  "}\n" +
294  "\t."+previewString+" {\n" +
295  "\tfont-family: '"+selectedFont+"' !important;\n" +
296  "}\n" +
297  "</style>");
298  // set preview to selected true type font
299  $(previewField).css("font-family", selectedFont);
300  }
301  // check if fontfamily contains the string -gfon
302  else if ($(font).val().toLowerCase().indexOf("-gfont") >= 0)
303  {
304  // workaround: remove the last 6 chars (-gfont)
305  fn = selectedFont.slice(0,-6);
306 
307  var HtmlDocumentHead = $("head");
308  // append google font include to head
309  HtmlDocumentHead.append("<link href=\"https://fonts.googleapis.com/css?family="+fn+"\" rel=\"stylesheet\">");
310  // append external font to head
311  HtmlDocumentHead.append("<style>" +
312  "\t."+previewString+" {\n" +
313  "\tfont-family: '"+fn+"';\n" +
314  "}\n" +
315  "</style>");
316  // set preview to selected true type font
317  $(previewField).css("font-family", fn);
318  }
319  else
320  { //alert('no ttf');
321  $(previewField).css("font-family", $(font).val());
322  }
323  $(previewField).css("font-size", $(fontsize).val());
324  $(previewField).css("color", '#'+$(fontcolor).val());
325  $(previewField).css("text-shadow", $(fontshadowsize).val()+' #'+$(fontshadowcolor).val());
326  $(previewField).css("font-weight", $(fontweight).val());
327  $(previewField).css("font-style", $(fontstyle).val());
328  $(previewField).css("text-decoration", $(textdecoration).val());
329 
330  // SET SELECTED FONT STYLES ON CHANGE...
331  // check if a font is selected, on change of select field...
332  $(font).change(function()
333  {
334  var selectedFont = $(font).val();
335  var pathAndFont = '../system/fonts/'+selectedFont;
336  var fn = '';
337 
338  // check if font is a custom font (from system/fonts)
339  // check if fontfamily contains the string ttf
340  if ($(font).val().toLowerCase().indexOf("-ttf") >= 0)
341  {
342  // workaround: remove the last 4 chars (-ttf)
343  fn = pathAndFont.slice(0,-4);
344  // workaround: add file extension
345  fn += '.ttf';
346 
347  // append external font to head
348  $("head").append("<style>" +
349  "@font-face {\n" +
350  "\tfont-family: '"+selectedFont+"';\n" +
351  "\tsrc: url("+fn+");\n" +
352  "}\n" +
353  "\t."+previewString+" {\n" +
354  "\tfont-family: '"+selectedFont+"' !important;\n" +
355  "}\n" +
356  "</style>");
357  // set preview to selected true type font
358  $(previewField).css("font-family", selectedFont);
359  }
360  // check if fontfamily contains the string otf
361  else if ($(font).val().toLowerCase().indexOf("-otf") >= 0)
362  {
363  // workaround: remove the last 4 chars (-otf)
364  fn = pathAndFont.slice(0,-4);
365  // workaround: add file extension
366  fn += '.otf';
367 
368  // append external font to head
369  $("head").append("<style>" +
370  "@font-face {\n" +
371  "\tfont-family: '"+selectedFont+"';\n" +
372  "\tsrc: url("+fn+");\n" +
373  "}\n" +
374  "\t."+previewString+" {\n" +
375  "\tfont-family: '"+selectedFont+"' !important;\n" +
376  "}\n" +
377  "</style>");
378  // set preview to selected true type font
379  $(previewField).css("font-family", selectedFont);
380  }
381  // check if fontfamily contains the string otf
382  else if ($(font).val().toLowerCase().indexOf("-woff") >= 0)
383  {
384  // workaround: remove the last 5 chars (-otf)
385  fn = pathAndFont.slice(0,-5);
386  // workaround: add file extension
387  fn += '.woff';
388 
389  // append external font to head
390  $("head").append("<style>" +
391  "@font-face {\n" +
392  "\tfont-family: '"+selectedFont+"';\n" +
393  "\tsrc: url("+fn+");\n" +
394  "}\n" +
395  "\t."+previewString+" {\n" +
396  "\tfont-family: '"+selectedFont+"' !important;\n" +
397  "}\n" +
398  "</style>");
399  // set preview to selected true type font
400  $(previewField).css("font-family", selectedFont);
401  }
402  // check if fontfamily contains the string -gfon
403  else if ($(font).val().toLowerCase().indexOf("-gfont") >= 0)
404  {
405  // workaround: remove the last 5 chars (-gfon)
406  fn = selectedFont.slice(0,-6);
407  googlePath = "https://fonts.googleapis.com/css?family="+fn;
408 
409  var HtmlDocumentHead = $("head");
410  // append google font include to head
411  HtmlDocumentHead.append("<link href=\"https://fonts.googleapis.com/css?family="+fn+"\" rel=\"stylesheet\">");
412  // append external font to head
413  HtmlDocumentHead.append("<style>" +
414  "\t."+previewString+" {\n" +
415  "\tfont-family: '"+fn+"';\n" +
416  "}\n" +
417  "</style>");
418  // set preview to selected true type font
419  $(previewField).css("font-family", fn);
420  }
421  else
422  { //alert('no ttf');
423  $(previewField).css("font-family", $(font).val());
424  }
425  });
426 
427  // do the rest of the font preview stuff: size, colors, shadow...
428  // switch font size
429  $(fontsize).keyup(function() {
430  $(previewField).css("font-size", $(fontsize).val());
431  });
432  // switch font color
433  $(fontcolor).change(function() {
434  $(previewField).css("color", '#'+$(fontcolor).val());
435  });
436  // switch shadow size
437  $(fontshadowsize).keyup(function() {
438  $(previewField).css("text-shadow", $(fontshadowsize).val()+' #'+$(fontshadowcolor).val());
439  });
440  // switch shadow color
441  $(fontshadowcolor).change(function() {
442  $(previewField).css("text-shadow", $(fontshadowsize).val()+' #'+$(fontshadowcolor).val());
443  });
444  // switch font weight
445  $(fontweight).change(function() {
446  $(previewField).css("font-weight", $(fontweight).val());
447  });
448  // switch font style
449  $(fontstyle).change(function() {
450  $(previewField).css("font-style", $(fontstyle).val());
451  });
452  // switch text decoration
453  $(textdecoration).change(function() {
454  $(previewField).css("text-decoration", $(textdecoration).val());
455 
456  });
457  }
458  });
459  </script>
460  </div>
461  </div>
462 </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
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
e
function e
Definition: plyr.js:1
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
$selectedTemplateID
if(!isset($template)) if(!isset($user)) if(!isset($_SESSION)||(empty($_SESSION))) $selectedTemplateID
Definition: template-typography.php:109
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);});})