Issue #2381Opened November 6, 2019by ColinTenaguillo3 reactions

[QUESTION] Is it possible to add info modal on the editor

Question

Hi,

I would like to add on the grapejs editor a clickable questionmark we can click so we could give information on what does this specific spec to the user.

image

It would open a modal with all the information that we could give when we add the property to a sector. Like you do in the webpage demo.

image

Answers (3)

artfNovember 7, 20191 reactions

Currently, there is no documentation about extending/updating style manager properties (I've just realized few plugins like grapesjs-style-filter and grapesjs-style-gradient but is not enough) and in all honesty, what I've done so far (as public API) it's not that solid, I don't like it. I'd like to reach the same result of customizing traits but we have to wait before reaching this change...

ColinTenaguilloNovember 7, 20191 reactions

Here what i made today with a bit of modifications :

ezgif-3-c8ae3aaa7dc0

It's look i wanted now i juste need to find a way to put in the content i want in the modal

ColinTenaguilloNovember 14, 20191 reactions

Hey, how can i publish my branch with my modification for a pull request ?

export default Backbone.View.extend({
  template(model) {
    const pfx = this.pfx;
    return `
      <div class="${pfx}label">
        ${this.templateLabel(model)}
      </div>
      <div class="${this.ppfx}fields">
        ${this.templateInput(model)}
      </div>
      ${this.templateModal(model)}
    `;
  },

  templateLabel(model) {
    const { pfx } = this;
    const icon = model.get("icon") || "";
    const info = model.get("info") || "";
    const name = model.get("name");
    const description = model.get("description");
    const parent = model.parent;
    return `
      <span class="${pfx}icon ${icon}" title="${info}">
        ${name}
      </span>
      ${!parent ? `<b class="${pfx}clear" ${clearProp}>&Cross;</b>` : ""}
      ${
        description !== undefined
          ? `<span class="trigger ${this.ppfx}pn-btn fa fa-question-circle" data-show-info title="${name}"> </span>`
          : ""
      }
    `;
  },

  templateModal(model) {
    const name = model.get("name");
    const description = model.get("description");
    const pfx = "gjs-mdl2-";

    return `
    <div class="${pfx}container">
    <div class="${pfx}dialog gjs-one-bg gjs-two-color">
      <div class="${pfx}header">
        <div class="${pfx}title">${name}</div>
        <span class="${pfx}btn-close" data-close-info>⨯</span>
      </div>
      <div class="${pfx}content">
        <div id="${pfx}c">${description}</div>
        <div style="clear:both"></div>
      </div>
      </div>
    </div>
    `;
  }

This is PropetyView changes i've done I've also add css for these specific modal based on the css of the modal you use

Related Questions and Answers

Continue research with similar issue discussions.

Paid Plugins That Match This Issue

Curated by issue keywords and label relevance to help you ship faster.

View all plugins

Loading paid plugin recommendations...

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.