New mobile theming for colorbox

touchSwipe for mobile swipe support
Heartbeat titles now reflect content
HeartbeatForm amended for better editing

css/heartbeat.css

@@ -22,6 +22,70 @@
   max-width: 100%;
 }
 
+/*Imgs displayed in colorbox*/
+
+.cboxPhoto {
+  max-height: 854px;
+  width: auto!important;
+  position: absolute;
+  top:0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  margin: auto;
+}
+
+#colorbox {
+  text-align: center!important;
+  position: fixed!important;
+  top: 0!important;
+  left: 0!important;
+  background: rgba(28, 28, 28, 0.75)!important;
+  height: 100%!important;
+  width: 100%!important;
+}
+
+#cboxContent,
+#cboxLoadedContent,
+#cboxWrapper {
+  width: 100%!important;
+  height: 100%!important;
+}
+
+#cboxNext {
+  display: inline-block;
+  transform: translate(821%, 550%);
+  color: transparent;
+  background-image: url(/themes/kekistan/images/icons/forward.png);
+  background-repeat: no-repeat;
+  background-position: 10px 20px;
+  width: 45px;
+  height: 75px;
+}
+
+#cboxPrevious {
+  display: inline-block;
+  transform: translate(-800%, 550%);
+  color: transparent;
+  background-image: url(/themes/kekistan/images/icons/backward.png);
+  background-repeat: no-repeat;
+  background-position: 10px 21px;
+  width: 45px;
+  height: 75px;
+}
+
+#cboxClose {
+  position: absolute;
+  top: 95px;
+  right: 100px;
+  color: transparent;
+  background-image: url(/themes/kekistan/images/icons/close.png);
+  background-repeat: no-repeat;
+  background-size: 75%;
+  background-position: 6px 2px;
+  width: 45px;
+}
+
 /*Main Feed Form*/
 #heartbeat-feed-form input[type="radio"] {
     -webkit-appearance: none;
@@ -32,7 +96,6 @@
     display: inline-block;
     position: relative;
     border-right: 1px solid white;
-
 }
 #heartbeat-feed-form input.form-radio {
     background: #12ff00;

heartbeat.libraries.yml

@@ -10,6 +10,7 @@ heartbeat:
       css/heartbeat.css: {}
   js:
     js/heartbeat.js: {}
+    js/jquery.touchSwipe.min.js: {}
     js/jquery.colorbox-min.js: {}
   dependencies:
     - core/jquery

heartbeat.module

@@ -130,7 +130,7 @@ function heartbeat_entity_insert(EntityInterface $entity) {
                 'type' => $heartbeatTypeEntity->id(),
                 'uid' => $user->id(),
                 'nid' => $entity->id(),
-                'name' => 'Dev Test',
+                'name' => $entity->getTitle(),
               ]);
               //TODO Find better fix than this str_replace
               $heartbeatActivity->setMessage(str_replace('&039;', "'", $heartbeatMessage));

js/heartbeat.js

@@ -195,6 +195,19 @@
     }
   });
 
+  jQuery(document).bind('cbox_open', function(){
+    jQuery("#colorbox").swipe( {
+      //Generic swipe handler for all directions
+      swipeLeft:function(event, direction, distance, duration, fingerCount) {
+        jQuery.colorbox.prev();
+      },
+      swipeRight:function(event, direction, distance, duration, fingerCount) {
+        jQuery.colorbox.next();
+      },
+      //Default is 75px, set to 0 for demo so any distance triggers swipe
+      threshold:0
+    });
+  });
 
 })(jQuery, Drupal, drupalSettings);
 

src/Form/HeartbeatForm.php

@@ -35,16 +35,16 @@ class HeartbeatForm extends ContentEntityForm {
     $form['uid'] = array(
       '#type' => 'entity_autocomplete',
       '#target_type' => 'user',
-      '#default_value' => $entity->getOwner()->isAnonymous() ? NULL : $entity->getOwner(),
+      '#default_value' => $entity->getOwner(),
       // A comment can be made anonymous by leaving this field empty therefore
       // there is no need to list them in the autocomplete.
       '#selection_settings' => ['include_anonymous' => FALSE],
       '#title' => $this->t('Authored by'),
-      '#description' => $this->t('No cucks.')
+      '#description' => $this->t('The owner of the heartbeat')
     );
 
     $form['message'] = array(
-      '#type' => 'textarea',
+      '#type' => 'text_format',
       '#description' => t('The Heartbeat message'),
       '#title' => 'Message',
       '#default' => $entity->getMessage()->getValue()[0]['value'],
@@ -59,7 +59,7 @@ class HeartbeatForm extends ContentEntityForm {
       '#entity_type' => 'node',
       '#target_type' => 'node',
       '#selection_handler' => 'default',
-      '#default_value' => $nodeId > 0 ? null : $this->nodeManager->load($nodeId),
+      '#default_value' => $node,
       '#title' => 'Node',
       '#description' => t('The node referenced by this Heartbeat')
     );