=

image/modal/modal.html

@@ -0,0 +1,12 @@
+<div class="ui modal image-preview-modal {{ class }}" id="image_preview_modal">   
+    <div class="header {{ header_class }}">
+        <i class="image-modal-icon icon blue large image outline {{ dialogs.confirm.icon }}"></i>
+        <span class="image-modal-title">{{ labels.title }}</span>       
+    </div>  
+    <div class="image content image-modal-description" id="image_modal_content">
+      <img class="image rounded bordered" data-src="" id="image_preview">
+    </div>
+    <div class="actions">     
+        <button class="ui blue approve button {{ buttons.close.class }}">{{ buttons.close.content }}</button>
+    </div>
+</div>

image/modal/modal.js

@@ -0,0 +1,53 @@
+/**
+ *  Arikaim
+ *  @copyright  Copyright (c) Konstantin Atanasov <[email protected]>
+ *  @license    http://www.arikaim.com/license
+ *  http://www.arikaim.com
+ */
+"use strict";
+
+function ImagePreviewModal() { 
+    var self = this;
+
+    this.loadCode = function() {
+        arikaim.component.loadContent('components:image.modal',function(result) {
+            $('body').append(result.html);           
+        });       
+    };
+
+    this.show = function(options) {
+        var modalId = getValue('id',options,'image_preview_modal');
+        var title = getValue('title',options,null);
+        var description = getValue('description',options,null);
+        var images = getValue('images',options,[]);
+        var icon = getValue('icon',options,null);
+        var hideIcon = getValue('hideIcon',options,null);
+
+        images.forEach(function(item) {
+            console.log(item);
+            $('#image_preview').attr('data-src',item);
+        });
+        if (isEmpty(title) == false) {
+            $('#' + modalId + ' .image-modal-title').html(title);
+        }
+        if (isEmpty(description) == false) {
+            $('#' + modalId + ' .image-modal-description').html(description);
+        }
+        if (isEmpty(icon) == false) {
+            $('#' + modalId + ' .image-modal-icon').attr('class','icon modal-icon ' + icon);           
+        }
+        if (isEmpty(hideIcon) == false) {
+            $('#' + modalId + ' .image-modal-icon').hide();
+        }
+        // show modal
+        $('#' + modalId).modal({}).modal('show');
+        // load images
+        arikaim.ui.initImageLoader();
+    };
+}
+
+var imagePreviewModal = new ImagePreviewModal();
+
+$(document).ready(function() {
+    imagePreviewModal.loadCode();
+});

image/modal/modal.json

@@ -0,0 +1,10 @@
+{
+    "labels": {
+        "title": "Image"
+    },
+    "buttons": {
+        "close": {
+            "content": "Close"
+        }
+    }
+}

modal/modal.js

@@ -68,4 +68,7 @@ function Modal() {
 }
 
 var modal = new Modal();
-modal.init();
+
+$(document).ready(function() {
+    modal.init();
+});