4 Javascript Sample
1 Add fireworks int form
//Fireworks
(function webpackUniversalModuleDefinition(root, factory) {
if (typeof exports === 'object' && typeof module === 'object') module.exports = factory();
else if (typeof define === 'function' && define.amd) define([], factory);
else if (typeof exports === 'object') exports["EFFECT"] = factory();
else root["EFFECT"] = factory()
})(this,function() {
return (function(modules) {
var installedModules = {};
function __webpack_require__(moduleId) {
if (installedModules[moduleId]) return installedModules[moduleId].exports;
var module = installedModules[moduleId] = {
exports: {},
id: moduleId,
loaded: false
};
modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
module.loaded = true;
return module.exports
}
__webpack_require__.m = modules;
__webpack_require__.c = installedModules;
__webpack_require__.p = "";
return __webpack_require__(0)
})([function(module, exports, __webpack_require__) {
'use strict';
var canvas = document.createElement('canvas');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
canvas.style.cssText = 'position:fixed;top:0;left:0;pointer-events:none;z-index:999999';
window.addEventListener('resize',
function() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight
});
document.body.appendChild(canvas);
var context = canvas.getContext('2d');
var particles = [];
var particlePointer = 0;
EFFECT.shake = true;
function getRandom(min, max) {
return Math.random() * (max - min) + min
}
function getColor(el) {
if (EFFECT.colorful) {
var u = getRandom(0, 360);
return 'hsla(' + getRandom(u - 10, u + 10) + ', 100%, ' + getRandom(50, 80) + '%, ' + 1 + ')'
} else {
return window.getComputedStyle(el).color
}
}
function getCaret() {
var el = document.activeElement;
var bcr;
if (el.tagName === 'TEXTAREA' || (el.tagName === 'INPUT' && el.getAttribute('type') === 'text')) {
var offset = __webpack_require__(1)(el, el.selectionStart);
bcr = el.getBoundingClientRect();
return {
x: offset.left + bcr.left,
y: offset.top + bcr.top,
color: getColor(el)
}
}
var selection = window.getSelection();
if (selection.rangeCount) {
var range = selection.getRangeAt(0);
var startNode = range.startContainer;
if (startNode.nodeType === document.TEXT_NODE) {
startNode = startNode.parentNode
}
bcr = range.getBoundingClientRect();
return {
x: bcr.left,
y: bcr.top,
color: getColor(startNode)
}
}
return {
x: 0,
y: 0,
color: 'transparent'
}
}
function createParticle(x, y, color) {
return {
x: x,
y: y,
alpha: 1,
color: color,
velocity: {
x: -1 + Math.random() * 2,
y: -3.5 + Math.random() * 2
}
}
}
function EFFECT() {
{
var caret = getCaret();
var numParticles = 5 + Math.round(Math.random() * 10);
while (numParticles--) {
particles[particlePointer] = createParticle(caret.x, caret.y, caret.color);
particlePointer = (particlePointer + 1) % 500
}
} {
if (EFFECT.shake) {
var intensity = 1 + 2 * Math.random();
var x = intensity * (Math.random() > 0.5 ? -1 : 1);
var y = intensity * (Math.random() > 0.5 ? -1 : 1);
document.body.style.marginLeft = x + 'px';
document.body.style.marginTop = y + 'px';
setTimeout(function() {
document.body.style.marginLeft = '';
document.body.style.marginTop = ''
},
75)
}
}
};
EFFECT.colorful = false;
function loop() {
requestAnimationFrame(loop);
context.clearRect(0, 0, canvas.width, canvas.height);
for (var i = 0; i < particles.length; ++i)
{
var particle = particles[i];
if (particle.alpha <= 0.1) continue;
particle.velocity.y += 0.075;
particle.x += particle.velocity.x;
particle.y += particle.velocity.y;
particle.alpha *= 0.96;
context.globalAlpha = particle.alpha;
context.fillStyle = particle.color;
context.fillRect(Math.round(particle.x - 1.5), Math.round(particle.y - 1.5), 3, 3);
}
//context.fillText("文字",particle.x,particle.y) //太频繁，文字会卡死固定位置
}
requestAnimationFrame(loop);
module.exports = EFFECT
},
function(module, exports) {
(function() {
var properties = ['direction', 'boxSizing', 'width', 'height', 'overflowX', 'overflowY', 'borderTopWidth', 'borderRightWidth', 'borderBottomWidth', 'borderLeftWidth', 'borderStyle', 'paddingTop', 'paddingRight', 'paddingBottom', 'paddingLeft', 'fontStyle', 'fontVariant', 'fontWeight', 'fontStretch', 'fontSize', 'fontSizeAdjust', 'lineHeight', 'fontFamily', 'textAlign', 'textTransform', 'textIndent', 'textDecoration', 'letterSpacing', 'wordSpacing', 'tabSize', 'MozTabSize'];
var isFirefox = window.mozInnerScreenX != null;
function getCaretCoordinates(element, position, options) {
var debug = options && options.debug || false;
if (debug) {
var el = document.querySelector('#input-textarea-caret-position-mirror-div');
if (el) {
el.parentNode.removeChild(el)
}
}
var div = document.createElement('div');
div.id = 'input-textarea-caret-position-mirror-div';
document.body.appendChild(div);
var style = div.style;
var computed = window.getComputedStyle ? getComputedStyle(element) : element.currentStyle;
style.whiteSpace = 'pre-wrap';
if (element.nodeName !== 'INPUT') style.wordWrap = 'break-word';
style.position = 'absolute';
if (!debug) style.visibility = 'hidden';
properties.forEach(function(prop) {
style[prop] = computed[prop]
});
if (isFirefox) {
if (element.scrollHeight > parseInt(computed.height)) style.overflowY = 'scroll'
} else {
style.overflow = 'hidden'
}
div.textContent = element.value.substring(0, position);
if (element.nodeName === 'INPUT') div.textContent = div.textContent.replace(/\s/g, "\u00a0");
var span = document.createElement('span');
span.textContent = element.value.substring(position) || '.';
div.appendChild(span);
var coordinates = {
top: span.offsetTop + parseInt(computed['borderTopWidth']),
left: span.offsetLeft + parseInt(computed['borderLeftWidth'])
};
if (debug) {
span.style.backgroundColor = '#aaa'
} else {
document.body.removeChild(div)
}
return coordinates
}
if (typeof module != "undefined" && typeof module.exports != "undefined") {
module.exports = getCaretCoordinates
} else {
window.getCaretCoordinates = getCaretCoordinates
}
} ())
}])
});
EFFECT.colorful = true;
EFFECT.shake = true;
document.body.addEventListener('input', EFFECT);2 Form vote
//Get main table field id
var fieldid1 = WfForm.convertFieldNameToId("bfb");//percentage
var fieldid2 = WfForm.convertFieldNameToId("fjqry");//Disagree person
var fieldid3 = WfForm.convertFieldNameToId("lztj");//Condition
var fieldid6 = WfForm.convertFieldNameToId("mxbh");//Detail table
var mx=WfForm.getFieldValue(fieldid6);;//Details table field it
var fieldid4 = WfForm.convertFieldNameToId("tpr", "detail_"+mx);//Vote person
var fieldid5 = WfForm.convertFieldNameToId("yj", "detail_"+mx);//Comments
var userid=WfForm.getBaseInfo().f_weaver_belongto_userid;
//WfForm.controlDetailRowDisplay("detail_"+mx, "all", true);
setTimeout(function(){
$(".vote").show()
},1000);
//Check all detail table, hide non-current user's line
var rowArr1 = WfForm.getDetailAllRowIndexStr("detail_"+mx).split(",");
for(var i=0; i<rowArr1.length; i++){
var rowIndex1 = rowArr1[i];
if(rowIndex1 !== ""){
var fieldvalue4=WfForm.getFieldValue(fieldid4+"_"+rowIndex1);//Get vote person's value
if(userid!=fieldvalue4){
WfForm.controlDetailRowDisplay("detail_"+mx, rowIndex1, true);
}else{
WfForm.controlDetailRowDisplay("detail_"+mx, rowIndex1, false);
WfForm.changeFieldAttr(fieldid5+"_"+rowIndex1, 3);//Change vote comments as required
}
}
}
//Submit for verification and result calculation
WfForm.registerCheckEvent(WfForm.OPER_SUBMIT, function(callback){
var fieldvalue1 = WfForm.getFieldValue(fieldid1);//Get percentage
var fieldvalue2 = WfForm.getFieldValue(fieldid2);//Get vote person
if(fieldvalue1==null || fieldvalue1==""){
alert("Please contact admin to set pass rate！")
}else{
var rowArr = WfForm.getDetailAllRowIndexStr("detail_"+mx).split(",");//Check details table
var coun=rowArr.length;
var countfieldid5=0;
var check=false;
for(var i=0; i<rowArr.length; i++){
var rowIndex = rowArr[i];
if(rowIndex !== ""){
var fieldMark = "field111_"+rowIndex; //Check details table
var fieldvalue4=WfForm.getFieldValue(fieldid4+"_"+rowIndex);//Get vote person value
var fieldvalue5=WfForm.getFieldValue(fieldid5+"_"+rowIndex);//Get vote comments
if(fieldvalue5=="0"){
countfieldid5=parseInt(countfieldid5)+parseInt("1");
}
if(fieldvalue4==fieldvalue2 && fieldvalue5=="1"){
check=true;
}
}
var tgl=(countfieldid5*1.00)/(coun*1.00);
// console.log(countfieldid5)
// console.log(coun)
// console.log(tgl)
var checktgl=false;
if(tgl>=fieldvalue1){//Vote rate > Pass rate
checktgl=true;
}
if(!check && checktgl){
WfForm.changeFieldValue(fieldid3, {value:"0"});//Vote passed
}else{
WfForm.changeFieldValue(fieldid3, {value:"1"});//Vote failed
}
}
}
callback();
});3 Simulate the click action to show workflow chart
var baseFrame = $(window.parent.document).find(".tab_menu");
baseFrame.children().eq(1).children().eq(0).click(); //Show workflow chart
$(window.parent.document).find("#divWfPic").hide(); //Hide workflow chart
$(window.parent.document).find("#divWfBill").show();
///Set the workflow chart image field id as overflowPic
$(document).ready(function(){
//Becuase take some time to generate the workflow chart, then need to extend the time
setTimeout(function(){
//find canvas
var pic = $(window.parent.document.getElementById("piciframe")).contents().find("#mainArea");
//generate the image
var _img = document.createElement("img");
_img.src = pic[0].toDataURL("image/png");
$('#overflowPic').append(_img);
}, 500);
});4 Add placeholder
jQuery(document).ready(function(){
$("#field6387").attr("placeholder", "Please fill in counterparties");
});5 Change tips text base on dropdown
/// If the dropdown is 0, then hide tips
/// If the dropdown is 1, then change tips text as [Note: This is a testing tips, please double check]
/// Note: need to set the tips region class as promptText
jQuery(document).ready(function(){
var _selectId = "field8581";
if($("#" + _selectId).val() == 0){
$(".promptText").parents("tr").eq(0).hide();
} else {
$(".promptText").text("[Note: This is a testing tips, please double check]");
}
});6 Check mobile phone number
jQuery(document).ready(function(){
checkCustomize = function(){
var isPhone = /^([0-9]{3,4}-)?[0-9]{7,8}$/;//Chinese Mobile Phone Number
var isMob= /^0?1[3|4|5|8][0-9]\d{8}$/;// Chinese Telephone Number
var isSingaporeNumber = /^\+65(6|8|9)\d{7}$/;
var _val = $("#field7915").val();
if(_val == "") return true;
else if(isMob.test(_val) || isPhone.test(_val) || isSingaporeNumber(_val)) return true;
else {
alert("Please fill in the correct number");
return false;
}
};
});7 Begin date should not later than End date
/* Begin date should not later than End date */
var beginTimeId = {id: "field7911", name: "Begin Date"}; //Begin Id
var endTimeId = {id: "field7912", name: "End Date"}; //End Id
$(document).ready(function(){
checkCustomize = checkChangeFunction; // Submit for check
$("#" + beginTimeId.id).bindPropertyChange(function(){ checkChangeFunction(); });// Check begin date
$("#" + endTimeId.id).bindPropertyChange(checkChangeFunction); // Check end date
});
/// Check function
function checkChangeFunction(){
var beginTime = new Date($("#" + beginTimeId.id).val()); //Convert to date type
var endTime = new Date($("#" + endTimeId.id).val()); //Convert to date type
return (beginTime > endTime) ?
( alert(beginTimeId.name + " could not later than " + endTimeId.name), false ): ( true );
}
//---------------------------------------------------------------------------------------------------
/* Begin date should not later than End date */
var beginTimeId = {date: "field7911", time: "field8482"}; //Begin
var endTimeId = {date: "field7912", time: "field8483"}; //End
$(document).ready(function(){
checkCustomize = function (){
var beginTime = new Date($("#" + beginTimeId.date).val() + " " +$("#" + beginTimeId.time).val()); //Convert to date type
var endTime = new Date($("#" + endTimeId.date).val() + " " +$("#" + endTimeId.time).val()); //Convert to date type
return (beginTime > endTime) ?
( alert("Begin date should not later than end date"), false ): ( true );
}; // Submit for check
});8 Confirm current time and submit
/* Confirm current time and submit */
/// Main table with time, provide two button, confirm current time and submit, Get current time
/// Make Confirm current time and submit class as changeButton, add user define attribite submitNow as true
/// Make Get current Time field class as changeButton
var needWriteDateId = "7912"; //Date ID
var needWriteTimeId = "8483"; //Time ID
$(".changeButton").click(function(){
//Change date value
var time = new Date();
$("#field" + needWriteDateId).val(getDateYMD(time));
$("#field" + needWriteDateId + "span").text(getDateYMD(time));
$("#field" + needWriteTimeId).val(getTimeHM(time));
$("#field" + needWriteTimeId + "span").text(getTimeHM(time));
//Trigger submit button
if($(this).attr("submitNow")){
setTimeout(function(){
parent.bodyiframe.doSubmitBack(this);
parent.hideRightClickMenu();
}, 1000);
}
});
///Convert _time as yyyy-mm-dd format
function getDateYMD(_time){
var year = _time.getFullYear();
var month = _time.getMonth()+1;
var date = _time.getDate();
return year + "-" + ((month < 10) ? ("0" + month): month) + "-" + ((date < 10) ? ("0" + date): date);
}
///Convert _time as hh:mm format
function getTimeHM(_time){
var hours = _time.getHours();
var minutes = _time.getMinutes();
return ((hours < 10) ? ("0" + hours): hours) + ":" + ((minutes < 10) ? ("0" + minutes): minutes);
}9 Default to get a date
$(document).ready(function(){
var _oldId = "field8444";
var _newId = "field8464";
$("#" + _newId).val($("#" + _oldId).val());
$("#" + _newId + "span").text($("#" + _oldId + "span").text());
});10 Time difference in hours
/* Time difference in hours */
var beginTimeId = "field8482"; //Begin Time Id
var beginDateId = "field7911"; //Begin Date Id
var endTimeId = "field8483"; //End Time Id
var endDateId = "field7912"; //End Date Id
$(document).ready(function(){
checkCustomize = function(){
var beginTime = new Date($("#" + beginTimeId).val() + " " + $("#" + beginDateId).val());
var endTime = new Date($("#" + endTimeId).val() + " " + $("#" + endDateId).val());
var differTime = endTime - beginTime; //Time difference in seconds
var days = Math.floor(differTime / (3600*1000)); //Time difference in hours
$("#field8170").val(days);
return true;
}
});11 Update time per second
/* Update time per second */
$(document).ready(function(){
showtime();
setInterval("showtime()",1000);
});
function showtime() {
var date = new Date();
var _text = date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate() + " " + date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds();
document.getElementById("field6321span").innerText = _text
document.getElementById("field6321").value = _text
}12 Check whether time 1 is within time 2, change the reminder text
/* Check whether time 1 is within time 2, change the reminder text */
/// Note: change the tips reggion class as "prompText"
/// If time 1 is within time2, then hide the tips text
/// Else, change the tips text as [Note: Leave application date & time is different with real date & time]
jQuery(document).ready(function(){
var _beginDateId1 = "field8566", _beginDateId2 = "field8586";
var _beginTimeId1 = "field8567", _beginTimeId2 = "field8587";
var _endDateId1 = "field8568", _endDateId2 = "field8588";
var _endTimeId1 = "field8569", _endTimeId2 = "field8589";
var isError = checkDate($("#" + _beginDateId1).val(), $("#" + _beginDateId2).val(), $("#" + _beginTimeId1).val(), $("#" + _beginTimeId2).val(), $("#" + _endDateId1).val(), $("#" + _endDateId2).val(), $("#" + _endTimeId1).val(), $("#" + _endTimeId2).val());
if(!isError){
$(".promptText").parents("tr").eq(0).hide();
} else {
$(".promptText").text("[Note: Leave application date & time is different with real date & time]");
}
});
/// Check time 2 is within time 1
/// _beginDate1 _beginTime1 Time1 Begin Date & Time
/// _beginDate2 _beginTime2 Time2 Begin Date & Time
/// _endDate1 _endTime1 Time1 End Date & Time
/// _endDate2 _endTime2 Time1 End Date & Time
/// within the range, then return false, else return true
function checkDate(_beginDate1, _beginDate2, _beginTime1, _beginTime2, _endDate1, _endDate2, _endTime1, _endTime2){
console.log(_beginDate1, _beginDate2, _beginTime1, _beginTime2, _endDate1, _endDate2, _endTime1, _endTime2);
var isError = false;
//Check start time
if(_beginDate1 > _beginDate2) { isError = true;console.log(1); }
else if(_beginDate1 == _beginDate2){
if(_beginTime1 > _beginTime2) { isError = true;console.log(2); }
console.log(3);
}
//Check End time
if(_endDate1 < _endDate2) { isError = true; console.log(4); }
else if(_endDate1 == _endDate2){
if(_endTime1 < _endTime2) { isError = true; console.log(5); }
console.log(6);
}
return isError;
}Last updated