GWT Modal Dialog с флип-анимацией (например, библиотека эффектов)

Question

Мне нужно создать модальное диалоговое окно, которое будет отображаться по вертикали или по горизонтали.

Я нашел библиотеку эффектов, что приятно, но как ее интегрировать в GWT.

Я добавил файл js в файл HTML GWT, и стиль определен в диалоговом окне. Но я не вижу в этом никакого эффекта.

Как применить эффект флип в диалоговом окне или есть ли другой способ достичь этого.

popuppanel:

<g:PopupPanel ui:field="container" height="300px" width="500px" 
     autoHideEnabled="true" glassEnabled="true" styleName="{style.gwtDialogBox}"> 
     <g:HTMLPanel width="595px" height="297px"> 
      <g:FlowPanel> 
       <g:Image url="images/close.ico" styleName="{style.right}" /> 
      </g:FlowPanel> 
     </g:HTMLPanel> 
    </g:PopupPanel> 

JS функции в JS файл.

var ModalEffects = (function() { 

    function init() { 


     [].slice.call(document.querySelectorAll('.md-trigger')).forEach(function(el, i) { 

      var modal = document.querySelector('#' + el.getAttribute('data-modal')), 
       close = modal.querySelector('.md-close'); 

      function removeModal(hasPerspective) { 
       classie.remove(modal, 'md-show'); 

       if(hasPerspective) { 
        classie.remove(document.documentElement, 'md-perspective'); 
       } 
      } 

      function removeModalHandler() { 
       removeModal(classie.has(el, 'md-setperspective')); 
      } 

      el.addEventListener('click', function(ev) { 
       classie.add(modal, 'md-show'); 
       overlay.removeEventListener('click', removeModalHandler); 
       overlay.addEventListener('click', removeModalHandler); 

       if(classie.has(el, 'md-setperspective')) { 
        setTimeout(function() { 
         classie.add(document.documentElement, 'md-perspective'); 
        }, 25); 
       } 
      }); 

      close.addEventListener('click', function(ev) { 
       ev.stopPropagation(); 
       removeModalHandler(); 
      }); 

     }); 

    } 

    init(); 

})(); 

это из библиотеки эффектов.

Thanks, Bennet.

Answer 1

Поместите свой .js в общую папку, папка расположена рядом с клиентской папкой в ​​том же пакете, где находится файл gwt.xml.

Некоторые вещи, как этот

-ProjectName 
    - src 
    - com.myProj 
     - public 
     -js 
      yourJS.js 
     *.gwt.xml 

Также поместите это в gwt.xml

<script src="_js-url_"/> 

Compile и попробовать. Также см. Это для справки here