Two little things - Githubissues

kamleshkatpara commented 7 years ago

Hi @artf @arthuralmeidap @sonnylloyd @cmcintosh @daniel-farina

Thank you so much for developing such a awesome framework. I tried to achieve almost all the functionalities in grapesjs preset newsletter.

Just need some help on this two little things :

1) I am able to upload and load images into the asset manager. The thing I am missing on is after uploading the image, it is not reflected immediately in the asset manager image list.

I have already followed issues https://github.com/artf/grapesjs/issues/216 and https://github.com/artf/grapesjs/issues/372

It does not seem to work.

This is my json response from the server after uploading the files :

[{"type":"image","src":"http://cimailer.dev/uploads/1.jpg","height":"350","weight":"250"},{"type":"image","src":"http://cimailer.dev/uploads/Capture.JPG","height":"350","weight":"250"}]

This is my complete code :

<script type="text/javascript">
 $( document ).ready(function()
    {
      var id = '<?php echo $this->uri->segment('3'); ?>';

      $.get( 'http://cimailer.dev/dragdropeditor/dragdrop/fetch/'+id, function(data) {
          var obj = jQuery.parseJSON(data);
          $.each(obj, function(key,value) {
            templateid = obj.id;
            templatename = obj.templatename;
            templatedata = obj.templatedata;
          });

          $( "#templatename" ).val(templatename);

    $.get( "http://cimailer.dev/dragdropeditor/dragdrop/listimages", function( data ) {

        if(data.length > 0){
            var images =JSON.parse(data);
        }
        else
        {
          var images = []; 
        }

       var editor = grapesjs.init
           ({
             height: '100%',
             components: templatedata,
             container : '#gjs',

             plugins: ['gjs-preset-newsletter','gjs-plugin-export'],

        assetManager: {
          assets: images,
          modalTitle: 'Select Image',
          autoAdd: 1,
          uploadName: 'files',
          storageType: 'remote',
          storeOnChange: true,
          storeAfterUpload: true,
          upload: '<?php base_url(); ?>/dragdropeditor/dragdrop/upload',
          uploadText: 'Drop files here or click to upload',
          handleAdd: '<?php base_url(); ?>/dragdropeditor/dragdrop/upload',
        },

          storageManager: {
              id: '',
              autoload: false,
              autosave: false,
              storeComponents: false,
              storeStyles: false,
              storeHtml: true,
              storeCss: true,
              type: 'remote',
              urlStore: '<?php echo base_url(); ?>dragdropeditor/dragdrop/update/'+id,
              urlLoad: '<?php echo base_url(); ?>dragdropeditor/dragdrop/fetch/'+id,
              contentTypeJson: true,
              },

              pluginsOpts: {
                'gjs-plugin-export': {
                btnLabel: 'Export Code',
                preHtml: '<!doctype><html><head><link rel="stylesheet" href="./css/style.css"></head><body>'
              },

            'gjs-preset-newsletter': {
            modalLabelImport: 'Paste all your code here below and click import',
            modalLabelExport: 'Copy the code and use it wherever you want',
            codeViewerTheme: 'material',
            //defaultTemplate: templateImport,
            importPlaceholder: '<!DOCTYPE html><html><head><title></title></head><body></body></html>',
            cellStyle: {
              'font-size': '12px',
              'font-weight': 300,
              'vertical-align': 'top',
              color: 'rgb(111, 119, 125)',
              margin: 0,
              padding: 0,
            }
          }
        }
     });

      var assets = editor.AssetManager.getAll() // <- Backbone collection
      assets.on('remove', function(asset)
      {
        var removefile = asset.get('src'); 
        $.ajax({
           url: '<?php echo base_url(); ?>dragdropeditor/dragdrop/delete',
           type: 'post',
           data: {file: removefile},
           success: function(response){
           }

          });
      });

      // Let's add in this demo the possibility to test our newsletters
      var mdlClass = 'gjs-mdl-dialog-sm';
      var pnm = editor.Panels;
      var cmdm = editor.Commands;
      var testContainer = document.getElementById("edit-template");
      var contentEl = testContainer.querySelector('input[name=body]');
      var md = editor.Modal;
      cmdm.add('edit-template', {
        run(editor, sender) {
          sender.set('active', 0);
          var modalContent = md.getContentEl();
          var mdlDialog = document.querySelector('.gjs-mdl-dialog');
          var cmdGetCode = cmdm.get('gjs-get-inlined-html');
          contentEl.value = cmdGetCode && cmdGetCode.run(editor);
          mdlDialog.className += ' ' + mdlClass;
          testContainer.style.display = 'block';
          md.setTitle('Enter Template Name');
          md.setContent('');
          md.setContent(testContainer);
          md.open();
          md.getModel().once('change:open', function() {
            mdlDialog.className = mdlDialog.className.replace(mdlClass, '');
            //clean status
          })
        }
      });
      pnm.addButton('options', {
        id: 'edit-template',
        className: 'fa fa-floppy-o icon-blank',
        command: 'edit-template',
        attributes: {
          'title': 'Edit Template',
          'data-tooltip-pos': 'bottom',
        },
      });

     //fa fa-refresh
      var statusFormElC = document.querySelector('.form-status');
      var statusFormEl = document.querySelector('.form-status i');
      var ajaxTest = ajaxable(testContainer).
        onStart(function(){
          statusFormEl.className = 'fa fa-spinner anim-spin';
          statusFormElC.style.opacity = '1';
          statusFormElC.className = 'form-status';
          setTimeout(function() {
            window.location.href = "<?php echo base_url(); ?>templates/list";
          }, 600);
          window.onbeforeunload = null;
        })
        .onResponse(function(res){
          console.log(res);
          if (res.data) {
            statusFormElC.style.opacity = '0';
            statusFormEl.removeAttribute('data-tooltip');
            md.close();
          } else if(res.errors){
            statusFormEl.className = 'fa fa-exclamation-circle';
            statusFormEl.setAttribute('data-tooltip', res.errors);
            statusFormElC.className = 'form-status text-danger';
          }
        });

      // Simple warn notifier
      var origWarn = console.warn;
      toastr.options = {
        closeButton: true,
        preventDuplicates: true,
        showDuration: 250,
        hideDuration: 150
      };
      console.warn = function (msg) {
        toastr.warning(msg);
        origWarn(msg);
      };

      $(document).ready(function () {

        // Beautify tooltips
        $('*[title]').each(function () {
          var el = $(this);
          var title = el.attr('title').trim();
          if(!title)
            return;
          el.attr('data-tooltip', el.attr('title'));
          el.attr('title', '');
        });
      });
     });
  });
});

</script>

Also I observed that the Add image button does not seem to work,

capture

If I try to give it a online path it will show the image but won't download and add it to the assets manager. And it does not work for local path.

Any way I can achieve it, if not how can I hide it.

2) I want to show the preview button for newsletter as used for webpage templates :

capture

Thank you.

artf commented 7 years ago

I am able to upload and load images into the asset manager. The thing I am missing on is after uploading the image, it is not reflected immediately in the asset manager image list.

Here is the problem

handleAdd: '<?php base_url(); ?>/dragdropeditor/dragdrop/upload',

In https://github.com/artf/grapesjs/blob/dev/src/asset_manager/config/config.js I explain why you need it

// Handle the image url submit from the built-in 'Add image' form
  // @example
  // handleAdd: (textFromInput) => {
  //   // some check...
  //   editor.AssetManager.add(textFromInput);
  // }
  handleAdd: '',

So in your case, just remove it, you don't need it. You can hide Add image input with CSS if you want

I want to show the preview button for newsletter as used for webpage templates

I remove it here https://github.com/artf/grapesjs-preset-newsletter/blob/master/src/buttons.js#L36-L37 You can add it back

kamleshkatpara commented 7 years ago

Hi @artf

Not sure about using https://github.com/artf/grapesjs-preset-newsletter/blob/master/src/buttons.js#L36-L37

I am using the compressed version: `

` Also I wanted to know why Add image button does not seem to work ? I mean not clear about it > I am able to upload and load images into the asset manager. > The thing I am missing on is after uploading the image, it is not reflected immediately in the asset manager image list. Why do I have to refresh the page every time. Is it possible to load the images directly after uploading

artf commented 7 years ago

The Add button works exactly as expected, it shouldn't upload/download stuff. If you need custom behaviors add your UI

Why do I have to refresh the page every time. Is it possible to load the images directly after uploading

I've already told you where is the problem... read my previous answer

lock[bot] commented 5 years ago

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.

GrapesJS / grapesjs

Two little things #393