Merge pull request #249 from cvogeley/master

New modal dialog for item expiry

3 files changed, 67 insertions, 4 deletions

diff --git a/view/php/theme_init.php b/view/php/theme_init.php
index e1625b3e5..4aecb8ecf 100644
--- a/view/php/theme_init.php
+++ b/view/php/theme_init.php
@@ -10,10 +10,12 @@ head_add_css('library/jgrowl/jquery.jgrowl.css');
 head_add_css('library/jslider/css/jslider.css');
 head_add_css('library/prettyphoto/css/prettyPhoto.css');
 head_add_css('library/colorbox/colorbox.css');
+
 // head_add_css('library/font_awesome/css/font-awesome.min.css');
 head_add_css('view/css/conversation.css');
 head_add_css('view/css/bootstrap-red.css');
 head_add_css('view/css/widgets.css');
+head_add_css('library/bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css');
 
 head_add_js('js/jquery.js');
 head_add_js('library/bootstrap/js/bootstrap.min.js');
@@ -43,7 +45,8 @@ head_add_js('library/jslider/bin/jquery.slider.min.js');
 head_add_js('docready.js');
 head_add_js('library/prettyphoto/js/jquery.prettyPhoto.js');
 head_add_js('library/colorbox/jquery.colorbox-min.js');
-
+head_add_js('library/bootstrap-datetimepicker/js/moment.js');
+head_add_js('library/bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js');
 /**
  * Those who require this feature will know what to do with it.
  * Those who don't, won't.
diff --git a/view/tpl/jot-header.tpl b/view/tpl/jot-header.tpl
index 1ceca04c6..09d035979 100755
--- a/view/tpl/jot-header.tpl
+++ b/view/tpl/jot-header.tpl
@@ -194,10 +194,17 @@ function enableOnUser(){
 	}
 
 	function jotGetExpiry() {
-		reply = prompt("{{$expirewhen}}", $('#jot-expire').val());
-		if(reply && reply.length) {
+		//reply = prompt("{{$expirewhen}}", $('#jot-expire').val());
+		$('#expiryModal').modal();
+		$('#expiry-modal-OKButton').on('click', function() {
+    	reply=$('#expiration-date').val();
+    	if(reply && reply.length) {
 			$('#jot-expire').val(reply);
+			$('#expiryModal').modal('hide');
 		}
+})
+		
+		
 	}
 
 	function jotShare(id) {
@@ -299,3 +306,16 @@ function enableOnUser(){
 
 </script>
 
+<!-- 
+<script>
+$( document ).on( "click", ".wall-item-delete-link", function(e) {
+	var link = $(this).attr("href"); // "get" the intended link in a var
+    e.preventDefault();
+  	bootbox.confirm("<h4>Delete item?</h4>", function(result) {
+    				if (result) {
+      				document.location.href = link;}
+      				});
+    });
+</script>
+ -->
+
diff --git a/view/tpl/jot.tpl b/view/tpl/jot.tpl
index 666fae9cd..a0bc9c805 100755
--- a/view/tpl/jot.tpl
+++ b/view/tpl/jot.tpl
@@ -90,9 +90,49 @@
 			{{$jotnets}}
 		</div>
 	</div>
+<!-- Modal for item expiry-->
+<div class="modal fade" id="expiryModal" tabindex="-1" role="dialog" aria-labelledby="expiryModalLabel" aria-hidden="true">
+  <div class="modal-dialog">
+    <div class="modal-content">
+      <div class="modal-header">
+        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
+        <h4 class="modal-title" id="expiryModalLabel">{{$expires}}</h4>
+      </div>
+     <!--  <div class="modal-body"> -->
+            <div class="modal-body form-group" style="width:90%">
+                <div class="input-group input-group-sm date" id="datetimepicker1">
+                    <span class="input-group-addon"><!-- <span class="glyphicon glyphicon-calendar"></span> -->
+                    <span class="icon-calendar"></span>
+                    </span>
+                    <input id="expiration-date" type='text' class="form-control" data-format="YYYY-MM-DD HH:mm" size="20"/>
+                </div>
+            </div>
+      <!-- </div> -->
+      <div class="modal-footer">
+        <button type="button" class="btn btn-default" data-dismiss="modal">{{$expiryModalCANCEL}}</button>
+        <button id="expiry-modal-OKButton" type="button" class="btn btn-primary">{{$expiryModalOK}}</button>
+      </div>
+    </div><!-- /.modal-content -->
+  </div><!-- /.modal-dialog -->
+</div><!-- /.modal -->
+<script type="text/javascript">
+  $(function() {
+    $('#datetimepicker1').datetimepicker({
+      language: 'us',
+      icons: {
+					time: "icon-time",
+					date: "icon-calendar",
+					up: "icon-arrow-up",
+					down: "icon-arrow-down"
+				}
+    });
+  });
+</script>
+</div>
+
+
 
 
-</div>
 
 <div id="profile-jot-end"></div>
 </form>