camaleon_cms 0.2.1 → 1.0

data/app/assets/javascripts/admin/admin-basic-manifest.js

@@ -0,0 +1,3 @@
+//= require jquery
+//= require bootstrap.min
+//= require ./jquery.validate

data/app/assets/javascripts/admin/admin-manifest.js

@@ -16,17 +16,27 @@
 //= require ./jquery-ui.min
 //= require ./underscore
 //= require ./jquery.validate
-//= require ./actions
+
+//= require jquery_ujs
+
 //= require ./elfinder/elfinder.full
 //= require ./elfinder/proxy/elFinderSupportVer1
 //= require ./elfinder/upload_elfinder
 
 //= require ./jquery.slugify
 //= require ./translator
-//= require ./core
+//= require ./i18n
+//= require ./custom_fields
+
+//= require ./libraries
+//= require ./actions
+
 
-//= require jquery_ujs
 //= require ./modal
+//= require ./grid-editor
 
 //= require ./tageditor/jquery.caret.min
-//= require ./tageditor/jquery.tag-editor
+//= require ./tageditor/jquery.tag-editor
+
+//= require ./lte/app
+

data/app/assets/javascripts/admin/custom_fields.js

@@ -31,7 +31,7 @@ function build_custom_field(values, multiple, field_key, rand, default_value){
         });
         $sortable.delegate('.actions .fa-times', "click", function(){
             var parent = $(this).parents('li');
-            if(confirm(lang.message_delete_item)){
+            if(confirm(I18n("msg.delete_item"))){
                 parent.remove();
             }
             return false;
@@ -73,7 +73,9 @@ function custom_field_date($field){
         }else{
             box.datepicker({
                 language: 'es',
-                format: 'yyyy-mm-dd'
+                format: 'yyyy-mm-dd',
+                autoclose: true,
+                todayBtn: "linked"
             });
         }
     }

data/app/assets/javascripts/admin/data.js

@@ -13,12 +13,16 @@ var DATA = {
             statusbar: true,
             paste: true,
             toolbar_items_size: 'small',
+            content_css: tinymce_assets["custom_css"],
+            convert_urls: false,
             //forced_root_block: '',
+            extended_valid_elements: 'i[*],div[*],p[*],li[*],a[*],ol[*],ul[*],span[*]',
             toolbar: "bold italic | alignleft aligncenter alignright alignjustify | fontselect fontsizeselect | bullist numlist | outdent indent | undo redo | link unlink image media | forecolor backcolor | styleselect template",
             language: CURRENT_LOCALE,
             relative_urls: false,
             remove_script_host: false,
             browser_spellcheck : true,
+            language_url: tinymce_assets["language_url"],
             file_browser_callback: function(field_name, url, type, win) {
                 $.fn.upload_elfinder({
                     selected: function(res){
@@ -48,32 +52,57 @@ var DATA = {
                     context: 'insert',
                     onclick: function () { editor.insertContent('<p>-New line-</p>');  }
                 });
-                editor.on('postRender', function(e) { editor.settings.onPostRender(editor); });
+
+                // eval all extra setups
+                for(var ff in editor.settings.extra_setups) editor.settings.extra_setups[ff](editor);
+                editor.on('postRender', function(e) {
+                    editor.settings.onPostRender(editor);
+                });
+
+                editor.on('init', function(e) {
+                    // auto switch on grid editor detected
+                    if($.fn.isGridEditorContent($(editor.targetElm).val()))
+                        $(editor.targetElm).gridEditor(editor);
+                });
+
+                // grid editor button
+                editor.addButton('grid_editor', {
+                    text: 'Grid Editor',
+                    icon: false,
+                    onclick: function(){
+                        if(!confirm("Are you sure to change the editor?")) return false;
+                        var area = $(editor.targetElm).gridEditor(editor);
+                    }
+                });
+
             },
-            onPostRender: function(editor){}
+            onPostRender: function(editor){}, //custom callback for post render
+            extra_toolbar: [], //custom callback for
+            extra_setups: [] //custom callback for
+
         }
     },
     tiny_mce3: {
         advanced:{
-                // General options
-                mode : "textareas",
-                editor_selector : "tinymce_advanced",
-                theme : "advanced",
-                plugins : "autolink,lists,spellchecker,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template",
+            // General options
+            mode : "textareas",
+            editor_selector : "tinymce_advanced",
+            theme : "advanced",
+            plugins : "autolink,lists,spellchecker,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template",
 
-                // Theme options
-                theme_advanced_buttons1 : "bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,styleselect,formatselect,fontselect,fontsizeselect",
-                theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",
-                theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen",
-                theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,spellchecker,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,blockquote,pagebreak,|,insertfile,insertimage",
-                theme_advanced_toolbar_location : "top",
-                theme_advanced_toolbar_align : "left",
-                theme_advanced_statusbar_location : "bottom",
-                theme_advanced_resizing : true,
+            // Theme options
+            theme_advanced_buttons1 : "bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,styleselect,formatselect,fontselect,fontsizeselect",
+            theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",
+            theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen",
+            theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,spellchecker,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,blockquote,pagebreak,|,insertfile,insertimage",
+            theme_advanced_toolbar_location : "top",
+            theme_advanced_toolbar_align : "left",
+            theme_advanced_statusbar_location : "bottom",
+            theme_advanced_resizing : true,
 
-                // Skin options
-                skin : "bootstrap",
-                language: CURRENT_LOCALE
-            }
+            // Skin options
+            skin : "bootstrap",
+            language: CURRENT_LOCALE
         }
+    }
 }

data/app/assets/javascripts/admin/elfinder/upload_elfinder.js

@@ -1,6 +1,6 @@
 // options:
 // - title: Title Modal, default: Upload File
-// - type: image, video, audio, application/pdf,... default: 'all'
+// - type: image, video, audio, application/pdf or file extensions (jpg, png, ..),... default: 'all'
 // - multiple: return array files or uniq file, default: true
 //  - mode, menubar icons visibility, default: basic,  values: full, basic
 // - params: in mode basic use options toolbar: default: [], example: ['resize','mkdir']
@@ -92,7 +92,7 @@
                             var datas = [];
                             for(var i=0; i<selected.length;i++){
                                 var file = elfinderInstance.file(selected[i]);
-                                if(file.mime && (mime_type == "all" || $.inArray(true, mime_type.split(",").map(function(format){ return file.mime.indexOf(format) > -1 })) >= 0)){
+                                if(file.mime && (mime_type == "all" || $.inArray(true, mime_type.split(",").map(function(format){ return file.mime.indexOf(format) > -1 })) >= 0 || $.inArray(file.name.split(".").pop().toLowerCase(), mime_type.split(",")) > -1 )){
                                     if(file.size > 0) datas.push(file);
                                 }
                             }
@@ -202,8 +202,8 @@
                 "</div>"+
                 "<div id='panel-info-content' class='row'>"+
                 "<p class='col-md-12'>"+content_elfinder.messages.size+" : <span>"+content_elfinder.formatSize(elemFirst.size)+"</span></p>"+
-                "<p class='col-md-12'>URL : <span><input type='text' onClick='this.select();' value='"+elemFirst.url.to_url()+"' /></span></p>"+
-                (is_image_data(elemFirst) ? "<p class='col-md-12'>"+content_elfinder.messages.thumb+" : <span><input type='text' onClick='this.select();' value='"+elemFirst.tmb.to_url()+"' /></span></p>" : "")+
+                "<p class='col-md-12'>URL : <span><input type='text' value='"+elemFirst.url.to_url()+"' /></span></p>"+
+                (is_image_data(elemFirst) ? "<p class='col-md-12'>"+content_elfinder.messages.thumb+" : <span><input type='text' value='"+ (elemFirst.tmb != "1" ? elemFirst.tmb.toString().to_url() : elemFirst.url.to_url()) +"' /></span></p>" : "")+
                 "<p class='col-md-12'>"+content_elfinder.messages.dim+" :  <span>"+elemFirst.dim+"</span></p>"+
                 "<p class='col-md-12'>"+content_elfinder.messages.modify+"  :  <span>"+elemFirst.date.replace('-0400','')+"</span></p>"+
                 "</div>";

data/app/assets/javascripts/admin/grid-editor.js

@@ -1,26 +1,24 @@
 jQuery(function(){
     $.fn.fadeDestroy = function(speed){ $(this).fadeOut(speed, function(){ $(this).remove(); }) }
+    $.fn.isGridEditorContent = function(str){ return str.match(/^\<p\>\[load_libraries/); } // verify is text is a content for grid editor
+    $.fn.skipGridEditorLibraries = function(str){ return str.replace(/^\<p\>\[load_libraries(.*)\]\<\/p\>/, ""); } // remove libraries shortcode text from grid editor
     $.fn.gridEditor_extra_rows = [];
+    $.fn.gridEditor_libraries = [];
+    //********************** editor content options **********************//
     $.fn.gridEditor_options = {
-        text: {title: "Text", callback: function(panel){
-            open_modal({title: "Entere Your Text", modal_settings: { keyboard: false, backdrop: "static" }, show_footer: true, content: "<textarea rows='10' class='form-control'></textarea>", callback: function(modal){
-                var submit = $('<button type="button" class="btn btn-primary">Save</button>').click(function(){
-                    alert(modal.find("textarea").val());
-                    panel.html(modal.find("textarea").val());
-                    modal.modal("hide");
-                })
-                modal.find(".modal-footer").prepend(submit);
-            }});
-        }},
-        editor: {title: "Editor", callback: function(panel){  }},
-        slider: {title: "Slider", callback: function(panel){  }},
+        text: {title: "Text", libraries: [], callback: grid_text_builder},
+        editor: {title: "Editor", libraries: [], callback: grid_editor_builder},
+        tab: {title: "Tabs", callback: grid_tab_builder},
+        slider: {title: "Slider", callback: grid_slider_builder},
     };
+    //********************** end editor content options **********************//
 
     // grid editor plugin
     var gridEditor_id = 0;
     $.fn.gridEditor = function(tinyEditor){
-        var tinymce_panel = $(tinyEditor.editorContainer).hide();
         gridEditor_id ++;
+        var tinymce_panel = $(tinyEditor.editorContainer).hide();
+        var editor_id = "grid_editor_"+gridEditor_id;
         var textarea = $(this);
         if(textarea.prev().hasClass("panel_grid_editor")){ textarea.prev().show(); return textarea; }
         var tpl_rows = "";
@@ -33,41 +31,48 @@ jQuery(function(){
         var tpl_options = "";
         $.each($.fn.gridEditor_options, function(key, item){ tpl_options += '<div class="" data-kind="'+key+'" data-content_title="'+item["title"]+'"><div class="grid_item_content"></div></div>'; });
 
-        var editor = $("<div class='panel_grid_editor'>"+
-                            "<div class='grid_editor_menu'>"+
-                                "<ul class='nav nav-tabs'>"+
-                                    "<li class='active'><a href='#grid_columns_"+gridEditor_id+"' role='tab' data-toggle='tab'>Rows</a></li>"+
-                                    "<li class=''><a href='#grid_contents_"+gridEditor_id+"' role='tab' data-toggle='tab'>Content</a></li>"+
-                                    "<li class=''><a href='#' class='toggle_panel_grid'>Text Editor</a></li>"+
-                                    "<li class=''><a class='export'>Export</a></li>"+
-                                    "<li class=''><a class='parse'>Parse</a></li>"+
-                                "</ul>"+
-                                "<div class='tab-content'>"+
-                                    "<div role='tabpanel' class='tab-pane active' id='grid_columns_"+gridEditor_id+"'> "+tpl_rows+" </div>"+
-                                    "<div role='tabpanel' class='tab-pane' id='grid_contents_"+gridEditor_id+"'>"+tpl_options+"</div>"+
-                                "</div>"+
-                            "</div>"+
-                            "<style> .panel_grid_editor{ margin-top: 40px; } /*.panel_grid_body.hover-grid{ background: red !important; }*/ .panel_grid_body .drg_column .header_box .dropdown{ position: absolute; right: 8px; top: 0px; } .panel_grid_body .grid_sortable_items{ min-height: 100px; margin-top: -23px; padding-top: 23px; } .panel_grid_body .drg_item > *{ display: none; } .panel_grid_body .drg_item > :first-child{ display: block } /*.grid_sortable_items.hover-grid{ background: blue; }*/  </style>"+
-                            "<div class='panel_grid_body row' style='min-height: 300px; background: #eee; border: 1px solid #ccc;'></div>"+
-                        "</div>");
+        // template grid editor
+        var editor = $("<div class='panel_grid_editor' id='"+editor_id+"'>"+
+            "<div class='grid_editor_menu'>"+
+            "<ul class='nav nav-tabs'>"+
+            "<li class='active'><a href='#grid_columns_"+gridEditor_id+"' role='tab' data-toggle='tab'>"+I18n("grid_editor.blocks")+"</a></li>"+
+            "<li class=''><a href='#grid_contents_"+gridEditor_id+"' role='tab' data-toggle='tab'>"+I18n("grid_editor.contents")+"</a></li>"+
+            "<li class=''><a class='btn btn-default clear'>"+I18n("grid_editor.clear")+"</a></li>"+
+            '<li>' +
+            '<a class = "btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">'+I18n("grid_editor.templates")+' <span class="caret"></span> </a>'+
+            '<ul class="dropdown-menu" aria-labelledby="dropdownMenu1"> ' +
+            '<li><a class="list_templates" title="Grid Templates" href = "'+root_url+'/admin/grid_editor" >'+I18n("grid_editor.list")+'</a></li >'+
+            '<li><a class="new_template" title="New Template" href = "'+root_url+'/admin/grid_editor/new" >'+I18n("grid_editor.save_tpl")+'</a></li >'+
+            '</ul> ' +
+            '</li>'+
+            "<li class=''><a href='#' class='toggle_panel_grid'>"+I18n("grid_editor.text_editor")+"</a></li>"+
+            "</ul>"+
+            "<div class='tab-content'>"+
+            "<div role='tabpanel' class='tab-pane active' id='grid_columns_"+gridEditor_id+"'> "+tpl_rows+" </div>"+
+            "<div role='tabpanel' class='tab-pane' id='grid_contents_"+gridEditor_id+"'>"+tpl_options+"</div>"+
+            "</div>"+
+            "</div>"+
+            "<div class='panel_grid_body row'></div>"+
+            "</div>");
 
         // grid editor export
-        function export_content(editor_body){
-            editor_body.children().each(function(){
-                var col = $(this).removeClass("drg_column btn btn-default grid-col-built ui-draggable ui-draggable-handle").removeAttr("style");
+        function export_content(editor){
+            var container = $('.panel_grid_body', editor).clone();
+            container.children().each(function(){
+                var col = $(this).removeClass("drg_column btn btn-default ui-draggable ui-draggable-handle ui-draggable-dragging ui-sortable-handle");
                 col.children(".header_box").remove();
                 col.find(".grid_sortable_items").children().each(function(){ //contents
-                    var content = $(this).removeClass("drg_item btn btn-default ui-draggable ui-draggable-handle grid-item-built").removeAttr("style").children(".header_box").remove();
+                    $(this).removeClass("drg_item btn btn-default ui-draggable ui-draggable-dragging ui-sortable-handle ui-draggable-handle").children(".header_box").remove();
                 });
             });
-            return editor_body;
+            var res = container.html();
+            container.remove();
+            return res;
         }
 
-        // grid editor parser to recover
+        // grid editor parser to recover from saved content
         function parse_content(editor){
-            editor.find(".panel_grid_body").children().each(function(){
-                var col = parse_content_column($(this));
-            });
+            editor.find(".panel_grid_body").children("div").each(function(){ var col = parse_content_column($(this)); });
             return editor;
         }
 
@@ -76,15 +81,15 @@ jQuery(function(){
         // skip_options: boolean to add drodown options
         function parse_content_column(column, skip_options){
             var html = '<div class="header_box">'+
-                            '<a><i class="icon-bar"></i>'+column.attr("data-col_title")+'</a>'+
-                        '</div>';
+                '<a><i class="icon-bar"></i>'+column.attr("data-col_title")+'</a>'+
+                '</div>';
             var options = "<div class='dropdown'>" +
-                                "<a class='dropdown-toggle' data-toggle='dropdown'>&nbsp; <span class='caret'></span></a>" +
-                                "<ul class='dropdown-menu' role='menu'>"+
-                                    "<li><a class='grid_col_remove' title='Remove' href='#'><i class='fa fa-trash-o'></i> Remove</a></li>"+
-                                    "<li><a class='grid_col_clone' title='Clone' href='#'><i class='fa fa-copy'></i> Clone</a></li>"+
-                                "</ul>"+
-                            "</div>" ;
+                "<a class='dropdown-toggle' data-toggle='dropdown'>&nbsp; <span class='caret'></span></a>" +
+                "<ul class='dropdown-menu auto_with' role='menu'>"+
+                "<li><a class='grid_col_remove' title='Remove' href='#'><i class='fa fa-trash-o'></i> "+I18n("button.delete")+"</a></li>"+
+                "<li><a class='grid_col_clone' title='Clone' href='#'><i class='fa fa-copy'></i> "+I18n("button.clone")+"</a></li>"+
+                "</ul>"+
+                "</div>" ;
             column.addClass("drg_column btn btn-default");
             if(column.children(".header_box").length == 0) column.prepend(html);
             if(!skip_options){
@@ -102,43 +107,131 @@ jQuery(function(){
         // skip_options: boolean to add drodown options
         function parse_content_content(content, skip_options){
             var html = '<div class="header_box">'+
-                        '<a><i class="icon-bar"></i>'+content.attr("data-content_title")+'</a>'+
-                    '</div>';
+                '<a><i class="icon-bar"></i>'+content.attr("data-content_title")+'</a>'+
+                '</div>';
             var options = "<div class='dropdown'>" +
                 "<a class='dropdown-toggle' data-toggle='dropdown'>&nbsp; <span class='caret'></span></a>" +
-                    "<ul class='dropdown-menu' role='menu'>"+
-                        "<li><a class='grid_content_remove' title='Remove' href='#'><i class='fa fa-trash-o'></i> Remove</a></li>"+
-                        "<li><a class='grid_content_clone' title='Clone' href='#'><i class='fa fa-copy'></i> Clone</a></li>"+
-                        "<li><a class='grid_content_edit' title='Clone' href='#'><i class='fa fa-pencil'></i> Edit</a></li>"+
-                    "</ul>"+
+                "<ul class='dropdown-menu auto_with' role='menu'>"+
+                "<li><a class='grid_content_remove' title='Remove' href='#'><i class='fa fa-trash-o'></i> "+I18n("button.delete")+"</a></li>"+
+                "<li><a class='grid_content_clone' title='Clone' href='#'><i class='fa fa-copy'></i> "+I18n("button.clone")+"</a></li>"+
+                "<li><a class='grid_content_edit' title='Edit' href='#'><i class='fa fa-pencil'></i> "+I18n("button.edit")+"</a></li>"+
+                "</ul>"+
                 "</div>";
             content.addClass("drg_item btn btn-default");
             if(content.children(".header_box").length == 0) content.prepend(html);
             if(!skip_options){
                 content.find('.header_box').append(options);
             }
+            // save used libraries
+            $.fn.gridEditor_libraries = $.merge($.fn.gridEditor_libraries, $.fn.gridEditor_options[content.attr("data-kind")])
             content;
         }
 
-        // grid editor reverse parser
+        // add editor menu actions
+        function do_editor_menus(editor){
+            // toggle editor menus
+            editor.find(".grid_editor_menu .toggle_panel_grid").click(function(){
+                if(!confirm(I18n("grid_editor.toggle_editor"))) return false;
+                editor.hide();
+                if(editor.data("tiny_backup")) tinyEditor.setContent(editor.data("tiny_backup"));
+                tinymce_panel.show();
+                return false;
+            });
+            editor.find(".grid_editor_menu .clear").click(function(){
+                if(!confirm(I18n("grid_editor.clear_editor"))) return false;
+                editor.find(".panel_grid_body").html("");
+                editor.trigger("auto_save");
+                return false;
+            })
+            editor.find(".grid_editor_menu .list_templates").ajax_modal({callback: function(modal){
+                modal.on("click", ".import_item", function(){
+                    if(!confirm($(this).attr("data-message"))) return;
+                    modal.modal("hide");
+                    showLoading();
+                    $.get($(this).attr("href"), function(res){
+                        //editor.children(".panel_grid_body").html(res);
+                        editor.children(".panel_grid_body").html($.fn.skipGridEditorLibraries(res));
+                        parse_content(editor); // recover saved content
+                        editor.trigger("auto_save");
+                        hideLoading();
+                    });
+                    return false;
+                });
+            }});
+
+            editor.find(".grid_editor_menu .new_template").ajax_modal({callback: function(modal){
+                modal.find("textarea").val(export_content(editor));
+            }});
 
-        // toggle editor
-        editor.find(".grid_editor_menu .toggle_panel_grid").click(function(){ if(!confirm("Are you sure to change the editor?")) return false; editor.hide(); tinymce_panel.show(); return false; })
-        editor.find(".grid_editor_menu .export").click(function(){ export_content(editor.find(".panel_grid_body")); return false; })
-        editor.find(".grid_editor_menu .parse").click(function(){ parse_content(editor); return false; })
-        editor.find("#grid_columns_"+gridEditor_id).children().each(function(){ parse_content_column($(this), true) });
-        editor.find("#grid_contents_"+gridEditor_id).children().each(function(){ parse_content_content($(this), true) });
+            editor.find("#grid_columns_"+gridEditor_id).children().each(function(){ parse_content_column($(this), true) });
+            editor.find("#grid_contents_"+gridEditor_id).children().each(function(){ parse_content_content($(this), true) });
+
+            // if saved content is a grid_editor content, then rebuilt or recover this content
+            if($.fn.isGridEditorContent(textarea.val())){
+                editor.children(".panel_grid_body").html($.fn.skipGridEditorLibraries(textarea.val()));
+                parse_content(editor); // recover saved content
+            }else{
+                editor.data("tiny_backup", tinyEditor.getContent())
+            }
+
+            // trigger auto save changes
+            editor.bind("auto_save", function(){
+                var txt = "<p>[load_libraries data='"+$.fn.gridEditor_libraries.join(",")+"']</p>"+export_content($(this));
+                tinyEditor.setContent(txt);
+                textarea.val(txt).trigger("change_in");
+            });
+
+            // content dropdown options
+            jQuery('.panel_grid_body ', editor).on("click", '.drg_item .grid_content_remove', function (e) {
+                    if(confirm(I18n("grid_editor.del_block"))) {
+                        jQuery(this).closest(".drg_item").fadeDestroy();
+                        editor.trigger("auto_save");
+                    }
+                    e.preventDefault();
+                }).on("click", '.drg_item .grid_content_clone', function (e) {
+                    var widget = jQuery(this).closest(".drg_item");
+                    var widget_clone = widget.clone();
+                    widget.after(widget_clone);
+                    editor.trigger("auto_save");
+                    e.preventDefault();
+                }).on("click", '.drg_item .grid_content_edit', function (e) {
+                    var panel_content = $(this).closest(".drg_item");
+                    var key = panel_content.attr("data-kind");
+                    $.fn.gridEditor_options[key]["callback"](panel_content.children(".grid_item_content"), editor);
+                    e.preventDefault();
+                });
+
+            // column dropdown options
+            jQuery('.panel_grid_body ', editor).on("click", '.grid_col_remove', function (e) {
+                    if(confirm(I18n("grid_editor.del_block"))){
+                        jQuery(this).closest(".drg_column").fadeDestroy();
+                        editor.trigger("auto_save");
+                    }
+                    e.preventDefault();
+                }).on("click", '.grid_col_clone', function (e) {
+                    var widget = jQuery(this).closest(".drg_column");
+                    var widget_clone = widget.clone();
+                    widget.after(widget_clone);
+                    grid_content_manager(widget_clone.find(".grid_sortable_items"));
+                    editor.trigger("auto_save");
+                    e.preventDefault();
+                });
+
+            //// autosave changes
+            //var time_control;
+            //$('.panel_grid_body', editor).bind("DOMSubtreeModified",function(){
+            //    var thiss = $(this);
+            //    if(time_control) clearTimeout(time_control);
+            //    time_control = setTimeout(function(){ editor.trigger("auto_save"); }, 5000);
+            //});
+        }
+
+        do_editor_menus(editor);
         textarea.before(editor);
-        var time_control;
-        $('.panel_grid_body', editor).bind("DOMSubtreeModified",function(){
-            var thiss = $(this);
-            if(time_control) clearTimeout(time_control);
-            time_control = setTimeout(function(){ textarea.val(export_content(thiss.clone()).html()); console.log(textarea.val()); }, 1000);
-        });
 
         // drag columns
-        jQuery(".drg_column", editor).draggable({
-            connectToSortable: editor.find(".panel_grid_body"),
+        jQuery(".grid_editor_menu .drg_column", editor).draggable({
+            connectToSortable: "#"+editor_id+" .panel_grid_body",
             cursor: 'move',          // sets the cursor apperance
             revert: 'invalid',       // makes the item to return if it isn't placed into droppable
             revertDuration: -1,     // duration while the item returns to its place
@@ -147,8 +240,8 @@ jQuery(function(){
         });
 
         //draggable content elements
-        jQuery(".drg_item", editor).draggable({
-            connectToSortable: '.grid_sortable_items',
+        jQuery(".grid_editor_menu .drg_item", editor).draggable({
+            connectToSortable: "#"+editor_id+" .grid_sortable_items",
             cursor: 'move',          // sets the cursor apperance
             revert: 'invalid',       // makes the item to return if it isn't placed into droppable
             revertDuration: -1,     // duration while the item returns to its place
@@ -164,7 +257,7 @@ jQuery(function(){
             delay: 150,
             dropOnEmpty: true,
             items: ".drg_column",
-            connectWith: '.panel_grid_body',
+            connectWith: "#"+editor_id+" .panel_grid_body",
             placeholder: "placeholder",
             start: function (e, ui) {
                 ui.helper.css({'width': '' , 'height': ''}).addClass('col-md-' + jQuery(ui.helper).attr('data-col'));
@@ -178,50 +271,13 @@ jQuery(function(){
                 $(this).removeClass("hover-grid");
             },
             stop: function (e, ui) {
-                ui.item.removeAttr('style');
+                ui.item.css({left: "", top: "", position: ""});
                 if(!jQuery(ui.item).hasClass('grid-col-built')) parse_content_column(ui.item)
                 ui.item.addClass('grid-col-built');
+                editor.trigger("auto_save");
             }
         });
 
-        // column dropdown options
-        jQuery('.panel_grid_body ', editor).on({
-            click: function (e) {
-                if(confirm("Are you sure to delete this block?")) jQuery(this).closest(".drg_column").fadeDestroy();
-                e.preventDefault();
-            }
-        }, '.grid_col_remove').on({
-            click: function (e) {
-                var widget = jQuery(this).closest(".drg_column");
-                var widget_clone = widget.clone();
-                widget.after(widget_clone);
-                grid_content_manager(widget_clone.find(".grid_sortable_items"));
-                e.preventDefault();
-            }
-        }, '.grid_col_clone');
-
-        // content dropdown options
-        jQuery('.panel_grid_body ', editor).on({
-            click: function (e) {
-                if(confirm("Are you sure to delete this content?")) jQuery(this).closest(".drg_item").fadeDestroy();
-                e.preventDefault();
-            }
-        }, '.drg_item .grid_content_remove').on({
-            click: function (e) {
-                var widget = jQuery(this).closest(".drg_item");
-                var widget_clone = widget.clone();
-                widget.after(widget_clone);
-                e.preventDefault();
-            }
-        }, '.drg_item .grid_content_clone').on({
-            click: function (e) {
-                var panel_content = $(this).closest(".drg_item");
-                var key = panel_content.attr("data-kind");
-                $.fn.gridEditor_options[key]["callback"](panel_content.children(".grid_item_content"));
-                e.preventDefault();
-            }
-        }, '.drg_item .grid_content_edit');
-
         function grid_content_manager(item) {
             // Sort the children (content elements)
             jQuery(item).sortable({
@@ -231,7 +287,7 @@ jQuery(function(){
                 delay: 150,
                 dropOnEmpty: true,
                 items: ".drg_item",
-                connectWith: '.grid_sortable_items',
+                connectWith: "#"+editor_id+' .grid_sortable_items',
                 placeholder: "placeholder",
                 start: function (e, ui) {
                     ui.helper.css({'width': '' , 'height': ''}).addClass('col-md-12');
@@ -244,12 +300,233 @@ jQuery(function(){
                     $(this).removeClass("hover-grid");
                 },
                 stop: function (e, ui) {
-                    ui.item.addClass('col-md-12').removeAttr('style');
+                    ui.item.addClass('col-md-12').css({left: "", top: "", position: ""});
                     if(!jQuery(ui.item).hasClass('grid-item-built')) parse_content_content(ui.item)
                     ui.item.addClass('grid-item-built');
+                    editor.trigger("auto_save");
                 }
             });
         }
         return textarea;
     }
+
+    // grid content tab builder
+    function grid_tab_builder(panel, editor){
+        var id_tab = "tabs_" + gridEditor_id + Math.floor((Math.random() * 100000) + 1);
+        var tpl_tabs = '<ul class="nav nav-tabs" role="tablist">'+
+            '<li role="presentation" class="active"><a href="" role="tab" data-toggle="tab">Sample1</a></li>'+
+            '</ul>'+
+            '<div class="tab-content">'+
+            '<div role="tabpanel" class="tab-pane active" id="">Lorem Ipsum</div>'+
+            '</div>';
+        if(panel.html()) tpl_tabs = panel.html();
+        function tab_builder(modal){
+            modal.find(".nav-tabs li").not(".tb_built").addClass("tb_built").find("a").each(function(){
+                var settings = "<i class='fa fa-trash-o grid_tab_del'></i>"+
+                    "<i class='fa fa-pencil grid_tab_edit'></i>";
+                $(this).append(settings);
+            });
+            var k = id_tab+'_item';
+            modal.find(".nav-tabs li").each(function(index, item){
+                var k_i = k+"-"+index;
+                $(this).children("a").attr("href", "#"+k_i);
+                modal.find(".tab-pane").eq(index).attr("id", k_i);
+            });
+        }
+        open_modal({title: "Enter Slider Items", modal_settings: { keyboard: false, backdrop: "static" }, show_footer: true, content: tpl_tabs, callback: function(modal){
+            var p_title = modal.find(".nav-tabs");
+            var p_content = modal.find(".tab-content");
+            p_title.append("<a href='#' class='grid_tab_add pull-right' title='Add Tabs'><i class='fa fa-plus-circle'></i> "+I18n("button.add")+"</a>")
+                .on("click", ".grid_tab_add", function(e){
+                    p_title.append('<li role="presentation"><a href="" role="tab" data-toggle="tab">Sample</a></li>');
+                    p_content.append('<div role="tabpanel" class="tab-pane" id="">Lorem Ipsum</div>');
+                    tab_builder(modal);
+                    e.preventDefault();
+                }).on("click", ".grid_tab_edit", function(e){
+                    var title = $(this).closest("a");
+                    var content = $($(this).closest("a").attr("href"));
+                    var tpl = '<div class="form-group">'+
+                        '<label>Title</label><br>'+
+                        "<input type='text' class='form-control required'/>"+
+                        "</div>"+
+                        '<div class="form-group">'+
+                        '<label>Content</label><br>'+
+                        "<textarea rows='10' class='form-control'></textarea>"+
+                        "</div>"
+                    open_modal({title: "Enter Your Tab Content", modal_settings: { keyboard: false, backdrop: "static" }, show_footer: true, content: tpl, callback: function(modal){
+                        var submit = $('<button type="button" class="btn btn-primary">Save</button>').click(function(){
+                            title.html(title.find("i")).prepend(modal.find("input").val());
+                            modal.find("input").val();
+                            var area = modal.find("textarea");
+                            content.html(area.tinymce().getContent());
+                            modal.modal("hide");
+                        });
+                        modal.find("input").val(title.text());
+                        modal.find("textarea").val(content.html());
+                        setTimeout(function(){ modal.find("textarea").tinymce($.extend({} ,DATA.tiny_mce.advanced, {height: 120})); }, 500);
+                        modal.find(".modal-footer").prepend(submit);
+                    }});
+
+                    e.preventDefault();
+                }).on("click", ".grid_tab_del", function(e){
+                    if(confirm("are you sure?")){
+                        $($(this).closest("a").attr("href")).remove();
+                        $(this).closest("li").fadeDestroy();
+                    }
+                    e.preventDefault();
+                }).sortable({items: "> li"});
+            tab_builder(modal);
+
+            // save contents of tab
+            var submit = $('<button type="button" class="btn btn-primary">Save</button>').click(function(){
+                modal.find(".modal-body").find(".tb_built").removeClass("tb_built ui-sortable-handle").end().find(".nav-tabs").find(".fa, .grid_tab_add").remove();
+                panel.html(modal.find(".modal-body").html());
+                modal.modal("hide");
+                editor.trigger("auto_save");
+            });
+            modal.find("textarea").val(panel.html());
+            modal.find(".modal-footer").prepend(submit);
+        }});
+    }
+
+    // grid content tab builder
+    function grid_slider_builder1(panel, editor){
+        var tpl_slider = '<div class="carousel slide" data-ride="carousel"> ' +
+            '<ol class="carousel-indicators"></ol>' +
+            '<div class="carousel-inner"></div>'+
+            '<a class="left carousel-control" href="#'+id_slider+'" role="button" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>'+
+            '<a class="right carousel-control" href="#'+id_slider+'" role="button" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>'+
+            '</div>';
+        if(panel.html()) tpl_slider = panel.html();
+        tpl_slider = $(tpl_slider);
+        var form_slider = $('<form></form>').on("click", ".add_item", function(e){
+            add_item();
+            e.preventDefault();
+        }).on("click", ".item_del", function(){
+            if(confirm("are you sure?")) $(this).closest(".well").fadeDestroy();
+            e.preventDefault();
+        });
+
+        function add_item(descr, url){
+            var settings = "<div class='slider_actions text-center'><a href='#' class='item_del'><i class='fa fa-trash-o'></i></a></div>";
+            var tpl = $('<div class="well">'+settings+'<div class="form-group"><label>Background: </label><br><input name="url_file"></div></div> <div class="form-group"><label>Description: </label><br><textarea class="descr"></textarea></div>');
+            tpl.find("input").val(url);
+            tpl.find("textarea").val(descr);
+            form_slider.append(tpl);
+        }
+        tpl_slider.find(".carousel-inner").children().each(function(){ add_item($(this)); })
+        if(form_slider.children("well").length == 0) form_slider.find(".add_item").click();
+        open_modal({title: "Enter Slider Items", modal_settings: { keyboard: false, backdrop: "static" }, show_footer: true, content: form_slider, callback: function(modal){
+
+            var submit = $('<button type="button" class="btn btn-primary">Save</button>').click(function(){
+                modal.find(".grid_slider_settings, .slider_actions").remove();
+                panel.html(modal.find(".modal-body").html());
+                modal.modal("hide");
+                editor.trigger("auto_save");
+            });
+            modal.find(".modal-footer").prepend(submit);
+        }});
+    }
+
+    // manage sliders of the grid editor
+    // permit to add, edit
+    function grid_slider_builder(panel, editor){
+        var id_slider = "slider_" + gridEditor_id + Math.floor((Math.random() * 100000) + 1);
+        var tpl_slider = '<div class="carousel slide" data-ride="carousel"> ' +
+                '<ol class="carousel-indicators"></ol>' +
+                '<div class="carousel-inner"></div>'+
+                '<a class="left carousel-control" href="#'+id_slider+'" role="button" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>'+
+                '<a class="right carousel-control" href="#'+id_slider+'" role="button" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>'+
+            '</div>';
+        if(panel.html()) tpl_slider = panel.html();
+        open_modal({title: "Enter Slider Items", modal_settings: { keyboard: false, backdrop: "static" }, show_footer: true, content: tpl_slider, callback: function(modal){
+            var slide = modal.find(".carousel").attr("id", id_slider);
+            slide.find(".carousel-control").attr("href", "#"+id_slider).end().find(".carousel-indicators li").attr("data-target", "#"+id_slider);
+            slide.before("<div class='grid_slider_settings'><a href='#' class='grid_slider_add' title='Add Slider'><i class='fa fa-plus-circle'></i> "+I18n("button.add")+"</a></div>");
+            modal.on("click", ".grid_slider_add", function(e){
+                    modal.find(".carousel-inner").append('<div class="item active" style="max-width: 100%;"><img src="http://www.diario-de-un-escalador.com/wp-content/uploads/Escalada20.jpg"><div class="carousel-caption">Caption here</div></div>');
+                    slider_builder(modal);
+                    e.preventDefault();
+                }).on("click", ".grid_slide_edit", edit_slide).on("click", ".grid_slide_del", function(e){
+                    if(confirm("are you sure?")){
+                        $(this).closest(".item").remove();
+                        slider_builder(modal);
+                    }
+                    e.preventDefault();
+                });
+            slider_builder(modal);
+            if(modal.find(".carousel-inner .item").length == 0) modal.find(".grid_slider_add").click();
+            // save contents of tab
+            var submit = $('<button type="button" class="btn btn-primary">Save</button>').click(function(){
+                modal.find(".grid_slider_settings, .slider_actions").remove();
+                panel.html(modal.find(".modal-body").html());
+                modal.modal("hide");
+                editor.trigger("auto_save");
+            });
+            modal.find(".modal-footer").prepend(submit);
+        }});
+
+        // manage slide editor form
+        function edit_slide(e){
+            var content = $(this).closest(".item").find(".carousel-caption");
+            var image = $(this).closest(".item").children("img");
+            var tpl = '<div class="form-group"><label>Background: </label><br><input type="hidden" class="form-control" name="url_file"></div><div class="form-group"><label>Description: </label><br><textarea class="descr"></textarea></div>';
+            open_modal({title: "Enter Your Slider Content", modal_settings: { keyboard: false, backdrop: "static" }, show_footer: true, content: tpl, callback: function(modal){
+                var submit = $('<button type="button" class="btn btn-primary">Save</button>').click(function(){
+                    content.html(modal.find("textarea").tinymce().getContent());
+                    image.attr("src", modal.find("input").val());
+                    modal.modal("hide");
+                });
+                modal.find("textarea").val(content.html());
+                modal.find("input").val(image.attr("src")).input_upload();
+                setTimeout(function(){ modal.find("textarea").tinymce($.extend({} ,DATA.tiny_mce.advanced, {height: 120})); }, 500);
+                modal.find(".modal-footer").prepend(submit);
+            }});
+
+            e.preventDefault();
+        }
+
+        // slider options and update indicators
+        function slider_builder(modal){
+            var slide = modal.find(".carousel");
+            var indi = modal.find(".carousel-indicators").html("");
+            var settings = "<div class='slider_actions text-center'><a href='#' class='grid_slide_del'><i class='fa fa-trash-o'></i></a> <a href='#' class='grid_slide_edit'><i class='fa fa-pencil'></i></a></div>";
+            modal.find(".carousel-inner").children().each(function(index, item){
+                indi.append('<li data-target="#'+id_slider+'" data-slide-to="'+index+'"></li>');
+                if($(this).find(".slider_actions").length == 0) $(this).append(settings);
+            });
+            var act = modal.find(".carousel-inner .item.active:last").index();
+            modal.find(".carousel-indicators li").removeClass("active").eq(act).addClass("active");
+            modal.find(".carousel-inner .item").removeClass("active").eq(act).addClass("active");
+        }
+    }
+
+    // grid content editor builder
+    function grid_editor_builder(panel, editor){
+        open_modal({title: "Enter Your Content", modal_settings: { keyboard: false, backdrop: "static" }, show_footer: true, content: "<textarea rows='10' class='form-control'></textarea>", callback: function(modal){
+            var submit = $('<button type="button" class="btn btn-primary">Save</button>').click(function(){
+                var area = modal.find("textarea");
+                panel.html(area.tinymce().getContent());
+                modal.modal("hide");
+                editor.trigger("auto_save");
+            });
+            modal.find("textarea").val(panel.html());
+            setTimeout(function(){ modal.find("textarea").tinymce($.extend({} ,DATA.tiny_mce.advanced, {height: 120})); }, 500);
+            modal.find(".modal-footer").prepend(submit);
+        }});
+    }
+
+    // grid content text builder
+    function grid_text_builder(panel, editor){
+        open_modal({title: "Enter Your Text", modal_settings: { keyboard: false, backdrop: "static" }, show_footer: true, content: "<textarea rows='10' class='form-control'></textarea>", callback: function(modal){
+            var submit = $('<button type="button" class="btn btn-primary">Save</button>').click(function(){
+                panel.html(modal.find("textarea").val());
+                modal.modal("hide");
+                editor.trigger("auto_save");
+            });
+            modal.find("textarea").val(panel.html());
+            modal.find(".modal-footer").prepend(submit);
+        }});
+    }
+
 });