Skip to content
Browse files

Added example03/docs directory and script.js modification.

  • Loading branch information...
1 parent 3326439 commit 94860dbc843d2d562da7779a3fe28d5e6065a580 @dbunic committed Jan 25, 2013
Showing with 258 additions and 1 deletion.
  1. +5 −1 example03/{ → docs}/readme.txt
  2. +253 −0 example03/docs/script.js
View
6 example03/readme.txt → example03/docs/readme.txt
@@ -1,6 +1,6 @@
Darko Bunic
http://www.redips.net/javascript/drag-and-drop-example-3/
-Aug, 2011.
+Jan, 2013.
This example shows how to arrange timetable and save table content to the MySQL database.
Database communication is written inside config.php which is included in index.php and db_save.php
@@ -14,4 +14,8 @@ Before start using this demo you should:
After these steps are finished, empty timetable should appear and you can start drag school subjects.
+If you replace script.js with docs/script.js then it will not be possible to have two same school subjects (lessons) in a column.
+See checkColumn() function and where is called.
+
+
Happy dragging and dropping!
View
253 example03/docs/script.js
@@ -0,0 +1,253 @@
+/*jslint white: true, browser: true, undef: true, nomen: true, eqeqeq: true, plusplus: false, bitwise: true, regexp: true, strict: true, newcap: true, immed: true, maxerr: 14 */
+/*global window: false, REDIPS: true */
+
+/* enable strict mode */
+"use strict";
+
+/*
+
+Modification of original script.js
+This code doesn't allow two same lessons in timetable.
+See checkColumn() function and where is called.
+
+*/
+
+var redipsInit, // define redipsInit variable
+ save, // save elements and their positions
+ report, // function shows subject occurring in timetable
+ reportButton, // show/hide report buttons
+ showAll, // function show all subjects in timetable
+ printMessage, // print message
+ divNodeList, // node list of DIV elements in table2 (global variable needed in report() and visibility() function)
+ checkColumn, // check column for the same subjects (lessons)
+ clonedFlag; // (boolean) true if DIV element is cloned (from left table or with shift key)
+
+
+// redips initialization
+redipsInit = function () {
+ var rd = REDIPS.drag; // reference to the REDIPS.drag object
+ // initialization
+ rd.init();
+ // REDIPS.drag settings
+ rd.dropMode = 'single'; // dragged elements can be placed only to the empty cells
+ rd.hover.colorTd = '#9BB3DA'; // set hover color
+ rd.clone.keyDiv = true; // enable cloning DIV elements with pressed SHIFT key
+ // prepare node list of DIV elements in table2
+ divNodeList = document.getElementById('table2').getElementsByTagName('div');
+ // show / hide report buttons (needed for dynamic version - with index.php)
+ reportButton();
+ // set cloned flag (needed im checkColumn() function)
+ rd.event.moved = function (cloned) {
+ clonedFlag = cloned;
+ };
+ // prevent two subjects in the same column
+ rd.event.droppedBefore = function (targetCell) {
+ // call checkColumn and return result (true or false)
+ // in case of false, REDIPS.drag will cancel DIV dropping
+ var column = checkColumn(rd.obj, targetCell);
+ // return true / false
+ return column;
+ };
+ // element is dropped
+ rd.event.dropped = function () {
+ var objOld = rd.objOld, // original object
+ targetCell = rd.td.target, // target cell
+ targetRow = targetCell.parentNode, // target row
+ i, objNew; // local variables
+ // if checkbox is checked and original element is of clone type then clone spread subjects to the week
+ if (document.getElementById('week').checked === true && objOld.className.indexOf('clone') > -1) {
+ // loop through table cells
+ for (i = 0; i < targetRow.cells.length; i++) {
+ // skip cell if cell has some content (first column is not empty because it contains label)
+ if (targetRow.cells[i].childNodes.length > 0) {
+ continue;
+ }
+ // skip cell if the same lesson aready exists in column
+ else if (!checkColumn(rd.obj, targetRow.cells[i])) {
+ continue;
+ }
+ // clone DIV element
+ objNew = rd.cloneObject(objOld);
+ // append to the table cell
+ targetRow.cells[i].appendChild(objNew);
+ }
+ }
+ // print message only if target and source table cell differ
+ if (rd.td.target !== rd.td.source) {
+ printMessage('Content has been changed!');
+ }
+ // show / hide report buttons
+ reportButton();
+ };
+ // after element is deleted from the timetable, print message
+ rd.event.deleted = function () {
+ printMessage('Content has been deleted!');
+ // show / hide report buttons
+ reportButton();
+ };
+ // if any element is clicked, then make all subjects in timetable visible
+ rd.event.clicked = function () {
+ showAll();
+ };
+};
+
+
+// save elements and their positions
+save = function () {
+ // scan timetable content
+ var content = REDIPS.drag.saveContent('table2');
+ // and save content
+ window.location.href = 'db_save.php?' + content;
+};
+
+
+// function shows subject occurring in timetable
+report = function (subject) {
+ // define day and time labels
+ var day = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
+ time = ['08:00', '09:00', '10:00', '11:00', '12:00',
+ '13:00', '14:00', '15:00', '16:00'],
+ div = [], // define array
+ cellIndex, // cell index
+ rowIndex, // row index
+ id, // element id
+ i, // loop variable
+ num = 0, // number of found subject
+ str = ''; // result string
+ // show all elements
+ showAll();
+ // create array from node list (node list is global variable)
+ for (i = 0; i < divNodeList.length; i++) {
+ div[i] = divNodeList[i];
+ }
+ // sort div elements by the cellIndex (days in week) and rowIndex (hours)
+ div.sort(function (a, b) {
+ var a_ci = a.parentNode.cellIndex, // a element cell index
+ a_ri = a.parentNode.parentNode.rowIndex, // a element row index
+ b_ci = b.parentNode.cellIndex, // b element cell index
+ b_ri = b.parentNode.parentNode.rowIndex; // b element row index
+ return a_ci * 100 + a_ri - (b_ci * 100 + b_ri);
+ });
+ // loop goes through all collected elements
+ for (i = 0; i < div.length; i++) {
+ // define only first two letters of ID
+ // (cloned elements have appended c1, c2, c3 ...)
+ id = div[i].id.substr(0, 2);
+ // if id is equal to the passed subject then we have a match
+ if (id === subject) {
+ // define cell index
+ cellIndex = div[i].parentNode.cellIndex;
+ // table row is parent element of table cell
+ rowIndex = div[i].parentNode.parentNode.rowIndex;
+ // add line with found element
+ str += day[cellIndex - 1] + '\t\t' + time[rowIndex - 1] + '\n';
+ // increase counter
+ num++;
+ }
+ // other elements should be hidden
+ else {
+ div[i].style.visibility = 'hidden';
+ }
+ }
+ // if "Show report" is checked then show message
+ if (document.getElementById('report').checked === true) {
+ alert('Number of found subjects: ' + num + '\n' + str);
+ }
+};
+
+
+// show/hide report buttons
+reportButton = function () {
+ var id, // element id
+ i, // loop variable
+ count, // number of subjects in timetable
+ style, // hidden or visible
+ // prepare subjects
+ subject = {'en': 0, 'ph': 0, 'ma': 0, 'bi': 0, 'ch': 0, 'it': 0, 'ar': 0, 'hi': 0, 'et': 0};
+ // loop goes through all collected elements
+ for (i = 0; i < divNodeList.length; i++) {
+ // define only first two letters of ID
+ // (cloned elements have appended c1, c2, c3 ...)
+ id = divNodeList[i].id.substr(0, 2);
+ // increase subject occurring
+ subject[id]++;
+ }
+ // loop through subjects
+ for (i in subject) {
+ // using the hasOwnProperty method to distinguish the true members of the object
+ if (subject.hasOwnProperty(i)) {
+ // prepare id of the report button
+ id = 'b_' + i;
+ // subject count on the timetable
+ count = subject[i];
+ if (count === 0) {
+ style = 'hidden';
+ }
+ else {
+ style = 'visible';
+ }
+ // hide or show report button
+ document.getElementById(id).style.visibility = style;
+ }
+ }
+};
+
+
+// check column for the same school subjects (lessons)
+checkColumn = function (obj, targetCell) {
+ // define reference to the REDIPS.drag library
+ var rd = REDIPS.drag,
+ // ID of dropped DIV element (only first two chars)
+ id = obj.id.substr(0, 2),
+ // reference to the target table
+ tbl = rd.findParent('TABLE', targetCell),
+ // set column where DIV element is dropped
+ col = targetCell.cellIndex,
+ // local variables
+ subject, cell, i;
+ // loop goes through all rows in target table
+ for (i = 0; i < tbl.rows.length; i++) {
+ // define cell in a target column
+ cell = tbl.rows[i].cells[col];
+ // cell can be undefined in case of colspan (lunch row)
+ if (cell !== undefined) {
+ // skip target cell if is the same as source cell
+ // DIV belongs to source cell in droppedBefore stage
+ if (clonedFlag === false && cell === rd.td.source) {
+ continue;
+ }
+ // each cell can have only one subject
+ subject = cell.getElementsByTagName('div')[0];
+ // if subject exists and is the same as dropped DIV element
+ if (subject !== undefined && id === subject.id.substr(0, 2)) {
+ return false;
+ }
+ }
+ }
+ // if column is clear then return true
+ return true;
+};
+
+
+// print message
+printMessage = function (message) {
+ document.getElementById('message').innerHTML = message;
+};
+
+
+// function show all subjects in timetable
+showAll = function () {
+ var i; // loop variable
+ for (i = 0; i < divNodeList.length; i++) {
+ divNodeList[i].style.visibility = 'visible';
+ }
+};
+
+
+// add onload event listener
+if (window.addEventListener) {
+ window.addEventListener('load', redipsInit, false);
+}
+else if (window.attachEvent) {
+ window.attachEvent('onload', redipsInit);
+}

0 comments on commit 94860db

Please sign in to comment.
Something went wrong with that request. Please try again.