Modal s vyberem kdy, kde a v kolik, upraveny modal pro vyber fotky, pridan wysiwyg editor

This commit is contained in:
Michal Kváček
2018-11-20 21:08:34 +01:00
parent 6787b86170
commit 5d7799f7db
16 changed files with 282 additions and 159 deletions
+118 -118
View File
@@ -1,118 +1,118 @@
$ (document).ready (initDateTimePickers ());
$ (document).on ('snippet-reloaded', initDateTimePickers);
$ (document).on ('blur', '.select-date', function () {
$ (this).datetimepicker ('hide');
});
$ (document).on ('blur', '.select-datetime', function () {
$ (this).datetimepicker ('hide');
});
var i = 1;
function initDateTimePickers() {
var $datepicker = $ ('.select-date');
var $datetimepicker = $ ('.select-datetime');
var $timepicker = $ ('.select-time');
$datepicker.each (function () {
var $e = $ (this);
if (!datePickerInitialized ($e)) {
setDatepickerId ($e, 'datepicker-auto-id');
initDatePicker ($e);
}
});
$datetimepicker.each (function () {
var init = $ (this).attr ('data-picker-init');
if (init) {
return;
}
var $positionedParent = getPositionedParent ($ (this));
var id = setDatepickerId ($ (this), 'datetimepicker-auto-id');
$ (this).attr ('data-toggle', 'datetimepicker');
$ (this).attr ('data-target', '#' + id);
$ (this).datetimepicker ({
sideBySide: true,
stepping: 10,
format: "DD. MM. YYYY HH:mm",
widgetParent: $positionedParent,
useCurrent: false,
locale: window.locale || 'cs'
});
$ (this).attr ('data-picker-init', true);
});
$timepicker.each (function () {
var init = $ (this).attr ('data-picker-init');
if (init) {
return;
}
var id = setDatepickerId ($ (this), 'timepicker-auto-id');
var $positionedParent = getPositionedParent ($ (this));
$ (this).attr ('data-toggle', 'datetimepicker');
$ (this).attr ('data-target', '#' + id);
$ (this).datetimepicker ({
sideBySide: true,
stepping: 10,
widgetParent: $positionedParent,
format: "HH:mm",
useCurrent: false,
locale: window.locale || 'cs'
});
$ (this).attr ('data-picker-init', true);
});
}
function getPositionedParent($e) {
do {
$e = $e.parent ();
} while ($e.css ('position') !== 'relative');
return $e;
}
function datePickerInitialized($element) {
var init = $element.attr ('data-picker-init');
return !!init;
}
function setDatepickerId($element, prefix, postfix) {
if (typeof postfix === 'undefined') {
postfix = 1;
}
var id = $element.attr ('id');
if (id === "" || typeof id === 'undefined') {
id = prefix + '-' + postfix++;
$element.attr ('id', id);
}
return id;
}
function initDatePicker($element) {
var id = $element.attr ('id');
$element.attr ('data-toggle', 'datetimepicker');
$element.attr ('data-target', '#' + id);
var $positionedParent = getPositionedParent ($element);
$element.datetimepicker ({
format: "DD. MM. YYYY",
useCurrent: false,
widgetParent: $positionedParent,
locale: window.locale || 'cs'
});
$element.attr ('data-picker-init', true);
}
// $ (document).ready (initDateTimePickers ());
// $ (document).on ('snippet-reloaded', initDateTimePickers);
//
// $ (document).on ('blur', '.select-date', function () {
// $ (this).datetimepicker ('hide');
// });
// $ (document).on ('blur', '.select-datetime', function () {
// $ (this).datetimepicker ('hide');
// });
//
// var i = 1;
//
// function initDateTimePickers() {
// var $datepicker = $ ('.select-date');
// var $datetimepicker = $ ('.select-datetime');
// var $timepicker = $ ('.select-time');
//
// $datepicker.each (function () {
// var $e = $ (this);
// if (!datePickerInitialized ($e)) {
// setDatepickerId ($e, 'datepicker-auto-id');
// initDatePicker ($e);
// }
// });
//
// $datetimepicker.each (function () {
// var init = $ (this).attr ('data-picker-init');
//
// if (init) {
// return;
// }
//
// var $positionedParent = getPositionedParent ($ (this));
// var id = setDatepickerId ($ (this), 'datetimepicker-auto-id');
//
// $ (this).attr ('data-toggle', 'datetimepicker');
// $ (this).attr ('data-target', '#' + id);
//
// $ (this).datetimepicker ({
// sideBySide: true,
// stepping: 10,
// format: "DD. MM. YYYY HH:mm",
// widgetParent: $positionedParent,
// useCurrent: false,
// locale: window.locale || 'cs'
// });
// $ (this).attr ('data-picker-init', true);
// });
//
// $timepicker.each (function () {
// var init = $ (this).attr ('data-picker-init');
//
// if (init) {
// return;
// }
//
// var id = setDatepickerId ($ (this), 'timepicker-auto-id');
// var $positionedParent = getPositionedParent ($ (this));
//
// $ (this).attr ('data-toggle', 'datetimepicker');
// $ (this).attr ('data-target', '#' + id);
//
// $ (this).datetimepicker ({
// sideBySide: true,
// stepping: 10,
// widgetParent: $positionedParent,
// format: "HH:mm",
// useCurrent: false,
// locale: window.locale || 'cs'
// });
// $ (this).attr ('data-picker-init', true);
// });
// }
//
// function getPositionedParent($e) {
// do {
// $e = $e.parent ();
// } while ($e.css ('position') !== 'relative');
//
// return $e;
// }
//
// function datePickerInitialized($element) {
// var init = $element.attr ('data-picker-init');
//
// return !!init;
// }
//
// function setDatepickerId($element, prefix, postfix) {
// if (typeof postfix === 'undefined') {
// postfix = 1;
// }
//
// var id = $element.attr ('id');
// if (id === "" || typeof id === 'undefined') {
// id = prefix + '-' + postfix++;
// $element.attr ('id', id);
// }
//
// return id;
// }
//
// function initDatePicker($element) {
// var id = $element.attr ('id');
// $element.attr ('data-toggle', 'datetimepicker');
// $element.attr ('data-target', '#' + id);
//
// var $positionedParent = getPositionedParent ($element);
// $element.datetimepicker ({
// format: "DD. MM. YYYY",
// useCurrent: false,
// widgetParent: $positionedParent,
// locale: window.locale || 'cs'
// });
//
// $element.attr ('data-picker-init', true);
// }
//
File diff suppressed because one or more lines are too long
+8 -4
View File
@@ -14,15 +14,19 @@
@import "~bootstrap/scss/code";
@import "~bootstrap/scss/grid";
@import " ~fullcalendar/dist/fullcalendar.min.css";
$fa-font-path: "~font-awesome/fonts";
@import '~font-awesome/scss/font-awesome.scss';
// plugins
@import '~font-awesome/scss/font-awesome.scss';
@import "~fullcalendar/dist/fullcalendar.min.css";
@import "~jodit/build/jodit.min.css";
@import "~pc-bootstrap4-datetimepicker/build/css/bootstrap-datetimepicker.css";
// backend
@import "sidebar";
@import "main";
@import "backToDashboard";
@import "boxes";
// editor
@import "editor/app";
+2 -1
View File
@@ -1,4 +1,5 @@
@import "parts";
@import "timeline";
@import "timeline";
+1 -9
View File
@@ -5,6 +5,7 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBVJryamGUInh3_kLTRTVKDS1-u3R8nn_s&amp;&libraries=places" type="text/javascript"></script>
<script src="/dist/bundle.js"></script>
<link rel="stylesheet" type="text/css" href="/dist/custom.css">
@@ -34,15 +35,6 @@
<%- body %>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<!--<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>-->
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>-->
<!--<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>-->
<!--<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">-->
<!--<script src="https://github.com/jhollingworth/bootstrap-wysihtml5/blob/master/src/bootstrap-wysihtml5.js"></script>-->
</body>
<script src="/dist/custom.js"></script>
+15 -5
View File
@@ -1,5 +1,7 @@
<div class="modal fade" id="mainInfoModal" tabindex="-1" role="dialog" aria-labelledby="mainInfoModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
@@ -12,20 +14,28 @@
<div class="row">
<div class="col-md-4">
<h2>Kdy?</h2>
<p>1. 9. 2019</p>
<input type="text" class="form-control select-date">
</div>
<div class="col-md-4">
<h2>Kde?</h2>
<p>Zámek Litomyšl</p>
<input type="text" id="map-input" class="form-control" />
</div>
<div class="col-md-4">
<h2>V kolik?</h2>
<p>11:00</p>
<input type="text" class="form-control select-time">
</div>
</div>
<canvas id="map">todo</canvas>
<div class="row my-5">
<div class="col">
<div id="map" style="width: 100%; height: 400px;"></div>
</div>
</div>
</div>
@@ -9,20 +9,16 @@
</button>
</div>
<div class="modal-body">
<div class="container">
<div class="col-md-6">
<div class="form-group">
<label>Vybrat obrázek</label>
<div class="input-group">
<span class="input-group-btn">
<span class="btn btn-default btn-file">
Procházet<input type="file" id="imgInp">
</span>
</span>
</div>
<div class="form-group">
<label>Vybrat obrázek</label>
</div>
<div class="input-group">
<input type="file" class="file-upload" data-preview=".image-preview" id="imgInp">
</div>
<img class="image-preview" />
</div>
</div>
<div class="modal-footer">
+2 -3
View File
@@ -1,6 +1,5 @@
<section class="web-section">
<div class="profile-pic">
<img src="./img/affair-anniversary-beach-1024993.jpg" class="img-fluid" id="uvodni" alt="Krásná úvodní fotografie">
<section class="web-part">
<div class="title-image" style="background-image: url('/dist/images/01.jpg')">
<div class="web-part__edit">
<a href="#setTitlePhotoModal" data-toggle="modal" data-target="#setTitlePhotoModal">