From 19d24d4b274cb7df9355bc058807933443adf341 Mon Sep 17 00:00:00 2001 From: eddyem Date: Thu, 23 Jul 2015 12:34:40 +0300 Subject: [PATCH] init on github --- .gitignore | 3 + .hgignore | 5 + Readme.md | 3 + contexthelp.readme | 1 + contexthelp/contexthelp.css | 25 +++ contexthelp/contexthelp.js | 161 ++++++++++++++++ datetime.readme | 1 + datetime/cal.jpg | Bin 0 -> 488 bytes datetime/datetime.css | 114 +++++++++++ datetime/datetime.js | 372 ++++++++++++++++++++++++++++++++++++ dragJS.readme | 3 + dragJS/dragJS.css | 8 + dragJS/dragJS.js | 197 +++++++++++++++++++ index.html | 91 +++++++++ 14 files changed, 984 insertions(+) create mode 100644 .gitignore create mode 100644 .hgignore create mode 100644 Readme.md create mode 100644 contexthelp.readme create mode 100644 contexthelp/contexthelp.css create mode 100644 contexthelp/contexthelp.js create mode 100644 datetime.readme create mode 100644 datetime/cal.jpg create mode 100644 datetime/datetime.css create mode 100644 datetime/datetime.js create mode 100644 dragJS.readme create mode 100644 dragJS/dragJS.css create mode 100644 dragJS/dragJS.js create mode 100644 index.html diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..47eaad6 --- /dev/null +++ b/.gitignore @@ -0,0 +1,3 @@ +*.hg +.hgignore +.dropbox.attr diff --git a/.hgignore b/.hgignore new file mode 100644 index 0000000..07dea0c --- /dev/null +++ b/.hgignore @@ -0,0 +1,5 @@ +syntax: glob +.git* +*~ +*.bak +.dropbox.attr diff --git a/Readme.md b/Readme.md new file mode 100644 index 0000000..4528dae --- /dev/null +++ b/Readme.md @@ -0,0 +1,3 @@ +### JS snippets + +Some my snippets in javascript diff --git a/contexthelp.readme b/contexthelp.readme new file mode 100644 index 0000000..b794065 --- /dev/null +++ b/contexthelp.readme @@ -0,0 +1 @@ +Add context help to your web page. It is usefull if standard "title" is not enough for you diff --git a/contexthelp/contexthelp.css b/contexthelp/contexthelp.css new file mode 100644 index 0000000..a60d856 --- /dev/null +++ b/contexthelp/contexthelp.css @@ -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{ +} diff --git a/contexthelp/contexthelp.js b/contexthelp/contexthelp.js new file mode 100644 index 0000000..27afa91 --- /dev/null +++ b/contexthelp/contexthelp.js @@ -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 +} +}(); diff --git a/datetime.readme b/datetime.readme new file mode 100644 index 0000000..d20ebfa --- /dev/null +++ b/datetime.readme @@ -0,0 +1 @@ +insert date/time picker (calendar form) diff --git a/datetime/cal.jpg b/datetime/cal.jpg new file mode 100644 index 0000000000000000000000000000000000000000..2df6fe7c32a909ec91f415fa9f2ea9ffb1940a19 GIT binary patch literal 488 zcmex=nz{58F|#lT35qBx8M3ko8<|dYOe|Ws5vWuQ-3SI|7Leicf((qTAOr`D3{1>|hAcwD zg&RNozs11A3=|M#7G$tz_`)b=G&@y$CX3M7S6V4T9NV3D&-Fj*SH@zxlq=?k@4fRA z=Ippta{JZqf2(%Ph&uJy&Punvb*bFM&2#Vksm&@{x@XO%S+5FjYjm!CGc|#CPWQ20 zp?_~S=k8jbt*p2F`MogvU6H+9GT|3hr`z0+j!wJnDDjDNY4JYMe2144KRaHykgI6+ v@DRt5SDAj6#SJ>Y99|^9GVM0Kv+twwC;MA7y+Y0&nD8oS%G!wi|8D{SxzCF! literal 0 HcmV?d00001 diff --git a/datetime/datetime.css b/datetime/datetime.css new file mode 100644 index 0000000..4fff0e4 --- /dev/null +++ b/datetime/datetime.css @@ -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; +} diff --git a/datetime/datetime.js b/datetime/datetime.js new file mode 100644 index 0000000..6635be0 --- /dev/null +++ b/datetime/datetime.js @@ -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
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 +}; +}(); diff --git a/dragJS.readme b/dragJS.readme new file mode 100644 index 0000000..7437ce6 --- /dev/null +++ b/dragJS.readme @@ -0,0 +1,3 @@ +Drag and resize div with javascript + +// no html5 dragging beacause of its stub diff --git a/dragJS/dragJS.css b/dragJS/dragJS.css new file mode 100644 index 0000000..32d8ed3 --- /dev/null +++ b/dragJS/dragJS.css @@ -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;} + diff --git a/dragJS/dragJS.js b/dragJS/dragJS.js new file mode 100644 index 0000000..4364e51 --- /dev/null +++ b/dragJS/dragJS.js @@ -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 +}; +}(); diff --git a/index.html b/index.html new file mode 100644 index 0000000..2ecf21d --- /dev/null +++ b/index.html @@ -0,0 +1,91 @@ + +Different usefull small scripts + + + + + + + + + + + + + + +
+Place date/time here: + +Show date
+