Pridan program, opraveno jQuery s webpackem

.gitignore

@@ -1,4 +1,5 @@
 node_modules
 dist
 .idea
-!dist/custom.*
+!/dist/custom.js
+!/dist/custom.css

index.js

@@ -1,13 +1,22 @@
 // webpack entry point
 
 // JS
+import $ from 'jquery';
+
+window.jQuery = $;
+window.$ = $;
+
 import 'bootstrap';
+import 'fullcalendar';
 
-var req = require.context("./src/assets/js", true, /^(.*\.(js$))[^.]*$/igm);
-req.keys().forEach(function(key){
-    req(key);
-});
 
+function requireAll(r) {
+	r.keys ().forEach (r);
+}
+requireAll (require.context ('./src/assets/js', true, /\.js$/));
 
 // SASS
-import './src/assets/scss/app.scss';
+import './src/assets/scss/app.scss';
+
+// nefunguje kalendar z nejakeho duvodu - mam blbe cestu
+// import '~fullcalendar/dist/fullcalendar.css';

src/assets/js/calendar.js

@@ -48,7 +48,7 @@ function initCalendar() {
 
 			$modal.find ('input[name=startdate]').val (startdate);
 		},
-		eventDrop: function (event) {
+		/*eventDrop: function (event) {
 			if (event.type === "event") {
 				$.nette.ajax ({
 					url: {plink editCalendarEvent!},
@@ -71,7 +71,7 @@ function initCalendar() {
 					}
 				});
 			}
-		},
+		},*/
 		eventClick: function (event, jsEvent, view) {
 			// wasn't remove button clicked?
 			if ($ (jsEvent.target).hasClass ('fa-times')) {
@@ -97,14 +97,14 @@ function initCalendar() {
 			$modal.modal ('show');
 
 		},
-		eventRender: function (event, element) {
+		/*eventRender: function (event, element) {
 
 			var url = {plink delete! 0,1};
 			url = url.replace ("0?", event.id + "?").replace ("type=1", "type=" + event.type);
 
 			var link = '<span class="delete-button"><a href="javascript:void(0);" data-action="' + url + '" class="calendar-remove"><span class="fa fa-times"></span></a></span>';
 			element.find (".fc-title").parent ().append (link);
-		},
+		},*/
 		events: window.events
 	});
 

src/assets/js/program.js

@@ -0,0 +1,38 @@
+$ (document).on ('click', '.js-add-program', function () {
+	var $template = $ ($ (this).data ('template'));
+
+	var $templateContainer = $ ($ (this).data ('template-container'));
+
+	var $copy = $template.clone ().removeClass ('template');
+	$copy.find ('.js-remove-program').removeAttr('hidden');
+
+
+	$copy.appendTo ($templateContainer);
+});
+
+$ (document).on ('click', '.js-remove-program', function () {
+
+	if ($ (this).hasClass ('template'))
+		return;
+
+	$ (this).closest ('tr').remove ();
+});
+
+var $iconTarget = null;
+$(document).on('click', '.js-set-icon-program', function () {
+	$('#setIconProgramModal').modal('show');
+
+	$iconTarget = $(this);
+});
+
+$(document).on('click', '.js-choose-icon', function () {
+
+	var icon = $(this).data('icon');
+
+	$iconTarget.find('input').val(icon);
+	$iconTarget.find('.fa').removeAttr('class').addClass('fa fa-2x fa-'+icon);
+	$iconTarget = null;
+
+	$('#setIconProgramModal').modal('hide');
+
+});

src/assets/scss/app.scss

@@ -23,4 +23,4 @@ $fa-font-path: "~font-awesome/fonts";
 @import "backToDashboard";
 @import "boxes";
 
-@import "editor/parts";
+@import "editor/app";

src/assets/scss/boxes.scss

@@ -4,9 +4,11 @@
   &__container {
     column-count: 2;
     column-width: 50%;
+    padding: 20px;
   }
 
   &__item {
-    margin: 20px;
+    margin-bottom: 20px;
   }
+
 }

src/assets/scss/editor/app.scss

@@ -0,0 +1,4 @@
+
+
+@import "parts";
+@import "timeline";

src/assets/scss/editor/timeline.scss

@@ -0,0 +1,56 @@
+.timeline-container {
+  overflow: auto;
+  white-space: nowrap;
+}
+
+.timeline {
+  list-style: none;
+  width: auto;
+  color: gray;
+  display: flex;
+  flex-wrap: nowrap;
+  flex-direction: row;
+}
+
+.timeline .timeline__item {
+  display: inline-block;
+  max-width: 200px;
+  text-align: center;
+  padding: 0 20px;
+  margin: 0 10px;
+  flex-grow: 1;
+}
+
+
+.timeline .timeline__icon {
+  width: 40px;
+  height: 40px;
+  font-size: 40px;
+  position: relative;
+}
+
+.timeline::before {
+  border: solid 1px;
+  position: absolute;
+  top: 100px;
+  content: " ";
+  width: 100%;
+}
+
+.timeline .timeline__icon::after {
+  font: normal normal normal 14px/1 FontAwesome;
+  content: "\F111";
+  position: absolute;
+  z-index: -1;
+  width: 100%;
+  bottom: -30px;
+  left: 0;
+  font-size: 20px;
+}
+
+.timeline .timeline__content {
+  margin-top: 30px;
+}
+
+.timeline .timeline__content h3 {
+}

src/views/editor/index.ejs

@@ -2,5 +2,66 @@
 
 <div class="container text-center">
 	<% include ../partials/editor/aboutUs.ejs %>
+</div>
+
+<section class="web-part container text-center">
+
+	<div class="row">
+		<div class="col-md-4">
+			<h2>Kdy?</h2>
+			<p>1. 9. 2019</p>
+		</div>
+		<div class="col-md-4">
+			<h2>Kde?</h2>
+			<p>Zámek Litomyšl</p>
+		</div>
+		<div class="col-md-4">
+			<h2>V kolik?</h2>
+			<p>11:00</p>
+		</div>
+
+
+		<div class="web-part__edit">
+			<a href="#mainInfoModal" data-toggle="modal" data-target="#mainInfoModal">
+				<i class="fa fa-pencil-square"></i>
+			</a>
+		</div>
+
+		<% include ../partials/editor/modals/mainInfo.ejs %>
+
+	</div>
+</section>
+
+<section class="web-part container">
+	<h3>Svatební program</h3>
+
+		<div class="timeline-container">
+
+			<div class="timeline timeline-horizontal">
+
+				<% for(var i = 0; i < 5; i++) { %>
+					<div class="timeline__item">
+
+						<i class="timeline__icon fa fa-2x fa-heart-o"></i>
+
+						<div class="timeline__content">
+							<h3>11:00</h3>
+							<p><%= i %> Hostina</p>
+						</div>
+
+					</div>
+				<% } %>
+
+			</div>
+		</div>
+
+	<div class="web-part__edit">
+		<a href="#setProgramModal" data-toggle="modal" data-target="#setProgramModal">
+			<i class="fa fa-pencil-square"></i>
+		</a>
+	</div>
+
+	<% include ../partials/editor/modals/program.ejs %>
+
+</section>
 
-</div>

src/views/layouts/editor.ejs

@@ -6,7 +6,6 @@
 	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 
 	<script src="/dist/bundle.js"></script>
-	<script src="/dist/custom.js"></script>
 	<link rel="stylesheet" type="text/css" href="/dist/custom.css">
 
 	<title>Svatební web</title>
@@ -45,4 +44,7 @@
 		<!--<script src="https://github.com/jhollingworth/bootstrap-wysihtml5/blob/master/src/bootstrap-wysihtml5.js"></script>-->
 
 </body>
+
+<script src="/dist/custom.js"></script>
+
 </html>

src/views/partials/editor/modals/mainInfo.ejs

@@ -0,0 +1,40 @@
+<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-content">
+			<div class="modal-header">
+				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
+					<span aria-hidden="true">&times;</span>
+				</button>
+			</div>
+			<div class="modal-body">
+
+
+				<div class="row">
+					<div class="col-md-4">
+						<h2>Kdy?</h2>
+						<p>1. 9. 2019</p>
+					</div>
+					<div class="col-md-4">
+						<h2>Kde?</h2>
+						<p>Zámek Litomyšl</p>
+					</div>
+					<div class="col-md-4">
+						<h2>V kolik?</h2>
+						<p>11:00</p>
+					</div>
+				</div>
+
+
+				<canvas id="map">todo</canvas>
+
+			</div>
+
+
+			<div class="modal-footer">
+				<button type="button" class="btn btn-secondary" data-dismiss="modal">Storno</button>
+				<button type="button" class="btn btn-primary" data-dismiss="modal">Uložit
+				</button>
+			</div>
+		</div>
+	</div>
+</div>

src/views/partials/editor/modals/program.ejs

@@ -0,0 +1,77 @@
+
+<div class="modal fade" id="setProgramModal" tabindex="-1" role="dialog" aria-labelledby="setProgramModalLabel" aria-hidden="true">
+	<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">
+					<span aria-hidden="true">&times;</span>
+				</button>
+			</div>
+			<div class="modal-body">
+
+
+				<table>
+					<thead>
+					<tr>
+						<th>Čas</th>
+						<th>Ikona</th>
+						<th>Název události</th>
+						<th>
+						</th>
+					</tr>
+					</thead>
+					<tbody class="template-container">
+					<tr class="template">
+						<td><input type="text" class="form-control time" name="time[]" placeholder="11:00"></td>
+						<td class="text-center">
+
+							<a href="#" class="js-set-icon-program">
+								<input type="hidden" name="icon[]" value="heart">
+								<i class="fa fa-2x fa-heart"></i>
+							</a>
+
+						</td>
+						<td><input type="text" class="form-control program-description" name="description[]"></td>
+						<td><a href="#" class="js-remove-program" hidden><i class="fa fa-trash"></i></a></td>
+					</tr>
+					</tbody>
+					<tfoot>
+					<tr>
+						<td colspan="4">
+							<a href="#" class="js-add-program" data-template-container=".template-container" data-template=".template"><i class="fa fa-plus"></i></a>
+						</td>
+					</tr>
+					</tfoot>
+				</table>
+
+
+
+
+
+
+			</div>
+
+
+			<div class="modal-footer">
+				<button type="button" class="btn btn-secondary" data-dismiss="modal">Storno</button>
+				<button type="button" class="btn btn-primary" data-dismiss="modal">Uložit
+				</button>
+			</div>
+		</div>
+	</div>
+</div>
+
+
+<div class="modal fade" id="setIconProgramModal" tabindex="-1" role="dialog" aria-labelledby="setIconProgramModal" aria-hidden="true">
+	<div class="modal-dialog" role="document">
+		<div class="modal-content">
+			<div class="modal-body">
+
+				<a href="#" data-icon="gear" class="js-choose-icon"><i class="fa fa-2x fa-gear"></i></a>
+				<a href="#" data-icon="dashboard" class="js-choose-icon"><i class="fa fa-2x fa-dashboard"></i></a>
+				<a href="#" data-icon="home" class="js-choose-icon"><i class="fa fa-2x fa-home"></i></a>
+
+			</div>
+		</div>
+		</div>
+		</div>

src/views/partials/editor/modals/setAboutUs.ejs

@@ -8,22 +8,13 @@
 				</button>
 			</div>
 			<div class="modal-body">
-				<div class="container-fluid">
+				<textarea class="wysiwyg" name="aboutUs"></textarea>
-					<div class="row">
+			</div>
-						<div class="container">
+
-							<div class="row">
+			<div class="modal-footer">
-								<div class="col-lg-12 nopadding">
+				<button type="button" class="btn btn-secondary" data-dismiss="modal">Storno</button>
-									<textarea class="wysiwyg" name="aboutUs"></textarea>
+				<button type="button" class="btn btn-primary" data-dismiss="modal">Uložit
-								</div>
+				</button>
-							</div>
-						</div>
-					</div>
-					<div class="modal-footer">
-						<button type="button" class="btn btn-secondary" data-dismiss="modal">Storno</button>
-						<button type="button" class="btn btn-primary" data-dismiss="modal">Uložit
-						</button>
-					</div>
-				</div>
 			</div>
 		</div>
 	</div>