#1
  1. A Change of Season
    Devshed Expert (3500 - 3999 posts)

    Join Date
    Mar 2004
    Location
    Next Door
    Posts
    3,545
    Rep Power
    221

    Is this normal to end up with JS code like this? Drag, append, sort Jquery.


    Hi;

    I am using "append" and add a few features to a droppable on drag-drop.

    The append code is getting kinda unmanageable.

    Wanna make sure I am on the right path.

    Is this how the code supposed to look like?

    I end up with a big variable with loads of characters.

    https://webmoosh.com/choose-template/1/112

    This is the code for drag sort append. Scroll to the right you see what I mean:

    Code:
    $( function() {
    
        $("#page_items").droppable({
            classes: {
            "ui-droppable-hover": "main_blocks"
          },
            over: function( event, ui ) {
            },
             drop: function (event, ui) {
                    if(ui.helper.hasClass('new_draggable_block_to_add'))
                        {
                           ui.helper.html('');
                           ui.helper.attr('style','');
                           ui.helper.addClass('brandnew_block main_block row text-center');
                           ui.helper.attr('id','latest_drag'); 
                           ui.helper.removeClass('new_draggable_block_to_add btn btn-sq btn-dark editor_link margin_bottom_3 draggable');                       
                           if(ui.helper.hasClass('headline')) 
                                {
                                    ui.helper.append("<div class=\" brand_new_cols brandnew_block page_blocks\" ><div style='width:100%; margin:0 auto; padding:20px 0; background-color:#23252b; color:white; border:none; font-size:30px; text-align:left' id='brandnew_preview' class='row hide-me brandnew_text_editor'><div class='col-md-12' id = 'new_text_block_val' style='font-family:Anton; white-space:pre-line; width:100%;'>WRITE THE TEXT HERE :-</div></div>  <div id=\"brandnew_block\" style = \" background-color:#222222; vertical-align:middle; padding:5px; border:2px dashed #2c6a7c; font-size:18px\" class = 'text-center'><div class='buttons text-left'><button type=\"button\" class=\"btn btn-dark margin_right_2px block_stationary_button\" onclick=\" close_stationary(); text_left('brandnew_text_editor', 'brandnew_text_editor');\"><i class=\"fas fa-align-left\"></i></button><button type=\"button\" class=\"margin_right_2px btn btn-dark block_stationary_button\" onclick=\" close_stationary(); text_center('brandnew_text_editor', 'brandnew_text_editor');\"><i class=\"fas fa-align-center\"></i></button><button type=\"button\" class=\"margin_right_2px btn btn-dark block_stationary_button\" onclick=\" close_stationary(); text_right('brandnew_text_editor', 'brandnew_text_editor');\"><i class=\"fas fa-align-right\"></i></button><button type=\"button\" class=\" margin_right_2px  btn btn-dark block_stationary_button\" onclick=\" close_stationary(); text_justify('brandnew_text_editor', 'brandnew_text_editor');\"><i class=\"fas fa-align-justify\"></i></button><button class=\"btn btn-secondary margin_right_2px\" onclick=\" close_stationary(); show_box_by_id('font-family-list-new-block');\"><i class=\"fas fa-font\"></i></button><button type=\"button\" class=\" margin_right_2px  btn btn-secondary\" onclick=\" close_stationary(); show_box_by_id('new-block-color'); \"><i class=\"color_picker_new_block_brush fas fa-paint-brush\"></i></button><button type=\"button\" class=\" margin_right_2px  btn btn-secondary block_stationary_button\" onclick=\" close_stationary(); show_box_by_id('font-size-selector-new-block');\"><em><small>Size</small></em></button><button type=\"button\" class=\" margin_right_2px  btn btn-secondary block_stationary_button\" onclick=\" close_stationary(); show_box_by_id('line-height-selector-new-block');\"><i class=\"fas fa-text-height\"></i></button><button type=\"button\" class=\" margin_right_2px  btn btn-secondary\" onclick=\" close_stationary(); text_bold('brandnew_text_editor', 'brandnew_text_editor');\" ><i class=\"fas fa-bold font_new_block_bold\"></i></button><button type=\"button\" class=\" margin_right_2px  btn btn-secondary\" onclick=\" close_stationary(); text_italic('brandnew_text_editor', 'brandnew_text_editor');\" ><i class=\"fas fa-italic font_new_block_italic\"></i></button><button type=\"button\" class=\" margin_right_2px  btn btn-secondary\" onclick=\" close_stationary(); text_underline('brandnew_text_editor', 'brandnew_text_editor');\" ><i class=\"fas fa-underline font_new_block_underline\"></i></button><button type=\"button\" class=\" margin_right_2px  btn btn-secondary\" onclick=\" close_stationary(); show_box_by_id('new-block-bg-color'); \"><i class=\"fas fa-tint color_picker_new_block_tint\"></i></button><button class=\"btn btn-danger margin_right_2px\" onclick=\"move_up('');\" ><small><i class=\"far fa-trash-alt\"></i></small></button></div>          <!--Windows--><div id = 'font-family-list-new-block' style = 'width:50%; margin:10px auto; ' class=\"hide-me font-family-list-stationary stationary_block_open_close\"><?php 
                                        $count = 0;
                                        foreach($font_familes as $font=>$row)    
                                            {
                                                $count++;
                                                ?><div class=\"input-group\" style=\"margin: 3px 0\"><div class=\"input-group-prepend\"><div class=\"input-group-text\"><input type=\"radio\" name=\"element_font_family\" class=\"<?php echo $stationary_id;?>_font_family close_stationary()\" value=\"<?php echo $row['font-family'];?>\" onclick=\"update_new_block_font_family('brandnew_text_editor','<?php echo $row['font-family'];?>');\"></div></div><input style=\"font-size:20px; font-family: <?php echo $row['font-family'];?>\" type=\"text\" class=\"form-control\" aria-label=\"Text input with radio button\" value=\"<?php echo ucfirst($row['font-family']);?>\"></div> <?php
                                            }
                                        ?></div><select class=\"form-control input-sm font_size_selector hide-me stationary_block_open_close \" name=\"element_font_size_selector\" id=\"font-size-selector-new-block\" style = 'width:50%; margin:10px auto; border:2px solid #111; font-family:Anton' onchange=\"update_new_block_font_size('brandnew_text_editor','font-size-selector-new-block'); \"> <?php
                                                    foreach($font_sizes as $size) 
                                                        {
                                                            ?><option value=\"<?php echo $size;?>\" <?php if($size=='30px'){ ?> selected = 'selected' <?php } ?>><?php echo $size;?></option><?php
                                                        }   
                                ?> </select>         <select class=\"form-control input-sm font_size_selector hide-me stationary_block_open_close \" name=\"element_line_height_selector\" id=\"line-height-selector-new-block\" style = 'width:50%; margin:10px auto; border:2px solid #111; font-family:Anton' onchange=\"update_new_block_line_height('brandnew_text_editor','line-height-selector-new-block'); \"> <?php
                                    foreach($line_heights as $line_height) 
                                        {
                                            ?><option value=\"<?php echo $line_height;?>\" <?php if($line_height=='1'){ ?> selected = 'selected' <?php } ?>><?php echo $line_height;?></option><?php
                                        }   
                                ?> </select>            <div style = 'width:50%; margin:10px auto; border:2px solid #111; font-family:Anton' id = \"new-block-color\" class=\"input-group stationary_block_open_close hide-me\"><div class=\"input-group-prepend\"><span class=\"input-group-text\"><i class=\"color_picker_new_block_brush fas fa-paint-brush\"></i></span></div><input id = \"color_picker_new_block\" type = \"text\" class = 'form-control color_picker_box colorpicker-element' autocomplete=\"off\" ></div><div style = 'width:50%; margin:10px auto; border:2px solid #111; font-family:Anton' id = \"new-block-bg-color\" class=\"input-group stationary_block_open_close hide-me\"><div class=\"input-group-prepend\"><span class=\"input-group-text\"><i class=\"color_picker_new_block_tint fas fa-tint\"></i></span></div><input id = \"color_picker_new_block_bg\" type = \"text\" class = 'form-control color_picker_box colorpicker-element' autocomplete=\"off\" ></div><!--Windows-->                                                                                                                                                       <form method = 'post' id = 'latest_form' class='latest_form'><input type=\"hidden\" name = 'element_line_height' id = 'element_line_height' value = '1'><input type = 'hidden' name = 'element_text_decoration' id = 'element_text_decoration' value = ''><input type = 'hidden' name = 'element_font_weight' id = 'element_font_weight' value = 'normal'><input type = 'hidden' name = 'element_font_style' id = 'element_font_style' value = 'normal'><textarea style='width:100%; background-color:#23252b; color:white; border:none; font-family:Anton; font-size:30px; margin:5px 0;' rows=\"3\" id='brandnew_text_editor' class='margin_bottom_3 brandnew_text_editor' name = 'element_text'>WRITE THE TEXT HERE :-)</textarea>      <input type=\"hidden\" class = 'element_text_align' name = \"element_text_align\" value='left' id = 'new_element_text_align'>    <input class = \"elements_sort\" type=\"hidden\" name = \"elements_sort\" ><input type=\"hidden\" name = \"id\" class = 'latest_id'> <input type=\"hidden\" name = 'element_font_size' id = 'element_font_size' value = '30px'><input type=\"hidden\" name = 'element_font_family' id = 'element_font_family' value = 'Anton'><input type = 'hidden' name = 'element_bg_color' id = 'element_bg_color'><input type = 'hidden' name = 'element_color' id = 'element_color' value=\"#ffffff\">  <input type=\"hidden\" name = 'item_type' value = '<?php echo $item_type;?>'><input type=\"hidden\" name = 'item_id' value = '<?php echo $item_id;?>'><span id = 'add_new_block_button' class = 'btn btn-info btn-sm margin_bottom_3 text-left'><i class=\"far fa-save\" ></i> Save Changes?</span></form></div></div>");
                                }
                            //Get the latest elements id  
                            var url = '<?php echo base_url('latest_block_id/index');?>'; 
                            $.ajax(
                                {
                                   type: "POST",
                                   url: url,
                                   data: $("#sortable_form").serialize(),
                                    success:function(data)
                                        {
                                            var obj = JSON.parse(data);
                                            var block_id = obj;
                                            $('#latest_drag').attr('id',block_id+"_row");
                                            $('#'+block_id+"_row").attr('name',block_id+"_row");
                                            $('#'+block_id+"_row").addClass(block_id+"_row");
                                            $('.active_modal').addClass("active_modal");
                                            $('.latest_id').attr('value',block_id);
                                            $('.new_element_text_align').attr('id',block_id+'new_element_text_align');
                                            if(ui.helper.hasClass('headline'))
                                                {
                                                   $('#active_block_id').val(block_id);
                                                   $('.color_picker_box').colorpicker({
                                                        format: 'hex'
                                                    });
                                                   $("#color_picker_new_block").change(function() 
                                                    {
                                                      $('.color_picker_new_block_brush').css('color',$(this).val());
                                                      $('#element_color').val($(this).val());
                                                      $('.brandnew_text_editor').css('color',$(this).val());
                                                    }); 
    
                                                    $("#color_picker_new_block_bg").change(function() 
                                                    {
                                                      $('.color_picker_new_block_tint').css('color',$(this).val());
                                                      $('#element_bg_color').val($(this).val());
                                                      $('.brandnew_text_editor').css('background-color',$(this).val());
                                                    }); 
                                                    $("#brandnew_text_editor").effect("pulsate", { times:4 }, 1000);
                                                    $(".brand_new_cols").addClass($("#current_page_width_class").val());
                                                }
                                                var sort = "";
                                                $('.main_block').each(function() 
                                                    {
                                                        var new_id = this.id;
                                                        new_id = new_id.slice(0, -4);
                                                        sort = sort+"-"+new_id;
                                                    }); 
                                                $('.elements_sort').val(sort);
                                                
    
    
    
                                                //Update The New Block
                                                $('#add_new_block_button').click(function(e) 
                                                    {
                                                        $("#new_text_block_val").text($("#brandnew_text_editor").val());
                                                        e.preventDefault();
                                                        var url = "<?php echo base_url("plc_template_update");?>";
                                                        $.ajax({
                                                           type: "POST",
                                                           data: $("#latest_form").serialize(),
                                                           url: url,
                                                           success: function(data)
                                                           {
                                                               console.log('Done');
                                                               $(".buttons").remove();
                                                               $("#latest_form").remove();
                                                               $("#brandnew_block").remove();
                                                               $("#brandnew_preview").removeClass('hide-me');
                                                            }
                                                         });
                                                     });
                                                //Update The New Block End
                                        }
                                        //Got the lastest id
    
                                 }
                            );
                        }
             }
         }).sortable({
             revert: true
         });
    
    
    
    $( ".draggable" ).draggable({
          connectToSortable: "#page_items",
          cursor: "move", 
          scroll: false,
          helper: "clone",
          revert: "invalid",
          receive: function(event, ui) {
              alert("dropped item ID: "+ui.item.attr('id'));
            }
        });
    
    
    
         $( "#page_items" ).sortable({
    
            revert: true,
            update: function( ) {
                var sort = 0;
                $('.main_block').each(function() 
                    {
                        var new_id = this.id;
                        new_id = new_id.slice(0, -4);
                        sort = sort+"-"+new_id;
                    }); 
                console.log(sort);
                $('.elements_sort').val(sort);
                    var url = '<?php echo base_url('update_sort');?>'; 
                    $.ajax({
                       type: "POST",
                       url: url,
                       data: $("#sortable_form").serialize(),
                       success: function(data)
                       {
                          console.log("Sorted:");
                          console.log(sort);
                       }
                     });
                }
        });
      });
    Thanks
    Last edited by English Breakfast Tea; June 5th, 2018 at 05:41 AM.
  2. #2
  3. Lord of the Dance
    Devshed Specialist (4000 - 4499 posts)

    Join Date
    Oct 2003
    Posts
    4,163
    Rep Power
    2011
    Mixing JavaScript, HTML and PHP in several long lines will only lead to confusing.
    A count of closing tags is 53 in you append function.

    Have you considered to place the text in separate functions, where you can have the code "template" in a better formatted layout?
    I was thinking whether AJAX could be of use in here, but could not initially see where or how that could be a help.

    Furthermore, out of curiosity, it looks like you are trying to create your own kind of a CMS system?
    Last edited by MrFujin; June 5th, 2018 at 07:41 AM.
  4. #3
  5. A Change of Season
    Devshed Expert (3500 - 3999 posts)

    Join Date
    Mar 2004
    Location
    Next Door
    Posts
    3,545
    Rep Power
    221
    Hi;

    Just need to make this page builder for launch content delivery.

    What do you mean template?

    Can you show me an example?

    Kicken can you show me how you'd do it with x-template? I am not sure what it is but I keep hearing templates.

    Thanks

IMN logo majestic logo threadwatch logo seochat tools logo