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 node_modules
dist dist/fonts
dist/bundle.js
.idea .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 // webpack entry point
// JS // JS
// components
import $ from 'jquery'; import $ from 'jquery';
window.jQuery = $;
window.$ = $;
import 'bootstrap'; import 'bootstrap';
import 'fullcalendar'; 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) { function requireAll(r) {
r.keys ().forEach (r); r.keys ().forEach (r);
} }
package-lock.json
Generated
+24
View File
@@ -3167,6 +3167,11 @@
"integrity": "sha1-R+Y/evVa+m+S4VAOaQ64uFKcCZo=", "integrity": "sha1-R+Y/evVa+m+S4VAOaQ64uFKcCZo=",
"dev": true "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": { "jquery": {
"version": "3.3.1", "version": "3.3.1",
"resolved": "https://registry.npmjs.org/jquery/-/jquery-3.3.1.tgz", "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", "resolved": "https://registry.npmjs.org/moment/-/moment-2.22.2.tgz",
"integrity": "sha1-PCV/mDn8DpP/UxSWMiOeuQeD/2Y=" "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": { "move-concurrently": {
"version": "1.0.1", "version": "1.0.1",
"resolved": "https://registry.npmjs.org/move-concurrently/-/move-concurrently-1.0.1.tgz", "resolved": "https://registry.npmjs.org/move-concurrently/-/move-concurrently-1.0.1.tgz",
@@ -4223,6 +4236,17 @@
"sha.js": "^2.4.8" "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": { "performance-now": {
"version": "2.1.0", "version": "2.1.0",
"resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz", "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", "file-loader": "^2.0.0",
"font-awesome": "^4.7.0", "font-awesome": "^4.7.0",
"fullcalendar": "^3.9.0", "fullcalendar": "^3.9.0",
"jodit": "^3.2.22",
"jquery": "^3.3.1", "jquery": "^3.3.1",
"pc-bootstrap4-datetimepicker": "^4.17.50",
"popper.js": "^1.14.5" "popper.js": "^1.14.5"
}, },
"devDependencies": { "devDependencies": {
src/assets/js/datepicker.js
+118 -118
View File
@@ -1,118 +1,118 @@
$ (document).ready (initDateTimePickers ()); // $ (document).ready (initDateTimePickers ());
$ (document).on ('snippet-reloaded', initDateTimePickers); // $ (document).on ('snippet-reloaded', initDateTimePickers);
//
$ (document).on ('blur', '.select-date', function () { // $ (document).on ('blur', '.select-date', function () {
$ (this).datetimepicker ('hide'); // $ (this).datetimepicker ('hide');
}); // });
$ (document).on ('blur', '.select-datetime', function () { // $ (document).on ('blur', '.select-datetime', function () {
$ (this).datetimepicker ('hide'); // $ (this).datetimepicker ('hide');
}); // });
//
var i = 1; // var i = 1;
//
function initDateTimePickers() { // function initDateTimePickers() {
var $datepicker = $ ('.select-date'); // var $datepicker = $ ('.select-date');
var $datetimepicker = $ ('.select-datetime'); // var $datetimepicker = $ ('.select-datetime');
var $timepicker = $ ('.select-time'); // var $timepicker = $ ('.select-time');
//
$datepicker.each (function () { // $datepicker.each (function () {
var $e = $ (this); // var $e = $ (this);
if (!datePickerInitialized ($e)) { // if (!datePickerInitialized ($e)) {
setDatepickerId ($e, 'datepicker-auto-id'); // setDatepickerId ($e, 'datepicker-auto-id');
initDatePicker ($e); // initDatePicker ($e);
} // }
}); // });
//
$datetimepicker.each (function () { // $datetimepicker.each (function () {
var init = $ (this).attr ('data-picker-init'); // var init = $ (this).attr ('data-picker-init');
//
if (init) { // if (init) {
return; // return;
} // }
//
var $positionedParent = getPositionedParent ($ (this)); // var $positionedParent = getPositionedParent ($ (this));
var id = setDatepickerId ($ (this), 'datetimepicker-auto-id'); // var id = setDatepickerId ($ (this), 'datetimepicker-auto-id');
//
$ (this).attr ('data-toggle', 'datetimepicker'); // $ (this).attr ('data-toggle', 'datetimepicker');
$ (this).attr ('data-target', '#' + id); // $ (this).attr ('data-target', '#' + id);
//
$ (this).datetimepicker ({ // $ (this).datetimepicker ({
sideBySide: true, // sideBySide: true,
stepping: 10, // stepping: 10,
format: "DD. MM. YYYY HH:mm", // format: "DD. MM. YYYY HH:mm",
widgetParent: $positionedParent, // widgetParent: $positionedParent,
useCurrent: false, // useCurrent: false,
locale: window.locale || 'cs' // locale: window.locale || 'cs'
}); // });
$ (this).attr ('data-picker-init', true); // $ (this).attr ('data-picker-init', true);
}); // });
//
$timepicker.each (function () { // $timepicker.each (function () {
var init = $ (this).attr ('data-picker-init'); // var init = $ (this).attr ('data-picker-init');
//
if (init) { // if (init) {
return; // return;
} // }
//
var id = setDatepickerId ($ (this), 'timepicker-auto-id'); // var id = setDatepickerId ($ (this), 'timepicker-auto-id');
var $positionedParent = getPositionedParent ($ (this)); // var $positionedParent = getPositionedParent ($ (this));
//
$ (this).attr ('data-toggle', 'datetimepicker'); // $ (this).attr ('data-toggle', 'datetimepicker');
$ (this).attr ('data-target', '#' + id); // $ (this).attr ('data-target', '#' + id);
//
$ (this).datetimepicker ({ // $ (this).datetimepicker ({
sideBySide: true, // sideBySide: true,
stepping: 10, // stepping: 10,
widgetParent: $positionedParent, // widgetParent: $positionedParent,
format: "HH:mm", // format: "HH:mm",
useCurrent: false, // useCurrent: false,
locale: window.locale || 'cs' // locale: window.locale || 'cs'
}); // });
$ (this).attr ('data-picker-init', true); // $ (this).attr ('data-picker-init', true);
}); // });
} // }
//
function getPositionedParent($e) { // function getPositionedParent($e) {
do { // do {
$e = $e.parent (); // $e = $e.parent ();
} while ($e.css ('position') !== 'relative'); // } while ($e.css ('position') !== 'relative');
//
return $e; // return $e;
} // }
//
function datePickerInitialized($element) { // function datePickerInitialized($element) {
var init = $element.attr ('data-picker-init'); // var init = $element.attr ('data-picker-init');
//
return !!init; // return !!init;
} // }
//
function setDatepickerId($element, prefix, postfix) { // function setDatepickerId($element, prefix, postfix) {
if (typeof postfix === 'undefined') { // if (typeof postfix === 'undefined') {
postfix = 1; // postfix = 1;
} // }
//
var id = $element.attr ('id'); // var id = $element.attr ('id');
if (id === "" || typeof id === 'undefined') { // if (id === "" || typeof id === 'undefined') {
id = prefix + '-' + postfix++; // id = prefix + '-' + postfix++;
$element.attr ('id', id); // $element.attr ('id', id);
} // }
//
return id; // return id;
} // }
//
function initDatePicker($element) { // function initDatePicker($element) {
var id = $element.attr ('id'); // var id = $element.attr ('id');
$element.attr ('data-toggle', 'datetimepicker'); // $element.attr ('data-toggle', 'datetimepicker');
$element.attr ('data-target', '#' + id); // $element.attr ('data-target', '#' + id);
//
var $positionedParent = getPositionedParent ($element); // var $positionedParent = getPositionedParent ($element);
$element.datetimepicker ({ // $element.datetimepicker ({
format: "DD. MM. YYYY", // format: "DD. MM. YYYY",
useCurrent: false, // useCurrent: false,
widgetParent: $positionedParent, // widgetParent: $positionedParent,
locale: window.locale || 'cs' // locale: window.locale || 'cs'
}); // });
//
$element.attr ('data-picker-init', true); // $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/code";
@import "~bootstrap/scss/grid"; @import "~bootstrap/scss/grid";
@import " ~fullcalendar/dist/fullcalendar.min.css";
$fa-font-path: "~font-awesome/fonts"; $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 "sidebar";
@import "main"; @import "main";
@import "backToDashboard"; @import "backToDashboard";
@import "boxes"; @import "boxes";
// editor
@import "editor/app"; @import "editor/app";
src/assets/scss/editor/app.scss
+2 -1
View File
@@ -1,4 +1,5 @@
@import "parts"; @import "parts";
@import "timeline"; @import "timeline";
src/views/layouts/editor.ejs
+1 -9
View File
@@ -5,6 +5,7 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <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> <script src="/dist/bundle.js"></script>
<link rel="stylesheet" type="text/css" href="/dist/custom.css"> <link rel="stylesheet" type="text/css" href="/dist/custom.css">
@@ -34,15 +35,6 @@
<%- body %> <%- 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> </body>
<script src="/dist/custom.js"></script> <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 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-content">
<div class="modal-header"> <div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"> <button type="button" class="close" data-dismiss="modal" aria-label="Close">
@@ -12,20 +14,28 @@
<div class="row"> <div class="row">
<div class="col-md-4"> <div class="col-md-4">
<h2>Kdy?</h2> <h2>Kdy?</h2>
<p>1. 9. 2019</p> <input type="text" class="form-control select-date">
</div> </div>
<div class="col-md-4"> <div class="col-md-4">
<h2>Kde?</h2> <h2>Kde?</h2>
<p>Zámek Litomyšl</p>
<input type="text" id="map-input" class="form-control" />
</div> </div>
<div class="col-md-4"> <div class="col-md-4">
<h2>V kolik?</h2> <h2>V kolik?</h2>
<p>11:00</p> <input type="text" class="form-control select-time">
</div> </div>
</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> </div>
src/views/partials/editor/modals/setTitlePhoto.ejs
+8 -12
View File
@@ -9,20 +9,16 @@
</button> </button>
</div> </div>
<div class="modal-body"> <div class="modal-body">
<div class="container"> <div class="form-group">
<div class="col-md-6"> <label>Vybrat obrázek</label>
<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> <div class="input-group">
<input type="file" class="file-upload" data-preview=".image-preview" id="imgInp">
</div> </div>
<img class="image-preview" />
</div> </div>
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
src/views/partials/editor/titlePhoto.ejs
+2 -3
View File
@@ -1,6 +1,5 @@
<section class="web-section"> <section class="web-part">
<div class="profile-pic"> <div class="title-image" style="background-image: url('/dist/images/01.jpg')">
<img src="./img/affair-anniversary-beach-1024993.jpg" class="img-fluid" id="uvodni" alt="Krásná úvodní fotografie">
<div class="web-part__edit"> <div class="web-part__edit">
<a href="#setTitlePhotoModal" data-toggle="modal" data-target="#setTitlePhotoModal"> <a href="#setTitlePhotoModal" data-toggle="modal" data-target="#setTitlePhotoModal">