search

GrapesJS / grapesjs

Free and Open source Web Builder Framework. Next generation tool for building templates without coding
https://grapesjs.com
Other
22.62k stars 4.09k forks source link

I am not able to insert icon and its class in html element #1308

Closed manishkumaruit closed 6 years ago

manishkumaruit commented 6 years ago

bm.add('test-block', { label: "Icons", category: "Prismanote Blocks", content: { script: function () {

    var d = window.parent.window.modalJ;
    d.setTitle('ICONS');
    d.setContent(`
      <style>

  .tabs{
      width: 600px;
      display: block;
      margin: 0px auto;
      position: relative;
      padding: 0px !important;
  }

  .tabs .tab{
      float: left;
      display: block;
      width: 25%;
  }

  .tabs .tab>input[type="radio"] {
      position: absolute;
      top: -9999px;
      left: -9999px;
  }

  .tabs .tab>label {
      display: block;
      padding: 6px 21px;
      font-size: 12px;
      text-transform: uppercase;
      cursor: pointer;
      position: relative;
      color: #FFF;
      background: #4A83FD;
  }
  div#tab-content1 {
    color:#000;
  }
  div#tab-content2 {
    color:#000;
  }
  div#tab-content3 {
    color:#000;
  }
  div#tab-content4 {
    color:#000;
  }

  .tabs .content {
    z-index: 0;
    overflow: hidden;
    width: 599px !important;
    padding: 25px;
    position: absolute;
    top: 26px;
    left: 0;
    background: #b3b3b3;
    color: #DFDFDF;
    opacity: 0;
    transition: opacity 400ms ease-out;
  } 
  .tabs .tab>label {
    display: block;
    padding: 6px 21px;
    font-size: 12px;
    text-transform: uppercase;
    cursor: pointer;
    position: relative;
    color: #FFF;
    background: #444444 !important;
}
.tabs>.tab>[id^="tab"]:checked + label {
  top: 0;
  background: #b3b3b3 !important;
  color: #F5F5F5;

} .gjs-mdl-dialog {

    height: 558px !important;

  }

  .tabs>.tab>[id^="tab"]:checked + label {
      top: 0;
      background: #303030;
      color: #F5F5F5;
  }

  .tabs>.tab>[id^="tab"]:checked ~ [id^="tab-content"] {
      z-index: 1;/* or display: block; */

      opacity: 1;
      transition: opacity 400ms ease-out;
  }
  .icon {
    display: inline-block;
    width: 64px;
    height: 64px;
    line-height: 64px;
    font-size: 24px;
    vertical-align: middle;
    text-align: center;
    cursor: pointer;
    border-radius: 2px;
    border: 1px solid transparent;
}

div#tab-content1 { max-height: 460px !important; overflow: scroll; }

div#tab-content2 { max-height: 407px; overflow: scroll; } div#tab-content3 { max-height: 407px; overflow: scroll; } div#tab-content4 { max-height: 407px; overflow: scroll; } .gjs-mdl-dialog {

max-width: 630px !important; }

  • Web Application Icons

    Payment Icons

  • Directions Icons

  • Medical Icons

    Brands Icons 

    •   `);
    console.log('the element', this, d);

    d.open();

setTimeout(function(){ 

    var classname = window.parent.window.document.getElementsByClassName("icon");

    var getIconClass = function() {
  var attribute = this.getAttribute("class");

        //    am.setTarget( null );

  alert(attribute);
  // document.getElementsByTagName("body")[0].setContent("class", attribute);
  //document.innerHTML = '<h1>Test</h1><p>LOLWAT';
  editor.getComponents().add('<link rel="stylesheet" href="...">');
  d.close();
    };
    for (var i = 0; i < classname.length; i++) {
        classname[i].addEventListener('click', getIconClass, false);
    }

}, 100);

  },

}

    });

    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.