diff --git a/dist/custom.css b/dist/custom.css index de2e393..97a2f54 100644 --- a/dist/custom.css +++ b/dist/custom.css @@ -1,23 +1,3 @@ - -.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; diff --git a/dist/custom.js b/dist/custom.js index 91b58da..532fc20 100644 --- a/dist/custom.js +++ b/dist/custom.js @@ -1,53 +1,4 @@ - -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) { +$ ('#mainInfoModal').on ('show.bs.modal', function (e) { $ ('#map').locationpicker ({ location: {latitude: 46.15242437752303, longitude: 2.7470703125}, radius: 10, @@ -61,4 +12,38 @@ $('#mainInfoModal').on('show.bs.modal', function (e) { }, enableAutocomplete: true }); -}) +}); + + + +$('.js-move-button-trigger').click(function () { + $('.js-move-button').show(); + $('.gallery__buttons').show(); + $(this).attr('hidden', true); + $('.js-move-done-button-trigger').attr('hidden', false); +}); + +$('.js-move-done-button-trigger').click(function () { + $('.js-move-button').hide(); + $('.gallery__buttons').hide(); + + $(this).attr('hidden', true); + $('.js-move-button-trigger').attr('hidden', false); +}); + + +$('.js-delete-button-trigger').click(function () { + $('.js-delete-checkbox').show(); + $('.gallery__buttons').show(); + + $(this).attr('hidden', true); + $('.js-delete-button-confirmation').attr('hidden', false); +}); + +$('.js-delete-button-confirmation-trigger').click(function () { + $('.js-delete-checkbox:checked').closest('.gallery__item').fadeOut('fast'); + $('.gallery__buttons').hide(); + + $('.js-delete-button-confirmation').attr('hidden', true); + $('.js-delete-button-trigger').attr('hidden', false); +}); \ No newline at end of file diff --git a/dist/images/gallery/1.jpg b/dist/images/gallery/1.jpg new file mode 100644 index 0000000..6b09f3e Binary files /dev/null and b/dist/images/gallery/1.jpg differ diff --git a/dist/images/gallery/2.jpg b/dist/images/gallery/2.jpg new file mode 100644 index 0000000..2b11f45 Binary files /dev/null and b/dist/images/gallery/2.jpg differ diff --git a/dist/images/gallery/3.jpg b/dist/images/gallery/3.jpg new file mode 100644 index 0000000..5c0e2ae Binary files /dev/null and b/dist/images/gallery/3.jpg differ diff --git a/dist/images/gallery/4.jpg b/dist/images/gallery/4.jpg new file mode 100644 index 0000000..5719453 Binary files /dev/null and b/dist/images/gallery/4.jpg differ diff --git a/dist/images/gallery/5.jpg b/dist/images/gallery/5.jpg new file mode 100644 index 0000000..15b2b69 Binary files /dev/null and b/dist/images/gallery/5.jpg differ diff --git a/dist/images/gallery/6.jpg b/dist/images/gallery/6.jpg new file mode 100644 index 0000000..8fbfe01 Binary files /dev/null and b/dist/images/gallery/6.jpg differ diff --git a/index.js b/index.js index 4febe00..fcc6e92 100644 --- a/index.js +++ b/index.js @@ -6,21 +6,21 @@ import $ from 'jquery'; import 'bootstrap'; import 'fullcalendar'; import Jodit from 'jodit'; +import Sortable from 'sortablejs-float'; +import 'pc-bootstrap4-datetimepicker'; +// SASS +import './src/assets/scss/app.scss'; // globaly accessible variables and classes window.jQuery = $; window.$ = $; window.Jodit = Jodit; - -import 'pc-bootstrap4-datetimepicker'; - - +window.Sortable = Sortable; // custom made functions - everything in src/assets/js function requireAll(r) { r.keys ().forEach (r); } + requireAll (require.context ('./src/assets/js', true, /\.js$/)); -// SASS -import './src/assets/scss/app.scss'; diff --git a/package-lock.json b/package-lock.json index 0b861fc..285ddb4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -5171,6 +5171,11 @@ } } }, + "sortablejs-float": { + "version": "1.7.0", + "resolved": "https://registry.npmjs.org/sortablejs-float/-/sortablejs-float-1.7.0.tgz", + "integrity": "sha512-7mRi3ramM3DLpXATBF4gBESUAvjUPhe5NHkk6HYEXjHQMs6/hXNo9XHamRGAsoHPRVUnH8MDpLJBbWAKp3S8pQ==" + }, "source-list-map": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/source-list-map/-/source-list-map-2.0.1.tgz", diff --git a/package.json b/package.json index 259938b..ecbafe4 100644 --- a/package.json +++ b/package.json @@ -14,7 +14,8 @@ "jodit": "^3.2.22", "jquery": "^3.3.1", "pc-bootstrap4-datetimepicker": "^4.17.50", - "popper.js": "^1.14.5" + "popper.js": "^1.14.5", + "sortablejs-float": "^1.7.0" }, "devDependencies": { "autoprefixer": "^9.3.1", diff --git a/src/assets/js/datepicker.js b/src/assets/js/datepicker.js index f1d7927..3bd30a6 100644 --- a/src/assets/js/datepicker.js +++ b/src/assets/js/datepicker.js @@ -1,118 +1,12 @@ -// $ (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 (function () { + $ ('.select-time').datetimepicker ({ + format: 'LT', + locale: 'cs', + stepping: 10, + }); + $ ('.select-date').datetimepicker ({ + format: 'D. M. Y', + locale: 'cs', + minDate: new Date () + }); +}); diff --git a/src/assets/js/sortable.js b/src/assets/js/sortable.js index 04982f0..5af9745 100644 --- a/src/assets/js/sortable.js +++ b/src/assets/js/sortable.js @@ -4,50 +4,34 @@ $ (document).ready (function () { } }); -// init sortable on reloaded snippet -$ (document).on ('snippet-reloaded', initSortable); - function initSortable() { - if (typeof Sortable === 'undefined') { - $.getScript ('/www/assets/dist/js/Sortable.js', initSortable); - } else { - var $elements = document.getElementsByClassName ("draggable-container"); - if ($elements.length === 0) { - return; + var $elements = document.getElementsByClassName ("draggable-container"); + if ($elements.length === 0) { + return; + } + + for (i in $elements) { + var $el = $elements[i]; + + if (typeof $el !== 'object') { + continue; } - for (i in $elements) { - var $el = $elements[i]; + Sortable.create ($el, { + animation: 200, + handle: ".sort-handle", + draggable: ".draggable", + onEnd: function (evt) { + var ordered = []; + + // get item ids + $ ('.sortable-item').each (function () { + var $e = $ (this); + ordered.push ($e.data ('id')); + }); + - if (typeof $el !== 'object') { - continue; } - - Sortable.create ($el, { - animation: 200, - handle: ".sort-handle", - draggable: ".draggable", - onEnd: function (evt) { - var ordered = []; - - console.log(evt); - - // get item ids - $ ('.sortable-item').each (function () { - var $e = $ (this); - ordered.push ($e.data ('id')); - }); - - // send ordered items - $.nette.ajax ({ - url: evt.target.getAttribute('data-url'), - method: "post", - data: { - items: ordered - } - }); - } - }); - } + }); } } \ No newline at end of file diff --git a/src/assets/js/uploadPreview.js b/src/assets/js/uploadPreview.js new file mode 100644 index 0000000..7abda1c --- /dev/null +++ b/src/assets/js/uploadPreview.js @@ -0,0 +1,29 @@ +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); +}); \ No newline at end of file diff --git a/src/assets/js/wysiwyg.js b/src/assets/js/wysiwyg.js new file mode 100644 index 0000000..18a7f6b --- /dev/null +++ b/src/assets/js/wysiwyg.js @@ -0,0 +1,12 @@ +$ (document).ready (function () { + // init WYSIWYG editors + var editorCounter = 0; + $ ('.wysiwyg').each (function () { + var $editor = $ (this); + var id = 'wysiwyg-editor-' + editorCounter++; + + $editor.attr ('id', id); + + new Jodit ('#' + id); + }); +}); \ No newline at end of file diff --git a/src/assets/scss/editor/app.scss b/src/assets/scss/editor/app.scss index df42554..a35e50c 100644 --- a/src/assets/scss/editor/app.scss +++ b/src/assets/scss/editor/app.scss @@ -1,5 +1,5 @@ - - @import "parts"; +@import "titleImage"; @import "timeline"; +@import "gallery"; diff --git a/src/assets/scss/editor/gallery.scss b/src/assets/scss/editor/gallery.scss new file mode 100644 index 0000000..6c51adb --- /dev/null +++ b/src/assets/scss/editor/gallery.scss @@ -0,0 +1,62 @@ +.gallery { + &__container { + display: flex; + flex-wrap: wrap; + a { + color: white; + text-decoration: none; + } + } + + &__item { + width: 33%; + filter: saturate(0.5); + position: relative; + + img { + width: 100%; + } + + &:hover { + filter: saturate(1); + + .gallery__overlay { + display: block; + } + } + } + + &__overlay { + display: none; + position: absolute; + background: rgba(0, 0, 0, 0.5); + color: white; + top: 0; + bottom: 0; + left: 0; + right: 0; + text-align: center; + padding: 10px; + } + + &__buttons { + position: absolute; + top: 0; + left: 0; + right: 0; + background: rgba(0, 0, 0, 0.5); + padding: 5px; + color: white; + + &, &__item { + display: none; + } + } +} + +.image-preview { + max-width: 100%; + border: solid 1px; + margin: 10px 0; + display: none; +} \ No newline at end of file diff --git a/src/assets/scss/editor/parts.scss b/src/assets/scss/editor/parts.scss index 1a4b81f..4a21266 100644 --- a/src/assets/scss/editor/parts.scss +++ b/src/assets/scss/editor/parts.scss @@ -1,11 +1,12 @@ .web-part { - + margin-bottom: 3rem; position: relative; &__edit { position: absolute; top: 10px; right: 10px; + font-size: 200%; } } \ No newline at end of file diff --git a/src/assets/scss/editor/titleImage.scss b/src/assets/scss/editor/titleImage.scss new file mode 100644 index 0000000..55480eb --- /dev/null +++ b/src/assets/scss/editor/titleImage.scss @@ -0,0 +1,9 @@ + +.title-image { + height: 700px; + width: 100%; + background-repeat: no-repeat; + background-size: cover; + background-position: center center; + margin-bottom: 3rem; +} \ No newline at end of file diff --git a/src/views/backend/index.ejs b/src/views/backend/index.ejs index 078a386..287cb3a 100644 --- a/src/views/backend/index.ejs +++ b/src/views/backend/index.ejs @@ -49,7 +49,7 @@
- +
diff --git a/src/views/editor/gallery.ejs b/src/views/editor/gallery.ejs new file mode 100644 index 0000000..8ab4283 --- /dev/null +++ b/src/views/editor/gallery.ejs @@ -0,0 +1,37 @@ + +
+

Fotogalerie

+ + + + + + +
+ + <% for(var i = 1; i <= 6; i++) { %> +
+ + + +

Jméno galerie

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

+ + +
+ + <% } %> +
+ + <% include ../partials/editor/modals/newGallery.ejs %> + <% include ../partials/editor/modals/uploadPhoto.ejs %> + + + + +
\ No newline at end of file diff --git a/src/views/editor/gallery_detail.ejs b/src/views/editor/gallery_detail.ejs new file mode 100644 index 0000000..dc5157e --- /dev/null +++ b/src/views/editor/gallery_detail.ejs @@ -0,0 +1,57 @@ +
+ +

Nadpis alba

+
+

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore + magna aliqua. Ut enim ad minim veniam, quis + nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in + reprehenderit in voluptate velit esse cillum dolore eu fugiat + nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim + id est laborum.

+
+ + <% include ../partials/editor/modals/editGalleryText.ejs %> + + + + + +
+ + <% for(var i = 1; i <= 6; i++) { %> +
+ +
+ + +
+ + +
+ + <% } %> +
+ + <% include ../partials/editor/modals/newGallery.ejs %> + <% include ../partials/editor/modals/uploadPhoto.ejs %> + <% include ../partials/editor/modals/deletePhotos.ejs %> + +
\ No newline at end of file diff --git a/src/views/editor/index.ejs b/src/views/editor/index.ejs index ecc3aff..96d5579 100644 --- a/src/views/editor/index.ejs +++ b/src/views/editor/index.ejs @@ -1,8 +1,28 @@ -<% include ../partials/editor/titlePhoto.ejs %> +
+
-
- <% include ../partials/editor/aboutUs.ejs %> -
+
+ + + +
+
+ <% include ../partials/editor/modals/setTitlePhoto.ejs %> +
+ +
+

Adam a Eva

+
+

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore + magna aliqua. Ut enim ad minim veniam, quis + nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in + reprehenderit in voluptate velit esse cillum dolore eu fugiat + nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim + id est laborum.

+
+ + <% include ../partials/editor/modals/setAboutUs.ejs %> +
@@ -20,48 +40,89 @@

11:00

- -
- - - -
- <% include ../partials/editor/modals/mainInfo.ejs %>
-

Svatební program

+

Svatební program

-
+
-
+
- <% for(var i = 0; i < 5; i++) { %> -
+ <% for(var i = 0; i < 5; i++) { %> +
- - -
-

11:00

-

<%= i %> Hostina

-
+ +
+

11:00

+

<%= i %> Hostina

- <% } %> -
+
+ <% } %> +
- -
- - -
<% include ../partials/editor/modals/program.ejs %>
+ +
+

Fotogalerie

+ +
+ + <% for(var i = 1; i <= 6; i++) { %> +
+ + + +

Jméno galerie

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

+ + +
+ + <% } %> +
+ +

+ + +
+ + +
+

Napište nám

+ +
+ +
+ +
+
+
+
+
+
+
+
+ +
+
+
+
+
+ +
+
+
+ + +
\ No newline at end of file diff --git a/src/views/partials/editor/aboutUs.ejs b/src/views/editor/story.ejs similarity index 67% rename from src/views/partials/editor/aboutUs.ejs rename to src/views/editor/story.ejs index 19cbcbe..a3da9db 100644 --- a/src/views/partials/editor/aboutUs.ejs +++ b/src/views/editor/story.ejs @@ -1,5 +1,5 @@ -
-

Adam a Eva

+
+

Náš příběh

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis @@ -9,11 +9,5 @@ id est laborum.

-
- - - -
- - <% include ./modals/setAboutUs.ejs %> + <% include ../partials/editor/modals/ourStory.ejs %>
\ No newline at end of file diff --git a/src/views/layouts/editor.ejs b/src/views/layouts/editor.ejs index b3021b4..34c8eee 100644 --- a/src/views/layouts/editor.ejs +++ b/src/views/layouts/editor.ejs @@ -24,10 +24,10 @@ @@ -35,6 +35,9 @@ <%- body %> +<% include ../partials/editor/modals/newTextPage.ejs %> + + diff --git a/src/views/partials/editor/modals/deletePhotos.ejs b/src/views/partials/editor/modals/deletePhotos.ejs new file mode 100644 index 0000000..7ed848e --- /dev/null +++ b/src/views/partials/editor/modals/deletePhotos.ejs @@ -0,0 +1,22 @@ + + \ No newline at end of file diff --git a/src/views/partials/editor/modals/editGalleryText.ejs b/src/views/partials/editor/modals/editGalleryText.ejs new file mode 100644 index 0000000..b50d17f --- /dev/null +++ b/src/views/partials/editor/modals/editGalleryText.ejs @@ -0,0 +1,27 @@ +
+ + + +
+ + \ No newline at end of file diff --git a/src/views/partials/editor/modals/mainInfo.ejs b/src/views/partials/editor/modals/mainInfo.ejs index d16ef24..a819b95 100644 --- a/src/views/partials/editor/modals/mainInfo.ejs +++ b/src/views/partials/editor/modals/mainInfo.ejs @@ -1,4 +1,8 @@ - +
+ + + +