mirror of
https://github.com/eddyem/js-recepies.git
synced 2025-12-06 02:35:12 +03:00
init on github
This commit is contained in:
eddyem
commit
19d24d4b27
3
.gitignore
vendored
Normal file
3
.gitignore
vendored
Normal file
@ -0,0 +1,3 @@
|
||||
*.hg
|
||||
.hgignore
|
||||
.dropbox.attr
|
||||
1
contexthelp.readme
Normal file
1
contexthelp.readme
Normal file
@ -0,0 +1 @@
|
||||
Add context help to your web page. It is usefull if standard "title" is not enough for you
|
||||
25
contexthelp/contexthelp.css
Normal file
25
contexthelp/contexthelp.css
Normal file
@ -0,0 +1,25 @@
|
||||
/* floating box of context help */
|
||||
#helptip{
|
||||
position: fixed;
|
||||
background-color: #BFE;
|
||||
border-radius: 5px;
|
||||
color: black;
|
||||
max-width: 400px;
|
||||
max-height: 500px;
|
||||
padding: 5px;
|
||||
z-index: 100;
|
||||
}
|
||||
/* label on help tip */
|
||||
.redtxt{
|
||||
color: red;
|
||||
margin-top: 20px;
|
||||
}
|
||||
/* context help caller */
|
||||
.helperdiv{
|
||||
position: fixed;
|
||||
right: 0px;
|
||||
top: 0px;
|
||||
}
|
||||
/* anchor with text "context help" inside helperdiv */
|
||||
.helperanchor{
|
||||
}
|
||||
161
contexthelp/contexthelp.js
Normal file
161
contexthelp/contexthelp.js
Normal file
@ -0,0 +1,161 @@
|
||||
/*
|
||||
* function ContextHelp()
|
||||
* creates contexthelp object with methods:
|
||||
* init(A,L) - call this method first, where
|
||||
* A - object with help text, A = {ID1 or Name1: text1, ID2 or Name2: text2, ...}
|
||||
* where ID or Name is id or name of HTML object you want to make context help
|
||||
* L - (optional) label for help text (placed below text, have class redtxt)
|
||||
* mkLabel(L) - add default hyperlink-like "button" for help calling, L - text on "button"
|
||||
* activate() - call this method to activate help if you don't use default mkLabel
|
||||
*/
|
||||
|
||||
function ContextHelp(){
|
||||
this.activate = _ContextHelp.callHelp;
|
||||
this.mkLabel = function(helplabel){_ContextHelp.mkLabel(helplabel);};
|
||||
this.init = function(helpArr, helpLbl){_ContextHelp.init(helpArr, helpLbl);};
|
||||
return this;
|
||||
}
|
||||
|
||||
_ContextHelp = function(){
|
||||
// create element and put it into the DOM tree
|
||||
function creEl(Tag, Parent, Class, ID){
|
||||
var el = document.createElement(Tag);
|
||||
if(Class) el.className = Class;
|
||||
if(ID) el.id = ID;
|
||||
if(Parent){
|
||||
Parent.appendChild(el);
|
||||
el = Parent.lastElementChild;
|
||||
}
|
||||
return el;
|
||||
}
|
||||
function addLbl(lbl){
|
||||
if(!lbl) lbl = "Context help";
|
||||
var d = creEl("div", document.body, "helperdiv");
|
||||
var a = creEl("a", d, "helperanchor");
|
||||
a.href = "#";
|
||||
a.innerHTML = lbl;
|
||||
a.onclick = startHelp;
|
||||
}
|
||||
function initHelpText(helpArr, HL){
|
||||
HelpText = helpArr;
|
||||
if(HL) helpLabel = HL;
|
||||
}
|
||||
|
||||
var tipobj = null;
|
||||
var HelpText = null;
|
||||
var helpLabel = "Click on this window or press ESC key to close helps";
|
||||
|
||||
function pE(e){
|
||||
if(e){
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
}
|
||||
}
|
||||
|
||||
var oC, oK, oM;
|
||||
function startHelp(e){
|
||||
pE(e);
|
||||
if(!HelpText) return false;
|
||||
oC = document.body.onclick;
|
||||
oM = document.body.onmouseover;
|
||||
oK = document.body.onkeydown;
|
||||
document.body.onkeydown = onkey;
|
||||
document.body.onclick = Help;
|
||||
document.body.onmouseover = checkobj;
|
||||
onkey(null, true); // remove old help tips
|
||||
}
|
||||
|
||||
function Help(e){
|
||||
pE(e);
|
||||
if(!helptip(e)) return;
|
||||
document.body.onclick = oC;
|
||||
document.body.onmouseover = oM;
|
||||
}
|
||||
|
||||
var oldclc, oldmout, oldcur;
|
||||
function checkobj(e){
|
||||
pE(e);
|
||||
var obj = e.target;
|
||||
if(obj == document.body) return;
|
||||
if(typeof(obj.helpText) == "undefined"){
|
||||
var ht = getHT(obj);
|
||||
obj.helpText = ht;
|
||||
}
|
||||
oldclc = obj.onclick;
|
||||
oldmout = obj.onmouseout;
|
||||
obj.onclick = Help;
|
||||
obj.onmouseout = releaseonclick;
|
||||
oldcur = obj.style.cursor;
|
||||
if(obj.helpText) obj.style.cursor = "help";
|
||||
}
|
||||
function releaseonclick(e){
|
||||
pE(e);
|
||||
var obj = e.target;
|
||||
obj.onmouseout = oldmout;
|
||||
obj.onclick = oldclc;
|
||||
if(oldcur) obj.style.cursor = oldcur;
|
||||
else obj.style.cursor = "";
|
||||
}
|
||||
function helptip(e){
|
||||
var ss = e.target.helpText, helper;
|
||||
releaseonclick(e);
|
||||
if(ss && ss.length > 0){
|
||||
tipobj = document.createElement("DIV");
|
||||
tipobj.id = 'helptip';
|
||||
tipobj.setAttribute("name", "helptip");
|
||||
tipobj.onclick = function(e){document.body.removeChild(e.target);};
|
||||
tipobj.innerHTML = ss;
|
||||
helper = document.createElement("DIV");
|
||||
helper.className = 'redtxt';
|
||||
helper.innerHTML = helpLabel;
|
||||
helper.onclick = function(evt){evt.stopPropagation();
|
||||
document.body.removeChild(evt.target.parentNode);};
|
||||
tipobj.appendChild(helper);
|
||||
document.body.appendChild(tipobj);
|
||||
positiontip(e);
|
||||
}else return 0;
|
||||
return (ss.length);
|
||||
}
|
||||
|
||||
function getHT(obj){
|
||||
var objid = obj.id, objname = obj.name;
|
||||
var ss="", nm;
|
||||
objid = obj.id; objname = obj.name;
|
||||
if(!objid && !objname) return null
|
||||
if(!objid && objname) nm = objname;
|
||||
else nm = objid;
|
||||
ss = HelpText[nm];
|
||||
return ss;
|
||||
}
|
||||
|
||||
function positiontip(e){
|
||||
var wd = tipobj.offsetWidth, ht = tipobj.offsetHeight;
|
||||
var curX = e.clientX + 25;
|
||||
var curY = e.clientY - ht/2;
|
||||
var btmedge = document.body.clientHeight - curY - 15;
|
||||
var rightedge = document.body.clientWidth - curX - 15;
|
||||
if(rightedge < wd) curX -= wd+50;
|
||||
if(btmedge < ht) curY -= ht-btmedge+15;
|
||||
if(curY < 15) curY = 15;
|
||||
tipobj.style.left = curX+"px";
|
||||
tipobj.style.top = curY+"px";
|
||||
}
|
||||
|
||||
function onkey(e, store){
|
||||
if(e && e.keyCode != 27) return;
|
||||
var helps = document.getElementsByName('helptip');
|
||||
var l = helps.length-1;
|
||||
for(var i=l; i>-1; i--) document.body.removeChild(helps[i]);
|
||||
if(!store){
|
||||
document.body.onkeydown = oK;
|
||||
document.body.onclick = oC;
|
||||
document.body.onmouseover = oM;
|
||||
}
|
||||
}
|
||||
|
||||
return{
|
||||
mkLabel: addLbl,
|
||||
callHelp: startHelp,
|
||||
init: initHelpText
|
||||
}
|
||||
}();
|
||||
1
datetime.readme
Normal file
1
datetime.readme
Normal file
@ -0,0 +1 @@
|
||||
insert date/time picker (calendar form)
|
||||
BIN
datetime/cal.jpg
Normal file
BIN
datetime/cal.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 488 B |
114
datetime/datetime.css
Normal file
114
datetime/datetime.css
Normal file
@ -0,0 +1,114 @@
|
||||
/* form with data & time */
|
||||
.datetime{
|
||||
width: 150px;
|
||||
}
|
||||
/* button showdate */
|
||||
.dpBtn{
|
||||
width: 22px;
|
||||
}
|
||||
/* input for time value */
|
||||
.dpTime{
|
||||
width: 80px;
|
||||
}
|
||||
/* the div that holds the date picker calendar */
|
||||
.dpDiv{
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
}
|
||||
/* the table (within the div) that holds the date picker calendar */
|
||||
.dpTable{
|
||||
font-family: Tahoma, Arial, Helvetica, sans-serif;
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
color: #505050;
|
||||
background: #ECF5F8;
|
||||
border: 0px;
|
||||
border-radius: 10px;
|
||||
width: 180px;
|
||||
}
|
||||
/* a table row that holds date numbers (either blank or 1-31) */
|
||||
.dpTR{
|
||||
}
|
||||
/* the top table row that holds the month, year, and forward/backward buttons */
|
||||
.dpTitleTR{
|
||||
}
|
||||
/* the second table row, that holds the names of days of the week (Mo, Tu, We, etc.) */
|
||||
.dpDayTR{
|
||||
}
|
||||
/* the bottom table row, that has the "This Month" and "Close" buttons */
|
||||
.dpTodayButtonTR{
|
||||
}
|
||||
/* a table cell that holds a date number (either blank or 1-31) */
|
||||
.dpTD{
|
||||
border: 0px;
|
||||
width: 25px;
|
||||
}
|
||||
/* a table cell that holds a highlighted day (usually either today's date or the current date field value) */
|
||||
.dpDayHighlightTD{
|
||||
border: 0px;
|
||||
background-color: #CCCCCC;
|
||||
}
|
||||
/*.dpDayHighlightTD:hover,*/
|
||||
.dpTD:hover,.dpDayHighlight:hover{
|
||||
font-style: oblique;
|
||||
background-color: #aca998;
|
||||
cursor: pointer;
|
||||
color: red;
|
||||
}
|
||||
/* the table cell that holds the name of the month and the year */
|
||||
.dpTitleTD{
|
||||
border: 0px;
|
||||
}
|
||||
/* the table cell that holds the time */
|
||||
.dpFullTitleTD{
|
||||
border: 0px;
|
||||
}
|
||||
/* a table cell that holds one of the forward/backward buttons */
|
||||
.dpButtonTD{
|
||||
border: 0px;
|
||||
}
|
||||
/* the table cell that holds the "This Month" or "Close" button at the bottom */
|
||||
.dpTodayButtonTD{
|
||||
border: 0px;
|
||||
}
|
||||
/* a table cell that holds the names of days of the week (Mo, Tu, We, etc.) */
|
||||
.dpDayTD{
|
||||
background-color: #CCCCCC;
|
||||
border: 0px;
|
||||
color: white;
|
||||
}
|
||||
/* additional style information for the text that indicates the month and year */
|
||||
.dpTitleText{
|
||||
font-size: 12px;
|
||||
color: gray;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
}
|
||||
/* additional style information for the cell that holds a highlighted day (usually either today's date or the current date field value) */
|
||||
.dpDayHighlight{
|
||||
color: 4060ff;
|
||||
font-weight: bold;
|
||||
}
|
||||
/* the forward/backward buttons at the top */
|
||||
.dpButton{
|
||||
font-family: Verdana, Tahoma, Arial, Helvetica, sans-serif;
|
||||
font-size: 6pt;
|
||||
background: #8FCADB;
|
||||
padding: 2px;
|
||||
width: 20pt;
|
||||
border: 0px solid #64A6B9;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
margin-bottom: 1px;
|
||||
}
|
||||
/* the "This Month" and "Close" buttons at the bottom */
|
||||
.dpTodayButton{
|
||||
font-family: Arial, Verdana, Tahoma, Helvetica, sans-serif;
|
||||
font-size: 10px;
|
||||
color: white;
|
||||
background: #8FCADB;
|
||||
font-weight: bold;
|
||||
border: 0px solid #64A6B9;
|
||||
padding: 1px 3px 1px 3px;
|
||||
margin-right: 3px;
|
||||
}
|
||||
372
datetime/datetime.js
Normal file
372
datetime/datetime.js
Normal file
@ -0,0 +1,372 @@
|
||||
/*
|
||||
* function DatePicker(targetDateFieldID, displayBelowThisObject, dtFormat,
|
||||
* dtSep, sundayfirst, dayArray, monthArray)
|
||||
* inits datepicker form
|
||||
* arguments:
|
||||
* targetDateFieldID - (required) ID of field bounded to datepicker
|
||||
* displayBelowThisObject - (opt) object below which datepicher will be placed
|
||||
* dtFormat - (opt) date format: "dmy", "ymd" or "mdy"
|
||||
* dtSep - (opt) separator of date fields
|
||||
* sundayfirst - (opt) bool == true if sunday is first in week
|
||||
* dayArray - (opt) array with daynames (on your language); format: SuMoTuWeThFrSa[Su]
|
||||
* monthArray - (opt) array with month names
|
||||
*
|
||||
* returns object with properties:
|
||||
* getDate - returns Date() object from targetDateFieldID
|
||||
* display - show/hide datepicker; return true if shown or false
|
||||
*
|
||||
* after closing if there is global function datePickerClosed, it will run
|
||||
*/
|
||||
|
||||
|
||||
/*
|
||||
var elementsCache = {};
|
||||
function $(id) {
|
||||
if (elementsCache[id] === undefined)
|
||||
elementsCache[id] = document.getElementById(id);
|
||||
return elementsCache[id];
|
||||
}
|
||||
*/
|
||||
|
||||
function DatePicker(targetDateFieldID, displayBelowThisObject, dtFormat,
|
||||
dtSep, sundayfirst, dayArray, monthArray){
|
||||
// if we weren't told what node to display the datepicker beneath, just display it
|
||||
// beneath the date field we're updating
|
||||
var targetDateField = $(targetDateFieldID);
|
||||
if(!targetDateField){
|
||||
alert("Undefined element with ID==\""+targetDateFieldID+"\"");
|
||||
return null;
|
||||
}
|
||||
if(!displayBelowThisObject)
|
||||
displayBelowThisObject = targetDateField;
|
||||
var x = displayBelowThisObject.offsetLeft;
|
||||
var y = displayBelowThisObject.offsetTop + displayBelowThisObject.offsetHeight ;
|
||||
// deal with elements inside tables and such
|
||||
var parent = displayBelowThisObject;
|
||||
while(parent.offsetParent){
|
||||
parent = parent.offsetParent;
|
||||
x += parent.offsetLeft;
|
||||
y += parent.offsetTop ;
|
||||
}
|
||||
_DatePicker.setDefVars(dtFormat, dtSep, sundayfirst, dayArray, monthArray);
|
||||
this.getDate = function(){return _DatePicker.parseUserString(targetDateFieldID);};
|
||||
this.display = function(){return _DatePicker.drawDatePicker(targetDateField, x, y)};
|
||||
return this;
|
||||
}
|
||||
|
||||
_DatePicker = function(){
|
||||
var sundayfirst = true; // whether a week starts from sunday
|
||||
var defaultDateSeparator = "/"; // common values would be "/" or "."
|
||||
var defaultDateFormat = "mdy" // valid values are "mdy", "dmy", and "ymd"
|
||||
var dateSeparator = defaultDateSeparator;
|
||||
var dateFormat = defaultDateFormat;
|
||||
|
||||
var datePickerDivID = "datepicker";
|
||||
|
||||
const AllowableSeparators = "./-"; // chars that could be separators
|
||||
|
||||
var dayArrayEn = new Array('Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su');
|
||||
var monthArrayEn = new Array('January', 'February', 'March', 'April', 'May', 'June', 'July',
|
||||
'August', 'September', 'October', 'November', 'December');
|
||||
|
||||
var dayArray = dayArrayEn, monthArray = monthArrayEn; // arrays with date and month
|
||||
|
||||
var timefieldValue = null; // value of datetime field
|
||||
var targetDateField = null; // target field for datepicker
|
||||
|
||||
function setDefVars(dtFormat, dtSep, sundayfrst, dayArr, monthArr){
|
||||
// if a date separator character was given, update the dateSeparator variable
|
||||
if(dtSep && dtSep.length == 1 && AllowableSeparators.indexOf(dtSep) != -1)
|
||||
dateSeparator = dtSep;
|
||||
else
|
||||
dateSeparator = defaultDateSeparator;
|
||||
// if a date format was given, update the dateFormat variable
|
||||
if(dtFormat)
|
||||
dateFormat = dtFormat;
|
||||
else
|
||||
dateFormat = defaultDateFormat;
|
||||
if(typeof(sundayfrst) != "undefined") sundayfirst = sundayfrst;
|
||||
else sundayfirst = true;
|
||||
if(dayArr && dayArr.length > 6){
|
||||
dayArray = dayArr;
|
||||
if(dayArr.length == 7) dayArray[7] = dayArr[0];
|
||||
}else
|
||||
dayArray = dayArrayEn;
|
||||
if(monthArr && monthArr.length == 12)
|
||||
monthArray = monthArr;
|
||||
else
|
||||
monthArray = monthArrayEn;
|
||||
}
|
||||
|
||||
function drawDatePicker(TDF, x, y){
|
||||
targetDateField = TDF;
|
||||
var dt = getFieldDate(targetDateField.value);
|
||||
// the datepicker table will be drawn inside of a <div> with an ID defined by the
|
||||
// global datePickerDivID variable. If such a div doesn't yet exist on the HTML
|
||||
// document we're working with, add one.
|
||||
if(!document.getElementById(datePickerDivID)){
|
||||
var newNode = document.createElement("div");
|
||||
newNode.setAttribute("id", datePickerDivID);
|
||||
newNode.setAttribute("class", "dpDiv");
|
||||
newNode.setAttribute("style", "visibility: hidden;");
|
||||
document.body.appendChild(newNode);
|
||||
}
|
||||
// move the datepicker div to the proper x,y coordinate and toggle the visiblity
|
||||
var pickerDiv = document.getElementById(datePickerDivID);
|
||||
pickerDiv.style.left = x + "px";
|
||||
pickerDiv.style.top = y + "px";
|
||||
pickerDiv.style.visibility = (pickerDiv.style.visibility == "visible" ? "hidden" : "visible");
|
||||
pickerDiv.style.display = (pickerDiv.style.display == "block" ? "none" : "block");
|
||||
// draw the datepicker table
|
||||
if(pickerDiv.style.display == "none") return false;
|
||||
else{
|
||||
refreshDatePicker(targetDateField, dt.getFullYear(), dt.getMonth(), dt.getDate());
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
// create element and put it into the DOM tree
|
||||
function creEl(Tag, Parent, Class, ID){
|
||||
var el = document.createElement(Tag);
|
||||
if(Class) el.className = Class;
|
||||
if(ID) el.id = ID;
|
||||
if(Parent){
|
||||
Parent.appendChild(el);
|
||||
el = Parent.lastElementChild;
|
||||
}
|
||||
return el;
|
||||
}
|
||||
// create a day in calendar
|
||||
function creTD(tr, cls, thisDay){
|
||||
var td = creEl("td", tr, cls);
|
||||
var DS = getDateString(thisDay);
|
||||
td.onclick = function(){updateDateField(targetDateField, DS);};
|
||||
return td;
|
||||
}
|
||||
// make string from time element
|
||||
function getTimeString(time){
|
||||
var hourString = "00" + time.getHours();
|
||||
var minuteString = "00" + time.getMinutes();
|
||||
hourString = hourString.substring(hourString.length - 2);
|
||||
minuteString = minuteString.substring(minuteString.length - 2);
|
||||
var timeString = hourString + ':' + minuteString;
|
||||
return timeString;
|
||||
}
|
||||
// create time field and fill it with current time
|
||||
function creTimeInput(parent){
|
||||
var sp = creEl("span", parent); sp.innerHTML = "time: ";
|
||||
var inp = creEl("input", parent, "dpTime", "dp_Time");
|
||||
if(!timefieldValue){
|
||||
var tm = new Date();
|
||||
timefieldValue = getTimeString(tm);
|
||||
}
|
||||
inp.value = timefieldValue;
|
||||
inp.type = "time";
|
||||
inp.onchange = function(){timefieldValue=this.value;};
|
||||
}
|
||||
/**
|
||||
This is the function that actually draws the datepicker calendar.
|
||||
*/
|
||||
function refreshDatePicker(targetDateField, year, month, day){
|
||||
/*
|
||||
Convenience function for writing the code for the buttons that bring us back or forward
|
||||
a month.
|
||||
*/
|
||||
function getButtonCode(parent, dateVal, adjust, label, title){
|
||||
var newMonth = (dateVal.getMonth () + adjust) % 12;
|
||||
var newYear = dateVal.getFullYear() + parseInt((dateVal.getMonth() + adjust) / 12);
|
||||
if(newMonth < 0){
|
||||
newMonth += 12;
|
||||
newYear += -1;
|
||||
}
|
||||
var btn = creEl("button", parent, "dpButton");
|
||||
btn.title = title; btn.innerHTML = label;
|
||||
btn.onclick = function(){refreshDatePicker(targetDateField, newYear, newMonth);};
|
||||
return btn;
|
||||
}
|
||||
// if no arguments are passed, use today's date; otherwise, month and year
|
||||
// are required (if a day is passed, it will be highlighted later)
|
||||
var thisDay;
|
||||
if ((month >= 0) && (year > 0)) {
|
||||
thisDay = new Date(year, month, 1);
|
||||
}else{
|
||||
thisDay = new Date()
|
||||
day = thisDay.getDate();
|
||||
thisDay.setDate(1);
|
||||
}
|
||||
var outer = document.getElementById(datePickerDivID);
|
||||
// clear old content
|
||||
if(outer.childNodes && outer.childNodes.length)
|
||||
for(i = outer.childNodes.length-1; i>-1; i--) outer.removeChild(outer.childNodes[i]);
|
||||
// the calendar will be drawn as a table
|
||||
// you can customize the table elements with a global CSS style sheet,
|
||||
// or by hardcoding style and formatting elements below
|
||||
var tbl = creEl("table", outer, "dpTable"); tbl.cols = 7;
|
||||
var tr = creEl("tr", tbl, "dpTitleTR");
|
||||
// here we add time input string
|
||||
var td = creEl("td", tr, "dpFullTitleTD"); td.colSpan = 7;
|
||||
creTimeInput(td);
|
||||
// this is the title bar, which displays the month and the buttons to
|
||||
// go back to a previous month or forward to the next month
|
||||
tr = creEl("tr", tbl, "dpTitleTR");
|
||||
td = creEl("td", tr, "dpButtonTD"); td.align = "center";
|
||||
getButtonCode(td, thisDay, -12, "<<","Previous year");
|
||||
creEl("br", td);
|
||||
getButtonCode(td, thisDay, -1, "<","Previous month");
|
||||
td = creEl("td", tr, "dpTitleTD"); td.colSpan = 5;
|
||||
var div = creEl("div", td, "dpTitleText");
|
||||
div.innerHTML = monthArray[ thisDay.getMonth()] + " " + thisDay.getFullYear();
|
||||
td = creEl("td", tr, "dpButtonTD"); td.align = "center";
|
||||
getButtonCode(td, thisDay, 12, ">>", "Next year");
|
||||
creEl("br", td);
|
||||
getButtonCode(td, thisDay, 1, ">","Next month");
|
||||
// this is the row that indicates which day of the week we're on
|
||||
tr = creEl("tr", tbl, "dpDayTR");
|
||||
var dDate = sundayfirst ? 0 : 1;
|
||||
for(i = 0; i < 7; i++){
|
||||
td = creEl("td", tr, "dpDayTD"); td.innerHTML = dayArray[i+dDate];
|
||||
}
|
||||
tr = creEl("tr", tbl, "dpTR");
|
||||
// first, the leading blanks
|
||||
if(sundayfirst)
|
||||
for (i = thisDay.getDay(); i > 0; i--)
|
||||
creEl("td", tr, "dpTD");
|
||||
else
|
||||
for (i = (thisDay.getDay()+6)%7; i > 0; i--)
|
||||
creEl("td", tr, "dpTD");
|
||||
// now, the days of the month
|
||||
do{
|
||||
dayNum = thisDay.getDate();
|
||||
var cls = (dayNum == day) ? "dpDayHighlightTD" : "dpTD";
|
||||
td = creTD(tr, cls, thisDay);
|
||||
var blk = td;
|
||||
if(dayNum == day)
|
||||
blk = creEl("div", td, "dpDayHighlight");
|
||||
blk.innerHTML = dayNum;
|
||||
// if this is a Saturday/Sunday, start a new row
|
||||
if(thisDay.getDay() == (sundayfirst ? 6 : 0))
|
||||
tr = creEl("tr", tbl, "dpTR");
|
||||
// increment the day
|
||||
thisDay.setDate(thisDay.getDate() + 1);
|
||||
}while (thisDay.getDate() > 1)
|
||||
// fill in any trailing blanks
|
||||
if(thisDay.getDay() != (sundayfirst ? 0 : 1)){
|
||||
if(sundayfirst)
|
||||
for (i = thisDay.getDay(); i < 6; i++)
|
||||
creEl("td", tr, "dpTD");
|
||||
else
|
||||
for (i = (thisDay.getDay()+6)%7; i < 6; i++)
|
||||
creEl("td", tr, "dpTD");
|
||||
}
|
||||
// add a button to allow the user to easily return to today, or close the calendar
|
||||
var today = new Date();
|
||||
tr = creEl("tr", tbl, "dpTodayButtonTR");
|
||||
td = creEl("td", tr, "dpTodayButtonTD"); td.colSpan = 3;
|
||||
var btn = creEl("button", td, "dpTodayButton"); btn.innerHTML = "Today";
|
||||
btn.onclick = function(){refreshDatePicker(targetDateField);};
|
||||
creEl("td", tr, "dpButtonTD");
|
||||
td = creEl("td", tr, "dpTodayButtonTD"); td.colSpan = 3;
|
||||
btn = creEl("button", td, "dpTodayButton"); btn.innerHTML = "Close";
|
||||
btn.onclick = function(){updateDateField(targetDateField);};
|
||||
}
|
||||
|
||||
/**
|
||||
Convert a JavaScript Date object to a string, based on the dateFormat and dateSeparator
|
||||
variables at the beginning of this script library.
|
||||
*/
|
||||
function getDateString(dateVal){
|
||||
var dayString = "00" + dateVal.getDate();
|
||||
var monthString = "00" + (dateVal.getMonth()+1);
|
||||
dayString = dayString.substring(dayString.length - 2);
|
||||
monthString = monthString.substring(monthString.length - 2);
|
||||
switch (dateFormat) {
|
||||
case "dmy" :
|
||||
return dayString + dateSeparator + monthString + dateSeparator + dateVal.getFullYear();
|
||||
case "ymd" :
|
||||
return dateVal.getFullYear() + dateSeparator + monthString + dateSeparator + dayString;
|
||||
case "mdy" :
|
||||
default :
|
||||
return monthString + dateSeparator + dayString + dateSeparator + dateVal.getFullYear();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
Convert a string to a JavaScript Date object.
|
||||
*/
|
||||
function getFieldDate(dateString){
|
||||
var dateVal;
|
||||
var dArray;
|
||||
var d, m, y;
|
||||
try{
|
||||
dArray = splitDateString(dateString);
|
||||
timefieldValue = dArray[2].split(" ")[1];
|
||||
if(dArray){
|
||||
switch(dateFormat){
|
||||
case "dmy" :
|
||||
d = parseInt(dArray[0], 10);
|
||||
m = parseInt(dArray[1], 10) - 1;
|
||||
y = parseInt(dArray[2], 10);
|
||||
break;
|
||||
case "ymd" :
|
||||
d = parseInt(dArray[2], 10);
|
||||
m = parseInt(dArray[1], 10) - 1;
|
||||
y = parseInt(dArray[0], 10);
|
||||
break;
|
||||
case "mdy" :
|
||||
default :
|
||||
d = parseInt(dArray[1], 10);
|
||||
m = parseInt(dArray[0], 10) - 1;
|
||||
y = parseInt(dArray[2], 10);
|
||||
break;
|
||||
}
|
||||
if(d > 31 || d < 1 || m > 12 || m < 1) throw "invalid";
|
||||
var th = timefieldValue.split(":");
|
||||
dateVal = new Date(y, m, d, th[0], th[1]);
|
||||
}else if(dateString){
|
||||
dateVal = new Date(dateString);
|
||||
} else {
|
||||
dateVal = new Date();
|
||||
}
|
||||
}catch(e){
|
||||
dateVal = new Date();
|
||||
timefieldValue = null;
|
||||
}
|
||||
return dateVal;
|
||||
}
|
||||
|
||||
function parseUserString(datefieldID){
|
||||
var form = $(datefieldID);
|
||||
if(!form || !form.value) return null;
|
||||
return getFieldDate(form.value);
|
||||
}
|
||||
|
||||
/**
|
||||
Try to split a date string into an array of elements, using common date separators.
|
||||
If the date is split, an array is returned; otherwise, we just return false.
|
||||
*/
|
||||
function splitDateString(dateString){
|
||||
var dArray;
|
||||
if (dateString.indexOf(dateSeparator) >= 0)
|
||||
dArray = dateString.split(dateSeparator);
|
||||
else
|
||||
dArray = false;
|
||||
return dArray;
|
||||
}
|
||||
|
||||
function updateDateField(targetDateField, dateString){
|
||||
if(dateString)
|
||||
targetDateField.value = dateString + " " + timefieldValue;
|
||||
var pickerDiv = document.getElementById(datePickerDivID);
|
||||
pickerDiv.style.visibility = "hidden";
|
||||
pickerDiv.style.display = "none";
|
||||
targetDateField.focus();
|
||||
if((dateString) && (typeof(datePickerClosed) == "function"))
|
||||
datePickerClosed(targetDateField);
|
||||
}
|
||||
|
||||
return{
|
||||
drawDatePicker: drawDatePicker,
|
||||
setDefVars: setDefVars,
|
||||
parseUserString:parseUserString
|
||||
};
|
||||
}();
|
||||
3
dragJS.readme
Normal file
3
dragJS.readme
Normal file
@ -0,0 +1,3 @@
|
||||
Drag and resize div with javascript
|
||||
|
||||
// no html5 dragging beacause of its stub
|
||||
8
dragJS/dragJS.css
Normal file
8
dragJS/dragJS.css
Normal file
@ -0,0 +1,8 @@
|
||||
/* drag/resize container */
|
||||
.drag{border:5px solid; width:200px; height:100px; position:fixed; top:100px; left:100px; cursor:move; z-index:20;}
|
||||
/* inner container (DRdiv object) */
|
||||
.indrag{width:100%; height:100%; position:absolute; top:0px; left:0px; z-index:0; background:lightgray;}
|
||||
/* resize borders */
|
||||
.resz{border:none; position:absolute; opacity:0.5; width:100%; height:100%;}
|
||||
.resz:hover{border:1px dotted; background:gray;}
|
||||
|
||||
197
dragJS/dragJS.js
Normal file
197
dragJS/dragJS.js
Normal file
@ -0,0 +1,197 @@
|
||||
/*
|
||||
* function DRdiv(insideHTML)
|
||||
* creates draggable and resizible div
|
||||
* arguments:
|
||||
* insideHTML - optional, data inside created div
|
||||
* returns div element avaiable for user's manipulations
|
||||
* returned object has following attributes:
|
||||
* place: set element's position
|
||||
* resize: set element's size
|
||||
* delete: remove element from DOM tree
|
||||
*/
|
||||
|
||||
function DRdiv(insideHTML){
|
||||
var el = _DRdiv.init(insideHTML);
|
||||
el.place = _DRdiv.setp;
|
||||
el.resize = _DRdiv.resize;
|
||||
el.delete = function(){this.parentNode.parentNode.removeChild(this.parentNode)};
|
||||
return el;
|
||||
}
|
||||
|
||||
_DRdiv = function(){
|
||||
/*
|
||||
var elementsCache = {};
|
||||
function $(id) {
|
||||
if (elementsCache[id] === undefined)
|
||||
elementsCache[id] = document.getElementById(id);
|
||||
return elementsCache[id];
|
||||
}
|
||||
*/
|
||||
/*
|
||||
* BASE CONSTANTS
|
||||
*/
|
||||
// main div extremal size:
|
||||
const minW = 100, minH = 100, maxW = 700, maxH = 400;
|
||||
// size of "resize" div
|
||||
const resHW = "30px";
|
||||
function mkDiv(insideHTML){
|
||||
var L = ["top" , "width" , "left" , "w", resL];
|
||||
var R = ["top" , "width" , "right" , "e", resR];
|
||||
var U = ["left", "height", "top" , "n", resU];
|
||||
var D = ["left", "height", "bottom", "s", resD];
|
||||
var borders =[[L, null], [R, null], [U, null], [D, null],
|
||||
[U, L], [U, R], [D, R], [D, L]];
|
||||
var d = document.createElement("div");
|
||||
d.className = "drag";
|
||||
d.id = "Big";
|
||||
d.onmousedown = ds;
|
||||
var _cursor = "";
|
||||
function setstyle(el, stl){
|
||||
el.style[stl[1]] = resHW;
|
||||
el.style[stl[2]] = "0px";
|
||||
_cursor += stl[3];
|
||||
el.resizefn.push(stl[4]);
|
||||
}
|
||||
var inside = document.createElement("div");
|
||||
inside.id = "indrag";
|
||||
inside.className = "indrag";
|
||||
if(insideHTML) inside.innerHTML = insideHTML;
|
||||
d.appendChild(inside);
|
||||
for(var i = 0; i < 8; i++){
|
||||
var el = document.createElement("div");
|
||||
el.className = "resz";
|
||||
el.resizefn = new Array();
|
||||
setstyle(el, borders[i][0]);
|
||||
var zi = 20;
|
||||
if(borders[i][1]) setstyle(el, borders[i][1]);
|
||||
else{ zi = 19; el.style[borders[i][0][0]] = "0px"; el.resizefn.push(null);}
|
||||
el.style.cursor = _cursor + "-resize";
|
||||
_cursor = "";
|
||||
el.onmousedown = rs;
|
||||
d.appendChild(el);
|
||||
}
|
||||
document.body.appendChild(d);
|
||||
return inside;
|
||||
}
|
||||
function getPosition(el) {
|
||||
var left = 0, top = 0;
|
||||
while(el){
|
||||
left += el.offsetLeft;
|
||||
top += el.offsetTop;
|
||||
el = el.parentOffset;
|
||||
}
|
||||
return {left: left, top: top};
|
||||
}
|
||||
function getStyleProp(el, prop){
|
||||
var p = window.getComputedStyle(el, null).getPropertyValue(prop);
|
||||
return parseInt(p);
|
||||
}
|
||||
function pE(e){
|
||||
if(e.preventDefault) e.preventDefault();
|
||||
if(e.stopPropagation) e.stopPropagation();
|
||||
}
|
||||
var maxX, maxY, X, Y;;
|
||||
var oldmove, oldup;
|
||||
var activeEl;
|
||||
var moving = false;
|
||||
function ds(e){
|
||||
activeEl = this;
|
||||
setProps(e, dro);
|
||||
}
|
||||
function setProps(e, onmove){
|
||||
pE(e);
|
||||
moving = true;
|
||||
oldmove = window.onmousemove;
|
||||
oldup = window.onmouseup;
|
||||
window.onmousemove = onmove;
|
||||
window.onmouseup = de;
|
||||
var pos = getPosition(activeEl);
|
||||
X = pos.left - e.clientX - getStyleProp(activeEl, "margin-left");
|
||||
Y = pos.top - e.clientY - getStyleProp(activeEl, "margin-top");
|
||||
maxX = window.innerWidth - (activeEl.offsetWidth + getStyleProp(activeEl, "margin-right"));
|
||||
maxY = window.innerHeight - (activeEl.offsetHeight + getStyleProp(activeEl, "margin-bottom"));
|
||||
}
|
||||
var oW, oH, oX, oY;
|
||||
var resizeF;
|
||||
function rs(e){
|
||||
activeEl = this.parentElement;
|
||||
setProps(e, res);
|
||||
resizeF = this.resizefn;
|
||||
oX = e.clientX; oY = e.clientY;
|
||||
oW = activeEl.clientWidth;
|
||||
oH = activeEl.clientHeight;
|
||||
}
|
||||
function dro(e){
|
||||
if(!moving) return true;
|
||||
pE(e);
|
||||
var L = X + e.clientX;
|
||||
var T = Y + e.clientY;
|
||||
if(L < 0) L = 0; if(T < 0) T = 0;
|
||||
if(L > maxX) L = maxX; if(T > maxY) T = maxY;
|
||||
activeEl.style.left = L + "px";
|
||||
activeEl.style.top = T + "px";
|
||||
return false;
|
||||
}
|
||||
function res(e){
|
||||
if(!moving) return true;
|
||||
pE(e);
|
||||
resizeF[0](e);
|
||||
if(resizeF[1]) resizeF[1](e);
|
||||
return false;
|
||||
}
|
||||
function resLR(e, Left){
|
||||
var L = X + e.clientX;
|
||||
if(Left && L < 0) L = 0;
|
||||
if(!Left && L > maxX) L = maxX;
|
||||
var dW = (L - X - oX) * ((Left) ? -1 : 1);
|
||||
var nW = oW + dW;
|
||||
if(nW > minW && nW < maxW){
|
||||
activeEl.style.width = nW;
|
||||
if(Left) activeEl.style.left = L + "px";
|
||||
}
|
||||
}
|
||||
function resL(e){
|
||||
resLR(e, true);
|
||||
}
|
||||
function resR(e){
|
||||
resLR(e, false);
|
||||
}
|
||||
function resUD(e, Up){
|
||||
var T = Y + e.clientY;
|
||||
if(Up && T < 0) T = 0;
|
||||
if(!Up && T > maxY) T = maxY;
|
||||
var dH = (T - Y - oY) * ((Up) ? -1 : 1);
|
||||
var nH = oH + dH;
|
||||
if(nH > minH && nH < maxH){
|
||||
activeEl.style.height = nH;
|
||||
if(Up) activeEl.style.top = T + "px";
|
||||
}
|
||||
}
|
||||
function resU(e){
|
||||
resUD(e, true);
|
||||
}
|
||||
function resD(e){
|
||||
resUD(e, false);
|
||||
}
|
||||
function de(e){
|
||||
pE(e); moving = false;
|
||||
resizeF = []; activeEl = null;
|
||||
window.onmousemove = oldmove;
|
||||
window.onmouseup = oldup;
|
||||
}
|
||||
function placeDiv(left, top){
|
||||
var El = this.parentElement;
|
||||
El.style.left = left + "px";
|
||||
El.style.top = top + "px";
|
||||
}
|
||||
function resizeDiv(w, h){
|
||||
var El = this.parentElement;
|
||||
El.style.width = w;
|
||||
El.style.height = h;
|
||||
}
|
||||
return{
|
||||
init: mkDiv,
|
||||
setp: placeDiv,
|
||||
resize: resizeDiv
|
||||
};
|
||||
}();
|
||||
91
index.html
Normal file
91
index.html
Normal file
@ -0,0 +1,91 @@
|
||||
<html>
|
||||
<head><title>Different usefull small scripts</title>
|
||||
<meta http-equiv="content-type" content="text/html; charset=koi8-r">
|
||||
<!-- Drag and resize -->
|
||||
<script src="dragJS/dragJS.js"></script>
|
||||
<link rel="stylesheet" href="dragJS/dragJS.css">
|
||||
<!-- Date/time -->
|
||||
<script src="datetime/datetime.js"></script>
|
||||
<link rel="stylesheet" href="datetime/datetime.css">
|
||||
<!-- Context help -->
|
||||
<script src="contexthelp/contexthelp.js"></script>
|
||||
<link rel="stylesheet" href="contexthelp/contexthelp.css">
|
||||
|
||||
<script>
|
||||
var elementsCache = {};
|
||||
function $(id) {
|
||||
if (elementsCache[id] === undefined)
|
||||
elementsCache[id] = document.getElementById(id);
|
||||
return elementsCache[id];
|
||||
}
|
||||
function start(){
|
||||
// dragJS
|
||||
addDR();
|
||||
// datetime
|
||||
initDatePicker("datetime");
|
||||
// contexthelp
|
||||
initContextHelp();
|
||||
}
|
||||
// Example of dragJS usage --->
|
||||
var dragged;
|
||||
function addDR(){
|
||||
dragged = DRdiv("Drag me and resize me!");
|
||||
dragged.id = "DRdiv";
|
||||
dragged.place(300,300);
|
||||
dragged.resize(250,250);
|
||||
var rdr = $("rmDR");
|
||||
rdr.innerHTML = "remove DR";
|
||||
rdr.onclick = rm;
|
||||
}
|
||||
function rm(){
|
||||
dragged.delete();
|
||||
var rdr = $("rmDR");
|
||||
rdr.innerHTML = "add DR";
|
||||
rdr.onclick = addDR;
|
||||
}
|
||||
// <--- Example of dragJS usage
|
||||
|
||||
// Example of datetime usage --->
|
||||
var datepicker = null;
|
||||
function initDatePicker(elID){
|
||||
var days = ["÷Ó", "ðÎ", "÷Ô", "óÒ", "þÔ", "ðÔ", "óÂ"];
|
||||
var months=["ñÎ×ÁÒØ", "æÅ×ÒÁÌØ", "íÁÒÔ", "áÐÒÅÌØ", "íÁÊ", "éÀÎØ", "éÀÌØ",
|
||||
"á×ÇÕÓÔ", "óÅÎÔÑÂÒØ", "ïËÔÑÂÒØ", "îÏÑÂÒØ", "äÅËÁÂÒØ"];
|
||||
datepicker = new DatePicker(elID, false, "dmy", ".", false, days, months);
|
||||
}
|
||||
function datetime(){
|
||||
datepicker.display();
|
||||
}
|
||||
function show_dt(){
|
||||
if(!datepicker) return;
|
||||
var D = datepicker.getDate();
|
||||
if(!D) return;
|
||||
alert(D.toLocaleString());
|
||||
}
|
||||
// <--- Example of datetime usage
|
||||
|
||||
// Example of contexthelp usage --->
|
||||
var helptip;
|
||||
function initContextHelp(){
|
||||
const helpArr = {
|
||||
DRdiv: "This is a draggable and resizible div",
|
||||
rmDR: "Press this to remove or create draggable and resizible div.<br> Try it!",
|
||||
datetime: "This is a sample datetime field.<br>You can try to select date and time by clicking on image: <img src='datetime/cal.jpg'.",
|
||||
dtimg: "Click this image to call date/time picker.",
|
||||
showdt: "Click it for alert with date object from field to the left."
|
||||
};
|
||||
const helpLbl = "Click me or press ESC<br>îÁÖÍÉ ÖÅ ÎÁ ÍÅÎÑ (ÉÌÉ ÈÏÔÑ ÂÙ ÎÁ ESC)!";
|
||||
helptip = new ContextHelp();
|
||||
helptip.init(helpArr, helpLbl);
|
||||
helptip.mkLabel("Press 4 help");
|
||||
}
|
||||
|
||||
// <--- Example of contexthelp usage
|
||||
</script>
|
||||
</head>
|
||||
<body onload="start();">
|
||||
<span id="rmDR"></span><br>
|
||||
Place date/time here: <input name='datetime' class='datetime' id='datetime' type="datetime">
|
||||
<img onclick='datetime("datetime");' class='dpBtn' src='datetime/cal.jpg' name='cal' id='dtimg'>
|
||||
<span onclick="show_dt();" id="showdt">Show date</span><br>
|
||||
</body></html>
|
||||
Loading…
x
Reference in New Issue
Block a user