Ubuntu

­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­ /** * ********************* * * mBuilder Live Text Editor* * ********************* * It is added as a part of Massive Dynamic since V4.0.1 and designed to work with text shortcodes. Enjoy Editing ;) * * @summary meditor provides some functionality for editing text shortcodes in builder. * * @author PixFlow * * @version 1.0.0 * @requires jQuery, Backbone * * @class * @classdesc initialize all of the editor features. */ (function($) { 'use strict'; var models = {}, views = {}, select_positions = { 'start': 0 , 'end': 0 } , collections = {}; models.Editor = Backbone.Model; views.Editor = Backbone.View.extend({ events: { 'click .meditor-bold': 'toggle_bold', 'click .meditor-italic': 'toggle_italic', 'click .meditor-underline': 'toggle_underline', 'click .meditor-nlist' : 'toggle_nlist', 'click .meditor-blist' : 'toggle_blist', 'click .meditor-ralign': 'toggle_ralign', 'click .meditor-lalign': 'toggle_lalign', 'click .meditor-calign': 'toggle_calign', 'click .meditor-jalign': 'toggle_jalign', 'click .meditor-indent': 'toggle_indent', 'click .meditor-outdent': 'toggle_outdent', 'click .meditor-heading': 'toggle_heading', 'click .meditor-redo': 'toggle_redo', 'click .meditor-undo': 'toggle_undo', 'click .font-size': 'change_font_size', 'keyup #font-size' : 'insert_font_size', 'click .meditor-font-family': 'change_font_family', 'click .submenu-meditor-font-family': 'change_font_family', 'keyup #meditor-font-family' : 'insert_font_family', 'click .letter-space': 'change_letter_space', 'keyup #letter-space' : 'insert_letter_space', 'click .line-height': 'change_line_height', 'keyup #line-height' : 'insert_line_height', 'click .meditor-font-color': 'change_font_color', 'click .open-extra-option' : 'toggle_open_url_panel', 'click .close-panel' : 'close_url_panel', 'click .link': 'change_link', 'keyup .link-input' : 'insert_link_url', 'keydown .meditor-input': 'validate_input', 'click .active-item' : 'input_focus', 'click .mdb-insert-link' : 'link_input_focus', 'click .meditor-animation' :'open_animation_setting' }, initialize: function() { this.$el = $(this.el); // Model attribute event listeners: _.bindAll(this, 'change_buttons' , 'change_editable'); this.model.bind('change:buttons', this.change_buttons); this.model.bind('change:editable', this.change_editable); // Init Routines: this.change_editable(); }, init_color_picker: function() { var that = this; var color_picker = new ColorPicker(document.getElementById('meditor-color-picker'), { onUpdate: function(rgb) { var color = "rgb(" + rgb[0] + ", " + rgb[1] + ", " + rgb[2] + ")"; $('.meditor-defult-font-color').css('background',"rgb(" + rgb[0] + ", " + rgb[1] + ", " + rgb[2] + ")"); that.toggle_color(color); } }); $('#color-picker-input').on('keyup',function(e){ if(e.keyCode == 13 ) { that.toggle_color($(this).val()); } }); }, change_editable: function() { this.set_button_class(); // Im assuming that Ill add more functionality here }, set_button_class: function() { // check the button class of the element being edited and set the associated buttons on the model var button_class = this.model.get('editable').attr('data-button-class') || 'default'; this.model.set({ buttons: meditor.config.button_classes[button_class] }); }, change_buttons: function() { var obj = this ; // render the buttons into the editor-panel var panel = this.$el; var $html = '' ; this.$el.empty(); var buttons = this.model.get('buttons'); // hide editor panel if there are no buttons in it and exit early if ( _.isEmpty(buttons) ) { $(this.el).hide(); return; } _.each(buttons, function(item){ var func_name = 'create_'+item.class.replace(/-/g , '_'); $html = ''; if(typeof obj[func_name] == "function"){ $html = obj[func_name](item); } panel.append($html); }); }, auto_complete: function(search_val){ search_val = search_val.toLowerCase(); var goal_font_array= [] ; var goal_var_array = []; var index = binary_index_of.call(font_name_list, search_val); var current_index = index -1; if(index == -1){ return {"font_array":goal_font_array,"font_var": goal_var_array}; } var increment = 0; for(index; index <= font_name_list_len; index++){ increment++; if(increment < 5 && font_name_list[index].substr(0 , search_val.length).toLowerCase() == search_val){ goal_font_array.push(font_name_list[index]); goal_var_array.push(font_var_list[index]); }else{ break ; } } increment = 0; for(current_index; current_index >= 0 ; current_index--){ increment++; if(increment < 5 && font_name_list[current_index].substr(0 , search_val.length).toLowerCase() == search_val){ goal_font_array.push(font_name_list[current_index]); goal_var_array.push(font_var_list[current_index]); }else{ break ; } } return {"font_array":goal_font_array,"font_var": goal_var_array}; }, change_font_color:function(){ var focus_element = document.getElementById( 'meditor_focus' ); if(null != focus_element){ store_selection(focus_element); } this.keep_text_selected(); var $color_picker = $('#meditor-color-picker'); if(!$('.color-picker-container').length){ // Init Font Color Picker this.init_color_picker(); } if($color_picker.hasClass('open')){ this.close_color_picker($color_picker); }else{ this.open_color_picker($color_picker); } }, open_color_picker:function($color_picker){ var color = $('.meditor-defult-font-color').css('background-color'); color = this.rgb2hex(color); $('.color-picker-container .picker-container .canvas-container input').val(color).keyup(); $color_picker.addClass('open'); }, close_color_picker:function($color_picker){ $color_picker.removeClass('open'); }, create_animation_controller:function () { var source = '
'+ ''+ '
'; return source; }, create_text_alignment:function (item) { var options = { toolbar_icon:'mdb-align-left', value:item.data, data_value:{ 'justifyleft':{ 'toolbar_icon':'mdb-align-left', 'value':'left_align', 'meditor_class':'meditor-lalign' }, 'justifycenter':{ 'toolbar_icon':'mdb-align-center', 'value':'center_align', 'meditor_class':'meditor-calign' }, 'justifyright':{ 'toolbar_icon':'mdb-align-right', 'value':'right_align', 'meditor_class':'meditor-ralign' }, 'justifyfull':{ 'toolbar_icon':'mdb-justify', 'value':'full_align', 'meditor_class':'meditor-jalign' }, }, value_type:'button', has_input:false }; var source = '
'; source += this.create_dropdown(options); source += '
'; return source; }, create_font_family_controller:function(item){ var options = { toolbar_icon:'meditor-defult-text', value:['Open Sans','Montserrat','Playfair Display','Poppins','Roboto','Raleway','Oswald','Lato'], data_value:['Open Sans','Montserrat','Playfair Display','Poppins','Roboto','Raleway','Oswald','Lato'], value_type:'text', text:'Open Sans', has_input:true , has_placeholder:'Google font', meditor_class: 'meditor-font-family' , has_submenu: true , submenu_value:[ [ {'text':'300'}, {'text':'300italic'}, {'text':'regular'}, {'text':'italic'}, {'text':'600'}, {'text':'600italic'}, {'text':'700'}, {'text':'800italic'}, {'text':'800'}, ] , [ {'text':'regular'}, {'text':'700'}, ] , [ {'text':'regular'}, {'text':'italic'}, {'text':'700'}, {'text':'700italic'}, {'text':'900'}, {'text':'900italic'}, ] , [ {'text':'regular'}, {'text':'300'}, {'text':'500'}, {'text':'600'}, {'text':'700'}, ] , [ {'text':'100'}, {'text':'100italic'}, {'text':'300'}, {'text':'300italic'}, {'text':'regular'}, {'text':'italic'}, {'text':'500'}, {'text':'500italic'}, {'text':'600'}, {'text':'600italic'}, {'text':'700'}, {'text':'700italic'}, {'text':'800'}, {'text':'800italic'}, {'text':'900'}, {'text':'900italic'}, ], [ {'text':'100'}, {'text':'200'}, {'text':'300'}, {'text':'regular'}, {'text':'500'}, {'text':'600'}, {'text':'700'}, {'text':'800'}, {'text':'900'}, ] , [ {'text':'300'}, {'text':'regular'}, {'text':'700'}, ] , [ {'text':'100'}, {'text':'100italic'}, {'text':'300'}, {'text':'300italic'}, {'text':'regular'}, {'text':'italic'}, {'text':'700'}, {'text':'700italic'}, {'text':'900'}, {'text':'900italic'}, ] ] }; var source = '
' + this.create_dropdown(options)+ '
'; return source; }, create_font_color:function(item){ var source = '
' + ''+ '
'+ '
'; return source; }, create_bold:function(item){ var source = '
' + ''+ '
'; return source; }, create_italic:function(item){ var source = '
' + ''+ '
'; return source; }, create_underline:function(item){ var source = '
' + ''+ '
'; return source; }, create_heading:function(item){ var options = { toolbar_icon:"mdb-heading-1", value:['mdb-heading-1','mdb-heading-2','mdb-heading-3','mdb-heading-4','mdb-heading-5','mdb-heading-6','mdb-heading-p'], data_value:[1,2,3,4,5,6,7], value_type:'icon', has_input:false , meditor_class: 'meditor-heading' }; var source = '
' ; source += this.create_dropdown(options); source += '
'; return source; }, create_line_height:function (item) { var options = { toolbar_icon:"mdb-line-height", value:[1,1.2,1.5,1.7,2], data_value:[1,1.2,1.5,1.7,2], value_type:'text', has_input:true, input_type :'number', meditor_class:'line-height' }; var source = '
' ; source += this.create_dropdown(options); source += '
'; return source; }, create_font_size:function (item) { var options = { toolbar_icon:"", item_unit:"px", value:[6,8,9,10,11,12,14,16,18,20,22,24,26,28,30], data_value:[6,8,9,10,11,12,14,16,18,20,22,24,26,28,30], value_type:'text', has_input:true, input_type :'number', meditor_class:'font-size' }; var source = '
'; source += this.create_dropdown(options); source += '
'; return source; }, create_letter_space:function(item){ var options = { toolbar_icon:"mdb-letter-spacing", value:[1,2,3,4,5], data_value:[1,2,3,4,5], value_type:'text', has_input:true, meditor_class:'letter-space' }; var source = '
'; source += this.create_dropdown(options); source += '
'; return source; }, create_group_style:function (item) { var options = { toolbar_icon:"mdb-unorder-list", value:item.data, data_value:{ 'orderedlist':{ 'toolbar_icon':'mdb-order-list', 'value':'ol', 'meditor_class':'meditor-nlist' }, 'unorderedlist':{ 'toolbar_icon':'mdb-unorder-list', 'value':'ul', 'meditor_class':'meditor-blist' }, 'indent':{ 'toolbar_icon':'mdb-increase-indent', 'value':'indent', 'meditor_class':'meditor-indent' }, 'outdent':{ 'toolbar_icon':'mdb-decrease-indent', 'value':'outdent', 'meditor_class':'meditor-outdent' }, }, value_type:'button', has_input:false }; var source = '
'; source += this.create_dropdown(options); source += '
'; return source; }, create_dropdown : function (dropdown_options) { var text = dropdown_options.text?dropdown_options.text:''; var html = ''; html+=''; this.open_dropdown(); this.active_dropdown_item(); return html; }, update_dropdown : function ( dropdown_options ) { var dropdown_items = $( '.' + dropdown_options.item_class ).find( '.dropdown-items' ); dropdown_items.find( 'div.meditor-font-family' ).remove(); dropdown_items.append( this.create_dropdown_options( dropdown_options ) ); }, create_dropdown_options: function(dropdown_options){ var index, html=''; if('button' != dropdown_options.value_type) { for(index=0; index < dropdown_options.value.length; index++) { if (dropdown_options.value_type == 'icon') { html += '