package jumpstart.web.pages.examples.javascript;

import jumpstart.web.state.examples.javascript.MyOrder;

import org.apache.tapestry5.annotations.Import;
import org.apache.tapestry5.annotations.Property;
import org.apache.tapestry5.annotations.SessionState;

@Import(stylesheet = "css/examples/js.css")
public class CreatingMixins1 {

    // Work fields

    @SessionState
    @Property
    private MyOrder myOrder;

    // The code

    void setupRender() {
        myOrder.setApplesQuantity(0);
        myOrder.setOrangesQuantity(0);
        myOrder.setBananasQuantity(0);
    }

    Object onSuccessFromPlainForm() {
        orderOneApple();
        return CreatingMixins2.class;
    }

    Object onOrderOneOrange() {
        orderOneOrange();
        return CreatingMixins2.class;
    }

    Object onActionFromOrderOneBanana() {
        orderOneBanana();
        return CreatingMixins2.class;
    }

    Object onSuccessFromMixinForm() {
        orderOneApple();
        return CreatingMixins2.class;
    }

    Object onActionFromOrderOneBananaWithMixin() {
        orderOneBanana();
        return CreatingMixins2.class;
    }

    void orderOneApple() {
        sleep(1500); // Sleep 1.5 seconds to simulate busy system
        myOrder.setApplesQuantity(myOrder.getApplesQuantity() + 1);
    }

    void orderOneOrange() {
        sleep(1500); // Sleep 1.5 seconds to simulate busy system
        myOrder.setOrangesQuantity(myOrder.getOrangesQuantity() + 1);
    }

    void orderOneBanana() {
        sleep(1500); // Sleep 1.5 seconds to simulate busy system
        myOrder.setBananasQuantity(myOrder.getBananasQuantity() + 1);
    }

    private void sleep(long duration) {
        try {
            Thread.sleep(duration);
        }
        catch (InterruptedException e) {
        }
    }

}

.eg {
                margin: 20px 0;
                padding: 14px;
                color: #888;
                border: 1px solid #ddd;
                border-radius: 6px;
                -webkit-border-radius: 6px;
                -mox-border-radius: 6px;
}

.js-required {
                color: red;
                display: block;
                margin-bottom: 14px;
}

.js-recommended {
                color: red;
                display: block;
                margin-bottom: 14px;
}

/**
 * A simple mixin that uses JavaScript to observe an element, detecting whether it has been clicked. The click will be 
 * ignored if any element using this mixin has already been clicked.
 */
package jumpstart.web.mixins;

import org.apache.tapestry5.ClientElement;
import org.apache.tapestry5.annotations.InjectContainer;
import org.apache.tapestry5.ioc.annotations.Inject;
import org.apache.tapestry5.json.JSONObject;
import org.apache.tapestry5.services.javascript.JavaScriptSupport;

public class ClickOnce {

    // Generally useful bits and pieces

    @Inject
    private JavaScriptSupport javaScriptSupport;

    @InjectContainer
    private ClientElement attachedTo;

    // The code

    public void afterRender() {
        JSONObject spec = new JSONObject();
        spec.put("elementId", attachedTo.getClientId());
        javaScriptSupport.require("click-once").invoke("init").with(spec);
    }

}

// A module that ignores clicks after the first one.
// For each clickable element that you want to participate, call init. 
// Once any of the elements is clicked, this module will cancel subsequent clicks from any of the elements.

define([ "jquery" ], function($) {
    
    var alreadyClickedOnce = false;

    var init = function(spec) {
        $element = $("#" + spec.elementId);

        var doClickOnce = function() {
            
            if (alreadyClickedOnce) {
                // Cancel the original click event.
                return false;
            }

            alreadyClickedOnce = true;
            return true;
        }
        
        $element.on("click", doClickOnce);
    };
    
    return {
        init : init
    };
    
});

package jumpstart.web.state.examples.javascript;

public class MyOrder {
    private int applesQuantity;
    private int orangesQuantity;
    private int bananasQuantity;

    public int getApplesQuantity() {
        return applesQuantity;
    }

    public void setApplesQuantity(int applesQuantity) {
        this.applesQuantity = applesQuantity;
    }

    public int getOrangesQuantity() {
        return orangesQuantity;
    }

    public void setOrangesQuantity(int orangesQuantity) {
        this.orangesQuantity = orangesQuantity;
    }

    public int getBananasQuantity() {
        return bananasQuantity;
    }

    public void setBananasQuantity(int bananasQuantity) {
        this.bananasQuantity = bananasQuantity;
    }
}