WebSVN – LeadersLinked - Backend – Diff – /module/LeadersLinked/view/leaders-linked/microlearning-capsules/index.phtml

 $allowDelete    = $acl->isAllowed($roleName, 'microlearning/content/capsules/delete') ? 1 : 0;
 $allowUsers     = $acl->isAllowed($roleName, 'microlearning/content/capsules/users') ? 1 : 0;
 $this->headLink()->setStylesheet($this->basePath('assets/vendors/nelberth-editor/style.css'));
                     json.recordsTotal       = 0;
                     json.recordsFiltered    = 0;
                     json.data               = [];
                     if(response.success) {
-                        $('#form-capsule-add').attr('action', response.data.link_add );
+                        $('#form-add').attr('action', response.data.link_add );
                         json.recordsTotal       = response.data.total;
                         json.recordsFiltered    = response.data.total;
               ],
         });
         var seleccionarCampo;
-    var validatorAdd = $('#form-capsule-add').validate({
+    var validatorAdd = $('#form-add').validate({
         debug: true,
         onclick: false,
         onkeyup: false,
                 },
                 required: true
             },
            'file': {
                 required: true,
+                extension: 'jpg|jpeg|png',
+                accept: 'image/jpg,image/jpeg,image/png'
             },
             'order' : {
                 required: true,
                 digits: true,
                 min: 1,
                 max: 250
             },
            'marketplace': {
-                required: true,
+                required: false,
+                extension: 'jpg|jpeg|png',
+                accept: 'image/jpg,image/jpeg,image/png'
             },
             'status' : {
                 required: true,
             },
             'privacy' : {
             'type' : {
                 required: true,
             },
             'cost' : {
                 required: function() {
-                    return $('#form-capsule-add #type').val() == 's';
+                    return $('#form-add #type').val() == 's';
                 },
                 'number' : true,
                 'min' : 0
+            }
         },
 			NProgress.start();
             $.ajax({
                 'dataType'  : 'json',
                 'accept'    : 'application/json',
                 'method'    : 'post',
-                'url'       :  $('#form-capsule-add').attr('action'),
+                'url'       :  $('#form-add').attr('action'),
                 'data'      :  formdata,
                 'processData': false,
                 'contentType': false,
             }).done(function(response) {
                 if(response['success']) {
                     $.fn.showSuccess(response['data']);
-                       console.log(response)
-                    $('body, html').animate({scrollTop: '0px'}, 300);
-					$('#content1').css('display','block');
+					gridTable.api().ajax.reload(null, false);
-                    $('.contenido').html('');
+                    $('#row-add').hide();
-            		seleccionarCampo.css('display','none');
+                    $('#row-edit').hide();
-					$('#titleTypeImage').html('LABEL_IMAGE_MARKETPLACE')
-					$('.marketplaceImg').attr('src', '')
-					fileToggle=true;
-                    gridTable.api().ajax.reload(null, false);
+                    $('#row-listing').show();
                 } else {
                     validatorAdd.resetForm();
                     if(jQuery.type(response['data']) == 'string') {
                         $.fn.showError(response['data']);
                     } else  {
                         $.each(response['data'], function( fieldname, errors ) {
-                            $.fn.showFormErrorValidator('#form-capsule-add #' + fieldname, errors);
+                            $.fn.showFormErrorValidator('#form-add #' + fieldname, errors);
                         });
+                    }
+                }
             }).fail(function( jqXHR, textStatus, errorThrown) {
 				console.log(jqXHR)
         invalidHandler: function(form, validator) {
+        }
     });
-    var validatorEdit  = $('#form-capsule-edit').validate({
+    var validatorEdit  = $('#form-edit').validate({
         debug: true,
         onclick: false,
         onkeyup: false,
                         CKEDITOR.instances.description_edit.updateElement();
                 },
                 required: true
             },
            'file': {
-                required: true,
+                required: false,
+                extension: 'jpg|jpeg|png',
+                accept: 'image/jpg,image/jpeg,image/png'
             },
             'order' : {
                 required: true,
                 digits: true,
                 min: 1,
                 max: 250
             },
            'marketplace': {
-                required: true,
+                required: false,
+                extension: 'jpg|jpeg|png',
+                accept: 'image/jpg,image/jpeg,image/png'
             },
             'status' : {
                 required: true,
             },
             'privacy' : {
             'type' : {
                 required: true,
             },
             'cost' : {
                 required: function() {
-                    return $('#form-capsule-edit #type').val() == 's';
+                    return $('#form-edit #type').val() == 's';
                 },
                 'number' : true,
                 'min' : 0
+            }
         },
 			NProgress.start();
             $.ajax({
                 'dataType'  : 'json',
                 'accept'    : 'application/json',
                 'method'    : 'post',
-                'url'       :  $('#form-capsule-edit').attr('action'),
+                'url'       :  $('#form-edit').attr('action'),
                 'data'      :  formdata,
                 'processData': false,
                 'contentType': false,
             }).done(function(response) {
                 if(response['success']) {
                     $.fn.showSuccess(response['data']);
-					console.log(response)
-					$('body, html').animate({scrollTop: '0px'}, 300);
-					$('#content1').css('display','block');
-                    $('.contenido').html('');
-            		seleccionarCampo.css('display','none');
-					$('#titleTypeImage').html('LABEL_IMAGE_MARKETPLACE')
-					$('.marketplaceImg').attr('src', '')
-					fileToggle=true;
-					imagenEdit='';
                     gridTable.api().ajax.reload(null, false);
+                    $('#row-add').hide();
+                    $('#row-edit').hide();
+                    $('#row-listing').show();
                 } else {
-                    validatorAdd.resetForm();
+                    validatorEdit.resetForm();
                     if(jQuery.type(response['data']) == 'string') {
                         $.fn.showError(response['data']);
                     } else  {
                         $.each(response['data'], function( fieldname, errors ) {
-                            $.fn.showFormErrorValidator('#form-capsule-edit #' + fieldname, errors);
+                            $.fn.showFormErrorValidator('#form-edit #' + fieldname, errors);
                         });
+                    }
+                }
             }).fail(function( jqXHR, textStatus, errorThrown) {
-				console.log(jqXHR)
                 $.fn.showError(textStatus);
             }).always(function() {
 				$('#boton_recortar').prop('disabled', false);
                 NProgress.done();
             });
             return false;
         },
         $('body').on('click', '.btn-view-image-marketplace', function(e) {
             e.preventDefault();
             $('#image-marketplace').attr('src', $(this).data('href'));
-            $('#modalAppMarkeplate').modal('show');
+            $('#modalPreviewMarketPlace').modal('show');
             return false;
         });
         $('body').on('click', '.btn-view-image-app', function(e) {
             e.preventDefault();
             $('#image-app').attr('src', $(this).data('href'));
-            $('#modalImageApp').modal('show');
+            $('#modalPreviewImage').modal('show');
             return false;
         });
-        $('#form-capsule-add #order').inputNumberFormat({decimal: 0});
+        $('#form-add #order').inputNumberFormat({decimal: 0});
+        $('body').on('click', 'button.btn-add', function(e) {
+            e.preventDefault();
             $('#form-add #name').val('');
-        $('body').on('click', 'button.btn-add', function(e) {
+            $('#form-add #order').val('1');
-            e.preventDefault();
-            $('#form-capsule-add #name').val('');
+            $('#form-add #privacy').val('');
-            $('#form-capsule-add #order').val('1');
-            $('#form-capsule-add #privacy').val('');
+            $('#form-add #status').val('');
-            $('#form-capsule-add #status').val('');
+            $('#form-add #cost').val('');
-            $('#form-capsule-add #cost').val('');
+            $('#form-add #form-row-cost').hide();
                 'method'    : 'get',
                 'url'       :  url,
             }).done(function(response) {
                 if(response['success']) {
 					console.log(response)
-                    $('#form-capsule-edit').attr('action',url);
+                    $('#form-edit').attr('action',url);
-                    $('#form-capsule-edit #name').val(response['data']['name']);
+                    $('#form-edit #name').val(response['data']['name']);
-                    $('#form-capsule-edit #order').val(response['data']['order']);
+                    $('#form-edit #order').val(response['data']['order']);
-                    $('#form-capsule-edit #privacy').val(response['data']['privacy']);
+                    $('#form-edit #privacy').val(response['data']['privacy']);
-                    $('#form-capsule-edit #type').val(response['data']['type']);
+                    $('#form-edit #type').val(response['data']['type']);
-                    $('#form-capsule-edit #status').val(response['data']['status']);
+                    $('#form-edit #status').val(response['data']['status']);
                     if('s' == response['data']['type']) {
-                        $('#form-capsule-edit #form-row-cost').show();
+                        $('#form-edit #form-row-cost').show();
-                        $('#form-capsule-edit #cost').val(response['data']['cost']);
+                        $('#form-edit #cost').val(response['data']['cost']);
                     } else {
-                        $('#form-capsule-edit #form-row-cost').hide();
+                        $('#form-edit #form-row-cost').hide();
-                        $('#form-capsule-edit #cost').val('');
+                        $('#form-edit #cost').val('');
+                    }
+                    $('#form-add #file').fileinput('reset');
+                    $('#form-add #file').val('');
+                    $('#form-add #marketplace').fileinput('reset');
                     $('#form-add #marketplace').val('');
-                    CKEDITOR.instances.description_edit.setData(response['data']['description']);
-                    validatorEdit.resetForm();
+                    CKEDITOR.instances.description_edit.setData(response['data']['description']);
-					 fileToggle=true;
+                    validatorEdit.resetForm();
-					$('body, html').animate({scrollTop: '0px'}, 300);
-					$('#content1').css('display','none');
+                    $('#row-listing').hide();
-                    seleccionarCampo= $('#modalCapsuleEdit');
-                    seleccionarCampo.css('display','block')
-					imagenEdit=response['data']['image'];
+                    $('#row-add').hide();
-		            iniciarEditor(seleccionarCampo,response['data']['marketplace'])
+                    $('#row-edit').show();
                 } else {
                     validatorEdit.resetForm();
                     if(jQuery.type(response['data']) == 'string') {
                         $.fn.showError(response['data']);
                     } else  {
                         $.each(response['data'], function( fieldname, errors ) {
-                            $.fn.showFormErrorValidator('#form-capsule-edit #' + fieldname, errors);
+                            $.fn.showFormErrorValidator('#form-edit #' + fieldname, errors);
                         });
+                    }
                 ],
                 removePlugins: 'elementspath,Anchor',
                 heigth: 100
 		});
-        $('#form-capsule-add #type').change(function(e) {
+        $('#form-add #type').change(function(e) {
             e.preventDefault();
             if('s' == $(this).val()) {
-                $('#form-capsule-add #form-row-cost').show();
+                $('#form-add #form-row-cost').show();
             } else {
-                $('#form-capsule-add #cost').val(0);
+                $('#form-add #cost').val(0);
-                $('#form-capsule-add #form-row-cost').hide();
+                $('#form-add #form-row-cost').hide();
             }
         });
-        $('#form-capsule-edit #type').change(function(e) {
+        $('#form-edit #type').change(function(e) {
             e.preventDefault();
             if('s' == $(this).val()) {
-                $('#form-capsule-edit #form-row-cost').show();
+                $('#form-edit #form-row-cost').show();
             } else {
-                $('#form-capsule-edit #cost').val(0);
+                $('#form-edit #cost').val(0);
-                $('#form-capsule-edit #form-row-cost').hide();
+                $('#form-edit #form-row-cost').hide();
+            }
                         NProgress.done();
                     });
+                }
            });
         });
-       	/*Script del editor (Aqui comienza el cielo y la tierra) */
-		var fileToggle=true;
-		$('body').on('click', '#ir_atras', function(e) {
-            e.preventDefault();
-			if(fileToggle){
-				imagenEdit='';
-            	$('body, html').animate({scrollTop: '0px'}, 300);
-				$('#content1').css('display','block');
-           		seleccionarCampo.css('display','none');
-            	$('.contenido').html('');
-				$('.marketplaceImg').attr('src', '')
-			}else{
-				$('#titleTypeImage').html('LABEL_IMAGE_MARKETPLACE')
-				$('.marketplaceImg').attr('src', '')
-				fileToggle=true;
-				iniciarEditor(seleccionarCampo,imagenServidorNoticia,false)
-			}
-            return false;
-        });
-		var imagenEdit='';
-		var imagenServidorNoticia;
-		var scroll_altura,viente;
-		var nombre_user = $(".perfil_u_nombre").text();
-		var primer_nombre = nombre_user.split(" ")[0];
-		var nuevoHtmlImagen='<div class="articulo_noticia animated fadeIn"> <div class="pasos"> <div class="titulo_pasos animated fadeInDown delay-04 fast">LABEL_STEP_1</div><div class="paso_opcion"> <div class="responsing_cut"> <div class="icon_cut"><span class="fa fa-scissors"></span></div><div class="contenido_cut"> <div class="animated fadeInRight delay-04 fast"> <div> <div class="titulo_cut"> <div>LABEL_CUT</div><div class="fa fa-times" id="cerrar_cut_modal"></div></div><div class="opcion_editor recortar10"> <div class="recortar_texto">LABEL_CUT</div><div id="blockCelda"><span class="fa fa-unlock"></span></div></div></div></div></div></div><div class="responsing_text"> <div class="icon_text"><span class="fa fa-text-width"></span></div><div class="contenido_text"> <div class="animated fadeInRight delay-04 fast"> <div class="texto"> <div class="titulo_text"> <div>LABEL_TEXT</div><div class="fa fa-times" id="cerrar_text_modal"></div></div><div class="fonts mb-20"><select name="fuentes" id="selectFuente" class="select-custom mr-2"><option value="arial" selected>LABEL_FONT_ARIAL</option><option value="calibri">LABEL_FONT_CALIBRI</option><option value="forte">LABEL_FONT_FORTE</option><option value="impact">LABEL_FONT_IMPACT</option><option value="jokerman">LABEL_FONT_JOKERMAN</option><option value="mv boli">LABEL_FONT_MV_BOLI</option><option value="times new roman">LABEL_FONT_TIMES_NEW_ROMAN</option><option value="verdana">LABEL_FONT_VERDANA</option><option value="vivaldi">LABEL_FONT_VIVALDI</option></select><input type="number" class="" data-tooltip="Tamaño de la letra" name="" id="font-size" max="500" min="1" step="1" value="48"/></div><div class="fonts mb-20"> <div class="font" id="negritas" data-tooltip="Negritas"><i class="fa fa-bold" aria-hidden="true"></i></div><div class="font" id="italic" data-tooltip="Letra Cursiva"><i class="fa fa-italic" aria-hidden="true"></i></div><div class="color_letra font"><label>A</label><input type="color" class="" data-tooltip="Color de la letra" name="" id="color" value="#ffffff"/></div><div class="font fa" data-tooltip="Sombra de la letra" id="shadow">S</div><div class="font" id="rectangulo" data-tooltip="Fondo de la letra"> <div class="rectangulo">F</div></div></div><div class="color_fondo_cuadro mb-20 flex-column" style="display:none"> <div class="w-100 d-flex justify-content-between border-bottom"><label for="colorrect" class="font-weight-normal d-flex align-items-center" style="margin:0 !important">LABEL_COLOR_BACKGROUND: </label><input type="color" name="" id="colorrect" value="#000000" style="width:30px" data-tooltip="Color del fondo" class="mr-2"/></div><div class="d-flex flex-column"><label for="opacidad" class="font-weight-normal mt-2">LABEL_BACKGROUND_TRANSPARENCY</label><input type="range" id="opacidad" max="100" min="1" step="1" value="100" ></div></div><input id="texto_input" type="text" name="texto" placeholder="LABEL_ADD_TEXT_HERE"/> </div></div></div></div><div class="responsing_filtros"> <div class="icon_filter"><span class="fa fa-eyedropper"></span></div><div class="contenido_filter"> <div class="titulo_filtro mb-20"> <div>LABEL_FILTERS</div><div class="fa fa-times" id="cerrar_filter_modal"></div></div><div class="fonts mb-20"> <select name="filtros" id="selectFiltro" class="select-custom"><option class="opcion_editor" value="normal">LABEL_FILTER_NORMAL</option><option class="opcion_editor" value=".5,1.3,1.31,1.33,1.38">LABEL_FILTER_NIGHT</option><option class="opcion_editor" value=".7,1.1,1.64,1.66,1.50">LABEL_FILTER_SAINT_ANA</option><option class="opcion_editor" value=".75,1,1.66,1.60,1.51">LABEL_FILTER_CREAM</option><option class="opcion_editor" value=".7,1.2,1.49,1.49,1.6">LABEL_FILTER_MAGIC</option><option class="opcion_editor" value=".7,1.2,1.60,1.66,1.58">LABEL_FILTER_RELIEF</option><option class="opcion_editor" value=".9,.9,1.45,1.54,1.54">LABEL_FILTER_LIGHT</option><option class="opcion_editor" value="1,1.5,1,1,1">LABEL_FILTER_SATURATION</option><option class="opcion_editor" value=".9,1.3,1,1,1">LABEL_FILTER_RETOUCH</option><option class="opcion_editor" value=".8,1,1.6,1.45,1.49">LABEL_FILTER_ORANGE</option><option class="opcion_editor" value=".8,.75,1.60,1.66,1.58">LABEL_FILTER_WIND</option><option class="opcion_editor" value=".8,.9,1.66,1.43,1.28">LABEL_FILTER_DESERT</option><option class="opcion_editor" value=".85,.75,1.47,1.66,1.54">LABEL_FILTER_FOREST</option><option class="opcion_editor" value=".8,.8,1.71,1.64,1.58">LABEL_FILTER_TOWN</option><option class="opcion_editor" value=".8,1.2,1.24,.99,1">LABEL_FILTER_PINK</option><option class="opcion_editor" value=".9,1.1,1.33,1.19,.91">LABEL_FILTER_HISTORY</option><option class="opcion_editor" value="1,1,gris">LABEL_FILTER_GRAY</option><option class="opcion_editor" value=".8,1.5,gris">LABEL_FILTER_OLD_PICTURE</option><option class="opcion_editor" value=".9,1.2,26,-12,0,2">LABEL_FILTER_CHARMING</option><option class="opcion_editor" value="1.1,1.4,40,12,-6,2">LABEL_FILTER_EMOTION</option><option class="opcion_editor" value=".9,1.32,56,47,17,2">LABEL_FILTER_BEIGE</option><option class="opcion_editor" value=".87,1.19,55,37,23,2">LABEL_FILTER_FINE</option><option class="opcion_editor" value="1.2,.9,67,13,-23,2">LABEL_FILTER_LORD</option><option class="opcion_editor" value="1.2,1.2,35,7,18,2">LABEL_FILTER_70S</option><option class="opcion_editor" value=".92,1.23,-11,11,11,2">LABEL_FILTER_TREE</option><option class="opcion_editor" value=" 1,1.4,-3,-1,-12,2">LABEL_FILTER_SUMMER</option><option class="opcion_editor" value=".85,1.26,-15,2,-1,2">LABEL_FILTER_COLD_WEATHER</option><option class="opcion_editor" value="1,1.4,5,12,1,2">LABEL_FILTER_ANGELS</option><option class="opcion_editor" value=".9,1.2,43,-17,-55,2">LABEL_FILTER_HOT</option><option class="opcion_editor" value="1,1.29,29,26,17,2">LABEL_FILTER_FALL</option><option class="opcion_editor" value=".85,1.3,43,25,-11,2">LABEL_FILTER_MARCH</option><option class="opcion_editor" value=".8,1.25,31,41,12,2">LABEL_FILTER_PEAR</option><option class="opcion_editor" value="1,1.36,4,5,1,2">LABEL_FILTER_COMMON</option><option class="opcion_editor" value=".9,1.3,37,-25,1,2">LABEL_FILTER_GOLD</option><option class="opcion_editor" value="1.1,1.3,-47,-42,-30,2">LABEL_FILTER_GOTHIC</option><option class="opcion_editor" value="1,1.4,-5,42,11,2">LABEL_FILTER_FORESTRY</option><option class="opcion_editor" value=".9,1.2,-5,-7,4,2">LABEL_FILTER_MOON</option><option class="opcion_editor" value="1.1,1.3,-1,-1,26,2">LABEL_FILTER_PARTY</option> </select> </div></div></div><div class="volver"><span class="icon-undo"></span>LABEL_START_OVER</div><div class="paso_1 paso animated bounceInDown delay-04 fast">1</div><div class="paso_2 a1 animated bounceInDown delay-06 fast">2</div><div class="paso_2 b1 animated bounceInDown delay-08 fast">3</div></div></div><div class="editor_imagenes"> <div class="fondo_oscuro"></div><div class="editor_imagenes2 "> <div> <div class="canvas_imagen"> <div class="canvas recortar"> <div class="canvas_subir d-flex flex-column" id="imagen_noticia"><div>LABEL_DRAG_IMAGE_HERE_OR </div><label class="font-weight-normal mt-2" style="font-size:0.6em"for="imagen_noticia_file"> LABEL_UPLOAD_FILE_IMAGE <div class="ml-2 btn btn-primary btn-sm">LABEL_SELECT_IMAGE</div></label> <input style="display:none" type="file" id="imagen_noticia_file" accept="image/x-png,image/jpeg"></div></div></div><div class="botones_dimenciones"> <div class="scale"> <div class="dimenciones"> <div id="ancho">1240px</div><div>x</div><div id="alto">720px</div></div><div class="porciento"> <div id="menos_scale"><span class="icon-minus fa fa-minus"></span></div><div class="ps"> <ul class="cantidades_scale"> <li data-scale="2" class="as">200%</li><li data-scale="1" class="as">100%</li><li data-scale="0.75" class="as">75%</li><li data-scale="0.5" class="as">50%</li><li data-scale="0.25" class="as">25%</li></ul> <div id="porciento_scale">50%</div></div><div id="mas_scale"><span class="icon-plus fa fa-plus"></span></div></div></div><div class="botones"><button class="boton_normal" id="ir_atras">LABEL_GO_BACK</button><button class="boton_normal" id="boton_recortar">LABEL_DATATABLE_SNEXT</button></div></div></div><div class="modificar animated fadeInRight delay-04 fast escalar"> <div> <div class="titulo_recortar"><span class="icon-ungroup fa fa-scissors mb-20"></span>LABEL_CUT</div><div class="opcion_editor recortar10"> <div class="recortar_texto">LABEL_CUT</div><div id="blockCelda"><span class="fa fa-unlock"></span></div></div></div><div class="texto"> <div class="mb-20"> <div class="titulo_texto "><span class="icon-plus fa fa-text-width"></span>LABEL_TEXT</div></div><div class="fonts mb-20"> <select name="fuentes" id="selectFuente" class="select-custom mr-2"> <option value="arial" selected>LABEL_FONT_ARIAL</option> <option value="calibri">LABEL_FONT_CALIBRI</option> <option value="forte">LABEL_FONT_FORTE</option> <option value="impact">LABEL_FONT_IMPACT</option> <option value="jokerman">LABEL_FONT_JOKERMAN</option> <option value="mv boli">LABEL_FONT_MV_BOLI</option> <option value="times new roman">LABEL_FONT_TIMES_NEW_ROMAN</option> <option value="verdana">LABEL_FONT_VERDANA</option> <option value="vivaldi">LABEL_FONT_VIVALDI</option> </select> <input type="number" class="" data-tooltip="Tamaño de la letra" name="" id="font-size" max="500" min="1" step="1" value="48"/> </div><div class="fonts mb-20"> <div class="font" id="negritas" data-tooltip="Negritas"><i class="fa fa-bold" aria-hidden="true"></i></div><div class="font" id="italic" data-tooltip="Letra Cursiva"><i class="fa fa-italic" aria-hidden="true"></i></div><div class="color_letra font"><label>A</label><input type="color" class="" data-tooltip="Color de la letra" name="" id="color" value="#ffffff"/></div><div class="font fa" data-tooltip="Sombra de la letra" id="shadow">S</div><div class="font" id="rectangulo" data-tooltip="Fondo de la letra"> <div class="rectangulo">F</div></div></div><div class="color_fondo_cuadro mb-20 flex-column" style="display:none"> <div class="w-100 d-flex justify-content-between border-bottom"><label for="colorrect" class="font-weight-normal d-flex align-items-center" style="margin:0 !important">LABEL_COLOR_BACKGROUND: </label><input type="color" name="" id="colorrect" value="#000000" style="width:30px" data-tooltip="Color del fondo" class="mr-2"/></div><div class="d-flex flex-column"><label for="opacidad" class="font-weight-normal mt-2">LABEL_BACKGROUND_TRANSPARENCY</label><input type="range" id="opacidad" max="100" min="1" step="1" value="100" ></div></div><input id="texto_input" type="text" name="texto" placeholder="LABEL_ADD_TEXT_HERE"/> <div class="mb-20"> <div class="titulo_filtro"><span class="icon-eyedropper fa fa-eyedropper"></span>LABEL_FILTERS</div></div><div class="fonts mb-20"> <select name="filtros" id="selectFiltro" class="select-custom selectFiltro"><option class="opcion_editor" value="normal" >LABEL_FILTER_NORMAL</option><option class="opcion_editor" value=".5,1.3,1.31,1.33,1.38">LABEL_FILTER_NIGHT</option><option class="opcion_editor" value=".7,1.1,1.64,1.66,1.50">LABEL_FILTER_SAINT_ANA</option><option class="opcion_editor" value=".75,1,1.66,1.60,1.51">LABEL_FILTER_CREAM</option><option class="opcion_editor" value=".7,1.2,1.49,1.49,1.6">LABEL_FILTER_MAGIC</option><option class="opcion_editor" value=".7,1.2,1.60,1.66,1.58">LABEL_FILTER_RELIEF</option><option class="opcion_editor" value=".9,.9,1.45,1.54,1.54">LABEL_FILTER_LIGHT</option><option class="opcion_editor" value="1,1.5,1,1,1">LABEL_FILTER_SATURATION</option><option class="opcion_editor" value=".9,1.3,1,1,1">LABEL_FILTER_RETOUCH</option><option class="opcion_editor" value=".8,1,1.6,1.45,1.49">LABEL_FILTER_ORANGE</option><option class="opcion_editor" value=".8,.75,1.60,1.66,1.58">LABEL_FILTER_WIND</option><option class="opcion_editor" value=".8,.9,1.66,1.43,1.28">LABEL_FILTER_DESERT</option><option class="opcion_editor" value=".85,.75,1.47,1.66,1.54">LABEL_FILTER_FOREST</option><option class="opcion_editor" value=".8,.8,1.71,1.64,1.58">LABEL_FILTER_TOWN</option><option class="opcion_editor" value=".8,1.2,1.24,.99,1">LABEL_FILTER_PINK</option><option class="opcion_editor" value=".9,1.1,1.33,1.19,.91">LABEL_FILTER_HISTORY</option><option class="opcion_editor" value="1,1,gris">LABEL_FILTER_GRAY</option><option class="opcion_editor" value=".8,1.5,gris">LABEL_FILTER_OLD_PICTURE</option><option class="opcion_editor" value=".9,1.2,26,-12,0,2">LABEL_FILTER_CHARMING</option><option class="opcion_editor" value="1.1,1.4,40,12,-6,2">LABEL_FILTER_EMOTION</option><option class="opcion_editor" value=".9,1.32,56,47,17,2">LABEL_FILTER_BEIGE</option><option class="opcion_editor" value=".87,1.19,55,37,23,2">LABEL_FILTER_FINE</option><option class="opcion_editor" value="1.2,.9,67,13,-23,2">LABEL_FILTER_LORD</option><option class="opcion_editor" value="1.2,1.2,35,7,18,2">LABEL_FILTER_70S</option><option class="opcion_editor" value=".92,1.23,-11,11,11,2">LABEL_FILTER_TREE</option><option class="opcion_editor" value=" 1,1.4,-3,-1,-12,2">LABEL_FILTER_SUMMER</option><option class="opcion_editor" value=".85,1.26,-15,2,-1,2">LABEL_FILTER_COLD_WEATHER</option><option class="opcion_editor" value="1,1.4,5,12,1,2">LABEL_FILTER_ANGELS</option><option class="opcion_editor" value=".9,1.2,43,-17,-55,2">LABEL_FILTER_HOT</option><option class="opcion_editor" value="1,1.29,29,26,17,2">LABEL_FILTER_FALL</option><option class="opcion_editor" value=".85,1.3,43,25,-11,2">LABEL_FILTER_MARCH</option><option class="opcion_editor" value=".8,1.25,31,41,12,2">LABEL_FILTER_PEAR</option><option class="opcion_editor" value="1,1.36,4,5,1,2">LABEL_FILTER_COMMON</option><option class="opcion_editor" value=".9,1.3,37,-25,1,2">LABEL_FILTER_GOLD</option><option class="opcion_editor" value="1.1,1.3,-47,-42,-30,2">LABEL_FILTER_GOTHIC</option><option class="opcion_editor" value="1,1.4,-5,42,11,2">LABEL_FILTER_FORESTRY</option><option class="opcion_editor" value=".9,1.2,-5,-7,4,2">LABEL_FILTER_MOON</option><option class="opcion_editor" value="1.1,1.3,-1,-1,26,2">LABEL_FILTER_PARTY</option> </select> </div></div></div></div></div></div><dav class="fixed_noticia"></dav><dav class="cuadro_noticias animated bounceInUp delay-04" id="cuadro_noticias"> <dav class="relative"> <div class="titulo_topico">LABEL_TITLE_TOPIC</div><canvas class="imagen_noticias" id="imagen_noticias" width="320" height="480"></canvas> </dav> <div class="progreso d-flex align-items-center justify-content-between"><progress value="0" max="100"></progress><span class="ml-2">0.0%</span></div></dav>'
-		var pw=420,ph=320;
-		$(document).on("click", ".info_noticia", function(e){
-			imagenServidorNoticia = elemento.toDataURL("image/jpeg", 1.0);
-			if(fileToggle){
-				e.preventDefault();
-				setTimeout(function(){
-					$('.marketplaceImg').attr('src', imagenServidorNoticia)
-					$('#titleTypeImage').html('LABEL_IMAGE')
-					fileToggle=false;
-					if(imagenEdit==""){
-						iniciarEditor(seleccionarCampo)
-					}else{
-						iniciarEditor(seleccionarCampo,imagenEdit)
-					}
-				},$('.marketplace').val(imagenServidorNoticia.split(',')[1]));
-			}else{
-				$('.file').val(imagenServidorNoticia.split(',')[1]);
-			}
-			console.log($('.file').val())
-			console.log($('.marketplace').val())
-			$(".c1").addClass("paso");
-		})
-		var edit;
-		function iniciarEditor(campo, image='',load=true){
-		 cortar=false;
-		recorte_listo=false;
-		texto="";
-		seis=true;
-		color="#ffffff";
-		texto_listo=false,siete=false;
-		uno=true;
-		size=48;
-		cinco=true;
-		blockCelda=false;
-		if(fileToggle){
-			pw=420; ph=320;
-			recorte=ph/pw;
-		}else{
-			pw=320; ph=480;
-			recorte=ph/pw;
-		}
-		xf=pw,yf =ph;
-		negritas=false, bold="";
-		shadow = true, nueve=true;
-		italic=false, ita="";
-		rectangulo=false, diez=false;
-     	fontfamily="Arial";
-     	r=0,g=0,b=0,a=1;
-		window.clearInterval(editorNoticia);
-		setTimeout(function(){
-			if(fileToggle){
-				$('#imagen_noticias').css({
-					'height': '320px',
-    				'width': '420px',
-				})
-				$('.cuadro_noticias').addClass('tienda')
-			}else{
-				$('#imagen_noticias').css({
-					'height': '480px',
-    				'width': '320px',
-				})
-				$('.cuadro_noticias').removeClass('tienda')
-			}
-			console.log(ph+'  '+pw)
-			scroll_altura=$(".articulo_noticia").offset().top-110;
-			anchoFondoOscuro = $(".articulo_noticia").width();
-			altoFondoOscuro = $(".editor_imagenes").height();
-		},navegacion(nuevoHtmlImagen,campo,image,load));
-		}
-		$(document).on("click", ".volver", function(){
-		var nombre_user = $(".perfil_u_nombre").text();
-		var primer_nombre = nombre_user.split(" ")[0];
-		 cortar=false;
-		cinco=true;
-		recorte_listo=false;
-		texto="";
-		seis=true;
-		color="#ffffff";
-		texto_listo=false,siete=false;
-		uno=true;
-		size=48;
-		if(fileToggle){
-			pw=420, ph=320;
-			recorte=ph/pw
-		}else{
-			pw=320, ph=480;
-			recorte=ph/pw
-		}
-		xf=pw,yf =ph;
-		blockCelda=false;
-		negritas=false, bold="";
-		shadow = true, nueve=true;
-		italic=false, ita="";
-		rectangulo=false, diez=false;
-     	fontfamily="Arial";
-     	r=0,g=0,b=0,a=1;
-		 var imagenServidorNoticia;
-         console.log(seleccionarCampo)
-		window.clearInterval(editorNoticia);
-		setTimeout(function(){
-			if(fileToggle){
-				$('#imagen_noticias').css({
-					'height': '320px',
-    				'width': '420px',
-				})
-				$('.cuadro_noticias').addClass('tienda')
-			}else{
-				$('#imagen_noticias').css({
-					'height': '480px',
-    				'width': '320px',
-				})
-				$('.cuadro_noticias').removeClass('tienda')
-			}
-			scroll_altura=$(".articulo_noticia").offset().top-110;
-			anchoFondoOscuro = $(".articulo_noticia").width();
-			altoFondoOscuro = $(".editor_imagenes").height();
-		},navegacion(nuevoHtmlImagen,seleccionarCampo));
-		})
-		function navegacion(nuevoHtmlImagen,campo,image='',load=true){
-                selectorElementoName=campo.find('#name')
-                selectorElementoEditor=campo.find('#contenido');
-				edit=true;
-				if(image!=''){
-					edit=false;
-					if(load){
-						const getBase64FromUrl = async (url) => {
-							const data = await fetch(url);
-							const blob = await data.blob();
-							return new Promise((resolve) => {
-								const reader = new FileReader();
-								reader.readAsDataURL(blob);
-								reader.onloadend = function() {
-								const base64data = reader.result;
-								resolve(base64data);
-								}
-							});
-						}
-						getBase64FromUrl(image).then(function(e){
-							selectorElementoName.trigger('change');
-							$(".volver").css("display","block")
-							$(".a1").addClass("paso");
-							$(".titulo_pasos").html("LABEL_STEP_2");
-							setTimeout(function(){
-								recorte_listo=true;
-								$(".fondo_oscuro").css("display","none");
-								if(fileToggle){
-									$("#boton_recortar").removeClass("recortar").text("LABEL_ATTACH_IMAGE").addClass("info_noticia");
-									}else{
-									$("#boton_recortar").removeClass("recortar").text("LABEL_SEND").addClass("info_noticia").attr('type','submit');
-								}
-								$(".recortar10").removeClass("recortar");
-								$(".canvas").removeClass("recortar");
-								$(".b1").addClass("paso");
-								$(".titulo_pasos").html("LABEL_STEP_3");
-								if(texto!=""){
-									seis=true;
-									siete=true;
-								}
-								cinco=true;
-								dos=true;
-								cuatro=true;
-								actualizar();
-							},editorNoticia(e));
-						})
-						setTimeout(function(){
-							$(".canvas_subir").html('<span class="icon-plus fa fa-spinner"></span> LABEL_LOADING...')
-							selectorElementoName.trigger('change');
-						},selectorElementoEditor.html(nuevoHtmlImagen));
-					}else{
-						selectorElementoName.trigger('change');
-						setTimeout(function(){
-							$(".volver").css("display","block")
-							$(".a1").addClass("paso");
-							$(".titulo_pasos").html("LABEL_STEP_2");
-							setTimeout(function(){
-								recorte_listo=true;
-								$(".fondo_oscuro").css("display","none");
-								if(fileToggle){
-									$("#boton_recortar").removeClass("recortar").text("LABEL_ATTACH_IMAGE").addClass("info_noticia");
-								}else{
-									$("#boton_recortar").removeClass("recortar").text("LABEL_SEND").addClass("info_noticia").attr('type','submit');
-								}
-								$(".recortar10").removeClass("recortar");
-								$(".canvas").removeClass("recortar");
-								$(".b1").addClass("paso");
-								$(".titulo_pasos").html("LABEL_STEP_3");
-								if(texto!=""){
-									seis=true;
-									siete=true;
-								}
-								cinco=true;
-								dos=true;
-								cuatro=true;
-								actualizar();
-							},editorNoticia(image));
-							selectorElementoName.trigger('change');
-						},selectorElementoEditor.html(nuevoHtmlImagen));
-					}
-				}else{
-					setTimeout(function(){
-					    selectorElementoName.trigger('change');
-					},selectorElementoEditor.html(nuevoHtmlImagen));
-				}
-		}
-		$(window).on("scroll", function(){
-			console.log(scroll_altura)
-		if($(window).scrollTop()>scroll_altura){
-			$("#cuadro_noticias").addClass("fixed");
-		}else{
-			$("#cuadro_noticias").removeClass("fixed");
-		}
-	})
-	$(document).on("dragover", "#imagen_noticia", function(e){
-		e.preventDefault();
-		e.stopPropagation();
-		$(this).css({"background":"rgba(0,0,0,.2)"})
-	})
-	$(window).resize(function() {
-		anchoFondoOscuro = $(".articulo_noticia").width();
-		altoFondoOscuro = $(".editor_imagenes").height();
-		setTimeout(function(){
-			anchoFondoOscuro = $(".articulo_noticia").width();
-			altoFondoOscuro = $(".editor_imagenes").height();
-		},300)
-	});
-	$(document).on("drop", "#imagen_noticia", function(e){
-		e.preventDefault();
-		e.stopPropagation();
-		$(this).css("background", "none");
-		var archivo = e.originalEvent.dataTransfer.files;
-		var img=archivo[0];
-		if(img.type =="image/jpeg"||img.type =="image/png"){
-			$(".modificar").removeClass("animated");
-			var render = new FileReader();
-			render.readAsDataURL(img);
-			render.onload = function(e){
-				imagen2=new Image();
-				imagen2.src=e.target.result;
-				$(imagen2).ready(function(e){
-					if(imagen2.width<320||imagen2.height<480){
-						$.fn.showError('LABEL_MINIMUM_IMAGE_SIZE');
-					}else{
-						$(".volver").css("display","block")
-						$(".a1").addClass("paso");
-						$(".titulo_pasos").html("LABEL_STEP_2");
-						editorNoticia(imagen2.src)
-					}
-				})
-			}
-		}else{
-			$.fn.showError('LABEL_SUPPORTED_FORMATS');
-		}
-	})
-	$(document).on("change", "#imagen_noticia_file", function(e){
-		file = $(this)[0].files[0];
-		e.preventDefault();
-		$(this).css("background", "none");
-		var archivo = file;
-		var img=file;
-		if(img.type =="image/jpeg"||img.type =="image/png"){
-			$(".modificar").removeClass("animated");
-			var render = new FileReader();
-			render.readAsDataURL(img);
-			render.onload = function(e){
-				imagen2=new Image();
-				imagen2.src=e.target.result;
-				$(imagen2).ready(function(e){
-					if(imagen2.width<320||imagen2.height<480){
-						$.fn.showError('LABEL_MINIMUM_IMAGE_SIZE');
-					}else{
-						$(".volver").css("display","block")
-						$(".a1").addClass("paso");
-						$(".titulo_pasos").html("LABEL_STEP_2");
-						editorNoticia(imagen2.src)
-					}
-				})
-			}
-		}else{
-			$.fn.showError('LABEL_SUPPORTED_FORMATS');
-		}
-	})
-	$(document).on("dragover", "body", function(e){
-		e.preventDefault();
-		e.stopPropagation();
-	})
-	$(document).on("drop", "body", function(e){
-		e.preventDefault();
-		e.stopPropagation();
-	})
-	var canvas='<div class="editorNoticia"><canvas id="editorNoticia">LABEL_NOT_SUPPORTED</canvas></div>';
-	$(document).on("mouseover", ".editorNoticia", function(){
-		const getScrollBarWidth = () => window.innerWidth - document.documentElement.getBoundingClientRect().width
-		let anchoScroll= getScrollBarWidth()+"px";
-		$("body").css({"overflow": "hidden"});
-		$(".cuadro_noticias, .fixed_noticia,.tituloEditor,.grid-padre,.subpanel").css("margin-right",anchoScroll )
-		$(".barra,.footer").css("padding-right",anchoScroll)
-	})
-	$(document).on("mouseover", "#editorNoticia", function(){
-		if(recorte_listo){
-			ocho=true;
-		}
-	})
-	$(document).on("mouseout", "#editorNoticia", function(){
-		if(recorte_listo){
-			ocho=false;
-			actualizar2()
-		}
-	})
-	$(document).on("mouseout", ".editorNoticia",function(){
-		$("body").css({"overflow": "auto"})
-		$(".cuadro_noticias, .fixed_noticia,.tituloEditor,.grid-padre").css("margin-right", "0px")
-		$(".barra,.footer").css("padding-right","0px")
-	})
-	$(document).on('mousewheel', ".editorNoticia",function(e){
-		var ruedita = e.originalEvent.wheelDelta
-		if(ruedita>0){
-			scale = scale+(scale/10);
-			$("#porciento_scale").html((scale*100).toFixed(2)+"%")
-		}else{
-			scale = scale-(scale/10);
-			$("#porciento_scale").html((scale*100).toFixed(2)+"%")
-		}
-		$("#editorNoticia").css({"transform": "scale("+scale+")"});
-	})
-	$(document).on("click", ".as", function(e){
-		e.preventDefault();
-		 scale = $(this).data("scale");
-		 $("#porciento_scale").html((scale*100).toFixed(2)+"%")
-		 $("#editorNoticia").css({"transform": "scale("+scale+")"});
-	})
-	$(document).on("click", ".ps", function(e){
-		e.preventDefault();
-		$(".cantidades_scale").slideToggle(200).css("display", "block");
-	})
-	$(document).on("click", "#cerrar_filter_modal, .icon_filter", function(e){
-		e.preventDefault();
-		if(recorte_listo){
-		$(".contenido_filter").slideToggle(200).css("display", "block");
-		}
-	})
-	$(document).on("click", "#cerrar_text_modal, .icon_text", function(e){
-		e.preventDefault();
-		if(recorte_listo){
-			$(".contenido_text").slideToggle(200).css("display", "block");
-		}
-	})
-	$(document).on("click", "#cerrar_cut_modal, .icon_cut", function(e){
-		e.preventDefault();
-		if(cortar){
-			$(".contenido_cut").slideToggle(200).css("display", "block");
-		}
-	})
-	$(document).on("click", "#menos_scale", function(e){
-		e.preventDefault();
-		scale = scale-(scale/10);
-		 $("#porciento_scale").html((scale*100).toFixed(2)+"%")
-		 $("#editorNoticia").css({"transform": "scale("+scale+")"});
-	})
-	$(document).on("click", "#mas_scale", function(e){
-		e.preventDefault();
-		scale = scale+(scale/10);
-		 $("#porciento_scale").html((scale*100).toFixed(2)+"%")
-		 $("#editorNoticia").css({"transform": "scale("+scale+")"});
-	})
-	$(document).on('change', '#selectFiltro', function(e){
-		data=$(this).val()
-		if(data=="normal"){
-			filter();
-		}else{
-			data=data.split(',');
-			if(data[2]=='gris'){
-				filtergris(data[0],data[1]);
-			}else{
-				filter(Number(data[0]),Number(data[1]),Number(data[2]),Number(data[3]),Number(data[4]),Number(data[5]));
-			}
-		}
-	})
-	var texto_listo=false,siete=false;
-	var texto;
-	$(document).on("keyup", "#texto_input", function(e){
-		e.preventDefault();
-		texto = $(this).val();
-		if(texto_actualizar){
-			siete=true;
-		}
-		if(texto!=""){
-			texto_actualizar=true;
-			actualizar2();
-		}else{
-			actualizar2();
-		}
-	})
-	var color="#ffffff";
-	$(document).on("change input", "#color", function(){
-    	color=$(this).val();
-    	seis=true;
-    	actualizar2();
-    })
-	$(document).on("keypress", "#font-size, #texto_input", function(e){
-    	if(e.which == 13){
-      		return false;
-    	}
-  	});
-    var size=48;
-    $(document).on("keyup change", "#font-size", function(){
-    	size=$(this).val();
-    	size = parseInt(size);
-    	seis=true;
-    	siete=true;
-    	actualizar2();
-    })
-    var negritas=false, bold="";
-    $(document).on("click", "#negritas", function(e){
-    	e.preventDefault();
-    	if(!negritas){
-    		bold="bold";
-    		$(this).addClass("fa");
-    		seis=true;
-    		siete=true;
-    		actualizar2();
-    		negritas=true;
-    	}else{
-    		bold="";
-    		$(this).removeClass("fa");
-    		seis=true;
-    		siete=true;
-    		actualizar2();
-    		negritas=false;
-    	}
-    })
-    var italic=false, ita="";
-     $(document).on("click", "#italic", function(e){
-    	e.preventDefault();
-    	if(!italic){
-    		ita="italic";
-    		$(this).addClass("fa");
-    		seis=true;
-    		siete=true;
-    		actualizar2();
-    		italic=true;
-    	}else{
-    		ita="";
-    		$(this).removeClass("fa");
-    		seis=true;
-    		siete=true;
-    		actualizar2();
-    		italic=false;
-    	}
-    })
-	var fontfamily="Arial";
-     $(document).on("change", "#selectFuente", function(e){
-    	e.preventDefault();
-    	fontfamily= $(this).val();
-    	seis=true;
-    	siete=true;
-    	actualizar2();
-    })
-     var shadow = true, nueve=true;
-     $(document).on("click","#shadow", function(e){
-     	e.preventDefault();
-     	if(shadow){
-     		$(this).removeClass("fa");
-     		seis=true;
-     		nueve=false;
-     		actualizar2();
-     		shadow=false;
-     	}else{
-     		$(this).addClass("fa");
-     		seis=true;
-     		nueve=true;
-     		actualizar2();
-     		shadow=true;
-     	}
-     })
-     var rectangulo=false, diez=false, colorrect="#000000";
-	 $(document).on("click", "#rectangulo", function(e){
-     	e.preventDefault();
-     	if(!rectangulo){
-     		$(this).addClass("fa");
-			$('.color_fondo_cuadro').css('display','flex')
-     		diez=true;
-     		actualizar2();
-     		rectangulo=true;
-     	}else{
-     		$(this).removeClass("fa");
-			 $('.color_fondo_cuadro').css('display','none')
-     		diez=false;
-     		actualizar2();
-     		rectangulo=false;
-     	}
-     })
-     var r=0,g=0,b=0;
-	 $(document).on("change input", "#colorrect", function(){
-    	colorrect=$(this).val();
-    	r=parseInt(colorrect.slice(1,3),16);
-    	g=parseInt(colorrect.slice(3,5),16);
-    	b=parseInt(colorrect.slice(5,7),16);
-    	seis=true;
-    	actualizar2();
-    })
-    var a=1;
-	$(document).on("mousemove change ", "#opacidad", function(){
-    	a=$(this).val();
-    	a=a/100;
-    	seis=true;
-    	actualizar2();
-    })
-	var imaNoti = new Image();
-	function filter(brillo=1, contraste=1, rojo=1, verde=1, azul=1, valor=1){
-		cuatro=false;
-		restaurar(brillo, contraste);
-		datos=imagenOriginal.data;
-		if(valor==2){
-			for (var i =  0; i <datos.length; i+=4) {
-				datos[i]=datos[i]+rojo;
-				datos[i+1]=datos[i+1]+verde;
-				datos[i+2]=datos[i+2]+azul;
-			}
-		}else{
-			for (var i =  0; i <datos.length; i+=4) {
-				datos[i]=datos[i]*rojo;
-				datos[i+1]=datos[i+1]*verde;
-				datos[i+2]=datos[i+2]*azul
-			}
-		}
-		editor.putImageData(imagenOriginal,0,0)
-		var imagenNoticia = elemento.toDataURL("image/jpeg", 1.0);
-	    imaNoti.src = imagenNoticia;
-		actualizar2();
-	}
-	function filtergris(brillo=1, contraste=1){
-		cuatro=false;
-		restaurar(brillo, contraste);
-		datos=imagenOriginal.data;
-		var auxiliar;
-		for (var i =  0; i <datos.length; i+=4) {
-			auxiliar = 0.34 * datos[i] + 0.5 *datos[i+1] + 0.1/6 * datos[i+2];
-			datos[i]=auxiliar;
-			datos[i+1]=auxiliar;
-			datos[i+2]=auxiliar;
-		}
-		editor.putImageData(imagenOriginal,0,0)
-		var imagenNoticia = elemento.toDataURL("image/jpeg", 1.0);
-	    imaNoti.src = imagenNoticia;
-		actualizar2();
-	}
-	function restaurar(brillo = 1, contraste=1){
-		editor.filter = "none"
-		editor.filter = 'contrast('+contraste+') brightness('+brillo+') saturate(1) sepia(0)';
-		editor.fillStyle="rgba(255,255,255,1)"
-		editor.fillRect(0,0,ancho,alto);
-		editor.fillStyle=""+color+"";
-		var pxf=0,pyf=0;
-			if(xf>=(yf/recorte)){
-				pxf=xf/ancho;
-				pyf=yf/pxf;
-				py=(alto/2)-(pyf/2);
-				editor.drawImage(imagen,x,y,xf,yf,0,py,ancho,pyf);
-			}else{
-				pyf=yf/alto;
-				pxf=xf/pyf;
-				px=(ancho/2)-(pxf/2);
-				editor.drawImage(imagen,x,y,xf,yf,px,0,pxf,alto);
-			}
-		imagenOriginal = editor.getImageData(0,0,ancho,alto)
-	}
-	var ocho=false;
-	function actualizar2(){
-		if(recorte_listo){
-		if(cuatro){
-			imagenOriginal = editor.getImageData(0,0,ancho,alto)
-			var imagenNoticia = elemento.toDataURL("image/jpeg", 1.0);
-	    	imaNoti.src = imagenNoticia;
-	    	cuatro=false;
-		}
-		editor.filter = "none"
-		$(imaNoti).ready(function(e){
-			noticia.drawImage(imaNoti,0,0,pw,ph);
-			editor.drawImage(imaNoti,0,0,ancho,alto)
-			if(texto_actualizar){
-				if(texto!=""){
-					if(seis){
-						ancho_imaNoti = imaNoti.width;
-						scale_noticia = -(((ancho_imaNoti-pw)/ancho_imaNoti)-1);
-						editor.fillStyle=""+color+"";
-						editor.strokeStyle="rgb(255,255,255)";
-						if(nueve){
-							editor.shadowColor="rgba(0,0,0,.5)";
-							editor.shadowOffsetX=6;
-							editor.shadowOffsetY=6;
-							editor.shadowBlur=6;
-							noticia.shadowColor="rgba(0,0,0,.5)";
-							noticia.shadowOffsetX=6*scale_noticia;
-							noticia.shadowOffsetY=6*scale_noticia;
-							noticia.shadowBlur=6*scale_noticia;
-						}else{
-							editor.shadowColor="rgba(0,0,0,0)";
-							noticia.shadowColor="rgba(0,0,0,0)";
-						}
-						editor.font=""+ita+" "+bold+" "+size+"px "+fontfamily+"";
-						editor.textAlign="start";
-						editor.textBaseline="top";
-						var sizeNoticia = size*scale_noticia;
-						noticia.fillStyle=""+color+"";
-						noticia.font=""+ita+" "+bold+" "+sizeNoticia+"px "+fontfamily+"";
-						noticia.textAlign="start";
-						noticia.textBaseline="top";
-						seis=false;
-					}
-					if(siete){
-						dimencionesTexto = editor.measureText(texto);
-						txf=dimencionesTexto.width+20;
-						tyf= (20+size);
-						siete=false;
-					}
-					if(cinco){
-						dimencionesTexto = editor.measureText(texto);
-						if(xf>=(yf/recorte)){
-							tx=(xf/2)-(dimencionesTexto.width/2);
-							ty=(xf*recorte/2)-(size/2);
-						}else{
-							tx=(yf/recorte/2)-(dimencionesTexto.width/2);
-							ty=(yf/2)-(size/2);
-						}
-						txf=dimencionesTexto.width+20;
-						tyf= size+20;
-						cinco=false;
-					}
-					if(diez){
-						editor.fillStyle="rgba("+r+","+g+","+b+","+a+")";
-						noticia.fillStyle="rgba("+r+","+g+","+b+","+a+")";
-						editor.fillRect(tx-10,ty-10,txf,tyf);
-						noticia.fillRect(((tx-10)*scale_noticia),((ty-10)*scale_noticia),txf*scale_noticia,tyf*scale_noticia);
-						editor.fillStyle=""+color+"";
-						noticia.fillStyle=""+color+"";
-					}
-					editor.fillText(texto,tx,ty);
-					noticia.fillText(texto,(tx*scale_noticia),ty*scale_noticia);
-					if(ocho){
-						editor.strokeRect(tx-10,ty-10,txf,tyf)
-						editor.arc(tx+txf,ty+tyf,10,0,Math.PI*2,false);
-						editor.fill();
-						editor.beginPath();
-					}
-					texto_listo=true;
-				}
-			}
-		})
-	}
-	}
-	function actualizar(){
-			$(imagen).ready(function(e){
-				if(uno){
-					elemento2.height=ph;
-					elemento2.width=pw;
-					ancho=imagen.width, alto = imagen.height;
-					elemento.width = ancho;
-					elemento.height = alto;
-					$(".scale").css("display","flex");
-					if(ancho<=alto){
-					 scale = -(((alto-450)/alto)-1);
-					}else{
-					 scale = -(((ancho-500)/ancho)-1);
-					}
-					scale=scale*0.80;
-					if(edit){
-						if((ancho*recorte)<=alto){
-							xf=ancho*.70;
-							yf=xf*recorte;
-						}else{
-							yf=alto*.70;
-							xf=yf/recorte;
-						}
-					}
-					cuadro_dimencion=Math.round(12/scale);
-					if(xf<50||yf<50){
-						xf=50;
-						yf=xf*recorte;
-					}
-					mitadX=ancho/2;
-					mitadY=alto/2;
-					x=mitadX-xf/2;
-					y=mitadY-yf/2;
-					$("#porciento_scale").html((scale*100).toFixed(2)+"%")
-					$("#ancho").html(ancho+"px");
-					$("#alto").html(alto+"px");
-					uno=false;
-				}
-				if(dos){
-					if(xf>=(yf/recorte)){
-						alto=xf*recorte;
-						ancho=xf;
-					}else{
-						ancho=yf/recorte;
-						alto=yf;
-					}
-					elemento.width = ancho;
-					elemento.height = alto;
-					elemento2.height=ph;
-					elemento2.width=pw;
-					if(xf<=yf){
-					 scale = -(((yf-450)/yf)-1);
-					}else{
-					 scale = -(((xf-500)/xf)-1);
-					}
-					$("#porciento_scale").html((scale*100).toFixed(2)+"%")
-					$("#ancho").html(Math.round(xf)+"px");
-					$("#alto").html(Math.round(yf)+"px");
-					dos=false;
-				}
-					var pxf=0,pyf=0;
-					noticia.fillStyle="rgba(255,255,255,1)"
-					noticia.fillRect(0,0,pw,ph);
-				if(xf>=(yf/recorte)){
-					pxf=xf/pw;
-					pyf=yf/pxf;
-					py=(ph/2)-(pyf/2);
-					noticia.drawImage(imagen,x,y,xf,yf,0,py,pw,pyf);
-				}else{
-					pyf=yf/ph;
-					pxf=xf/pyf;
-					px=(pw/2)-(pxf/2);
-					noticia.drawImage(imagen,x,y,xf,yf,px,0,pxf,ph);
-				}
-				$("#editorNoticia").css({"transform": "scale("+scale+")"});
-				if(!recorte_listo){
-					editor.drawImage(imagen,0,0,ancho,alto);
-					editor.fillStyle="rgba(0,0,0,.2)"
-					editor.fillRect(0,0,ancho,alto);
-					editor.fillStyle="rgba(255,255,255,.2)"
-					editor.fillRect(x,y,xf,yf);
-					editor.fillStyle="rgba(255,255,255,0.8)"
-					editor.fillRect(x,y,cuadro_dimencion,cuadro_dimencion);
-					editor.fillRect((x+xf)-cuadro_dimencion,y,cuadro_dimencion,cuadro_dimencion);
-					editor.fillRect(x,y+yf-cuadro_dimencion,cuadro_dimencion,cuadro_dimencion);
-					editor.fillRect(x+xf-cuadro_dimencion,yf+y-cuadro_dimencion,cuadro_dimencion,cuadro_dimencion);
-					esta=true;
-				}else{
-					var pxf=0,pyf=0;
-					editor.fillStyle="rgba(255,255,255,1)"
-					editor.fillRect(0,0,ancho,alto);
-					if(xf>=(yf/recorte)){
-						pxf=xf/ancho;
-						pyf=yf/pxf;
-						py=(alto/2)-(pyf/2);
-						editor.drawImage(imagen,x,y,xf,yf,0,py,ancho,pyf);
-					}else{
-						pyf=yf/alto;
-						pxf=xf/pyf;
-						px=(ancho/2)-(pxf/2);
-						editor.drawImage(imagen,x,y,xf,yf,px,0,pxf,alto);
-				}
-				}
-			})
-		}
-	var imagenOriginal
-	var x,y,xf=pw,yf =ph, elemento,elemento2,editor,centro, total,scale,dimencionesTexto,ancho_imaNoti,
-	recorte_listo=false,alto,ancho,tx,ty,txf,tyf,cuatro=true,texto_actualizar=false,cinco=true,seis=true,cuatro;
-	var  mitadY,mitadX, uno=true,dos=false, recorte=ph/pw, imagen_noticias, scale_noticia, tres=true,rotar=false, cortar=false;;
-	var translateX, cuadro_dimencion;
-	$(document).on("click", ".recortar10", function(e){
-		e.preventDefault();
-		recorte_listo=false;
-		uno=true;
-		$("#boton_recortar").addClass("recortar").text("LABEL_CUT").removeClass("info_noticia");
-		$("#boton_recortar3").addClass("recortar").text("LABEL_CUT").removeClass("info_noticia3");
-		$(".contenido_text").css("display", "none");
-		$(".contenido_filter").css("display", "none");
-		$(".recortar10").addClass("recortar");
-		$(".canvas").addClass("recortar")
-		$(".oa").removeClass("oa");
-		$("#normal").addClass("oa");
-		$(".b1").removeClass("paso");
-		$(".titulo_pasos").html("LABEL_STEP_2");
-		window.clearInterval(actualizar2);
-		actualizar();
-	})
-	blockCelda=true;
-	$(document).on("click", "#blockCelda", function(e){
-		e.preventDefault();
-		if(blockCelda){
-			$(this).html('<span class="fa fa-unlock"></span>')
-			blockCelda=false;
-		}else{
-			$(this).html('<span class="fa fa-lock"></span>')
-			blockCelda=true;
-		}
-		t4=true;
-	})
-	var imagen
-	function editorNoticia(img){
-		 cortar=true;
-		imagen= new Image();
-		$(".canvas").html(canvas);
-		elemento = document.getElementById("editorNoticia");
-		editor = elemento.getContext("2d");
-		elemento2 = document.getElementById("imagen_noticias");
-		noticia = elemento2.getContext("2d");
-		$(document).on("click", ".boton_marino.recortar",function(e){
-			e.preventDefault();
-			recorte_listo=true;
-			$(".fondo_oscuro").css("display","none");
-			if(fileToggle){
-				$("#boton_recortar").removeClass("recortar").text("LABEL_ATTACH_IMAGE").addClass("info_noticia");
-			}else{
-				$("#boton_recortar").removeClass("recortar").text("LABEL_SEND").addClass("info_noticia").attr('type','submit');
-			}
-			$(".recortar10").removeClass("recortar");
-			$(".canvas").removeClass("recortar");
-			$(".b1").addClass("paso");
-			$(".titulo_pasos").html("LABEL_STEP_3");
-			if(texto!=""){
-				seis=true;
-				siete=true;
-			}
-			cinco=true;
-			dos=true;
-			cuatro=true;
-			setTimeout(() => {
-				actualizar2();
-			}, actualizar());
-		})
-		var cli = false, t1= false, t2=false,t3=false,t4=false,tcli=false;
-		var mouse =[];
-		function raton(elemento, e){
-			return {
-				x:((e.pageX - elemento.offsetLeft - ((ancho/2)-((ancho*scale)/2)))/scale),
-				y:((e.pageY - elemento.offsetTop - ((alto/2)-((alto*scale)/2)))/scale)
-			}
-		}
-		imagen.src=img;
-		$(".recortar10").addClass("recortar");
-		$("#boton_recortar").removeClass("boton_normal").addClass("recortar boton_marino").text("LABEL_CUT")
-		actualizar();
-		$(elemento).mousemove(function(e){
-			mouse = raton(this, e);
-			//console.log("raton x: "+mouse.x+ " raton Y: " +mouse.y+ " tx: "+tx+" ty: "+ty+" txf:"+(txf+tx)+" tyf:"+(tyf+ty) )
-			if(!recorte_listo){
-				if(x<mouse.x &&(xf+x)>mouse.x && y<mouse.y && (y+yf)>mouse.y){
-					if((xf+x-cuadro_dimencion)<mouse.x &&(xf+x)>mouse.x && (y+yf-cuadro_dimencion)<mouse.y && (y+yf)>mouse.y){
-			 			$(elemento).css("cursor","nw-resize");
-			 		}else if((xf+x-cuadro_dimencion)<mouse.x &&(xf+x)>mouse.x && y<mouse.y && (y+cuadro_dimencion)>mouse.y){
-			 			$(elemento).css("cursor","ne-resize");
-			 		}else if(x<mouse.x &&(cuadro_dimencion+x)>mouse.x && y<mouse.y && (y+cuadro_dimencion)>mouse.y){
-			 			$(elemento).css("cursor","se-resize");
-			 		}else if(x<mouse.x &&(cuadro_dimencion+x)>mouse.x && (y+yf-cuadro_dimencion)<mouse.y &&(y+yf)>mouse.y){
-			 			$(elemento).css("cursor","sw-resize");
-			 		}else{
-						$(elemento).css("cursor","move");
-					}
-			 	}else{
-			 		$(elemento).css("cursor","default");
-			 	}
-			}else if(texto_listo){
+  $('#form-add #file').fileinput({
-				if(tx-10<mouse.x && tx-10+txf>mouse.x && ty-10<mouse.y && ty-10+tyf>mouse.y){
-			 		$(elemento).css("cursor","move");
-			 	}else if((txf+tx-10)<mouse.x &&(txf+tx-10+20)>mouse.x && (ty-10+tyf)<mouse.y && (ty-10+tyf+20)>mouse.y){
-			 		$(elemento).css("cursor","pointer");
+                theme: 'fa',
-			 	}else{
-			 		$(elemento).css("cursor","default");
-			 	}
-			}
+                language: 'es',
-			else{
-				$(elemento).css("cursor","default");
-			}
+                showUpload: false,
-		})
-		$(elemento).mousedown(function(e){
-			mouse = raton(this, e);
+                dropZoneEnabled: false,
-			if(!recorte_listo){
-				if(x<mouse.x &&(xf+x)>mouse.x && y<mouse.y && (y+yf)>mouse.y){
-					 if((xf+x-cuadro_dimencion)<mouse.x &&(xf+x)>mouse.x && (y+yf-cuadro_dimencion)<mouse.y && (y+yf)>mouse.y){
-						 t4 = true;
-					 }else if((xf+x-cuadro_dimencion)<mouse.x &&(xf+x)>mouse.x && y<mouse.y && (y+cuadro_dimencion)>mouse.y){
-						 t3 = true;
-					 }else if(x<mouse.x &&(cuadro_dimencion+x)>mouse.x && y<mouse.y && (y+cuadro_dimencion)>mouse.y){
-						 t1 = true;
-					 }else if(x<mouse.x &&(cuadro_dimencion+x)>mouse.x && (y+yf-cuadro_dimencion)<mouse.y &&(y+yf)>mouse.y){
-						 t2 = true;
-					 }else{
-						 cli = true;
-					 }
-				  }
-			}else if(texto_listo){
-				if(tx-10<mouse.x && tx-10+txf>mouse.x && ty-10<mouse.y && ty-10+tyf>mouse.y){
-			 		tcli=true;
-			 	}else if((txf+tx-10)<mouse.x &&(txf+tx-10+20)>mouse.x && (ty-10+tyf)<mouse.y && (ty-10+tyf+20)>mouse.y){
-			 		rotar=true;
-			 	}
-			}
-		 })
-		 $('.editorNoticia').mousemove(function(e){
-		 	mouse = raton(this, e);
-		 	if(!recorte_listo){
-			 	if(cli){
-			 		if((mouse.y-(yf/2))>=0&&(mouse.y+(yf/2))<=alto){
-				 		y = (mouse.y-(yf/2));
-			 		}else{
-			 			if((mouse.y-(yf/2))<0){
-			 				y=0;
-			 			}
-			 			if((mouse.y+(yf/2))>alto){
-			 				y=alto-yf;
-			 			}
+                maxFileCount: 1,
-			 		}
-			 		if((mouse.x-(xf/2))>=0&&(mouse.x+(xf/2))<=ancho){
-			 			x = (mouse.x-(xf/2));
-			 		}else{
-			 			if((mouse.x-(xf/2))<0){
-			 				x=0;
-			 			}
-			 			if((mouse.x+(xf/2))>ancho){
-			 				x=(ancho)-xf;
-			 			}
-			 		}
-			 	}
-				 if(blockCelda){
-			 	if(t4){
-					cal1=mouse.y-y;
-			 		cal2=cal1/recorte;
-					cal3=x+cal2;
-					if(cal2>50){
-						if(cal3<=ancho&&mouse.y<=alto){
-							yf=cal1;
-				 			xf=cal2;
-						}else if(cal3<=ancho&&mouse.y>alto){
-							yf=alto-y;
-							xf=yf/recorte
-						}else if(cal3>=ancho&&mouse.y<=alto){
-							xf=ancho-x;
-							yf=xf*recorte;
-						}
-				 	}
-			 	}
-			 	if(t3){
-					cal1=yf+(y-mouse.y);
-			 		cal2=cal1/recorte;
-					cal3=x+cal2;
-					if(cal2>50){
-						if(cal3<=ancho&&mouse.y>=0){
-							yf=cal1;
-				 			xf=cal2;
-							y=mouse.y;
-						}else if(cal3<=ancho&&mouse.y<0){
-							yf=yf+y;
-							xf=yf/recorte
-							y=0;
-						}else if(cal3>=ancho&&mouse.y>=0){
-							xf=ancho-x;
-							y=y+(yf-xf*recorte);
-							yf=xf*recorte;
-						}
-				 	}
-			 	}
-			 	if(t2){
-					cal1=mouse.y-y;
-					cal2=cal1/recorte;
-					cal3=x+(yf-cal1)/recorte;cal2;
-					if(cal2>50){
-						if(cal3>=0&&mouse.y<=alto){
-							x=cal3;
-							yf=cal1;
-							xf=cal2;
-						}else if(cal3>0&&mouse.y>alto){
-							yf=alto-y;
-							x=x+(xf-yf/recorte);
-							xf=yf/recorte
-						}else if(cal3<0&&mouse.y<=alto){
-							xf=xf+x;
-							yf=xf*recorte;
-							x=0;
-						}
-					}
-				}
-				if(t1){
-					cal0=y-mouse.y;
-					cal1=yf+cal0;
-					cal2=cal1/recorte;
-					cal3=x-cal0/recorte;
-					if(cal2>50){
-						if(cal3>=0&&mouse.y>=0){
-							yf=cal1;
-							xf=cal2;
-							x=cal3;
-							y=mouse.y;
-						}else if(cal3>0&&mouse.y<0){
-							yf=yf+y;
-							x=x+(xf-yf/recorte);
-							xf=yf/recorte
-							y=0;
-						}else if(cal3<0&&mouse.y>=0){
-							xf=xf+x;
-							y=y+(yf-xf*recorte);
-							yf=xf*recorte;
-							x=0;
-						}
-					}
-				}
-				}else{
-				if(t4){
-					cal1=mouse.y-y;
-					cal2=mouse.x-x;
-					if(cal1>50){
-						yf=mouse.y<=alto?cal1:alto-y;
-				 	}
-					if(cal2>50){
-						xf=mouse.x<=ancho?cal2:ancho-x;
-					}
-			 	}
-			 	if(t3){
-					cal1=yf-(mouse.y-y);
-					cal2=mouse.x-x;
-					if(cal1>50){
-						if(mouse.y>=0){
-							yf=cal1;
-							y=mouse.y;
-						}else{
-							yf=yf+y;
-							y=0;
-						}
-				 	}
-					if(cal2>50){
-						xf=mouse.x<=ancho?cal2:ancho-x;
-					}
-			 	}
-				/* Izquierda abajo */
-			 	if(t2){
-					cal1=mouse.y-y;
-					cal2=xf-(mouse.x-x);
-					if(cal1>50){
-						yf=yf=mouse.y<=alto?cal1:alto-y;
-					}
-					if(cal2>50){
-						if(mouse.x>=0){
-							xf=cal2;
-							x=mouse.x;
-						}else{
-							xf=xf+x;
-							x=0;
-						}
-					}
-			 	}
-				/* izquierda arriba */
-			 	if(t1){
-					cal1=yf-(mouse.y-y);
-					cal2=xf-(mouse.x-x);
-					if(cal1>50){
-						if(mouse.y>=0){
-							yf=cal1;
-							y=mouse.y;
-						}else{
-							yf=yf+y;
-							y=0;
-						}
-				 	}
-					if(cal2>50){
-						if(mouse.x>=0){
-							xf=cal2;
-							x=mouse.x;
-						}else{
-							xf=xf+x;
-							x=0;
-						}
-					}
-			 	}
-				}
-		 	actualizar();
-		 	}else if(texto_listo){
-		 		if(tcli){
-		 			tx=mouse.x-(txf/2)
-		 			ty=mouse.y-(tyf/2)
-		 		}else if(rotar){
-		 		}
-		 		actualizar2();
-		 	}
-		 })
-		 $('body').mouseup(function(e){
+                placeholder:  'LABEL_RECOMMENDED_SIZE $image_size',
-		 	if(!recorte_listo){
-			 	cli=false;
-			 	t1=false;
-			 	t2=false;
-			 	t3=false;
-			 	t4=false;
-		 	}else if (texto_listo) {
-		 		tcli=false;
+                allowedFileExtensions: ['jpeg', 'jpg', 'png'],
+            });
+  $('#form-add #marketplace').fileinput({
+                theme: 'fa',
+                language: 'es',
+                showUpload: false,
+                dropZoneEnabled: false,
+                maxFileCount: 1,
+                placeholder:  'LABEL_RECOMMENDED_SIZE $marketplace_size',
+                allowedFileExtensions: ['jpeg', 'jpg', 'png'],
+            });
+            $('#form-edit #file').fileinput({
+                theme: 'fa',
+                language: 'es',
+                showUpload: false,
+                dropZoneEnabled: false,
+                maxFileCount: 1,
-		 	}
-		 })
-	}
+                placeholder:  'LABEL_RECOMMENDED_SIZE $image_size',
-	/* Titulo */
+                allowedFileExtensions: ['jpeg', 'jpg', 'png'],
+            });
-var titulo_noticia, censor_titulo = true, numero_titulo=0;
-	$(document).on("keyup change", "#name", function(e){
-	console.log(numero_titulo)
-	titulo_noticia = $(this).val();
+  $('#form-add #marketplace').fileinput({
-	titulo_elemento= $(".titulo_topico");
-	if(titulo_noticia!=""){
+                theme: 'fa',
-		if(censor_titulo){
-			titulo_elemento.html(titulo_noticia);
+                language: 'es',
-			if(titulo_elemento.height()>38){
-				var titulo_noticia2 = "";
-				for(var i =0; i <titulo_noticia.length;i++){
+                showUpload: false,
-					titulo_noticia2 = titulo_noticia2 + titulo_noticia.split("")[i];
-					titulo_elemento.html(titulo_noticia2);
-					if(titulo_elemento.height()>38){
-						titulo_noticia2 = titulo_noticia2.slice(0,-5) + "...";
+                dropZoneEnabled: false,
-						titulo_elemento.html(titulo_noticia2);
-						numero_titulo = titulo_noticia2.length;
+                maxFileCount: 1,
-						censor_titulo=false;
-						break;
-					}
-				}
-			}else{
+                placeholder:  'LABEL_RECOMMENDED_SIZE $marketplace_size',
-				numero_titulo=0;
+                allowedFileExtensions: ['jpeg', 'jpg', 'png'],
-			}
+            });
-		}else{
-			if(numero_titulo+1>=titulo_noticia.length){
-				titulo_elemento.html(titulo_noticia);
-				censor_titulo=true;
-			}
+        $('body').on('click', 'button.btn-cancel', function(e) {
-		}
+            e.preventDefault();
-	}else{
+            $('#row-add').hide();
-		titulo_elemento.html("LABEL_TITLE");
+            $('#row-edit').hide();
-		censor_titulo = true;
+            $('#row-listing').show();
-})
+        });
-});
-JS;
-$this->inlineScript()->captureEnd();
-?>
+});
+JS;
+$this->inlineScript()->captureEnd();
+?>
-<!-- Content Header (Page header) -->
-<section class="content-header">
-	<div class="container-fluid">
-		<div class="row mb-2">
-			<div class="col-sm-12">
-				<h1>LABEL_CAPSULES</h1>
-			</div>
-		</div>
-	</div><!-- /.container-fluid -->
-</section>
-<section class="content" id="content1">
+<div class="container">
-	<div class="container-fluid">
+	<div class="card" id="row-listing">
-		<div class="row">
+	 	<div class="card-header">
-			<div class="col-12 mt-3">
+	 		<h6 class="card-title">LABEL_CAPSULES</h6>
-				<div class="card">
+	 	</div>
-					<div class="card-header">
+	 	<div class="card-body">
-						<?php
+	 						<?php
 						$form = $this->form;
 						$form->setAttributes([
+							'name'    => 'form-filter',
-							'name'    => 'form-filter',
+							'id'      => 'form-filter',
-							'id'      => 'form-filter',
+						]);
 						]);
 						$form->prepare();
-						$form->prepare();
+						echo $this->form()->openTag($form);
-						echo $this->form()->openTag($form);
+						?>
-						?>
+						<div class="row">
+	 	         <div class="col-12 mt-3">
+							<?php
-						<div class="form-group">
+							$element = $form->get('topic_uuid');
 							<?php
-							$element = $form->get('topic_uuid');
+							$element->setAttributes(['class' => 'form-control']);
+							$element->setLabel('LABEL_TOPIC');
-							$element->setAttributes(['class' => 'form-control']);
+							echo $this->formLabel($element);
-							$element->setLabel('LABEL_TOPIC');
+							echo $this->formSelect($element);
-							echo $this->formLabel($element);
+							?>
 							echo $this->formSelect($element);
-							?>
+	 	         </div>
-						</div>
+	 	     </div>
 						<?php echo $this->form()->closeTag($form); ?>
-					</div>
+			<div class="row">
-					<div class="card-body">
+	 	         <div class="col-12 mt-3">
-						<table id="gridTable" class="table   table-bordered">
+					<table id="gridTable" class="table   table-bordered">
 							<thead>
 								<tr>
+									<th>LABEL_NAME</th>
+									<th>LABEL_DETAILS</th>
-									<th>LABEL_NAME</th>
+									<th>LABEL_IMAGES</th>
-									<th>LABEL_DETAILS</th>
+									<th>LABEL_ACTIONS</th>
-									<th>LABEL_IMAGES</th>
-									<th>LABEL_ACTIONS</th>
+								</tr>
-								</tr>
+							</thead>
-							</thead>
+						<tbody>
-							<tbody>
+						</tbody>
-							</tbody>
-						</table>
-					</div>
-					<div class="card-footer clearfix">
+					</table>
-						<div style="float:right;">
-							<button type="button" class="btn btn-info btn-refresh"><i class="fa fa-refresh"></i> LABEL_REFRESH </button>
-							<?php if ($allowAdd) : ?>
-								<button type="button" class="btn btn-primary btn-add"><i class="fa fa-plus"></i> LABEL_ADD </button>
-							<?php endif; ?>
-						</div>
-					</div>
-				</div>
-			</div>
-		</div>
-	</div>
-</section>
-<!-- The Modal -->
+	 	         </div>
+	 	     </div>
-<div id="modalCapsuleAdd" style='display:none'>
+	 	</div>
+	 	<div class="card-footer text-right">
+			<button type="button" class="btn btn-info btn-refresh"><i class="fa fa-refresh"></i> LABEL_REFRESH </button>
+			<?php if ($allowAdd) : ?>
+			<button type="button" class="btn btn-primary btn-add"><i class="fa fa-plus"></i> LABEL_ADD </button>
-	<!-- Modal Header -->
+			<?php endif; ?>
 	 	</div>
-	<div class="d-flex justify-content-center tituloEditor">
+	</div>
 		<h4>LABEL_ADD_CAPSULE</h6>
+	<div class="card" id="row-add" style="display: none">
-	</div>
+	 	<div class="card-header">
-	<!-- Modal body -->
+	 		<h6 class="card-title">LABEL_ADD_CAPSULE</h6>
-	<div class="grid-padre">
+	 	</div>
-		<?php
+	 	<?php
 		$form = $this->formAdd;
 		$form->setAttributes([
+			'method'  => 'post',
+			'action'  => '',
-			'method'  => 'post',
+			'name'    => 'form-add',
-			'action'  => '',
+			'id'      => 'form-add',
-			'name'    => 'form-capsule-add',
+		]);
-			'id'      => 'form-capsule-add',
-		]);
+		$form->prepare();
+		echo $this->form()->openTag($form);
-		$form->prepare();
+		?>
-		echo $this->form()->openTag($form);
+	 	<div class="card-body">
-		?>
+	 		<div class="row">
-		<div class="form-group grid-1-2">
-			<?php
-			$element = $form->get('name');
-			$element->setAttributes(['class' => 'form-control']);
-			$element->setOptions(['label' => 'LABEL_NAME']);
-			echo $this->formLabel($element);
-			echo $this->formText($element);
-			?>
+	 	         <div class="col-12 mt-3">
-		</div>
+    			<?php
-		<div class="form-group grid-1-2">
-			<?php
-			$element = $form->get('description');
-			$element->setAttributes(['id' => 'description_add', 'class' => 'form-control', 'rows' => '2', 'class' => 'form-control']);
-			$element->setOptions(['label' => 'LABEL_DESCRIPTION']);
-			echo $this->formLabel($element);
-			echo $this->formTextArea($element);
-			?>
-		</div>
-		<div class="form-group grid-1-2">
+    			$element = $form->get('name');
-			<?php
-			$element = $form->get('order');
+    			$element->setAttributes(['class' => 'form-control']);
-			$element->setAttributes(['class' => 'form-control']);
+    			$element->setOptions(['label' => 'LABEL_NAME']);
-			$element->setOptions(['label' => 'LABEL_ORDER']);
+    			echo $this->formLabel($element);
-			echo $this->formLabel($element);
+    			echo $this->formText($element);
-			echo $this->formText($element);
+    			?>
-			?>
+    			</div>
-		</div>
+    		</div>
-		<div class="form-group grid-1-2">
-			<?php
-			$element = $form->get('status');
-			$element->setAttributes(['class' => 'form-control']);
-			$element->setOptions(['label' => 'LABEL_STATUS']);
-			echo $this->formLabel($element);
-			echo $this->formSelect($element);
-			?>
+	 		<div class="row">
-		</div>
+	 	         <div class="col-12 mt-3">
-		<div class="form-group grid-1-2">
-			<?php
-			$element = $form->get('privacy');
-			$element->setAttributes(['class' => 'form-control']);
-			$element->setOptions(['label' => 'LABEL_PRIVACY']);
-			echo $this->formLabel($element);
+        			<?php
-			echo $this->formSelect($element);
-			?>
-		</div>
-		<div class="form-group grid-1-2">
+        			$element = $form->get('description');
-			<?php
+        			$element->setAttributes(['id' => 'description_add', 'class' => 'form-control', 'rows' => '2', 'class' => 'form-control']);
-			$element = $form->get('type');
+        			$element->setOptions(['label' => 'LABEL_DESCRIPTION']);
-			$element->setAttributes(['class' => 'form-control']);
+        			echo $this->formLabel($element);
-			$element->setOptions(['label' => 'LABEL_TYPE']);
+        			echo $this->formTextArea($element);
-			echo $this->formLabel($element);
+        			?>
-			echo $this->formSelect($element);
+        		</div>
-			?>
+        	</div>
-		</div>
-		<div class="form-group grid-1-2" id="form-row-cost">
-			<?php
-			$element = $form->get('cost');
-			$element->setAttributes(['class' => 'form-control']);
-			$element->setOptions(['label' => 'LABEL_COST']);
-			echo $this->formLabel($element);
-			echo $this->formText($element);
-			?>
-		</div>
-		<?php
-		$element = $form->get('marketplace');
-		$element->setAttributes(['class' => 'marketplace']);
-		echo $this->formHidden($element);
-		?>
+	 		<div class="row">
+	 	         <div class="col-12 mt-3">
+        			<?php
+        			$element = $form->get('order');
+        			$element->setAttributes(['class' => 'form-control']);
+        			$element->setOptions(['label' => 'LABEL_ORDER']);
+        			echo $this->formLabel($element);
+        			echo $this->formText($element);
+        			?>
+        		</div>
+			</div>
-		<?php
+	 		<div class="row">
+	 	         <div class="col-12 mt-3">
+    			<?php
+    			$element = $form->get('status');
+    			$element->setAttributes(['class' => 'form-control']);
+    			$element->setOptions(['label' => 'LABEL_STATUS']);
-		$element = $form->get('file');
+    			echo $this->formLabel($element);
+    			echo $this->formSelect($element);
+    			?>
+				</div>
+			</div>
+	 		<div class="row">
+	 	         <div class="col-12 mt-3">
-		$element->setAttributes(['class' => 'file']);
+        			<?php
+        			$element = $form->get('privacy');
+        			$element->setAttributes(['class' => 'form-control']);
+        			$element->setOptions(['label' => 'LABEL_PRIVACY']);
+        			echo $this->formLabel($element);
+        			echo $this->formSelect($element);
+        			?>
+        		</div>
+        	</div>
+			<div class="row">
-		echo $this->formHidden($element);
+	 			<div class="col-12 mt-3">
+        			<?php
+        			$element = $form->get('type');
+        			$element->setAttributes(['class' => 'form-control']);
+        			$element->setOptions(['label' => 'LABEL_TYPE']);
+        			echo $this->formLabel($element);
+        			echo $this->formSelect($element);
-		?>
+        			?>
+        		</div>
+        	</div>
-		<div class="form-group grid-1-2 ">
-			<div class="imagen-contaner">
-				<label for="marketplaceImg">LABEL_IMAGE_MARKETPLACE</label>
-				<img class='marketplaceImg' src='' class="img img-responsive" style="width: 100px; height: auto"></img>
-			</div>
+		  	<div class="row"  id="form-row-cost">
-		</div>
-		<h5 style="text-align:center " class="form-group grid-1-2" id='titleTypeImage'>LABEL_IMAGE_MARKETPLACE</h5>
+	 			<div class="col-12 mt-3">
+        			<?php
+        			$element = $form->get('cost');
+        			$element->setAttributes(['class' => 'form-control']);
+        			$element->setOptions(['label' => 'LABEL_COST']);
+        			echo $this->formLabel($element);
+        			echo $this->formText($element);
+        			?>
+				</div>
+			</div>
+			<div class="row">
-		<div class="contenido form-group " id="contenido"></div>
+	 	 		<div class="col-12 mt-3">
+                        <?php
+                        $element = $form->get('file');
+                        $element->setOptions(['label' => 'LABEL_IMAGE']);
+                        $element->setAttributes(['class' => 'form-control']);
+                        $element->setAttributes(['accept' => 'image/jpg,image/jpeg,image/png']);
+                        echo $this->formLabel($element);
+                        echo $this->formFile($element);
+                        ?>
+            	</div>
-		<?php echo $this->form()->closeTag($form); ?>
-	</div>
+           	</div>
+           	<div class="row">
+	 	         <div class="col-12 mt-3">
+                        <?php
+                        $element = $form->get('marketplace');
-</div>
+                        $element->setOptions(['label' => 'LABEL_MARKETPLACE']);
+                        $element->setAttributes(['class' => 'form-control']);
+                        $element->setAttributes(['accept' => 'image/jpg,image/jpeg,image/png']);
+                        echo $this->formLabel($element);
                         echo $this->formFile($element);
+                        ?>
-<!-- The Modal -->
+          		</div>
-<div id="modalCapsuleEdit" style='display:none'>
+          	</div>
+	 	</div>
+	 	<div class="card-footer text-right">
+			<button type="submit" class="btn btn-primary">LABEL_SAVE</button>
       		<button type="button" class="btn btn-light btn-cancel">LABEL_CANCEL</button>
-	<!-- Modal Header -->
+	 	</div>
+	 	<?php echo $this->form()->closeTag($form); ?>
-	<div class="d-flex justify-content-center tituloEditor">
+	</div>
-		<h4>LABEL_EDIT_CAPSULE</h6>
 	<div class="card" id="row-edit" style="display: none">
-	</div>
+	 	<div class="card-header">
-	<!-- Modal body -->
+	 		<h6 class="card-title">LABEL_EDIT_CAPSULE</h6>
-	<div class="grid-padre">
+	 	</div>
-		<?php
+	 	<?php
+		$form = $this->formEdit;
+		$form->setAttributes([
-		$form = $this->formEdit;
+		    'method'    => 'post',
-		$form->setAttributes([
+		    'name'      => 'form-edit',
-			'method'    => 'post',
+		    'id'        => 'form-edit'
-			'name'      => 'form-capsule-edit',
+		]);
-			'id'        => 'form-capsule-edit'
-		]);
+		$form->prepare();
+		echo $this->form()->openTag($form);
-		$form->prepare();
+		?>
-		echo $this->form()->openTag($form);
+	 	<div class="card-body">
-		?>
-		<div class="form-group grid-1-2">
-			<?php
-			$element = $form->get('name');
-			$element->setAttributes(['class' => 'form-control']);
-			$element->setOptions(['label' => 'LABEL_NAME']);
-			echo $this->formLabel($element);
-			echo $this->formText($element);
+	 		<div class="row">
-			?>
+	 	         <div class="col-12 mt-3">
-		</div>
-		<div class="form-group grid-1-2">
-			<?php
-			$element = $form->get('description');
-			$element->setAttributes(['id' => 'description_edit', 'class' => 'form-control', 'rows' => '2', 'class' => 'form-control']);
-			$element->setOptions(['label' => 'LABEL_DESCRIPTION']);
-			echo $this->formLabel($element);
-			echo $this->formTextArea($element);
-			?>
-		</div>
+    			<?php
-		<div class="form-group grid-1-2">
+    			$element = $form->get('name');
-			<?php
-			$element = $form->get('order');
+    			$element->setAttributes(['class' => 'form-control']);
-			$element->setAttributes(['class' => 'form-control']);
+    			$element->setOptions(['label' => 'LABEL_NAME']);
-			$element->setOptions(['label' => 'LABEL_ORDER']);
+    			echo $this->formLabel($element);
-			echo $this->formLabel($element);
+    			echo $this->formText($element);
-			echo $this->formText($element);
+    			?>
-			?>
+    			</div>
-		</div>
-		<div class="form-group grid-1-2">
-			<?php
-			$element = $form->get('status');
-			$element->setAttributes(['class' => 'form-control']);
-			$element->setOptions(['label' => 'LABEL_STATUS']);
-			echo $this->formLabel($element);
-			echo $this->formSelect($element);
+    		</div>
-			?>
+	 		<div class="row">
-		</div>
-		<div class="form-group grid-1-2">
-			<?php
-			$element = $form->get('privacy');
-			$element->setAttributes(['class' => 'form-control']);
-			$element->setOptions(['label' => 'LABEL_PRIVACY']);
+	 	         <div class="col-12 mt-3">
-			echo $this->formLabel($element);
-			echo $this->formSelect($element);
-			?>
-		</div>
+        			<?php
-		<div class="form-group grid-1-2">
+        			$element = $form->get('description');
-			<?php
+        			$element->setAttributes(['id' => 'description_edit', 'class' => 'form-control', 'rows' => '2', 'class' => 'form-control']);
-			$element = $form->get('type');
+        			$element->setOptions(['label' => 'LABEL_DESCRIPTION']);
-			$element->setAttributes(['class' => 'form-control']);
+        			echo $this->formLabel($element);
-			$element->setOptions(['label' => 'LABEL_TYPE']);
+        			echo $this->formTextArea($element);
-			echo $this->formLabel($element);
+        			?>
-			echo $this->formSelect($element);
+        		</div>
-			?>
-		</div>
-		<div class="form-group grid-1-2" id="form-row-cost">
-			<?php
-			$element = $form->get('cost');
-			$element->setAttributes(['class' => 'form-control']);
-			$element->setOptions(['label' => 'LABEL_COST']);
-			echo $this->formLabel($element);
-			echo $this->formText($element);
-			?>
-		</div>
-		<?php
-		$element = $form->get('marketplace');
-		$element->setAttributes(['class' => 'marketplace']);
-		echo $this->formHidden($element);
+        	</div>
+	 		<div class="row">
+	 	         <div class="col-12 mt-3">
+        			<?php
+        			$element = $form->get('order');
+        			$element->setAttributes(['class' => 'form-control']);
+        			$element->setOptions(['label' => 'LABEL_ORDER']);
+        			echo $this->formLabel($element);
+        			echo $this->formText($element);
+        			?>
+        		</div>
-		?>
+			</div>
+	 		<div class="row">
+	 	         <div class="col-12 mt-3">
+    			<?php
+    			$element = $form->get('status');
+    			$element->setAttributes(['class' => 'form-control']);
-		<?php
+    			$element->setOptions(['label' => 'LABEL_STATUS']);
+    			echo $this->formLabel($element);
+    			echo $this->formSelect($element);
+    			?>
+				</div>
+			</div>
+	 		<div class="row">
-		$element = $form->get('file');
+	 	         <div class="col-12 mt-3">
+        			<?php
+        			$element = $form->get('privacy');
+        			$element->setAttributes(['class' => 'form-control']);
+        			$element->setOptions(['label' => 'LABEL_PRIVACY']);
+        			echo $this->formLabel($element);
+        			echo $this->formSelect($element);
+        			?>
+        		</div>
+        	</div>
-		$element->setAttributes(['class' => 'file']);
+			<div class="row">
+	 			<div class="col-12 mt-3">
+        			<?php
+        			$element = $form->get('type');
+        			$element->setAttributes(['class' => 'form-control']);
+        			$element->setOptions(['label' => 'LABEL_TYPE']);
+        			echo $this->formLabel($element);
+        			echo $this->formSelect($element);
+        			?>
+        		</div>
+        	</div>
+		  	<div class="row"  id="form-row-cost">
+	 			<div class="col-12 mt-3">
+        			<?php
+        			$element = $form->get('cost');
+        			$element->setAttributes(['class' => 'form-control']);
+        			$element->setOptions(['label' => 'LABEL_COST']);
+        			echo $this->formLabel($element);
+        			echo $this->formText($element);
+        			?>
+				</div>
+			</div>
+			<div class="row">
+	 	 		<div class="col-12 mt-3">
+                        <?php
+                        $element = $form->get('file');
+                        $element->setOptions(['label' => 'LABEL_IMAGE']);
+                        $element->setAttributes(['class' => 'form-control']);
+                        $element->setAttributes(['accept' => 'image/jpg,image/jpeg,image/png']);
+                        echo $this->formLabel($element);
+                        echo $this->formFile($element);
+                        ?>
+            	</div>
+           	</div>
+           	<div class="row">
+	 	         <div class="col-12 mt-3">
+                        <?php
+                        $element = $form->get('marketplace');
+                        $element->setOptions(['label' => 'LABEL_MARKETPLACE']);
+                        $element->setAttributes(['class' => 'form-control']);
-		echo $this->formHidden($element);
+                        $element->setAttributes(['accept' => 'image/jpg,image/jpeg,image/png']);
-		?>
+                        echo $this->formLabel($element);
+                        echo $this->formFile($element);
+                        ?>
-		<div class="form-group grid-1-2 ">
-			<div class="imagen-contaner">
+          		</div>
-				<label for="marketplaceImg">LABEL_IMAGE_MARKETPLACE</label>
+          	</div>
-				<img class='marketplaceImg' src='' class="img img-responsive" style="width: 100px; height: auto"></img>
+	 	</div>
-			</div>
+	 	<div class="card-footer text-right">
-		</div>
+			<button type="submit" class="btn btn-primary">LABEL_SAVE</button>
-		<h5 style="text-align:center " class="form-group grid-1-2" id='titleTypeImage'>LABEL_IMAGE_MARKETPLACE</h5>
+      		<button type="button" class="btn btn-light btn-cancel">LABEL_CANCEL</button>
-		<div class="contenido form-group " id="contenido"></div>
+	 	</div>
 	</div>
 </div>
 <!-- The Modal -->
-<div class="modal" id="modalImageApp">
+<div class="modal" id="modalPreviewImage">
 	<div class="modal-dialog ">
 		<div class="modal-content">
 			</div>
 			<!-- Modal body -->
 			<div class="modal-body">
 				<form>
+					<div class="row">
-					<div class="form-group">
+						<div class="col-12 mt-3">
 						<label>LABEL_TOPIC</label>
+						<input type="text" readonly="readonly" id="table-users-topic" class="form-control">
-						<input type="text" readonly="readonly" id="table-users-topic" class="form-control">
+						</div>
 					</div>
+					<div class="row">
-					<div class="form-group">
+						<div class="col-12 mt-3">
 						<label>LABEL_CAPSULE</label>
+						<input type="text" readonly="readonly" id="table-users-capsule" class="form-control">
-						<input type="text" readonly="readonly" id="table-users-capsule" class="form-control">
+						</div>
 					</div>
+				</form>
+				<div class="row">
-				</form>
+					<div class="col-12 mt-3">
-				<div style="height: 300px;overflow: scroll;">
+        				<div style="height: 300px;overflow: scroll;">
-					<table id="gridTableUsers" style="width: 100%" class="table   table-bordered">
+        					<table id="gridTableUsers" style="width: 100%" class="table   table-bordered">
-						<thead>
+        						<thead>
-							<tr>
+        							<tr>
-								<th>LABEL_FIRST_NAME</th>
+        								<th>LABEL_FIRST_NAME</th>
-								<th>LABEL_LAST_NAME</th>
+        								<th>LABEL_LAST_NAME</th>
-								<th>LABEL_EMAIL</th>
+        								<th>LABEL_EMAIL</th>
-								<th>LABEL_DETAILS</th>
+        								<th>LABEL_DETAILS</th>
-							</tr>
+        							</tr>
-						</thead>
+        						</thead>
-						<tbody>
+        						<tbody>
-						</tbody>
+        						</tbody>
+        					</table>
-					</table>
+        				</div>
+    				</div>
-				</div>
+    			</div>
 			</div>

Proyectos de Subversion LeadersLinked - Backend

(root)/module/LeadersLinked/view/leaders-linked/microlearning-capsules/index.phtml – Rev 16891 → 16905