<commit_before><!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
             xmlns:m="urn:import:gwt.material.design.client.ui"
             xmlns:g="urn:import:com.google.gwt.user.client.ui"
             xmlns:m.addins="urn:import:gwt.material.design.addins.client.ui"
             xmlns:demo="urn:import:gwt.material.design.demo.client.ui">
    <ui:style>
      .title{
        width: 50%;
        margin: auto;
        margin-bottom: 50px;
      }
    </ui:style>
    <g:HTMLPanel>
      <m:MaterialTitle title="Markup Definition" description="FIRST , Set your source and target components."/>
      <demo:PrettyPre addStyleNames="lang-xml z-depth-1">
        &emsp;&lt;!-- Source Component --><br/>
        &lt;m:MaterialButton ui:field="btnSource" text="Meaningful Transitions" backgroundColor="blue" size="LARGE" /><br/><br/>

        &emsp;&lt;!-- Target Component --><br/>
        &lt;m:MaterialOverlay ui:field="overlayTarget" visibility="HIDDEN" opacity="0" textAlign="CENTER" backgroundColor="blue" ><br/>
        &emsp;&lt;m:MaterialTitle addStyleNames="{style.title}" textColor="white" title="Meaningful transitions" description="Motion design can effectively guide the user’s attention in ways that both inform and delight. Use motion to smoothly transport users between navigational contexts, explain changes in the arrangement of elements on a screen, and reinforce element hierarchy."/><br/>
        &emsp;&lt;m:MaterialButton ui:field="btnClose" text="Back to Main Page" backgroundColor="blue lighten-2" textColor="white" size="LARGE" /><br/>
        &lt;/m:MaterialOverlay>
      </demo:PrettyPre>

      <m:MaterialTitle title="Source Logic" description="SECOND , Add an event into your source component and inside that method you need to call MaterialPathAnimator.animate() method."/>
      <demo:PrettyPre addStyleNames="lang-java z-depth-1">
        &emsp;// Transforming from Source to Target<br/>
        @UiHandler("btnSource")<br/>
        void onSource(ClickEvent e) {<br/>
        &emsp;MaterialPathAnimator.animate(btnSource.getElement(), overlayTarget.getElement());<br/>
        }
      </demo:PrettyPre>

      <m:MaterialTitle title="Target Logic" description="THIRD , In order to go to the original position of Source component from Target component. You need to set the resting styles of target component and call MaterialPathAnimator.animate() method to apply the deslightful animation."/>
      <demo:PrettyPre addStyleNames="lang-java z-depth-1">
        &emsp;// Transforming from Target to Source using reverseAnimate() method.<br/>
        @UiHandler("btnClose")<br/>
        void onClose(ClickEvent e) {<br/>
        &emsp;MaterialPathAnimator.reverseAnimate(btnSource.getElement(), overlayTarget.getElement());<br/>
        }
      </demo:PrettyPre>

      <m:MaterialTitle title="1. Button to Overlay Panel" description="Source Component : MaterialButton and Target Component : MaterialOverlay"/><commit_msg>Correcting Path Animator demo code example<commit_after><!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
             xmlns:m="urn:import:gwt.material.design.client.ui"
             xmlns:g="urn:import:com.google.gwt.user.client.ui"
             xmlns:m.addins="urn:import:gwt.material.design.addins.client.ui"
             xmlns:demo="urn:import:gwt.material.design.demo.client.ui">
    <ui:style>
      .title{
        width: 50%;
        margin: auto;
        margin-bottom: 50px;
      }
    </ui:style>
    <g:HTMLPanel>
      <m:MaterialTitle title="Addins Usage" description="In every gwt-material-addins components you may require to add the following namespace to the &lt;ui:UIBinder> element"/>
      <demo:PrettyPre addStyleNames="lang-xml z-depth-1">
          xmlns:m.addins='urn:import:gwt.material.design.addins.client.ui'
      </demo:PrettyPre>

      <m:MaterialTitle title="Markup Definition" description="FIRST , Set your source and target components."/>
      <demo:PrettyPre addStyleNames="lang-xml z-depth-1">
        &emsp;&lt;!-- Source Component --><br/>
        &lt;m:MaterialButton ui:field="btnSource" text="Meaningful Transitions" backgroundColor="blue" size="LARGE" /><br/><br/>

        &emsp;&lt;!-- Target Component --><br/>
        &lt;m.addins:MaterialOverlay ui:field="overlayTarget" visibility="HIDDEN" opacity="0" textAlign="CENTER" backgroundColor="blue" ><br/>
        &emsp;&lt;m:MaterialTitle addStyleNames="{style.title}" textColor="white" title="Meaningful transitions" description="Motion design can effectively guide the user’s attention in ways that both inform and delight. Use motion to smoothly transport users between navigational contexts, explain changes in the arrangement of elements on a screen, and reinforce element hierarchy."/><br/>
        &emsp;&lt;m:MaterialButton ui:field="btnClose" text="Back to Main Page" backgroundColor="blue lighten-2" textColor="white" size="LARGE" /><br/>
        &lt;/m.addins:MaterialOverlay>
      </demo:PrettyPre>

      <m:MaterialTitle title="Source Logic" description="SECOND , Add an event into your source component and inside that method you need to call MaterialPathAnimator.animate() method."/>
      <demo:PrettyPre addStyleNames="lang-java z-depth-1">
        &emsp;// Transforming from Source to Target<br/>
        @UiHandler("btnSource")<br/>
        void onSource(ClickEvent e) {<br/>
        &emsp;MaterialPathAnimator.animate(btnSource.getElement(), overlayTarget.getElement());<br/>
        }
      </demo:PrettyPre>

      <m:MaterialTitle title="Target Logic" description="THIRD , In order to go to the original position of Source component from Target component. You need to set the resting styles of target component and call MaterialPathAnimator.animate() method to apply the deslightful animation."/>
      <demo:PrettyPre addStyleNames="lang-java z-depth-1">
        &emsp;// Transforming from Target to Source using reverseAnimate() method.<br/>
        @UiHandler("btnClose")<br/>
        void onClose(ClickEvent e) {<br/>
        &emsp;MaterialPathAnimator.reverseAnimate(btnSource.getElement(), overlayTarget.getElement());<br/>
        }
      </demo:PrettyPre>

      <m:MaterialTitle title="1. Button to Overlay Panel" description="Source Component : MaterialButton and Target Component : MaterialOverlay"/>
{'fraction_non_alphanumeric': 0.13214285714285715, 'fraction_numerical': 0.003260869565217391, 'mean_word_length': 3.8648036253776437, 'pattern_counts': {'":': 0, '<': 66, '<?xml version=': 0, '>': 81, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 14}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5533208', 'n_tokens_mistral': 1903, 'n_tokens_neox': 1836, 'n_words': 466}