svatbonet/wireframe
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

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

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files
.gitignore
+2 -3
View File
@@ -1,5 +1,4 @@
node_modules
dist
dist/fonts
dist/bundle.js
.idea
!/dist/custom.js
!/dist/custom.css
dist/custom.css
Vendored
+24
View File
@@ -0,0 +1,24 @@
.title-image {
height: 700px;
width: 100%;
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
margin-bottom: 3rem;
}
.image-preview {
max-width: 100%;
border: solid 1px;
margin: 10px 0;
display: none;
}
/*Google Places autocomplete*/
.pac-container {
z-index: 99999;
}
dist/custom.js
Vendored
+64
View File
@@ -0,0 +1,64 @@
var editors =new Jodit('.wysiwyg');
function readURL(input, preview) {
// ignore
if (preview == null) {
alert('preview is null');
return;
}
// display preview in given element
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function(e) {
preview.attr('src', e.target.result).show();
}
reader.readAsDataURL(input.files[0]);
}
}
$(".file-upload").change(function() {
var preview = null;
if ($(this).data('preview')) {
preview = $($(this).data('preview'));
}
readURL(this, preview);
});
$(document).ready(function () {
$('.select-time').datetimepicker({
format: 'LT',
locale: 'cs',
stepping: 10,
});
$('.select-date').datetimepicker({
format: 'D. M. Y',
locale: 'cs',
minDate: new Date()
});
});
$('#mainInfoModal').on('show.bs.modal', function (e) {
$ ('#map').locationpicker ({
location: {latitude: 46.15242437752303, longitude: 2.7470703125},
radius: 10,
enableReverseGeocode: true,
draggable: true,
inputBinding: {
latitudeInput: null,
longitudeInput: null,
radiusInput: null,
locationNameInput: $ ('#map-input')
},
enableAutocomplete: true
});
})
dist/images/01.jpg
Vendored
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 238 KiB

dist/images/02.jpg
Vendored
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 191 KiB

index.js
+11 -4
View File
@@ -1,15 +1,22 @@
// webpack entry point
// JS
// components
import $ from 'jquery';
window.jQuery = $;
window.$ = $;
import 'bootstrap';
import 'fullcalendar';
import Jodit from 'jodit';
// globaly accessible variables and classes
window.jQuery = $;
window.$ = $;
window.Jodit = Jodit;
import 'pc-bootstrap4-datetimepicker';
// custom made functions - everything in src/assets/js
function requireAll(r) {
r.keys ().forEach (r);
}
package-lock.json
Generated
+24
View File
@@ -3167,6 +3167,11 @@
"integrity": "sha1-R+Y/evVa+m+S4VAOaQ64uFKcCZo=",
"dev": true
},
"jodit": {
"version": "3.2.22",
"resolved": "https://registry.npmjs.org/jodit/-/jodit-3.2.22.tgz",
"integrity": "sha512-jmXoRb5/zBrLusrVjUHTwzzGV07/7CAyTc0ir65HxtyBQNfbu790WJfzjldec0GQZONWRLL+tSdHZnT9BJzQ1g=="
},
"jquery": {
"version": "3.3.1",
"resolved": "https://registry.npmjs.org/jquery/-/jquery-3.3.1.tgz",
@@ -3694,6 +3699,14 @@
"resolved": "https://registry.npmjs.org/moment/-/moment-2.22.2.tgz",
"integrity": "sha1-PCV/mDn8DpP/UxSWMiOeuQeD/2Y="
},
"moment-timezone": {
"version": "0.4.1",
"resolved": "http://registry.npmjs.org/moment-timezone/-/moment-timezone-0.4.1.tgz",
"integrity": "sha1-gfWYw61eIs2teWtn7NjYjQ9bqgY=",
"requires": {
"moment": ">= 2.6.0"
}
},
"move-concurrently": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/move-concurrently/-/move-concurrently-1.0.1.tgz",
@@ -4223,6 +4236,17 @@
"sha.js": "^2.4.8"
}
},
"pc-bootstrap4-datetimepicker": {
"version": "4.17.50",
"resolved": "https://registry.npmjs.org/pc-bootstrap4-datetimepicker/-/pc-bootstrap4-datetimepicker-4.17.50.tgz",
"integrity": "sha512-76y2McdmiGWdgwPUim72/otNcDUva05B/VoyJVgIRv2dd+g4GO9gPfvvPvCH4LXyKNvtAzKHQSTSyC+4PKq/FQ==",
"requires": {
"bootstrap": "^4.0.0-beta.2",
"jquery": "^1.8.3 || ^2.0 || ^3.0",
"moment": "^2.10",
"moment-timezone": "^0.4.0"
}
},
"performance-now": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
package.json
+2
View File
@@ -11,7 +11,9 @@
"file-loader": "^2.0.0",
"font-awesome": "^4.7.0",
"fullcalendar": "^3.9.0",
"jodit": "^3.2.22",
"jquery": "^3.3.1",
"pc-bootstrap4-datetimepicker": "^4.17.50",
"popper.js": "^1.14.5"
},
"devDependencies": {
src/assets/js/datepicker.js
+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);
// }
//
src/assets/js/locationpicker.jquery.js
+1
View File
File diff suppressed because one or more lines are too long
src/assets/scss/app.scss
+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";
src/assets/scss/editor/app.scss
+2 -1
View File
@@ -1,4 +1,5 @@
@import "parts";
@import "timeline";
@import "timeline";
src/views/layouts/editor.ejs
+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>
src/views/partials/editor/modals/mainInfo.ejs
+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>
src/views/partials/editor/modals/setTitlePhoto.ejs
+8 -12
View File
@@ -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">
src/views/partials/editor/titlePhoto.ejs
+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">