ActionWrapper/Vf_Javascript.vfp at master · taranglute/ActionWrapper · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
<apex:page controller="Ctrl_Javascript">

    <script type="text/javascript">
        (function(_window,_document,ajaxRequest){
            let configuration={
            	selector:"input[data-action='register']"
            }

        	this.ActionWrapper=function(){
                if (arguments[0] && typeof arguments[0] === "object") {
					configuration=extendDefaults(configuration, arguments[0]);
                }
            }

            function onclick(){
                const scope=this;
                let actFunction=scope.dataset.actionfunction;
                let parameters=scope.dataset.parameter;
                let defaultvalue=scope.dataset.default;

                let selectors=parameters.split(",");
                let values=[];
                selectors.forEach(function(dom,index){
                    var domEle=document.querySelector(dom);
                    if(!!domEle.value && domEle.value.trim().length>0){
                    	values.push(domEle.value);
                    }else{
                    	if(!!domEle.dataset["defaultvalue"]){
                        	values.push(domEle.dataset["defaultvalue"]);
                        }else{
                        	values.push("");
                        }
                    }
                });
                if(!!defaultvalue){
                    values.push(defaultvalue);
                }
                window[actFunction].apply(null,values);
          	}

            // Utility method to extend defaults with user options
            let extendDefaults=(source, properties)=>{
                var property;
                for (property in properties) {
                    if (properties.hasOwnProperty(property)) {
                        source[property] = properties[property];
                    }
                }
                return source;
            }

            this.ActionWrapper.prototype.config=configuration;

            this.ActionWrapper.prototype.Initialize=()=>{
            	let eleSelector=configuration.selector;
                let eleCount=_document.querySelectorAll(eleSelector);
                SubscribeEvents(eleCount);
            }

            let SubscribeEvents=(domElements)=>{
            	domElements.forEach(function(domElement,index){
                    let actionfunction=domElement.dataset.actionfunction;
                    if(!!actionfunction){
                        domElement.addEventListener("click",onclick,false);
                    }
            	});
            }

            XMLHttpRequest.prototype.open = function(method, url, async, user, pass) {
                this.addEventListener("readystatechange", function() {
                    console.log(this.readyState); // this one I changed
                }, false);
                ajaxRequest.call(this, method, url, async, user, pass);
            };

            _window.onload=function(){
         		let wrapper=new ActionWrapper();
         		wrapper.Initialize();
                console.log("loaded");
            }

        })(window,document,XMLHttpRequest.prototype.open);
    </script>

    <apex:form >

        <input id="txt1" type="text"/>
        <input id="txt2" type="text" data-defaultvalue="somemorevalues"/>

        <input id="btnAction1" type="button" data-action="register" data-actionfunction="act1" data-parameter="#txt1" value="Action1"/>
        <input id="btnAction3" type="button" data-action="register" data-actionfunction="act3" data-parameter="#txt1,#txt2" value="Action2"/>
        <input id="btnAction4" type="button" value="Action3"/>

        <!-- Action Function Starts-->
        <apex:actionFunction name="act1" action="{!ActionCall}" reRender="dummy">
        	<apex:param name="param1" assignTo="{!parameter1}" value=""/>
        </apex:actionFunction>

        <apex:actionFunction name="act2" action="{!ActionCall}" reRender="dummy">
        	<apex:param name="param1" assignTo="{!parameter1}" value=""/>
            <apex:param name="param2" assignTo="{!parameter2}" value=""/>
        </apex:actionFunction>

        <apex:actionFunction name="act3" action="{!ActionCall}" reRender="dummy">
        	<apex:param name="param1" assignTo="{!parameter1}" value=""/>
            <apex:param name="param2" assignTo="{!parameter2}" value=""/>
            <apex:param name="param3" assignTo="{!parameter3}" value=""/>
        </apex:actionFunction>

        <apex:actionFunction name="act4" action="{!ActionCall}">
        	<apex:param name="param1" assignTo="{!parameter1}" value=""/>
            <apex:param name="param2" assignTo="{!parameter2}" value=""/>
            <apex:param name="param3" assignTo="{!parameter3}" value=""/>
            <apex:param name="param4" assignTo="{!parameter4}" value=""/>
        </apex:actionFunction>

        <!-- Action Function Ends-->

    </apex:form>
</apex:page>