custome plugin with traits

[kuldeepcis]

grapesjs.plugins.add('social-icons-component',  (editor, opts = {}) => {

   let c = opts;

  let defaults = {
    blocks: 'social-icons',

    // Default style
    defaultStyle: true,

    // Default start time, eg. '2018-01-25 00:00'
    startTime: '',

  };

  // Load defaults
  for (let name in defaults) {
    if (!(name in c))
      c[name] = defaults[name];
  }

 //   // Add components
 //  loadComponents(editor, c);

 //  // Add components
    // loadBlocks(editor, c);

  const domc = editor.DomComponents;
  const defaultType = domc.getType('default');
  const textType = domc.getType('text');
  const defaultModel = defaultType.model;
  const defaultView = defaultType.view;
  const textModel = textType.model;
  const textView = textType.view;
  const pfx = c.countdownClsPfx;

  domc.addType('social-icons', {

    model: defaultModel.extend({
      defaults: Object.assign({}, defaultModel.prototype.defaults, {
        startfrom: c.startTime,
        endText: c.endText,
        droppable: false,
        traits: [
          // strings are automatically converted to text types

          'name',
          'placeholder',
          {
            type: 'select',
            label: 'Type',
            name: 'type',
            options: [
              {value: 'facebook', name: 'facebook'},
              {value: 'linkedin', name: 'Linkedin'},
              {value: 'youtube', name: 'Youtube'},
              {value: 'twitter', name: 'Twitter'},
            ]
          }, {
            type: 'input',
            label: 'facebook',
            name: 'facebook',
        },{
            type: 'input',
            label: 'linkedin',
            name: 'linkedin',
        },{
            type: 'input',
            label: 'youtube',
            name: 'youtube',
        },{
            type: 'input',
            label: 'twitter',
            name: 'twitter',
        }],
        script: function() {

        }
      }),
    }, {
      isComponent(el) {

        if(el.getAttribute &&
          el.getAttribute('data-gjs-type') == 'social-icons') {
          return {
            type: 'social-icons'
          };
        }
      },
    }),
    view: defaultView.extend({
      init() {

          console.log('in viewaaa');
        this.listenTo(this.model, 'change:type', this.updateScript);
        const comps = this.model.get('components');

        // Add a basic countdown template if it's not yet initialized
        if (!comps.length) {
          comps.reset();
          comps.add(`
            <span data-js="countdown" class="-cont">
              <div class="${pfx}-block">
                <div data-js="countdown-day" class="${pfx}-digit"></div>
                <div class="${pfx}-label">${c.labelDays}</div>
              </div>
              <div class="${pfx}-block">
                <div data-js="countdown-hour" class="${pfx}-digit"></div>
                <div class="${pfx}-label">${c.labelHours}</div>
              </div>
              <div class="${pfx}-block">
                <div data-js="countdown-minute" class="${pfx}-digit"></div>
                <div class="${pfx}-label">${c.labelMinutes}</div>
              </div>
              <div class="${pfx}-block">
                <div data-js="countdown-second" class="${pfx}-digit"></div>
                <div class="${pfx}-label">${c.labelSeconds}</div>
              </div>
            </span>
            <span data-js="countdown-endtext" class="${pfx}-endtext"></span>
          `);
        }
      }
    }),
});
});

I've created custom plugin with trates, but it's not working can you please guide me how it'll work. what's issue in this.

[xr0master]

You need to init the content field. Probably to overwrite toHTML method. It depends what doesn't work

[artf]

@kuldeepcis you're not showing how you use the component, provide a live example via jsfiddle please

[kuldeepcis]

Hi @artf ,

This is the fiddle for it https://jsfiddle.net/apaoa5o2/14/

In the extra section there is the block for social icon Issues with this are: 1) when you drag and drop it you need to select parent to see the settings section on right.In settings you will see facebook url and show facebbok. 2)when you edit the url in facebook and checked the checkbox you will see the reflection on left.I want this checkbox to be preselected on page load. 3)when you export it the facebook icon is not having the URL which we set.Please let me know how we can do that.

[artf]

@kuldeepcis I think you're doing a bit of mess with the copy-pasted code from the demo (where traits are moved). They're actually there

[lock[bot]]

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.