Merge pull request #98 from bkraul/develop-1.3.x

Image picker and minimal corrections.

Author: bkraul

BBCodePlus/BBCodePlus.php

@@ -21,7 +21,7 @@ function register() {
          $this->name        = plugin_lang_get( 'title' );
          $this->description = plugin_lang_get( 'description' );
          $this->page        = 'config';
-         $this->version     = '1.3.15';
+         $this->version     = '1.3.17';
 
          $this->requires['MantisCore'] = '1.3.0';
          # this plugin can coexist with MantisCoreFormatting.
@@ -42,6 +42,7 @@ function hooks() {
          $hooks = parent::hooks();
 
          # add in our plugin's hooks.
+		 $hooks['EVENT_LAYOUT_CONTENT_BEGIN'] = 'content_begin';
          $hooks['EVENT_LAYOUT_RESOURCES'] = 'resources';
          $hooks['EVENT_LAYOUT_PAGE_FOOTER'] = 'footer';
          $hooks['EVENT_CORE_HEADERS'] = 'csp_headers';
@@ -69,6 +70,25 @@ function init() {
          }
       }
       //-------------------------------------------------------------------
+      /**
+       *  Event fired on content begin (at top of page). Useful for notices.
+       *
+       * @return  void
+       */
+      function content_begin() {
+         # add image picker modal.
+         $output = '<div id="bbcodeplus-image-picker" class="bbcodeplus modal">';
+         $output .= '<div class="bbcodeplus modal-content table-container">';
+         $output .= '<table>';
+         $output .= '<tr><th class="category">Images attached to issue</th><th class="category" width="1" ><a href="#" id="bbcodeplus-image-picker-close" class="bbcodeplus modal-close">&times;</a></th></tr>';
+         $output .= '</table>';
+         $output .= '<div id="bbcodeplus-image-picker-body" class="bbcodeplus modal-body"></div>';
+         $output .= '</div>';
+         $output .= '</div>';
+
+         return $output;
+      }
+      //-------------------------------------------------------------------
       /**
        *  Event fired on printing page footer.
        *

BBCodePlus/files/bbcodeplus.css

@@ -33,3 +33,95 @@
    border-radius: 4px;
    margin: 0px !important;
 }
+
+.bbcodeplus.modal {
+  display: none;
+  position: fixed;
+  z-index: 1030;
+  padding-top: 100px;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+  background-color: rgb(0,0,0);
+  background-color: rgba(0,0,0,0.4);
+ }
+
+.bbcodeplus.modal-close {
+  color: black;
+}
+ 
+.bbcodeplus.modal-close:hover,
+.bbcodeplus.modal-close:focus {
+  color: red;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+.bbcodeplus.modal-content {
+  position: relative;
+  background-color: #fefefe;
+  margin: auto;
+  padding: 0;
+  padding-bottom: 10px;
+  border: 1px solid #888;
+  width: 50%;
+  max-height: 50%;
+  overflow: hidden;
+  z-index: 1031;
+  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
+  animation-name: animatetop;
+  animation-duration: 0.4s
+}
+
+.bbcodeplus.modal-body {
+  padding: 10px;
+}
+
+.bbcodeplus.image-picker {
+  margin: 1em 0;
+  padding: 0;
+  list-style: none;
+  display: grid;
+  grid: auto-flow / repeat(auto-fill, minmax(110px, 1fr));
+  align-items: baseline;
+  grid-gap: 10px;
+  gap: 10px;
+}
+
+.bbcodeplus.image-picker li {
+  width: 100px;
+  height: 100px;
+  min-height: 100px;
+  display: -moz-inline-stack;
+  display: inline-block;
+  vertical-align: middle;
+  margin: 5px;
+  zoom: 1;
+  *display: inline;    
+}
+
+.bbcodeplus.image-picker li img {
+  width: 100%;
+  padding: 5px;
+  border: 1px solid rgba(221,221,221,1);
+  border-radius: 5px;
+  max-width: 100%;
+}
+  
+.bbcodeplus.image-picker li img:hover {
+  filter: brightness(80%);
+  background-color: rgba(221,221,221,1);
+}
+
+/* Add Animation */
+@-webkit-keyframes animatetop {
+   from {top:-300px; opacity:0} 
+   to {top:0; opacity:1}
+ }
+ 
+ @keyframes animatetop {
+   from {top:-300px; opacity:0}
+   to {top:0; opacity:1}
+ }