Several improvements to the admin panel
This commit is contained in:
parent
83f0b2a596
commit
e79cc9b4ff
|
@ -89,11 +89,19 @@ defined('BASEPATH') OR exit('No direct script access allowed');
|
|||
.tags .bootstrap-tagsinput {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.tags .bootstrap-tagsinput > input {
|
||||
margin: 5px 0;
|
||||
}
|
||||
|
||||
.tags .tag {
|
||||
display: inline-block;
|
||||
width: unset;
|
||||
background: #2272ff;
|
||||
color: #fff !important;
|
||||
border-radius: 25px;
|
||||
}
|
||||
|
||||
.tags .tag::after {
|
||||
|
@ -162,7 +170,8 @@ defined('BASEPATH') OR exit('No direct script access allowed');
|
|||
</div>
|
||||
<h1 class="post-title"><span id="postTitle" class="noEnter"></span></h1>
|
||||
<h2 class="post-subtitle"><span id="postDescription"></span></h2>
|
||||
<div id="postContent"></div>
|
||||
<!-- <div id="postContent"></div>-->
|
||||
<textarea id="postContent"></textarea>
|
||||
</div>
|
||||
<!--/.blog-item-->
|
||||
</div>
|
||||
|
@ -183,6 +192,7 @@ defined('BASEPATH') OR exit('No direct script access allowed');
|
|||
<div class="tags">
|
||||
<input type="text" data-role="tagsinput" id="postTags">
|
||||
</div>
|
||||
<!-- <input type="text" id="postTags">-->
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
|
@ -207,11 +217,20 @@ defined('BASEPATH') OR exit('No direct script access allowed');
|
|||
</label>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<button class="btn btn-default btn-sm" id="blogPreview">
|
||||
<i class="fa fa-eye"></i>
|
||||
Vorschau
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<button class="btn btn-default btn-sm" id="blogPostSave">
|
||||
<i class="fa fa-save"></i>
|
||||
Speichern
|
||||
</button>
|
||||
<button class="btn btn-primary btn-sm" id="blogSubmit" data-loading-text="Lädt...">
|
||||
<i class="fa fa-cloud"></i>
|
||||
Veröffentlichen
|
||||
</button>
|
||||
</div>
|
||||
|
|
|
@ -10,8 +10,8 @@ defined('BASEPATH') OR exit('No direct script access allowed');
|
|||
<div class="clearfix"></div>
|
||||
</div>
|
||||
<div class="x_content">
|
||||
<iframe src="https://stats.kingofdog.eu/"
|
||||
style="height:100vh;width:100%" frameborder="0" async></iframe>
|
||||
<!-- <iframe src="https://stats.kingofdog.eu/"-->
|
||||
<!-- style="height:100vh;width:100%" frameborder="0" async></iframe>-->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -14,17 +14,16 @@ defined('BASEPATH') OR exit('No direct script access allowed');
|
|||
|
||||
<script src="/assets/js/lib/jquery.min.js"></script>
|
||||
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
|
||||
<script src="/assets/js/lib/tinymce5/tinymce.min.js"></script>
|
||||
|
||||
<?php
|
||||
$scripts = [
|
||||
'lib/jquery.min.js',
|
||||
'lib/bootstrap-3.3.7.min.js',
|
||||
'lib/typeahead.bundle.min.js',
|
||||
'lib/datatables.js',
|
||||
'lib/jquery.tagsinput.min.js',
|
||||
'lib/moment.min.js',
|
||||
'lib/bootstrap-datetimepicker.min.js',
|
||||
'lib/bootstrap-tagsinput.min.js',
|
||||
'fullcalendar/fullcalendar.min.js',
|
||||
'fullcalendar/lang/de.js',
|
||||
'lib/jquery.mCustomScrollbar.min.js',
|
||||
|
@ -41,7 +40,5 @@ defined('BASEPATH') OR exit('No direct script access allowed');
|
|||
|
||||
<script src="<?= $scriptName ?>"></script>
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
@ -19,7 +19,7 @@
|
|||
'lib/jquery.mCustomScrollbar.min.css',
|
||||
'lib/prism.min.css',
|
||||
'lib/datatables.min.css',
|
||||
'lib/bootstrap-tagsinput.min.css',
|
||||
|
||||
'lib/fullcalendar.min.css',
|
||||
'lib/flag-icon.min.css'
|
||||
];
|
||||
|
@ -228,7 +228,7 @@
|
|||
|
||||
<ul class="nav navbar-nav navbar-right">
|
||||
<li class="">
|
||||
<a href="javascript:;" class="user-profile dropdown-toggle" data-toggle="dropdown"
|
||||
<a href="javascript:" class="user-profile dropdown-toggle" data-toggle="dropdown"
|
||||
aria-expanded="false">
|
||||
<img src="<?= $_SESSION['user']['profilePic'] ?>"
|
||||
alt=""><?= $_SESSION['user']['displayname'] ?>
|
||||
|
@ -257,7 +257,7 @@
|
|||
</li>
|
||||
|
||||
<li role="presentation" class="dropdown">
|
||||
<a href="javascript:;" class="dropdown-toggle info-number" data-toggle="dropdown"
|
||||
<a href="javascript:" class="dropdown-toggle info-number" data-toggle="dropdown"
|
||||
aria-expanded="false">
|
||||
<i class="far fa-envelope"></i>
|
||||
<span class="badge bg-blue" id="notificationCount"></span>
|
||||
|
|
|
@ -3,6 +3,7 @@
|
|||
?>
|
||||
<div class="right_col" role="main">
|
||||
<div class="row">
|
||||
<form class="form" method="POST">
|
||||
<div class="col-md-6 col-sm-8 col-xs-8">
|
||||
<div class="x_panel">
|
||||
<div class="x_title">
|
||||
|
@ -10,7 +11,6 @@
|
|||
<div class="clearfix"></div>
|
||||
</div>
|
||||
<div class="x_content">
|
||||
<form class="form" method="POST">
|
||||
<div class="form-group" aria-describedby="#rank-help">
|
||||
<b>Rang</b>
|
||||
<br>
|
||||
|
@ -73,7 +73,6 @@
|
|||
Unbeschränkter Zugriff auf alle Funktionen.
|
||||
</span>
|
||||
<input type="submit" class="btn btn-primary" value="Speichern">
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -85,8 +84,9 @@
|
|||
<div class="clearfix"></div>
|
||||
</div>
|
||||
<div class="x_content">
|
||||
<form method="POST" class="form">
|
||||
<div class="permissions">
|
||||
<?php foreach ($availablePermissions as $group => $perms): ?>
|
||||
<div class="permission-group">
|
||||
<h4>
|
||||
<?= $group ?>
|
||||
|
||||
|
@ -98,15 +98,17 @@
|
|||
$name = $group . '.' . $perm; ?>
|
||||
<li>
|
||||
<label data-toggle="tooltip" title="blablabla" for="<?= $group . $perm ?>"><?= $name ?></label>
|
||||
<input type="checkbox" value="true" name="permissions[<?= $group . $perm ?>]" id="<?= $group . $perm ?>" <?= in_array($name, $permissions) ? 'checked' : '' ?>>
|
||||
<input type="checkbox" value="true" class="perm-box" name="permissions[<?= $group . $perm ?>]" id="<?= $group . $perm ?>" <?= in_array($name, $permissions) ? 'checked' : '' ?>>
|
||||
</li>
|
||||
<?php endforeach; ?>
|
||||
</ul>
|
||||
</div>
|
||||
<?php endforeach; ?>
|
||||
</div>
|
||||
<input type="submit" class="btn btn-primary" value="Speichern">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -15,26 +15,36 @@ const toolbarOptions = [
|
|||
['clean']
|
||||
];
|
||||
|
||||
const quill = new Quill('#postContent', {
|
||||
theme: 'snow',
|
||||
bounds: '#postContent .ql-editor',
|
||||
modules: {
|
||||
syntax: true,
|
||||
toolbar: toolbarOptions
|
||||
}
|
||||
// const quill = new Quill('#postContent', {
|
||||
// theme: 'snow',
|
||||
// bounds: '#postContent .ql-editor',
|
||||
// modules: {
|
||||
// syntax: true,
|
||||
// toolbar: toolbarOptions
|
||||
// }
|
||||
// });
|
||||
|
||||
const editor = tinymce.init({
|
||||
selector: '#postContent',
|
||||
plugins: [
|
||||
'advlist autolink link image lists charmap print preview hr anchor pagebreak spellchecker',
|
||||
'searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking',
|
||||
'save table contextmenu directionality emoticons template paste textcolor'
|
||||
],
|
||||
templates: '/admin/blog/getTemplates',
|
||||
toolbar: 'insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image | print preview media fullpage | forecolor backcolor emoticons'
|
||||
});
|
||||
|
||||
let changeUrl = true;
|
||||
|
||||
// var edits = ["#title", "#description", "#content"];
|
||||
|
||||
// Prevent the backspace key from navigating back.
|
||||
// $(document).on("keydown", function (e) {
|
||||
// if (e.which === 8 && !$(e.target||e.srcElement).is("span, [contenteditable=true]")) {
|
||||
// e.preventDefault();
|
||||
// return false;
|
||||
// }
|
||||
// });
|
||||
$(document).on("keydown", function (e) {
|
||||
if (e.which === 8 && !$(e.target || e.srcElement).is("span, [contenteditable=true], input")) {
|
||||
e.preventDefault();
|
||||
return false;
|
||||
}
|
||||
});
|
||||
|
||||
// var autolist = new AutoList();
|
||||
// var editor = new MediumEditor('#content', {
|
||||
|
@ -101,43 +111,38 @@ function prepareString(input) {
|
|||
return input;
|
||||
}
|
||||
|
||||
/*$('#content').bind('click', function () {
|
||||
$(this).attr('contentEditable', true);
|
||||
}).blur(
|
||||
function () {
|
||||
$(this).attr('contentEditable', false);
|
||||
});*/
|
||||
|
||||
var shift = false;
|
||||
|
||||
$('span').keydown(function (e) {
|
||||
var key = e.keyCode;
|
||||
console.log(key);
|
||||
const edits = ["#postTitle", "#postDescription", ".ql-editor"];
|
||||
$(edits.toString()).keydown(function (e) {
|
||||
const key = e.key;
|
||||
|
||||
// Shift Control
|
||||
|
||||
if (key === 16) {
|
||||
if (key === 'Shift') {
|
||||
shift = true;
|
||||
}
|
||||
|
||||
// Ctrl + Return Control
|
||||
if (key === 13 && (e.ctrlKey || e.metaKey)) {
|
||||
console.log('test');
|
||||
if (key === 'Enter' && (e.ctrlKey || e.metaKey)) {
|
||||
e.preventDefault();
|
||||
$(this).attr('contentEditable', false);
|
||||
}
|
||||
|
||||
// Tab Control
|
||||
if (key === 9) {
|
||||
if (key === 'Tab') {
|
||||
e.preventDefault();
|
||||
$(this).attr('contentEditable', false);
|
||||
var pos = edits.indexOf("#" + $(this).attr('id'));
|
||||
console.log(pos);
|
||||
let pos = edits.findIndex(edit => edit === '#' + $(this).attr('id') || $(this).hasClass(edit.substr(1)));
|
||||
if (shift) {
|
||||
$(edits[pos - 1]).attr('contentEditable', true);
|
||||
pos--;
|
||||
if (pos < 0)
|
||||
pos = edits.length - 1;
|
||||
} else {
|
||||
$(edits[pos + 1]).attr('contentEditable', true);
|
||||
pos++;
|
||||
if (pos >= edits.length)
|
||||
pos = 0;
|
||||
}
|
||||
$(edits[pos]).attr('contenteditable', true).focus();
|
||||
}
|
||||
|
||||
|
||||
|
@ -163,6 +168,37 @@ $('span').keyup(function (e) {
|
|||
}
|
||||
});
|
||||
|
||||
const existingTags = new Bloodhound({
|
||||
// datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name'),
|
||||
// queryTokenizer: Bloodhound.tokenizers.whitespace,
|
||||
datumTokenizer: Bloodhound.tokenizers.whitespace,
|
||||
queryTokenizer: Bloodhound.tokenizers.whitespace,
|
||||
// prefetch: {
|
||||
// url: '/admin/blog/tagsList',
|
||||
// filter: function (list) {
|
||||
// return $.map(list, function (cityname) {
|
||||
// return {name: cityname};
|
||||
// });
|
||||
// }
|
||||
// }
|
||||
prefetch: {
|
||||
url: '/admin/blog/tagsList',
|
||||
cache: true
|
||||
}
|
||||
// local: ['Hallo Welt', 'Hund', 'Test', 'Geht doch']
|
||||
|
||||
});
|
||||
existingTags.initialize();
|
||||
|
||||
// $('#postTags').typeahead({
|
||||
// hint: true,
|
||||
// highlight: true,
|
||||
// minLength: 1
|
||||
// }, {
|
||||
// name: 'existingTags',
|
||||
// source: existingTags,
|
||||
// });
|
||||
|
||||
let tagsList = [];
|
||||
$(function () {
|
||||
$.ajax({
|
||||
|
@ -176,12 +212,16 @@ $(function () {
|
|||
}
|
||||
});
|
||||
|
||||
$('#postTags').tagsinput();
|
||||
|
||||
// $('#postTags').tagsinput();
|
||||
//
|
||||
$('#postTags').tagsinput({
|
||||
// itemText: 'display_name',
|
||||
typeaheadjs: {
|
||||
name: 'blogposttags',
|
||||
source: substringMatcher(tagsList)
|
||||
source: ['Test', 'Value'],
|
||||
name: 'existingTags',
|
||||
// displayKey: 'display_name',
|
||||
// source: existingTags.ttAdapter()
|
||||
// source: substringMatcher(['Hallo', 'test', 'Hund'])
|
||||
}
|
||||
});
|
||||
|
||||
|
@ -219,9 +259,9 @@ $(function () {
|
|||
});
|
||||
});
|
||||
|
||||
Number.prototype.pad = function(size) {
|
||||
Number.prototype.pad = function (size) {
|
||||
let s = String(this);
|
||||
while(s.length < (size || 2)) s = "0" + s;
|
||||
while (s.length < (size || 2)) s = "0" + s;
|
||||
return s;
|
||||
};
|
||||
|
||||
|
@ -455,16 +495,61 @@ function publishPost() {
|
|||
})
|
||||
}
|
||||
|
||||
$('#blogPostSave').on('click', () => {
|
||||
$('#blogPostSave').click(() => {
|
||||
$(this).button('loading');
|
||||
sendPost();
|
||||
});
|
||||
|
||||
$('#blogSubmit').on('click', function () {
|
||||
$('#blogSubmit').click(() => {
|
||||
$(this).button('loading');
|
||||
sendPost(publishPost);
|
||||
});
|
||||
|
||||
$('#blogPreview').click(() => openPreview());
|
||||
|
||||
let timeoutPreview;
|
||||
$('body').keyup(() => {
|
||||
if (timeoutPreview)
|
||||
clearTimeout(timeoutPreview);
|
||||
timeoutPreview = setTimeout(() => {
|
||||
if (previewWindow)
|
||||
openPreview();
|
||||
}, 1000);
|
||||
});
|
||||
|
||||
let previewID;
|
||||
let previewWindow;
|
||||
|
||||
function openPreview() {
|
||||
const data = {
|
||||
postTitle: $('#postTitle').text(),
|
||||
postDesc: $('#postDescription').text(),
|
||||
// postContent: $('.ql-editor').html(),
|
||||
postContent: tinymce.get('postContent').getContent(),
|
||||
};
|
||||
|
||||
if (previewID)
|
||||
data.previewID = previewID;
|
||||
|
||||
$.ajax({
|
||||
url: '/admin/blog/updatePreview',
|
||||
data: data,
|
||||
method: 'POST',
|
||||
success: (data) => {
|
||||
if (data.success) {
|
||||
previewID = data.previewID;
|
||||
console.log(data.session);
|
||||
if (!previewWindow) {
|
||||
previewWindow = window.open('http://192.168.178.39/admin/blog/preview?id=' + previewID, '_BLANK');
|
||||
} else {
|
||||
previewWindow.location.reload();
|
||||
previewWindow.opener.focus();
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Upload Header Image
|
||||
$('.upload-btn').on('change', '.upload-image', function () {
|
||||
$('.upload-btn').fadeOut();
|
||||
|
@ -512,9 +597,9 @@ $('.upload-btn').on('change', '.upload-image', function () {
|
|||
reader.readAsDataURL(file);
|
||||
});
|
||||
|
||||
var substringMatcher = function (strs) {
|
||||
function substringMatcher(strs) {
|
||||
return function findMatches(q, cb) {
|
||||
var matches, substringRegex;
|
||||
let matches, substrRegex;
|
||||
|
||||
// an array that will be populated with substring matches
|
||||
matches = [];
|
||||
|
@ -522,16 +607,17 @@ var substringMatcher = function (strs) {
|
|||
// regex used to determine if a string contains the substring `q`
|
||||
substrRegex = new RegExp(q, 'i');
|
||||
|
||||
console.log('ich bin auc hdavbei #.');
|
||||
|
||||
// iterate through the pool of strings and for any string that
|
||||
// contains the substring `q`, add it to the `matches` array
|
||||
$.each(strs, function (i, str) {
|
||||
if (substrRegex.test(str)) {
|
||||
console.log(str);
|
||||
matches.push(str);
|
||||
}
|
||||
});
|
||||
|
||||
cb(matches);
|
||||
};
|
||||
};
|
||||
|
||||
|
||||
}
|
||||
|
|
Reference in New Issue
Block a user