diff --git a/classes/Form/class.ilInteractiveVideoTimePicker.php b/classes/Form/class.ilInteractiveVideoTimePicker.php new file mode 100644 index 00000000..1e1ce4fa --- /dev/null +++ b/classes/Form/class.ilInteractiveVideoTimePicker.php @@ -0,0 +1,158 @@ +setTitle($a_title); + $this->setId($a_id); + $this->setType("interactive_video_time_picker"); + } + + /** + * @return bool + */ + public function checkInput() + { + if(!is_array($_POST[$this->getPostVar()])) + { + $_POST[$this->getPostVar()] = $this->getSecondsFromString(ilUtil::stripSlashes($_POST[$this->getPostVar()])); + } + return $this->checkSubItemsInput(); + } + + /** + * @param $a_value + */ + public function setValue($a_value) + { + $this->value = $a_value; + } + + /** + * @return string + */ + public function getValue() + { + return $this->value; + } + + /** + * @return string + */ + public function getId() + { + return $this->id; + } + + /** + * @param string $id + */ + public function setId($id) + { + $this->id = $id; + } + + protected function appendJavascriptAndHTML() + { + /** + * @var ilTemplate $tpl + */ + global $tpl; + + $tpl->addCss('Customizing/global/plugins/Services/Repository/RepositoryObject/InteractiveVideo/libs/bootstrap-timepicker/css/bootstrap-timepicker.css'); + $tpl->addJavaScript('Customizing/global/plugins/Services/Repository/RepositoryObject/InteractiveVideo/libs/bootstrap-timepicker/js/bootstrap-timepicker.min.js'); + } + + /** + * @return string + */ + public function render() + { + $this->appendJavascriptAndHTML(); + $my_tpl = new ilTemplate('tpl.time_picker.html', true, true, 'Customizing/global/plugins/Services/Repository/RepositoryObject/InteractiveVideo/'); + $value = $this->getValue(); + $my_tpl->setVariable("VALUE", $this->getTimeStringFromSeconds($value)); + $my_tpl->setVariable("ID", $this->getId()); + + return $my_tpl->get(); + } + + /** + * @param ilTemplate $a_tpl + */ + public function insert($a_tpl) + { + $a_tpl->setCurrentBlock("prop_generic"); + $a_tpl->setVariable("PROP_GENERIC", $this->render()); + $a_tpl->parseCurrentBlock(); + } + + /** + * @param $a_values + */ + public function setValueByArray($a_values) + { + if ($this->getPostVar() && isset($a_values[$this->getPostVar()])) + { + $this->setValue($a_values[$this->getPostVar()]); + } + foreach($this->getSubItems() as $item) + { + $item->setValueByArray($a_values); + } + } + + /** + * @param string $comment_time + * @return int + */ + public static function getSecondsFromString($comment_time) + { + $seconds = 0; + $comment_time = preg_split('/:/', $comment_time); + if(sizeof($comment_time) == 3) + { + $seconds = ((int)$comment_time[0] * 3600) + ((int)$comment_time[1] * 60) + (int)$comment_time[2]; + } + return $seconds; + } + + /** + * @param $seconds + * @return false|string + */ + public static function getTimeStringFromSeconds($seconds) + { + return gmdate('H:i:s', $seconds); + } +} \ No newline at end of file diff --git a/classes/Form/class.ilTextAreaInputCkeditorGUI.php b/classes/Form/class.ilTextAreaInputCkeditorGUI.php index 8f33721d..674b119c 100644 --- a/classes/Form/class.ilTextAreaInputCkeditorGUI.php +++ b/classes/Form/class.ilTextAreaInputCkeditorGUI.php @@ -21,7 +21,7 @@ public function __construct($a_title = "", $a_postvar = "") /** * Insert property html */ - function insert(&$a_tpl) + public function insert($a_tpl) { $this->appendJavascriptFile(); $ttpl = new ilTemplate("tpl.textarea_ckeditor.html", true, true, "Customizing/global/plugins/Services/Repository/RepositoryObject/InteractiveVideo/"); diff --git a/classes/class.ilInteractiveVideoLearningProgressGUI.php b/classes/class.ilInteractiveVideoLearningProgressGUI.php index 2e9fa169..749d0d22 100644 --- a/classes/class.ilInteractiveVideoLearningProgressGUI.php +++ b/classes/class.ilInteractiveVideoLearningProgressGUI.php @@ -10,7 +10,7 @@ * @author Michael Jansen * @ilCtrl_Calls ilInteractiveVideoLearningProgressGUI: ilLearningProgressGUI, ilInteractiveVideoLPSummaryTableGUI, ilInteractiveVideoLPUsersTableGUI */ -class ilInteractiveVideoLearningProgressGUI +class ilInteractiveVideoLearningProgressGUI extends ilLearningProgressBaseGUI { //TODO: PRECONDITON HANDLING /** @@ -217,7 +217,7 @@ public function showLPUsers() $this->gui->getPluginInstance()->includeClass('class.ilInteractiveVideoLPUsersTableGUI.php'); $table = new ilInteractiveVideoLPUsersTableGUI($this, 'showLPUsers', $this->object->getId(), $this->object->getRefId(), false); - $this->tpl->setContent(implode('
', array($table->getHTML(), ilLearningProgressBaseGUI::__getLegendHTML()))); + $this->tpl->setContent(implode('
', array($table->getHTML(), $this->__getLegendHTML()))); } /** @@ -237,7 +237,7 @@ public function showLPSummary() $this->gui->getPluginInstance()->includeClass('class.ilInteractiveVideoLPSummaryTableGUI.php'); $table = new ilInteractiveVideoLPSummaryTableGUI($this, 'showLPSummary', $this->object->getRefId(), $this->gui->getPluginInstance()); - $this->tpl->setContent(implode('
', array($table->getHTML(), ilLearningProgressBaseGUI::__getLegendHTML()))); + $this->tpl->setContent(implode('
', array($table->getHTML(), $this->__getLegendHTML()))); } public function showLPUserDetails() @@ -279,7 +279,7 @@ public function showLPUserDetails() $info->addProperty($this->lng->txt('trac_comment'),$comment); } - $this->tpl->setContent(implode('
', array($info->getHTML(), ilLearningProgressBaseGUI::__getLegendHTML()))); + $this->tpl->setContent(implode('
', array($info->getHTML(), $this->__getLegendHTML()))); } /** diff --git a/classes/class.ilObjInteractiveVideoGUI.php b/classes/class.ilObjInteractiveVideoGUI.php index 0b8a63cf..21820208 100755 --- a/classes/class.ilObjInteractiveVideoGUI.php +++ b/classes/class.ilObjInteractiveVideoGUI.php @@ -13,6 +13,7 @@ ilInteractiveVideoPlugin::getInstance()->includeClass('class.SimpleChoiceQuestionScoring.php'); ilInteractiveVideoPlugin::getInstance()->includeClass('class.SimpleChoiceQuestionStatistics.php'); ilInteractiveVideoPlugin::getInstance()->includeClass('Form/class.ilTextAreaInputCkeditorGUI.php'); +ilInteractiveVideoPlugin::getInstance()->includeClass('Form/class.ilInteractiveVideoTimePicker.php'); /** * Class ilObjInteractiveVideoGUI @@ -40,6 +41,11 @@ class ilObjInteractiveVideoGUI extends ilObjectPluginGUI implements ilDesktopIte */ public $objComment; + /** + * @var + */ + public $plugin; + /** * Functions that must be overwritten */ @@ -234,6 +240,8 @@ public function showContent() $video_tpl->setVariable("MODAL_OVERLAY", $modal->getHTML()); $video_tpl->setVariable('COMMENT_TIME_END', $plugin->txt('time_end')); + $picker = new ilInteractiveVideoTimePicker('comment_time_end', 'comment_time_end'); + $video_tpl->setVariable('COMMENT_TIME_END_PICKER', $picker->render()); $video_tpl->setVariable('TXT_COMMENT', $plugin->txt('insert_comment')); $video_tpl->setVariable('TXT_ENDTIME_WARNING', $plugin->txt('endtime_warning')); $video_tpl->setVariable('TXT_NO_TEXT_WARNING', $plugin->txt('no_text_warning')); @@ -891,17 +899,7 @@ public function getPluginInstance() } #region COMMENTS - /** - * @param $comment_time - * @return mixed - */ - protected function getSecondsFromCommentTimeArray($comment_time) - { - $seconds = $comment_time['time']['h'] * 3600 - + $comment_time['time']['m'] * 60 - + $comment_time['time']['s']; - return $seconds; - } + public function postComment() { @@ -928,13 +926,9 @@ public function postComment() return; } - if(isset($_POST['comment_time_end_h'])) + if(isset($_POST['comment_time_end'])) { - $seconds_end = $this->getSecondsFromCommentTimeArray(array('time' => array( - 'h' => (int) $_POST['comment_time_end_h'], - 'm' => (int) $_POST['comment_time_end_m'], - 's' => (int) $_POST['comment_time_end_s'] - ))); + $seconds_end = ilInteractiveVideoTimePicker::getSecondsFromString($_POST['comment_time_end']); } else { @@ -1067,11 +1061,10 @@ private function initCommentForm() $title = new ilTextInputGUI($this->lng->txt('title'), 'comment_title'); $form->addItem($title); - - $plugin->includeClass('class.ilTimeInputGUI.php'); - $time = new ilTimeInputGUI($this->lng->txt('time'), 'comment_time'); - $time->setShowTime(true); - $time->setShowSeconds(true); + + $time = new ilInteractiveVideoTimePicker($this->lng->txt('time'), 'comment_time'); + #$time->setShowTime(true); + #$time->setShowSeconds(true); if(isset($_POST['comment_time'])) { @@ -1080,9 +1073,9 @@ private function initCommentForm() } $form->addItem($time); - $time_end = new ilTimeInputGUI($plugin->txt('time_end'), 'comment_time_end'); - $time_end->setShowTime(true); - $time_end->setShowSeconds(true); + $time_end = new ilInteractiveVideoTimePicker($plugin->txt('time_end'), 'comment_time_end'); + #$time_end->setShowTime(true); + #$time_end->setShowSeconds(true); if(isset($_POST['comment_time_end'])) { @@ -1188,12 +1181,10 @@ public function updateMyComment() // calculate seconds $comment_time = $form->getInput('comment_time'); - $seconds = $this->getSecondsFromCommentTimeArray($comment_time); - $this->objComment->setCommentTime($seconds); + $this->objComment->setCommentTime($comment_time); $comment_time_end = $form->getInput('comment_time_end'); - $seconds = $this->getSecondsFromCommentTimeArray($comment_time_end); - $this->objComment->setCommentTimeEnd($seconds); + $this->objComment->setCommentTimeEnd($comment_time_end); $this->objComment->update(); $this->editMyComments(); @@ -1344,11 +1335,9 @@ public function updateComment() // calculate seconds $comment_time = $form->getInput('comment_time'); - $seconds = $this->getSecondsFromCommentTimeArray($comment_time); - $this->objComment->setCommentTime($seconds); + $this->objComment->setCommentTime($comment_time); $comment_time_end = $form->getInput('comment_time_end'); - $seconds = $this->getSecondsFromCommentTimeArray($comment_time_end); - $this->objComment->setCommentTimeEnd($seconds); + $this->objComment->setCommentTimeEnd($comment_time_end); $this->objComment->update(); $this->editComments(); @@ -1442,11 +1431,9 @@ private function insertComment($is_tutor = 0) // calculate seconds $comment_time = $form->getInput('comment_time'); - $seconds = $this->getSecondsFromCommentTimeArray($comment_time); - $this->objComment->setCommentTime($seconds); + $this->objComment->setCommentTime($comment_time); $comment_time_end = $form->getInput('comment_time_end'); - $seconds = $this->getSecondsFromCommentTimeArray($comment_time_end); - $this->objComment->setCommentTimeEnd($seconds); + $this->objComment->setCommentTimeEnd($comment_time_end); $this->objComment->setIsTutor($is_tutor); $this->objComment->create(); @@ -1578,11 +1565,8 @@ public function initQuestionForm() $title = new ilTextInputGUI($this->lng->txt('title'), 'comment_title'); $title->setRequired(true); $form->addItem($title); - - $plugin->includeClass('class.ilTimeInputGUI.php'); - $time = new ilTimeInputGUI($this->lng->txt('time'), 'comment_time'); - $time->setShowTime(true); - $time->setShowSeconds(true); + + $time = new ilInteractiveVideoTimePicker($this->lng->txt('time'), 'comment_time'); if(isset($_POST['comment_time'])) { @@ -1591,9 +1575,7 @@ public function initQuestionForm() } $form->addItem($time); - /*$time_end = new ilTimeInputGUI($plugin->txt('time_end'), 'comment_time_end'); - $time_end->setShowTime(true); - $time_end->setShowSeconds(true); + /*$time_end = new ilInteractiveVideoTimePicker($plugin->txt('time_end'), 'comment_time_end'); if(isset($_POST['comment_time_end'])) { @@ -1645,9 +1627,7 @@ public function initQuestionForm() $is_jump_correct = new ilCheckboxInputGUI($plugin->txt('is_jump_correct'), 'is_jump_correct'); $is_jump_correct->setInfo($plugin->txt('is_jump_correct_info')); - $jump_correct_ts = new ilTimeInputGUI($this->lng->txt('time'), 'jump_correct_ts'); - $jump_correct_ts->setShowTime(true); - $jump_correct_ts->setShowSeconds(true); + $jump_correct_ts = new ilInteractiveVideoTimePicker($this->lng->txt('time'), 'jump_correct_ts'); if(isset($_POST['jump_correct_ts'])) { @@ -1670,9 +1650,7 @@ public function initQuestionForm() $is_jump_wrong = new ilCheckboxInputGUI($plugin->txt('is_jump_wrong'), 'is_jump_wrong'); $is_jump_wrong->setInfo($plugin->txt('is_jump_wrong_info')); - $jump_wrong_ts = new ilTimeInputGUI($this->lng->txt('time'), 'jump_wrong_ts'); - $jump_wrong_ts->setShowTime(true); - $jump_wrong_ts->setShowSeconds(true); + $jump_wrong_ts = new ilInteractiveVideoTimePicker($this->lng->txt('time'), 'jump_wrong_ts'); if(isset($_POST['jump_wrong_ts'])) { @@ -1770,11 +1748,9 @@ public function insertQuestion() // calculate seconds $comment_time = $form->getInput('comment_time'); - $seconds = $this->getSecondsFromCommentTimeArray($comment_time); - $this->objComment->setCommentTime($seconds); + $this->objComment->setCommentTime($comment_time); $comment_time_end = $form->getInput('comment_time_end'); - $seconds = $this->getSecondsFromCommentTimeArray($comment_time_end); - $this->objComment->setCommentTimeEnd($seconds); + $this->objComment->setCommentTimeEnd($comment_time_end); $this->objComment->setIsTutor(1); $this->objComment->create(); @@ -1929,11 +1905,9 @@ public function updateQuestion() // calculate seconds $comment_time = $form->getInput('comment_time'); - $seconds = $this->getSecondsFromCommentTimeArray($comment_time); - $this->objComment->setCommentTime($seconds); + $this->objComment->setCommentTime($comment_time); $comment_time_end = $form->getInput('comment_time_end'); - $seconds = $this->getSecondsFromCommentTimeArray($comment_time_end); - $this->objComment->setCommentTimeEnd($seconds); + $this->objComment->setCommentTimeEnd($comment_time_end); $this->objComment->update(); $this->performQuestionRefresh($comment_id, $form); diff --git a/classes/class.ilTimeInputGUI.php b/classes/class.ilTimeInputGUI.php deleted file mode 100644 index 025137e5..00000000 --- a/classes/class.ilTimeInputGUI.php +++ /dev/null @@ -1,260 +0,0 @@ - - */ -class ilTimeInputGUI extends ilDateTimeInputGUI -{ - protected $mode = null; - protected $date_obj = null; - protected $date; - protected $showdate = true; - protected $time = "00:00:00"; - protected $showtime = false; - protected $showseconds = false; - protected $minute_step_size = 1; - protected $show_empty = false; - protected $startyear = ''; - - protected $activation_title = ''; - protected $activation_post_var = ''; - - const MODE_SELECT = 1; - const MODE_INPUT = 2; - - /** - * Constructor - * @param string $a_title Title - * @param string $a_postvar Post Variable - */ - function __construct($a_title = "", $a_postvar = "") - { - parent::__construct($a_title, $a_postvar); - $this->setType("datetime"); - $this->setMode(self::MODE_SELECT); - } - - /** - * Set Show Date Information. - * @param boolean $a_showdate Show Date Information - */ - function setShowDate($a_showdate) - { - $this->showdate = $a_showdate; - } - - /** - * Get Show Date Information. - * @return boolean Show Date Information - */ - function getShowDate() - { - return $this->showdate; - } - - /** - * Set minute step size - * E.g 5 => The selection will only show 00,05,10... minutes - * @param int minute step_size 1,5,10,15,20... - */ - public function setMinuteStepSize($a_step_size) - { - $this->minute_step_size = $a_step_size; - } - - /** - * Get minute step size - * @access public - */ - public function getMinuteStepSize() - { - return $this->minute_step_size; - } - - /** - * Set Show Seconds. - * @param boolean $a_showseconds Show Seconds - */ - function setShowSeconds($a_showseconds) - { - $this->showseconds = $a_showseconds; - } - - /** - * Get Show Seconds. - * @return boolean Show Seconds - */ - function getShowSeconds() - { - return $this->showseconds; - } - - /** - * Set value by array - * @param array $a_values value array - */ - function setValueByArray($a_values) - { - if(isset($a_values[$this->getPostVar()])) - { - $time_array = xvidUtils::timespanArray($a_values[$this->getPostVar()]); - - $tmp_date = date('Y-m-d', time()) . ' ' . $time_array['h'] . ':' . $time_array['m'] . ':' . $time_array['s']; - $this->setDate(new ilDateTime($tmp_date, - IL_CAL_DATETIME, 0)); - } - - if($this->activation_post_var) - { - $this->activation_checked = (bool)$a_values[$this->activation_post_var]; - } - - foreach($this->getSubItems() as $item) - { - $item->setValueByArray($a_values); - } - } - - /** - * Check input, strip slashes etc. set alert, if input is not ok. - * @return boolean Input ok, true/false - */ - function checkInput() - { - if($this->getDisabled()) - { - return true; - } - - $post = $_POST[$this->getPostVar()]; - - // empty date valid with input field - if(!$this->getRequired() && $this->getMode() == self::MODE_INPUT && $post["date"] == "") - { - return true; - } - - if($this->getMode() == self::MODE_SELECT) - { - if($this->getShowTime()) - { - $post["time"]["h"] = ilUtil::stripSlashes($post["time"]["h"]); - $post["time"]["m"] = ilUtil::stripSlashes($post["time"]["m"]); - $post["time"]["s"] = ilUtil::stripSlashes($post["time"]["s"]); - $dt['hours'] = (int)$post['time']['h']; - $dt['minutes'] = (int)$post['time']['m']; - $dt['seconds'] = (int)$post['time']['s']; - } - } - else - { - $post["time"] = ilUtil::stripSlashes($post["time"]); - $time = explode(":", $post["time"]); - $dt['hours'] = (int)$time[0]; - $dt['minutes'] = (int)$time[1]; - $dt['seconds'] = (int)$time[2]; - } - - if($dt['hours'] > 23 || $dt['minutes'] > 59 || $dt['seconds'] > 59) - { - $dt = false; - } - return (bool)$dt; - } - - /** - * Insert property html - - */ - function render() - { - global $lng; - - $tpl = new ilTemplate("tpl.prop_datetime.html", true, true, "Services/Form"); - - $lng->loadLanguageModule("jscalendar"); - require_once("./Services/Calendar/classes/class.ilCalendarUtil.php"); - ilCalendarUtil::initJSCalendar(); - - if(strlen($this->getActivationPostVar())) - { - $tpl->setCurrentBlock('prop_date_activation'); - $tpl->setVariable('CHECK_ENABLED_DATE', $this->getActivationPostVar()); - $tpl->setVariable('TXT_DATE_ENABLED', $this->activation_title); - $tpl->setVariable('CHECKED_ENABLED', $this->activation_checked ? 'checked="checked"' : ''); - $tpl->setVariable('CHECKED_DISABLED', $this->getDisabled() ? 'disabled="disabled" ' : ''); - $tpl->parseCurrentBlock(); - } - - if($this->getMode() == self::MODE_SELECT) - { - if(is_a($this->getDate(), 'ilDate')) - { - $date_info = $this->getDate()->get(IL_CAL_FKT_GETDATE, '', 'UTC'); - } - elseif(is_a($this->getDate(), 'ilDateTime')) - { - $date_info = $this->getDate()->get(IL_CAL_FKT_GETDATE, '', 0); - } - else - { - $h = 0; - $m = 0; - $s = 0; - if(isset($_POST[$this->getPostVar()])) - { - $h = $_POST[$this->getPostVar()]['time']['h']; - $m = $_POST[$this->getPostVar()]['time']['m']; - $s = $_POST[$this->getPostVar()]['time']['s']; - } - - $timestamp = mktime($h, $m, $s, 1, 1, 2015); - $this->setDate(new ilDateTime($timestamp, IL_CAL_UNIX)); - $date_info = $this->getDate()->get(IL_CAL_FKT_GETDATE, '', 0); - } - - // display invalid input again - if(is_array($this->invalid_input)) - { - $date_info['year'] = $this->invalid_input['y']; - $date_info['mon'] = $this->invalid_input['m']; - $date_info['mday'] = $this->invalid_input['d']; - } - } - - if($this->getShowTime()) - { - if($this->getMode() == self::MODE_INPUT) - { - $value = $this->getDate(); - $tpl->setCurrentBlock("prop_time_input_field"); - $tpl->setVariable("DATE_ID", $this->getPostVar()); - $tpl->setVariable("TIME_VALUE", $value); - $tpl->setVariable("DISABLED", $this->getDisabled() ? " disabled=\"disabled\"" : ""); - $tpl->parseCurrentBlock(); - } - - $tpl->setCurrentBlock("prop_time"); - - if($this->getMode() == self::MODE_SELECT) - { - $tpl->setVariable("TIME_SELECT", - ilUtil::makeTimeSelect($this->getPostVar() . "[time]", !$this->getShowSeconds(), - $date_info['hours'], $date_info['minutes'], $date_info['seconds'], - true, array('minute_steps' => $this->getMinuteStepSize(), - 'disabled' => $this->getDisabled()))); - } - - $tpl->setVariable("TXT_TIME", $this->getShowSeconds() - ? "(" . $lng->txt("hh_mm_ss") . ")" - : "(" . $lng->txt("hh_mm") . ")"); - - $tpl->parseCurrentBlock(); - } - return $tpl->get(); - } -} diff --git a/js/InteractiveVideoPlayerComments.js b/js/InteractiveVideoPlayerComments.js index 64c925aa..82cf78c6 100644 --- a/js/InteractiveVideoPlayerComments.js +++ b/js/InteractiveVideoPlayerComments.js @@ -194,65 +194,14 @@ il.InteractiveVideoPlayerComments = (function (scope) { pub.fillEndTimeSelector = function(seconds) { - var h, m, s, i, options; - var h_exists = false; - var m_exists = false; - var obj = pro.convertSecondsToTimeObject(seconds); - - h = obj.hours; - m = obj.minutes; - s = obj.seconds; - options = ''; - for(i=1; i <= h; i++) - { - if(i<10) - { - i = '0' + i; - } - options += ''; - h_exists = true; - } - $('#comment_time_end\\[time\\]_h').append(options); - options = ''; - if(h_exists === true) - { - m = 59; - } - for(i=1; i <= m; i++) - { - if(i<10) - { - i = '0' + i; - } - options += ''; - m_exists = true; - } - $('#comment_time_end\\[time\\]_m').append(options); - options = ''; - if(m_exists === true) - { - s = 59; - } - for(i=1; i <= s; i++) - { - if(i<10) - { - i = '0' + i; - } - options += ''; - } - $('#comment_time_end\\[time\\]_s').append(options); + }; pub.preselectActualTimeInVideo = function(seconds) { - var obj = pro.convertSecondsToTimeObject(seconds); - - pro.preselectValueOfEndTimeSelection(obj.hours, $('#comment_time_end\\[time\\]_h')); + var obj = pro.secondsToTimeCode(seconds); - pro.preselectValueOfEndTimeSelection(obj.minutes, $('#comment_time_end\\[time\\]_m')); - - pro.preselectValueOfEndTimeSelection(obj.seconds, $('#comment_time_end\\[time\\]_s')); + pro.preselectValueOfEndTimeSelection(obj, $('#comment_time_end')); }; pro.isBuildListElementAllowed = function(username) @@ -320,13 +269,10 @@ il.InteractiveVideoPlayerComments = (function (scope) { pro.buildCommentTimeEndHtml = function (comment) { - var h, m, s,display_time; + var display_time; if(comment.comment_time_end === undefined) { - h = parseInt(comment.comment_time_end_h, 10) * 3600; - m = parseInt(comment.comment_time_end_m, 10) * 60; - s = parseInt(comment.comment_time_end_s, 10); - display_time = h + m + s; + display_time = comment.comment_time_end; pro.setCorrectAttributeForTimeInCommentAfterPosting(comment.comment_id, display_time); } else @@ -416,7 +362,7 @@ il.InteractiveVideoPlayerComments = (function (scope) { pro.buildCommentTagsHtml = function (tags) { var comment_tags = ''; - if(tags == null) + if(tags == null || tags == '') { comment_tags = ''; } @@ -462,13 +408,7 @@ il.InteractiveVideoPlayerComments = (function (scope) { pro.preselectValueOfEndTimeSelection = function(time, element) { - var t = time; - - if(t < 10) - { - t = '0' + t; - } - element.val(t); + element.val(time); }; pub.protect = pro; diff --git a/js/InteractiveVideoPlayerFunctions.js b/js/InteractiveVideoPlayerFunctions.js index 17fd8143..8ffd63d3 100644 --- a/js/InteractiveVideoPlayerFunctions.js +++ b/js/InteractiveVideoPlayerFunctions.js @@ -153,16 +153,14 @@ il.InteractiveVideoPlayerFunction = (function (scope) { return stop_video; }; - pub.postAndAppendFakeCommentToStream = function(actual_time_in_video, comment_text, is_private, h, m, s) { + pub.postAndAppendFakeCommentToStream = function(actual_time_in_video, comment_text, is_private, end_time) { var fake_id = parseInt(Math.random() * 10000000, 10); var tmp_obj = { 'comment_id': fake_id, 'comment_time': actual_time_in_video, 'comment_text': comment_text, - 'comment_time_end_h': h, - 'comment_time_end_m': m, - 'comment_time_end_s': s, + 'comment_time_end': end_time, 'user_name': scope.InteractiveVideo.username, 'is_interactive': '0', 'is_private': is_private @@ -183,9 +181,7 @@ il.InteractiveVideoPlayerFunction = (function (scope) { url: il.InteractiveVideo.post_comment_url, data: { 'comment_time': actual_time_in_video, - 'comment_time_end_h': h, - 'comment_time_end_m': m, - 'comment_time_end_s': s, + 'comment_time_end' : end_time, 'comment_text': comment_text, 'is_private': is_private }, @@ -199,21 +195,18 @@ il.InteractiveVideoPlayerFunction = (function (scope) { pro.addAjaxFunctionForCommentPosting = function() { $("#ilInteractiveVideoCommentSubmit").on("click", function(e) { - var h, m, s; + var time; var actual_time_in_video = scope.InteractiveVideoPlayerAbstract.currentTime(); var comment_text = CKEDITOR.instances.comment_text.getData(); var is_private = $('#is_private').prop("checked"); - if( $('#comment_time_end').prop( "checked" )) + if( $('#comment_time_end_chk').prop( "checked" )) { - h = $('#comment_time_end\\[time\\]_h').val(); - m = $('#comment_time_end\\[time\\]_m').val(); - s = $('#comment_time_end\\[time\\]_s').val(); - - var h_end = parseInt(h, 10) * 3600; - var m_end = parseInt(m, 10) * 60; - var s_end = parseInt(s, 10); - var end_time = h_end + m_end + s_end; + time = $('#comment_time_end').val(); + time = time.split(':'); // split it at the colons + + var end_time = (parseInt(time[0], 10) * 3600) + (parseInt(time[1], 10) * 60) + (parseInt(time[2], 10)); + if(end_time < parseInt(actual_time_in_video, 10)) { $('#endtime_warning').removeClass('ilNoDisplay'); @@ -221,7 +214,7 @@ il.InteractiveVideoPlayerFunction = (function (scope) { } } - pub.postAndAppendFakeCommentToStream(actual_time_in_video, comment_text, is_private, h, m, s); + pub.postAndAppendFakeCommentToStream(actual_time_in_video, comment_text, is_private, end_time); }); }; @@ -266,7 +259,7 @@ il.InteractiveVideoPlayerFunction = (function (scope) { { CKEDITOR.instances.comment_text.setData(''); $('#is_private').prop( 'checked', false ); - $('#comment_time_end').prop( 'checked', false ); + $('#comment_time_end_chk').prop( 'checked', false ); $('.end_time_selector').hide( 'fast' ); $('.alert-warning').addClass('ilNoDisplay'); }; @@ -295,7 +288,7 @@ il.InteractiveVideoPlayerFunction = (function (scope) { pro.addCommentTimeChanged = function() { - $('#comment_time_end').change(function() { + $('#comment_time_end_chk').change(function() { if($(this).is(':checked')) { $('.end_time_selector').show( 'fast' ); diff --git a/libs/bootstrap-timepicker/CHANGELOG.md b/libs/bootstrap-timepicker/CHANGELOG.md new file mode 100644 index 00000000..809b619d --- /dev/null +++ b/libs/bootstrap-timepicker/CHANGELOG.md @@ -0,0 +1,56 @@ +# Changelog + +All notable changes will be documented in this file. This project +sort of conforms to Semantic Versioning. Since we're still pre-1.0, +it's like the Wild West up in here! + +## Unreleased +### Added (not started) +- Still planning out how to include i18n data and functionality. + +### Deprecated (not started) +- Incorrect usage of the word "meridian" will be deprecated. It should + be "meridiem". +- `showWidgetOnAddonClick`'s current behavior is not intuitive. Clicking + the input addon should _toggle_ the widget instead of showing it. + +## 0.5.2 - 2016-01-02 +### Added +- Tabbing out of the timepicker widget will now close it. +- You can specify your own icon classes. See docs for the option. + +### Changed +- Cleaned up `package.json` and `bower.json` files. The npm/bower package + should be cleaner now. +- `timepicker.less` now lives in the `css/` directory of the package. +- bootstrap-timepicker now uses the latest minor releases for jQuery 2 and + Bootstrap 3 + +### Fixed +- Fixed bad interaction between `setTime("12:00 AM")` and `showMeridian` +- Various documentation issues were fixed. + +## 0.5.1 - 2015-08-06 +### Changed +- Critical fix (#279) for bootstrap initialization. If you happened to + list your timepicker's classes in an order other than "input-group + bootstrap-timepicker", you'd be out of luck. Now we use jQuery's + `hasClass` method correctly. Yay! + +## 0.5 - 2015-07-31 +### Changed +- Bootstrap 3 support. No more Bootstrap 2 support. +- setTime sets time better +- more tests, and they exercise Bootstrap 3 support! +- snapToStep is a new option, off by default, which snaps times to the + nearest step or overflows to 0 if it would otherwise snap to 60 or + more. +- explicitMode is a new option, off by default, which lets you leave + out colons when typing times. +- shift+tab now correctly moves the cursor to the previously + highlighted unit, and blurs the timepicker when expected. +- We have cut out significant amounts of old cruft from the + repository. +- Minified/Uglified code is no longer kept in the repo. Please + download a release tarball or zip file to get the compiled and + minified CSS and Javascript files. diff --git a/libs/bootstrap-timepicker/README.md b/libs/bootstrap-timepicker/README.md new file mode 100644 index 00000000..28ee1213 --- /dev/null +++ b/libs/bootstrap-timepicker/README.md @@ -0,0 +1,73 @@ +Timepicker for Twitter Bootstrap +======= +[![Build Status](https://travis-ci.org/jdewit/bootstrap-timepicker.svg?branch=gh-pages)](https://travis-ci.org/jdewit/bootstrap-timepicker) + +A simple timepicker component for Twitter Bootstrap. + +Status +====== +Please take a look at the `CHANGELOG.md` and the issues tab for issues we're +working on and their relative priorities. + +Installation +============ + +This project is registered as a Bower package, +and can be installed with the following command: + +```bash +bower install bootstrap-timepicker +``` + +You can also download our latest release (and any previous release) +here. + +Demos & Documentation +===================== + +View demos & documentation. + +Support +======= + +If you make money using this timepicker, please consider +supporting its development. + +Click here to support bootstrap-timepicker! + +Contributing +============ + +1. Install NodeJS and Node Package Manager. + +2. Install packages + +```bash +npm install +``` + +3. Use Bower to get the dev dependencies. + +```bash +bower install +``` + +4. Use Grunt to run tests, compress assets, etc. + +```bash +grunt test // run jshint and jasmine tests +grunt watch // run jsHint and Jasmine tests whenever a file is changed +grunt compile // minify the js and css files +``` + +- Please make it easy on me by covering any new features or issues + with Jasmine tests. +- If your changes need documentation, please take the time to update the docs. + +Acknowledgements +================ + +Thanks to everyone who have given feedback and submitted pull requests. A +list of all the contributors can be found here. + +Special thanks to @eternicode and his Twitter Datepicker for inspiration. diff --git a/libs/bootstrap-timepicker/bower.json b/libs/bootstrap-timepicker/bower.json new file mode 100644 index 00000000..abb6afe8 --- /dev/null +++ b/libs/bootstrap-timepicker/bower.json @@ -0,0 +1,35 @@ +{ + "name": "bootstrap-timepicker", + "description": "A timepicker component for Twitter Bootstrap", + "version": "0.5.2", + "main": "js/bootstrap-timepicker.js", + "license": "MIT", + "ignore": [ + "**/.*", + "_layouts", + "node_modules", + "_config.yml", + "assets", + "spec", + "index.html", + "Gruntfile.js", + "package.json", + "composer.json" + ], + "repository": { + "type": "git", + "url": "https://github.com/jdewit/bootstrap-timepicker" + }, + "dependencies": { + "bootstrap": "^3.0", + "jquery": "^2.0" + }, + "devDependencies": { + "autotype": "https://raw.github.com/mmonteleone/jquery.autotype/master/jquery.autotype.js" + }, + "keywords": [ + "widget", + "timepicker", + "time" + ] +} diff --git a/libs/bootstrap-timepicker/composer.json b/libs/bootstrap-timepicker/composer.json new file mode 100644 index 00000000..e1fe0577 --- /dev/null +++ b/libs/bootstrap-timepicker/composer.json @@ -0,0 +1,13 @@ +{ + "name" : "jdewit/bootstrap-timepicker", + "description" : "A simple timepicker component for Twitter Bootstrap.", + "version" : "0.5.2", + "license" : "MIT", + "authors": [ + { + "name" : "Joris de Wit", + "email" : "joris.w.dewit@gmail.com" + } + ] + +} diff --git a/libs/bootstrap-timepicker/css/bootstrap-timepicker.css b/libs/bootstrap-timepicker/css/bootstrap-timepicker.css new file mode 100644 index 00000000..64f781b2 --- /dev/null +++ b/libs/bootstrap-timepicker/css/bootstrap-timepicker.css @@ -0,0 +1,146 @@ +/*! + * Timepicker Component for Twitter Bootstrap + * + * Copyright 2013 Joris de Wit + * + * Contributors https://github.com/jdewit/bootstrap-timepicker/graphs/contributors + * + * For the full copyright and license information, please view the LICENSE + * file that was distributed with this source code. + */ +.bootstrap-timepicker { + position: relative; +} +.bootstrap-timepicker.pull-right .bootstrap-timepicker-widget.dropdown-menu { + left: auto; + right: 0; +} +.bootstrap-timepicker.pull-right .bootstrap-timepicker-widget.dropdown-menu:before { + left: auto; + right: 12px; +} +.bootstrap-timepicker.pull-right .bootstrap-timepicker-widget.dropdown-menu:after { + left: auto; + right: 13px; +} +.bootstrap-timepicker .input-group-addon { + cursor: pointer; +} +.bootstrap-timepicker .input-group-addon i { + display: inline-block; + width: 16px; + height: 16px; +} +.bootstrap-timepicker-widget.dropdown-menu { + padding: 4px; +} +.bootstrap-timepicker-widget.dropdown-menu.open { + display: inline-block; +} +.bootstrap-timepicker-widget.dropdown-menu:before { + border-bottom: 7px solid rgba(0, 0, 0, 0.2); + border-left: 7px solid transparent; + border-right: 7px solid transparent; + content: ""; + display: inline-block; + position: absolute; +} +.bootstrap-timepicker-widget.dropdown-menu:after { + border-bottom: 6px solid #FFFFFF; + border-left: 6px solid transparent; + border-right: 6px solid transparent; + content: ""; + display: inline-block; + position: absolute; +} +.bootstrap-timepicker-widget.timepicker-orient-left:before { + left: 6px; +} +.bootstrap-timepicker-widget.timepicker-orient-left:after { + left: 7px; +} +.bootstrap-timepicker-widget.timepicker-orient-right:before { + right: 6px; +} +.bootstrap-timepicker-widget.timepicker-orient-right:after { + right: 7px; +} +.bootstrap-timepicker-widget.timepicker-orient-top:before { + top: -7px; +} +.bootstrap-timepicker-widget.timepicker-orient-top:after { + top: -6px; +} +.bootstrap-timepicker-widget.timepicker-orient-bottom:before { + bottom: -7px; + border-bottom: 0; + border-top: 7px solid #999; +} +.bootstrap-timepicker-widget.timepicker-orient-bottom:after { + bottom: -6px; + border-bottom: 0; + border-top: 6px solid #ffffff; +} +.bootstrap-timepicker-widget a.btn, +.bootstrap-timepicker-widget input { + border-radius: 4px; +} +.bootstrap-timepicker-widget table { + width: 100%; + margin: 0; +} +.bootstrap-timepicker-widget table td { + text-align: center; + height: 30px; + margin: 0; + padding: 2px; +} +.bootstrap-timepicker-widget table td:not(.separator) { + min-width: 30px; +} +.bootstrap-timepicker-widget table td span { + width: 100%; +} +.bootstrap-timepicker-widget table td a { + border: 1px transparent solid; + width: 100%; + display: inline-block; + margin: 0; + padding: 8px 0; + outline: 0; + color: #333; +} +.bootstrap-timepicker-widget table td a:hover { + text-decoration: none; + background-color: #eee; + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + border-radius: 4px; + border-color: #ddd; +} +.bootstrap-timepicker-widget table td a i { + margin-top: 2px; + font-size: 18px; +} +.bootstrap-timepicker-widget table td input { + width: 25px; + margin: 0; + text-align: center; +} +.bootstrap-timepicker-widget .modal-content { + padding: 4px; +} +@media (min-width: 767px) { + .bootstrap-timepicker-widget.modal { + width: 200px; + margin-left: -100px; + } +} +@media (max-width: 767px) { + .bootstrap-timepicker { + width: 100%; + } + .bootstrap-timepicker .dropdown-menu { + width: 100%; + } +} diff --git a/libs/bootstrap-timepicker/css/bootstrap-timepicker.min.css b/libs/bootstrap-timepicker/css/bootstrap-timepicker.min.css new file mode 100644 index 00000000..cd81b022 --- /dev/null +++ b/libs/bootstrap-timepicker/css/bootstrap-timepicker.min.css @@ -0,0 +1,10 @@ +/*! + * Timepicker Component for Twitter Bootstrap + * + * Copyright 2013 Joris de Wit + * + * Contributors https://github.com/jdewit/bootstrap-timepicker/graphs/contributors + * + * For the full copyright and license information, please view the LICENSE + * file that was distributed with this source code. + */.bootstrap-timepicker{position:relative}.bootstrap-timepicker.pull-right .bootstrap-timepicker-widget.dropdown-menu{left:auto;right:0}.bootstrap-timepicker.pull-right .bootstrap-timepicker-widget.dropdown-menu:before{left:auto;right:12px}.bootstrap-timepicker.pull-right .bootstrap-timepicker-widget.dropdown-menu:after{left:auto;right:13px}.bootstrap-timepicker .input-group-addon{cursor:pointer}.bootstrap-timepicker .input-group-addon i{display:inline-block;width:16px;height:16px}.bootstrap-timepicker-widget.dropdown-menu{padding:4px}.bootstrap-timepicker-widget.dropdown-menu.open{display:inline-block}.bootstrap-timepicker-widget.dropdown-menu:before{border-bottom:7px solid rgba(0,0,0,0.2);border-left:7px solid transparent;border-right:7px solid transparent;content:"";display:inline-block;position:absolute}.bootstrap-timepicker-widget.dropdown-menu:after{border-bottom:6px solid #fff;border-left:6px solid transparent;border-right:6px solid transparent;content:"";display:inline-block;position:absolute}.bootstrap-timepicker-widget.timepicker-orient-left:before{left:6px}.bootstrap-timepicker-widget.timepicker-orient-left:after{left:7px}.bootstrap-timepicker-widget.timepicker-orient-right:before{right:6px}.bootstrap-timepicker-widget.timepicker-orient-right:after{right:7px}.bootstrap-timepicker-widget.timepicker-orient-top:before{top:-7px}.bootstrap-timepicker-widget.timepicker-orient-top:after{top:-6px}.bootstrap-timepicker-widget.timepicker-orient-bottom:before{bottom:-7px;border-bottom:0;border-top:7px solid #999}.bootstrap-timepicker-widget.timepicker-orient-bottom:after{bottom:-6px;border-bottom:0;border-top:6px solid #fff}.bootstrap-timepicker-widget a.btn,.bootstrap-timepicker-widget input{border-radius:4px}.bootstrap-timepicker-widget table{width:100%;margin:0}.bootstrap-timepicker-widget table td{text-align:center;height:30px;margin:0;padding:2px}.bootstrap-timepicker-widget table td:not(.separator){min-width:30px}.bootstrap-timepicker-widget table td span{width:100%}.bootstrap-timepicker-widget table td a{border:1px transparent solid;width:100%;display:inline-block;margin:0;padding:8px 0;outline:0;color:#333}.bootstrap-timepicker-widget table td a:hover{text-decoration:none;background-color:#eee;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;border-color:#ddd}.bootstrap-timepicker-widget table td a i{margin-top:2px;font-size:18px}.bootstrap-timepicker-widget table td input{width:25px;margin:0;text-align:center}.bootstrap-timepicker-widget .modal-content{padding:4px}@media(min-width:767px){.bootstrap-timepicker-widget.modal{width:200px;margin-left:-100px}}@media(max-width:767px){.bootstrap-timepicker{width:100%}.bootstrap-timepicker .dropdown-menu{width:100%}} \ No newline at end of file diff --git a/libs/bootstrap-timepicker/css/timepicker.less b/libs/bootstrap-timepicker/css/timepicker.less new file mode 100644 index 00000000..a2e813f9 --- /dev/null +++ b/libs/bootstrap-timepicker/css/timepicker.less @@ -0,0 +1,172 @@ +/*! + * Timepicker Component for Twitter Bootstrap + * + * Copyright 2013 Joris de Wit + * + * Contributors https://github.com/jdewit/bootstrap-timepicker/graphs/contributors + * + * For the full copyright and license information, please view the LICENSE + * file that was distributed with this source code. + */ +.bootstrap-timepicker { + position: relative; + + &.pull-right { + .bootstrap-timepicker-widget { + &.dropdown-menu { + left: auto; + right: 0; + + &:before { + left: auto; + right: 12px; + } + &:after { + left: auto; + right: 13px; + } + } + } + } + + .input-group-addon { + cursor: pointer; + i { + display: inline-block; + width: 16px; + height: 16px; + } + } +} +.bootstrap-timepicker-widget { + &.dropdown-menu { + padding: 4px; + &.open { + display: inline-block; + } + &:before { + border-bottom: 7px solid rgba(0, 0, 0, 0.2); + border-left: 7px solid transparent; + border-right: 7px solid transparent; + content: ""; + display: inline-block; + position: absolute; + } + &:after { + border-bottom: 6px solid #FFFFFF; + border-left: 6px solid transparent; + border-right: 6px solid transparent; + content: ""; + display: inline-block; + position: absolute; + } + } + &.timepicker-orient-left { + &:before { + left: 6px; + } + &:after { + left: 7px; + } + } + &.timepicker-orient-right { + &:before { + right: 6px; + } + &:after { + right: 7px; + } + } + &.timepicker-orient-top { + &:before { + top: -7px; + } + &:after { + top: -6px; + } + } + &.timepicker-orient-bottom { + &:before { + bottom: -7px; + border-bottom: 0; + border-top: 7px solid #999; + } + &:after { + bottom: -6px; + border-bottom: 0; + border-top: 6px solid #ffffff; + } + } + a.btn, input { + border-radius: 4px; + } + + table { + width: 100%; + margin: 0; + + td { + text-align: center; + height: 30px; + margin: 0; + padding: 2px; + + &:not(.separator) { + min-width: 30px; + } + + span { + width: 100%; + } + a { + border: 1px transparent solid; + width: 100%; + display: inline-block; + margin: 0; + padding: 8px 0; + outline: 0; + color: #333; + + &:hover { + text-decoration: none; + background-color: #eee; + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + border-radius: 4px; + border-color: #ddd; + } + + i { + margin-top: 2px; + font-size: 18px; + } + } + input { + width: 25px; + margin: 0; + text-align: center; + } + } + } +} + +.bootstrap-timepicker-widget .modal-content { + padding: 4px; +} + +@media (min-width: 767px) { + .bootstrap-timepicker-widget.modal { + width: 200px; + margin-left: -100px; + } +} + +@media (max-width: 767px) { + .bootstrap-timepicker { + width: 100%; + + .dropdown-menu { + width: 100%; + } + } +} diff --git a/libs/bootstrap-timepicker/js/bootstrap-timepicker.js b/libs/bootstrap-timepicker/js/bootstrap-timepicker.js new file mode 100644 index 00000000..bbb923c5 --- /dev/null +++ b/libs/bootstrap-timepicker/js/bootstrap-timepicker.js @@ -0,0 +1,1177 @@ +/*! + * Timepicker Component for Twitter Bootstrap + * + * Copyright 2013 Joris de Wit and bootstrap-timepicker contributors + * + * Contributors https://github.com/jdewit/bootstrap-timepicker/graphs/contributors + * + * For the full copyright and license information, please view the LICENSE + * file that was distributed with this source code. + */ +(function($, window, document) { + 'use strict'; + + // TIMEPICKER PUBLIC CLASS DEFINITION + var Timepicker = function(element, options) { + this.widget = ''; + this.$element = $(element); + this.defaultTime = options.defaultTime; + this.disableFocus = options.disableFocus; + this.disableMousewheel = options.disableMousewheel; + this.isOpen = options.isOpen; + this.minuteStep = options.minuteStep; + this.modalBackdrop = options.modalBackdrop; + this.orientation = options.orientation; + this.secondStep = options.secondStep; + this.snapToStep = options.snapToStep; + this.showInputs = options.showInputs; + this.showMeridian = options.showMeridian; + this.showSeconds = options.showSeconds; + this.template = options.template; + this.appendWidgetTo = options.appendWidgetTo; + this.showWidgetOnAddonClick = options.showWidgetOnAddonClick; + this.icons = options.icons; + this.maxHours = options.maxHours; + this.explicitMode = options.explicitMode; // If true 123 = 1:23, 12345 = 1:23:45, else invalid. + + this.handleDocumentClick = function (e) { + var self = e.data.scope; + // This condition was inspired by bootstrap-datepicker. + // The element the timepicker is invoked on is the input but it has a sibling for addon/button. + if (!(self.$element.parent().find(e.target).length || + self.$widget.is(e.target) || + self.$widget.find(e.target).length)) { + self.hideWidget(); + } + }; + + this._init(); + }; + + Timepicker.prototype = { + + constructor: Timepicker, + _init: function() { + var self = this; + + if (this.showWidgetOnAddonClick && (this.$element.parent().hasClass('input-group') && this.$element.parent().hasClass('bootstrap-timepicker'))) { + this.$element.parent('.input-group.bootstrap-timepicker').find('.input-group-addon').on({ + 'click.timepicker': $.proxy(this.showWidget, this) + }); + this.$element.on({ + 'focus.timepicker': $.proxy(this.highlightUnit, this), + 'click.timepicker': $.proxy(this.highlightUnit, this), + 'keydown.timepicker': $.proxy(this.elementKeydown, this), + 'blur.timepicker': $.proxy(this.blurElement, this), + 'mousewheel.timepicker DOMMouseScroll.timepicker': $.proxy(this.mousewheel, this) + }); + } else { + if (this.template) { + this.$element.on({ + 'focus.timepicker': $.proxy(this.showWidget, this), + 'click.timepicker': $.proxy(this.showWidget, this), + 'blur.timepicker': $.proxy(this.blurElement, this), + 'mousewheel.timepicker DOMMouseScroll.timepicker': $.proxy(this.mousewheel, this) + }); + } else { + this.$element.on({ + 'focus.timepicker': $.proxy(this.highlightUnit, this), + 'click.timepicker': $.proxy(this.highlightUnit, this), + 'keydown.timepicker': $.proxy(this.elementKeydown, this), + 'blur.timepicker': $.proxy(this.blurElement, this), + 'mousewheel.timepicker DOMMouseScroll.timepicker': $.proxy(this.mousewheel, this) + }); + } + } + + if (this.template !== false) { + this.$widget = $(this.getTemplate()).on('click', $.proxy(this.widgetClick, this)); + } else { + this.$widget = false; + } + + if (this.showInputs && this.$widget !== false) { + this.$widget.find('input').each(function() { + $(this).on({ + 'click.timepicker': function() { $(this).select(); }, + 'keydown.timepicker': $.proxy(self.widgetKeydown, self), + 'keyup.timepicker': $.proxy(self.widgetKeyup, self) + }); + }); + } + + this.setDefaultTime(this.defaultTime); + }, + + blurElement: function() { + this.highlightedUnit = null; + this.updateFromElementVal(); + }, + + clear: function() { + this.hour = ''; + this.minute = ''; + this.second = ''; + this.meridian = ''; + + this.$element.val(''); + }, + + decrementHour: function() { + if (this.showMeridian) { + if (this.hour === 1) { + this.hour = 12; + } else if (this.hour === 12) { + this.hour--; + + return this.toggleMeridian(); + } else if (this.hour === 0) { + this.hour = 11; + + return this.toggleMeridian(); + } else { + this.hour--; + } + } else { + if (this.hour <= 0) { + this.hour = this.maxHours - 1; + } else { + this.hour--; + } + } + }, + + decrementMinute: function(step) { + var newVal; + + if (step) { + newVal = this.minute - step; + } else { + newVal = this.minute - this.minuteStep; + } + + if (newVal < 0) { + this.decrementHour(); + this.minute = newVal + 60; + } else { + this.minute = newVal; + } + }, + + decrementSecond: function() { + var newVal = this.second - this.secondStep; + + if (newVal < 0) { + this.decrementMinute(true); + this.second = newVal + 60; + } else { + this.second = newVal; + } + }, + + elementKeydown: function(e) { + switch (e.which) { + case 9: //tab + if (e.shiftKey) { + if (this.highlightedUnit === 'hour') { + this.hideWidget(); + break; + } + this.highlightPrevUnit(); + } else if ((this.showMeridian && this.highlightedUnit === 'meridian') || (this.showSeconds && this.highlightedUnit === 'second') || (!this.showMeridian && !this.showSeconds && this.highlightedUnit ==='minute')) { + this.hideWidget(); + break; + } else { + this.highlightNextUnit(); + } + e.preventDefault(); + this.updateFromElementVal(); + break; + case 27: // escape + this.updateFromElementVal(); + break; + case 37: // left arrow + e.preventDefault(); + this.highlightPrevUnit(); + this.updateFromElementVal(); + break; + case 38: // up arrow + e.preventDefault(); + switch (this.highlightedUnit) { + case 'hour': + this.incrementHour(); + this.highlightHour(); + break; + case 'minute': + this.incrementMinute(); + this.highlightMinute(); + break; + case 'second': + this.incrementSecond(); + this.highlightSecond(); + break; + case 'meridian': + this.toggleMeridian(); + this.highlightMeridian(); + break; + } + this.update(); + break; + case 39: // right arrow + e.preventDefault(); + this.highlightNextUnit(); + this.updateFromElementVal(); + break; + case 40: // down arrow + e.preventDefault(); + switch (this.highlightedUnit) { + case 'hour': + this.decrementHour(); + this.highlightHour(); + break; + case 'minute': + this.decrementMinute(); + this.highlightMinute(); + break; + case 'second': + this.decrementSecond(); + this.highlightSecond(); + break; + case 'meridian': + this.toggleMeridian(); + this.highlightMeridian(); + break; + } + + this.update(); + break; + } + }, + + getCursorPosition: function() { + var input = this.$element.get(0); + + if ('selectionStart' in input) {// Standard-compliant browsers + + return input.selectionStart; + } else if (document.selection) {// IE fix + input.focus(); + var sel = document.selection.createRange(), + selLen = document.selection.createRange().text.length; + + sel.moveStart('character', - input.value.length); + + return sel.text.length - selLen; + } + }, + + getTemplate: function() { + var template, + hourTemplate, + minuteTemplate, + secondTemplate, + meridianTemplate, + templateContent; + + if (this.showInputs) { + hourTemplate = ''; + minuteTemplate = ''; + secondTemplate = ''; + meridianTemplate = ''; + } else { + hourTemplate = ''; + minuteTemplate = ''; + secondTemplate = ''; + meridianTemplate = ''; + } + + templateContent = ''+ + ''+ + ''+ + ''+ + ''+ + (this.showSeconds ? + ''+ + '' + : '') + + (this.showMeridian ? + ''+ + '' + : '') + + ''+ + ''+ + ' '+ + ''+ + ' '+ + (this.showSeconds ? + ''+ + '' + : '') + + (this.showMeridian ? + ''+ + '' + : '') + + ''+ + ''+ + ''+ + ''+ + ''+ + (this.showSeconds ? + ''+ + '' + : '') + + (this.showMeridian ? + ''+ + '' + : '') + + ''+ + '
   
'+ hourTemplate +':'+ minuteTemplate +':'+ secondTemplate +' '+ meridianTemplate +'
  
'; + + switch(this.template) { + case 'modal': + template = '
'+ + '
'+ + '×'+ + '

Pick a Time

'+ + '
'+ + '
'+ + templateContent + + '
'+ + '
'+ + 'OK'+ + '
'+ + '
'; + break; + case 'dropdown': + template = '
'+ templateContent +'
'; + break; + } + + return template; + }, + + getTime: function() { + if (this.hour === '') { + return ''; + } + + return this.hour + ':' + (this.minute.toString().length === 1 ? '0' + this.minute : this.minute) + (this.showSeconds ? ':' + (this.second.toString().length === 1 ? '0' + this.second : this.second) : '') + (this.showMeridian ? ' ' + this.meridian : ''); + }, + + hideWidget: function() { + if (this.isOpen === false) { + return; + } + + this.$element.trigger({ + 'type': 'hide.timepicker', + 'time': { + 'value': this.getTime(), + 'hours': this.hour, + 'minutes': this.minute, + 'seconds': this.second, + 'meridian': this.meridian + } + }); + + if (this.template === 'modal' && this.$widget.modal) { + this.$widget.modal('hide'); + } else { + this.$widget.removeClass('open'); + } + + $(document).off('mousedown.timepicker, touchend.timepicker', this.handleDocumentClick); + + this.isOpen = false; + // show/hide approach taken by datepicker + this.$widget.detach(); + }, + + highlightUnit: function() { + this.position = this.getCursorPosition(); + if (this.position >= 0 && this.position <= 2) { + this.highlightHour(); + } else if (this.position >= 3 && this.position <= 5) { + this.highlightMinute(); + } else if (this.position >= 6 && this.position <= 8) { + if (this.showSeconds) { + this.highlightSecond(); + } else { + this.highlightMeridian(); + } + } else if (this.position >= 9 && this.position <= 11) { + this.highlightMeridian(); + } + }, + + highlightNextUnit: function() { + switch (this.highlightedUnit) { + case 'hour': + this.highlightMinute(); + break; + case 'minute': + if (this.showSeconds) { + this.highlightSecond(); + } else if (this.showMeridian){ + this.highlightMeridian(); + } else { + this.highlightHour(); + } + break; + case 'second': + if (this.showMeridian) { + this.highlightMeridian(); + } else { + this.highlightHour(); + } + break; + case 'meridian': + this.highlightHour(); + break; + } + }, + + highlightPrevUnit: function() { + switch (this.highlightedUnit) { + case 'hour': + if(this.showMeridian){ + this.highlightMeridian(); + } else if (this.showSeconds) { + this.highlightSecond(); + } else { + this.highlightMinute(); + } + break; + case 'minute': + this.highlightHour(); + break; + case 'second': + this.highlightMinute(); + break; + case 'meridian': + if (this.showSeconds) { + this.highlightSecond(); + } else { + this.highlightMinute(); + } + break; + } + }, + + highlightHour: function() { + var $element = this.$element.get(0), + self = this; + + this.highlightedUnit = 'hour'; + + if ($element.setSelectionRange) { + setTimeout(function() { + if (self.hour < 10) { + $element.setSelectionRange(0,1); + } else { + $element.setSelectionRange(0,2); + } + }, 0); + } + }, + + highlightMinute: function() { + var $element = this.$element.get(0), + self = this; + + this.highlightedUnit = 'minute'; + + if ($element.setSelectionRange) { + setTimeout(function() { + if (self.hour < 10) { + $element.setSelectionRange(2,4); + } else { + $element.setSelectionRange(3,5); + } + }, 0); + } + }, + + highlightSecond: function() { + var $element = this.$element.get(0), + self = this; + + this.highlightedUnit = 'second'; + + if ($element.setSelectionRange) { + setTimeout(function() { + if (self.hour < 10) { + $element.setSelectionRange(5,7); + } else { + $element.setSelectionRange(6,8); + } + }, 0); + } + }, + + highlightMeridian: function() { + var $element = this.$element.get(0), + self = this; + + this.highlightedUnit = 'meridian'; + + if ($element.setSelectionRange) { + if (this.showSeconds) { + setTimeout(function() { + if (self.hour < 10) { + $element.setSelectionRange(8,10); + } else { + $element.setSelectionRange(9,11); + } + }, 0); + } else { + setTimeout(function() { + if (self.hour < 10) { + $element.setSelectionRange(5,7); + } else { + $element.setSelectionRange(6,8); + } + }, 0); + } + } + }, + + incrementHour: function() { + if (this.showMeridian) { + if (this.hour === 11) { + this.hour++; + return this.toggleMeridian(); + } else if (this.hour === 12) { + this.hour = 0; + } + } + if (this.hour === this.maxHours - 1) { + this.hour = 0; + + return; + } + this.hour++; + }, + + incrementMinute: function(step) { + var newVal; + + if (step) { + newVal = this.minute + step; + } else { + newVal = this.minute + this.minuteStep - (this.minute % this.minuteStep); + } + + if (newVal > 59) { + this.incrementHour(); + this.minute = newVal - 60; + } else { + this.minute = newVal; + } + }, + + incrementSecond: function() { + var newVal = this.second + this.secondStep - (this.second % this.secondStep); + + if (newVal > 59) { + this.incrementMinute(true); + this.second = newVal - 60; + } else { + this.second = newVal; + } + }, + + mousewheel: function(e) { + if (this.disableMousewheel) { + return; + } + + e.preventDefault(); + e.stopPropagation(); + + var delta = e.originalEvent.wheelDelta || -e.originalEvent.detail, + scrollTo = null; + + if (e.type === 'mousewheel') { + scrollTo = (e.originalEvent.wheelDelta * -1); + } + else if (e.type === 'DOMMouseScroll') { + scrollTo = 40 * e.originalEvent.detail; + } + + if (scrollTo) { + e.preventDefault(); + $(this).scrollTop(scrollTo + $(this).scrollTop()); + } + + switch (this.highlightedUnit) { + case 'minute': + if (delta > 0) { + this.incrementMinute(); + } else { + this.decrementMinute(); + } + this.highlightMinute(); + break; + case 'second': + if (delta > 0) { + this.incrementSecond(); + } else { + this.decrementSecond(); + } + this.highlightSecond(); + break; + case 'meridian': + this.toggleMeridian(); + this.highlightMeridian(); + break; + default: + if (delta > 0) { + this.incrementHour(); + } else { + this.decrementHour(); + } + this.highlightHour(); + break; + } + + return false; + }, + + /** + * Given a segment value like 43, will round and snap the segment + * to the nearest "step", like 45 if step is 15. Segment will + * "overflow" to 0 if it's larger than 59 or would otherwise + * round up to 60. + */ + changeToNearestStep: function (segment, step) { + if (segment % step === 0) { + return segment; + } + if (Math.round((segment % step) / step)) { + return (segment + (step - segment % step)) % 60; + } else { + return segment - segment % step; + } + }, + + // This method was adapted from bootstrap-datepicker. + place : function() { + if (this.isInline) { + return; + } + var widgetWidth = this.$widget.outerWidth(), widgetHeight = this.$widget.outerHeight(), visualPadding = 10, windowWidth = + $(window).width(), windowHeight = $(window).height(), scrollTop = $(window).scrollTop(); + + var zIndex = parseInt(this.$element.parents().filter(function() { return $(this).css('z-index') !== 'auto'; }).first().css('z-index'), 10) + 10; + var offset = this.component ? this.component.parent().offset() : this.$element.offset(); + var height = this.component ? this.component.outerHeight(true) : this.$element.outerHeight(false); + var width = this.component ? this.component.outerWidth(true) : this.$element.outerWidth(false); + var left = offset.left, top = offset.top; + + this.$widget.removeClass('timepicker-orient-top timepicker-orient-bottom timepicker-orient-right timepicker-orient-left'); + + if (this.orientation.x !== 'auto') { + this.$widget.addClass('timepicker-orient-' + this.orientation.x); + if (this.orientation.x === 'right') { + left -= widgetWidth - width; + } + } else{ + // auto x orientation is best-placement: if it crosses a window edge, fudge it sideways + // Default to left + this.$widget.addClass('timepicker-orient-left'); + if (offset.left < 0) { + left -= offset.left - visualPadding; + } else if (offset.left + widgetWidth > windowWidth) { + left = windowWidth - widgetWidth - visualPadding; + } + } + // auto y orientation is best-situation: top or bottom, no fudging, decision based on which shows more of the widget + var yorient = this.orientation.y, topOverflow, bottomOverflow; + if (yorient === 'auto') { + topOverflow = -scrollTop + offset.top - widgetHeight; + bottomOverflow = scrollTop + windowHeight - (offset.top + height + widgetHeight); + if (Math.max(topOverflow, bottomOverflow) === bottomOverflow) { + yorient = 'top'; + } else { + yorient = 'bottom'; + } + } + this.$widget.addClass('timepicker-orient-' + yorient); + if (yorient === 'top'){ + top += height; + } else{ + top -= widgetHeight + parseInt(this.$widget.css('padding-top'), 10); + } + + this.$widget.css({ + top : top, + left : left, + zIndex : zIndex + }); + }, + + remove: function() { + $('document').off('.timepicker'); + if (this.$widget) { + this.$widget.remove(); + } + delete this.$element.data().timepicker; + }, + + setDefaultTime: function(defaultTime) { + if (!this.$element.val()) { + if (defaultTime === 'current') { + var dTime = new Date(), + hours = dTime.getHours(), + minutes = dTime.getMinutes(), + seconds = dTime.getSeconds(), + meridian = 'AM'; + + if (seconds !== 0) { + seconds = Math.ceil(dTime.getSeconds() / this.secondStep) * this.secondStep; + if (seconds === 60) { + minutes += 1; + seconds = 0; + } + } + + if (minutes !== 0) { + minutes = Math.ceil(dTime.getMinutes() / this.minuteStep) * this.minuteStep; + if (minutes === 60) { + hours += 1; + minutes = 0; + } + } + + if (this.showMeridian) { + if (hours === 0) { + hours = 12; + } else if (hours >= 12) { + if (hours > 12) { + hours = hours - 12; + } + meridian = 'PM'; + } else { + meridian = 'AM'; + } + } + + this.hour = hours; + this.minute = minutes; + this.second = seconds; + this.meridian = meridian; + + this.update(); + + } else if (defaultTime === false) { + this.hour = 0; + this.minute = 0; + this.second = 0; + this.meridian = 'AM'; + } else { + this.setTime(defaultTime); + } + } else { + this.updateFromElementVal(); + } + }, + + setTime: function(time, ignoreWidget) { + if (!time) { + this.clear(); + return; + } + + var timeMode, + timeArray, + hour, + minute, + second, + meridian; + + if (typeof time === 'object' && time.getMonth){ + // this is a date object + hour = time.getHours(); + minute = time.getMinutes(); + second = time.getSeconds(); + + if (this.showMeridian){ + meridian = 'AM'; + if (hour > 12){ + meridian = 'PM'; + hour = hour % 12; + } + + if (hour === 12){ + meridian = 'PM'; + } + } + } else { + timeMode = ((/a/i).test(time) ? 1 : 0) + ((/p/i).test(time) ? 2 : 0); // 0 = none, 1 = AM, 2 = PM, 3 = BOTH. + if (timeMode > 2) { // If both are present, fail. + this.clear(); + return; + } + + timeArray = time.replace(/[^0-9\:]/g, '').split(':'); + + hour = timeArray[0] ? timeArray[0].toString() : timeArray.toString(); + + if(this.explicitMode && hour.length > 2 && (hour.length % 2) !== 0 ) { + this.clear(); + return; + } + + minute = timeArray[1] ? timeArray[1].toString() : ''; + second = timeArray[2] ? timeArray[2].toString() : ''; + + // adaptive time parsing + if (hour.length > 4) { + second = hour.slice(-2); + hour = hour.slice(0, -2); + } + + if (hour.length > 2) { + minute = hour.slice(-2); + hour = hour.slice(0, -2); + } + + if (minute.length > 2) { + second = minute.slice(-2); + minute = minute.slice(0, -2); + } + + hour = parseInt(hour, 10); + minute = parseInt(minute, 10); + second = parseInt(second, 10); + + if (isNaN(hour)) { + hour = 0; + } + if (isNaN(minute)) { + minute = 0; + } + if (isNaN(second)) { + second = 0; + } + + // Adjust the time based upon unit boundary. + // NOTE: Negatives will never occur due to time.replace() above. + if (second > 59) { + second = 59; + } + + if (minute > 59) { + minute = 59; + } + + if (hour >= this.maxHours) { + // No day/date handling. + hour = this.maxHours - 1; + } + + if (this.showMeridian) { + if (hour > 12) { + // Force PM. + timeMode = 2; + hour -= 12; + } + if (!timeMode) { + timeMode = 1; + } + if (hour === 0) { + hour = 12; // AM or PM, reset to 12. 0 AM = 12 AM. 0 PM = 12 PM, etc. + } + meridian = timeMode === 1 ? 'AM' : 'PM'; + } else if (hour < 12 && timeMode === 2) { + hour += 12; + } else { + if (hour >= this.maxHours) { + hour = this.maxHours - 1; + } else if ((hour < 0) || (hour === 12 && timeMode === 1)){ + hour = 0; + } + } + } + + this.hour = hour; + if (this.snapToStep) { + this.minute = this.changeToNearestStep(minute, this.minuteStep); + this.second = this.changeToNearestStep(second, this.secondStep); + } else { + this.minute = minute; + this.second = second; + } + this.meridian = meridian; + + this.update(ignoreWidget); + }, + + showWidget: function() { + if (this.isOpen) { + return; + } + + if (this.$element.is(':disabled')) { + return; + } + + // show/hide approach taken by datepicker + this.$widget.appendTo(this.appendWidgetTo); + $(document).on('mousedown.timepicker, touchend.timepicker', {scope: this}, this.handleDocumentClick); + + this.$element.trigger({ + 'type': 'show.timepicker', + 'time': { + 'value': this.getTime(), + 'hours': this.hour, + 'minutes': this.minute, + 'seconds': this.second, + 'meridian': this.meridian + } + }); + + this.place(); + if (this.disableFocus) { + this.$element.blur(); + } + + // widget shouldn't be empty on open + if (this.hour === '') { + if (this.defaultTime) { + this.setDefaultTime(this.defaultTime); + } else { + this.setTime('0:0:0'); + } + } + + if (this.template === 'modal' && this.$widget.modal) { + this.$widget.modal('show').on('hidden', $.proxy(this.hideWidget, this)); + } else { + if (this.isOpen === false) { + this.$widget.addClass('open'); + } + } + + this.isOpen = true; + }, + + toggleMeridian: function() { + this.meridian = this.meridian === 'AM' ? 'PM' : 'AM'; + }, + + update: function(ignoreWidget) { + this.updateElement(); + if (!ignoreWidget) { + this.updateWidget(); + } + + this.$element.trigger({ + 'type': 'changeTime.timepicker', + 'time': { + 'value': this.getTime(), + 'hours': this.hour, + 'minutes': this.minute, + 'seconds': this.second, + 'meridian': this.meridian + } + }); + }, + + updateElement: function() { + this.$element.val(this.getTime()).change(); + }, + + updateFromElementVal: function() { + this.setTime(this.$element.val()); + }, + + updateWidget: function() { + if (this.$widget === false) { + return; + } + + var hour = this.hour, + minute = this.minute.toString().length === 1 ? '0' + this.minute : this.minute, + second = this.second.toString().length === 1 ? '0' + this.second : this.second; + + if (this.showInputs) { + this.$widget.find('input.bootstrap-timepicker-hour').val(hour); + this.$widget.find('input.bootstrap-timepicker-minute').val(minute); + + if (this.showSeconds) { + this.$widget.find('input.bootstrap-timepicker-second').val(second); + } + if (this.showMeridian) { + this.$widget.find('input.bootstrap-timepicker-meridian').val(this.meridian); + } + } else { + this.$widget.find('span.bootstrap-timepicker-hour').text(hour); + this.$widget.find('span.bootstrap-timepicker-minute').text(minute); + + if (this.showSeconds) { + this.$widget.find('span.bootstrap-timepicker-second').text(second); + } + if (this.showMeridian) { + this.$widget.find('span.bootstrap-timepicker-meridian').text(this.meridian); + } + } + }, + + updateFromWidgetInputs: function() { + if (this.$widget === false) { + return; + } + + var t = this.$widget.find('input.bootstrap-timepicker-hour').val() + ':' + + this.$widget.find('input.bootstrap-timepicker-minute').val() + + (this.showSeconds ? ':' + this.$widget.find('input.bootstrap-timepicker-second').val() : '') + + (this.showMeridian ? this.$widget.find('input.bootstrap-timepicker-meridian').val() : '') + ; + + this.setTime(t, true); + }, + + widgetClick: function(e) { + e.stopPropagation(); + e.preventDefault(); + + var $input = $(e.target), + action = $input.closest('a').data('action'); + + if (action) { + this[action](); + } + this.update(); + + if ($input.is('input')) { + $input.get(0).setSelectionRange(0,2); + } + }, + + widgetKeydown: function(e) { + var $input = $(e.target), + name = $input.attr('class').replace('bootstrap-timepicker-', ''); + + switch (e.which) { + case 9: //tab + if (e.shiftKey) { + if (name === 'hour') { + return this.hideWidget(); + } + } else if ((this.showMeridian && name === 'meridian') || (this.showSeconds && name === 'second') || (!this.showMeridian && !this.showSeconds && name === 'minute')) { + return this.hideWidget(); + } + break; + case 27: // escape + this.hideWidget(); + break; + case 38: // up arrow + e.preventDefault(); + switch (name) { + case 'hour': + this.incrementHour(); + break; + case 'minute': + this.incrementMinute(); + break; + case 'second': + this.incrementSecond(); + break; + case 'meridian': + this.toggleMeridian(); + break; + } + this.setTime(this.getTime()); + $input.get(0).setSelectionRange(0,2); + break; + case 40: // down arrow + e.preventDefault(); + switch (name) { + case 'hour': + this.decrementHour(); + break; + case 'minute': + this.decrementMinute(); + break; + case 'second': + this.decrementSecond(); + break; + case 'meridian': + this.toggleMeridian(); + break; + } + this.setTime(this.getTime()); + $input.get(0).setSelectionRange(0,2); + break; + } + }, + + widgetKeyup: function(e) { + if ((e.which === 65) || (e.which === 77) || (e.which === 80) || (e.which === 46) || (e.which === 8) || (e.which >= 48 && e.which <= 57) || (e.which >= 96 && e.which <= 105)) { + this.updateFromWidgetInputs(); + } + } + }; + + //TIMEPICKER PLUGIN DEFINITION + $.fn.timepicker = function(option) { + var args = Array.apply(null, arguments); + args.shift(); + return this.each(function() { + var $this = $(this), + data = $this.data('timepicker'), + options = typeof option === 'object' && option; + + if (!data) { + $this.data('timepicker', (data = new Timepicker(this, $.extend({}, $.fn.timepicker.defaults, options, $(this).data())))); + } + + if (typeof option === 'string') { + data[option].apply(data, args); + } + }); + }; + + $.fn.timepicker.defaults = { + defaultTime: 'current', + disableFocus: false, + disableMousewheel: false, + isOpen: false, + minuteStep: 15, + modalBackdrop: false, + orientation: { x: 'auto', y: 'auto'}, + secondStep: 15, + snapToStep: false, + showSeconds: false, + showInputs: true, + showMeridian: true, + template: 'dropdown', + appendWidgetTo: 'body', + showWidgetOnAddonClick: true, + icons: { + up: 'glyphicon glyphicon-chevron-up', + down: 'glyphicon glyphicon-chevron-down' + }, + maxHours: 24, + explicitMode: false + }; + + $.fn.timepicker.Constructor = Timepicker; + + $(document).on( + 'focus.timepicker.data-api click.timepicker.data-api', + '[data-provide="timepicker"]', + function(e){ + var $this = $(this); + if ($this.data('timepicker')) { + return; + } + e.preventDefault(); + // component click requires us to explicitly show it + $this.timepicker(); + } + ); + +})(jQuery, window, document); diff --git a/libs/bootstrap-timepicker/js/bootstrap-timepicker.min.js b/libs/bootstrap-timepicker/js/bootstrap-timepicker.min.js new file mode 100644 index 00000000..fe73e746 --- /dev/null +++ b/libs/bootstrap-timepicker/js/bootstrap-timepicker.min.js @@ -0,0 +1,5 @@ +/*! bootstrap-timepicker v0.5.2 +* http://jdewit.github.com/bootstrap-timepicker +* Copyright (c) 2016 Joris de Wit and bootstrap-timepicker contributors +* MIT License +*/!function(a,b,c){"use strict";var d=function(b,c){this.widget="",this.$element=a(b),this.defaultTime=c.defaultTime,this.disableFocus=c.disableFocus,this.disableMousewheel=c.disableMousewheel,this.isOpen=c.isOpen,this.minuteStep=c.minuteStep,this.modalBackdrop=c.modalBackdrop,this.orientation=c.orientation,this.secondStep=c.secondStep,this.snapToStep=c.snapToStep,this.showInputs=c.showInputs,this.showMeridian=c.showMeridian,this.showSeconds=c.showSeconds,this.template=c.template,this.appendWidgetTo=c.appendWidgetTo,this.showWidgetOnAddonClick=c.showWidgetOnAddonClick,this.icons=c.icons,this.maxHours=c.maxHours,this.explicitMode=c.explicitMode,this.handleDocumentClick=function(a){var b=a.data.scope;b.$element.parent().find(a.target).length||b.$widget.is(a.target)||b.$widget.find(a.target).length||b.hideWidget()},this._init()};d.prototype={constructor:d,_init:function(){var b=this;this.showWidgetOnAddonClick&&this.$element.parent().hasClass("input-group")&&this.$element.parent().hasClass("bootstrap-timepicker")?(this.$element.parent(".input-group.bootstrap-timepicker").find(".input-group-addon").on({"click.timepicker":a.proxy(this.showWidget,this)}),this.$element.on({"focus.timepicker":a.proxy(this.highlightUnit,this),"click.timepicker":a.proxy(this.highlightUnit,this),"keydown.timepicker":a.proxy(this.elementKeydown,this),"blur.timepicker":a.proxy(this.blurElement,this),"mousewheel.timepicker DOMMouseScroll.timepicker":a.proxy(this.mousewheel,this)})):this.template?this.$element.on({"focus.timepicker":a.proxy(this.showWidget,this),"click.timepicker":a.proxy(this.showWidget,this),"blur.timepicker":a.proxy(this.blurElement,this),"mousewheel.timepicker DOMMouseScroll.timepicker":a.proxy(this.mousewheel,this)}):this.$element.on({"focus.timepicker":a.proxy(this.highlightUnit,this),"click.timepicker":a.proxy(this.highlightUnit,this),"keydown.timepicker":a.proxy(this.elementKeydown,this),"blur.timepicker":a.proxy(this.blurElement,this),"mousewheel.timepicker DOMMouseScroll.timepicker":a.proxy(this.mousewheel,this)}),this.template!==!1?this.$widget=a(this.getTemplate()).on("click",a.proxy(this.widgetClick,this)):this.$widget=!1,this.showInputs&&this.$widget!==!1&&this.$widget.find("input").each(function(){a(this).on({"click.timepicker":function(){a(this).select()},"keydown.timepicker":a.proxy(b.widgetKeydown,b),"keyup.timepicker":a.proxy(b.widgetKeyup,b)})}),this.setDefaultTime(this.defaultTime)},blurElement:function(){this.highlightedUnit=null,this.updateFromElementVal()},clear:function(){this.hour="",this.minute="",this.second="",this.meridian="",this.$element.val("")},decrementHour:function(){if(this.showMeridian)if(1===this.hour)this.hour=12;else{if(12===this.hour)return this.hour--,this.toggleMeridian();if(0===this.hour)return this.hour=11,this.toggleMeridian();this.hour--}else this.hour<=0?this.hour=this.maxHours-1:this.hour--},decrementMinute:function(a){var b;b=a?this.minute-a:this.minute-this.minuteStep,0>b?(this.decrementHour(),this.minute=b+60):this.minute=b},decrementSecond:function(){var a=this.second-this.secondStep;0>a?(this.decrementMinute(!0),this.second=a+60):this.second=a},elementKeydown:function(a){switch(a.which){case 9:if(a.shiftKey){if("hour"===this.highlightedUnit){this.hideWidget();break}this.highlightPrevUnit()}else{if(this.showMeridian&&"meridian"===this.highlightedUnit||this.showSeconds&&"second"===this.highlightedUnit||!this.showMeridian&&!this.showSeconds&&"minute"===this.highlightedUnit){this.hideWidget();break}this.highlightNextUnit()}a.preventDefault(),this.updateFromElementVal();break;case 27:this.updateFromElementVal();break;case 37:a.preventDefault(),this.highlightPrevUnit(),this.updateFromElementVal();break;case 38:switch(a.preventDefault(),this.highlightedUnit){case"hour":this.incrementHour(),this.highlightHour();break;case"minute":this.incrementMinute(),this.highlightMinute();break;case"second":this.incrementSecond(),this.highlightSecond();break;case"meridian":this.toggleMeridian(),this.highlightMeridian()}this.update();break;case 39:a.preventDefault(),this.highlightNextUnit(),this.updateFromElementVal();break;case 40:switch(a.preventDefault(),this.highlightedUnit){case"hour":this.decrementHour(),this.highlightHour();break;case"minute":this.decrementMinute(),this.highlightMinute();break;case"second":this.decrementSecond(),this.highlightSecond();break;case"meridian":this.toggleMeridian(),this.highlightMeridian()}this.update()}},getCursorPosition:function(){var a=this.$element.get(0);if("selectionStart"in a)return a.selectionStart;if(c.selection){a.focus();var b=c.selection.createRange(),d=c.selection.createRange().text.length;return b.moveStart("character",-a.value.length),b.text.length-d}},getTemplate:function(){var a,b,c,d,e,f;switch(this.showInputs?(b='',c='',d='',e=''):(b='',c='',d='',e=''),f=''+(this.showSeconds?'':"")+(this.showMeridian?'':"")+" "+(this.showSeconds?'":"")+(this.showMeridian?'":"")+''+(this.showSeconds?'':"")+(this.showMeridian?'':"")+"
   
"+b+' :'+c+":'+d+" '+e+"
  
",this.template){case"modal":a='
×

Pick a Time

'+f+'
OK
';break;case"dropdown":a='
'+f+"
"}return a},getTime:function(){return""===this.hour?"":this.hour+":"+(1===this.minute.toString().length?"0"+this.minute:this.minute)+(this.showSeconds?":"+(1===this.second.toString().length?"0"+this.second:this.second):"")+(this.showMeridian?" "+this.meridian:"")},hideWidget:function(){this.isOpen!==!1&&(this.$element.trigger({type:"hide.timepicker",time:{value:this.getTime(),hours:this.hour,minutes:this.minute,seconds:this.second,meridian:this.meridian}}),"modal"===this.template&&this.$widget.modal?this.$widget.modal("hide"):this.$widget.removeClass("open"),a(c).off("mousedown.timepicker, touchend.timepicker",this.handleDocumentClick),this.isOpen=!1,this.$widget.detach())},highlightUnit:function(){this.position=this.getCursorPosition(),this.position>=0&&this.position<=2?this.highlightHour():this.position>=3&&this.position<=5?this.highlightMinute():this.position>=6&&this.position<=8?this.showSeconds?this.highlightSecond():this.highlightMeridian():this.position>=9&&this.position<=11&&this.highlightMeridian()},highlightNextUnit:function(){switch(this.highlightedUnit){case"hour":this.highlightMinute();break;case"minute":this.showSeconds?this.highlightSecond():this.showMeridian?this.highlightMeridian():this.highlightHour();break;case"second":this.showMeridian?this.highlightMeridian():this.highlightHour();break;case"meridian":this.highlightHour()}},highlightPrevUnit:function(){switch(this.highlightedUnit){case"hour":this.showMeridian?this.highlightMeridian():this.showSeconds?this.highlightSecond():this.highlightMinute();break;case"minute":this.highlightHour();break;case"second":this.highlightMinute();break;case"meridian":this.showSeconds?this.highlightSecond():this.highlightMinute()}},highlightHour:function(){var a=this.$element.get(0),b=this;this.highlightedUnit="hour",a.setSelectionRange&&setTimeout(function(){b.hour<10?a.setSelectionRange(0,1):a.setSelectionRange(0,2)},0)},highlightMinute:function(){var a=this.$element.get(0),b=this;this.highlightedUnit="minute",a.setSelectionRange&&setTimeout(function(){b.hour<10?a.setSelectionRange(2,4):a.setSelectionRange(3,5)},0)},highlightSecond:function(){var a=this.$element.get(0),b=this;this.highlightedUnit="second",a.setSelectionRange&&setTimeout(function(){b.hour<10?a.setSelectionRange(5,7):a.setSelectionRange(6,8)},0)},highlightMeridian:function(){var a=this.$element.get(0),b=this;this.highlightedUnit="meridian",a.setSelectionRange&&(this.showSeconds?setTimeout(function(){b.hour<10?a.setSelectionRange(8,10):a.setSelectionRange(9,11)},0):setTimeout(function(){b.hour<10?a.setSelectionRange(5,7):a.setSelectionRange(6,8)},0))},incrementHour:function(){if(this.showMeridian){if(11===this.hour)return this.hour++,this.toggleMeridian();12===this.hour&&(this.hour=0)}return this.hour===this.maxHours-1?void(this.hour=0):void this.hour++},incrementMinute:function(a){var b;b=a?this.minute+a:this.minute+this.minuteStep-this.minute%this.minuteStep,b>59?(this.incrementHour(),this.minute=b-60):this.minute=b},incrementSecond:function(){var a=this.second+this.secondStep-this.second%this.secondStep;a>59?(this.incrementMinute(!0),this.second=a-60):this.second=a},mousewheel:function(b){if(!this.disableMousewheel){b.preventDefault(),b.stopPropagation();var c=b.originalEvent.wheelDelta||-b.originalEvent.detail,d=null;switch("mousewheel"===b.type?d=-1*b.originalEvent.wheelDelta:"DOMMouseScroll"===b.type&&(d=40*b.originalEvent.detail),d&&(b.preventDefault(),a(this).scrollTop(d+a(this).scrollTop())),this.highlightedUnit){case"minute":c>0?this.incrementMinute():this.decrementMinute(),this.highlightMinute();break;case"second":c>0?this.incrementSecond():this.decrementSecond(),this.highlightSecond();break;case"meridian":this.toggleMeridian(),this.highlightMeridian();break;default:c>0?this.incrementHour():this.decrementHour(),this.highlightHour()}return!1}},changeToNearestStep:function(a,b){return a%b===0?a:Math.round(a%b/b)?(a+(b-a%b))%60:a-a%b},place:function(){if(!this.isInline){var c=this.$widget.outerWidth(),d=this.$widget.outerHeight(),e=10,f=a(b).width(),g=a(b).height(),h=a(b).scrollTop(),i=parseInt(this.$element.parents().filter(function(){return"auto"!==a(this).css("z-index")}).first().css("z-index"),10)+10,j=this.component?this.component.parent().offset():this.$element.offset(),k=this.component?this.component.outerHeight(!0):this.$element.outerHeight(!1),l=this.component?this.component.outerWidth(!0):this.$element.outerWidth(!1),m=j.left,n=j.top;this.$widget.removeClass("timepicker-orient-top timepicker-orient-bottom timepicker-orient-right timepicker-orient-left"),"auto"!==this.orientation.x?(this.$widget.addClass("timepicker-orient-"+this.orientation.x),"right"===this.orientation.x&&(m-=c-l)):(this.$widget.addClass("timepicker-orient-left"),j.left<0?m-=j.left-e:j.left+c>f&&(m=f-c-e));var o,p,q=this.orientation.y;"auto"===q&&(o=-h+j.top-d,p=h+g-(j.top+k+d),q=Math.max(o,p)===p?"top":"bottom"),this.$widget.addClass("timepicker-orient-"+q),"top"===q?n+=k:n-=d+parseInt(this.$widget.css("padding-top"),10),this.$widget.css({top:n,left:m,zIndex:i})}},remove:function(){a("document").off(".timepicker"),this.$widget&&this.$widget.remove(),delete this.$element.data().timepicker},setDefaultTime:function(a){if(this.$element.val())this.updateFromElementVal();else if("current"===a){var b=new Date,c=b.getHours(),d=b.getMinutes(),e=b.getSeconds(),f="AM";0!==e&&(e=Math.ceil(b.getSeconds()/this.secondStep)*this.secondStep,60===e&&(d+=1,e=0)),0!==d&&(d=Math.ceil(b.getMinutes()/this.minuteStep)*this.minuteStep,60===d&&(c+=1,d=0)),this.showMeridian&&(0===c?c=12:c>=12?(c>12&&(c-=12),f="PM"):f="AM"),this.hour=c,this.minute=d,this.second=e,this.meridian=f,this.update()}else a===!1?(this.hour=0,this.minute=0,this.second=0,this.meridian="AM"):this.setTime(a)},setTime:function(a,b){if(!a)return void this.clear();var c,d,e,f,g,h;if("object"==typeof a&&a.getMonth)e=a.getHours(),f=a.getMinutes(),g=a.getSeconds(),this.showMeridian&&(h="AM",e>12&&(h="PM",e%=12),12===e&&(h="PM"));else{if(c=(/a/i.test(a)?1:0)+(/p/i.test(a)?2:0),c>2)return void this.clear();if(d=a.replace(/[^0-9\:]/g,"").split(":"),e=d[0]?d[0].toString():d.toString(),this.explicitMode&&e.length>2&&e.length%2!==0)return void this.clear();f=d[1]?d[1].toString():"",g=d[2]?d[2].toString():"",e.length>4&&(g=e.slice(-2),e=e.slice(0,-2)),e.length>2&&(f=e.slice(-2),e=e.slice(0,-2)),f.length>2&&(g=f.slice(-2),f=f.slice(0,-2)),e=parseInt(e,10),f=parseInt(f,10),g=parseInt(g,10),isNaN(e)&&(e=0),isNaN(f)&&(f=0),isNaN(g)&&(g=0),g>59&&(g=59),f>59&&(f=59),e>=this.maxHours&&(e=this.maxHours-1),this.showMeridian?(e>12&&(c=2,e-=12),c||(c=1),0===e&&(e=12),h=1===c?"AM":"PM"):12>e&&2===c?e+=12:e>=this.maxHours?e=this.maxHours-1:(0>e||12===e&&1===c)&&(e=0)}this.hour=e,this.snapToStep?(this.minute=this.changeToNearestStep(f,this.minuteStep),this.second=this.changeToNearestStep(g,this.secondStep)):(this.minute=f,this.second=g),this.meridian=h,this.update(b)},showWidget:function(){this.isOpen||this.$element.is(":disabled")||(this.$widget.appendTo(this.appendWidgetTo),a(c).on("mousedown.timepicker, touchend.timepicker",{scope:this},this.handleDocumentClick),this.$element.trigger({type:"show.timepicker",time:{value:this.getTime(),hours:this.hour,minutes:this.minute,seconds:this.second,meridian:this.meridian}}),this.place(),this.disableFocus&&this.$element.blur(),""===this.hour&&(this.defaultTime?this.setDefaultTime(this.defaultTime):this.setTime("0:0:0")),"modal"===this.template&&this.$widget.modal?this.$widget.modal("show").on("hidden",a.proxy(this.hideWidget,this)):this.isOpen===!1&&this.$widget.addClass("open"),this.isOpen=!0)},toggleMeridian:function(){this.meridian="AM"===this.meridian?"PM":"AM"},update:function(a){this.updateElement(),a||this.updateWidget(),this.$element.trigger({type:"changeTime.timepicker",time:{value:this.getTime(),hours:this.hour,minutes:this.minute,seconds:this.second,meridian:this.meridian}})},updateElement:function(){this.$element.val(this.getTime()).change()},updateFromElementVal:function(){this.setTime(this.$element.val())},updateWidget:function(){if(this.$widget!==!1){var a=this.hour,b=1===this.minute.toString().length?"0"+this.minute:this.minute,c=1===this.second.toString().length?"0"+this.second:this.second;this.showInputs?(this.$widget.find("input.bootstrap-timepicker-hour").val(a),this.$widget.find("input.bootstrap-timepicker-minute").val(b),this.showSeconds&&this.$widget.find("input.bootstrap-timepicker-second").val(c),this.showMeridian&&this.$widget.find("input.bootstrap-timepicker-meridian").val(this.meridian)):(this.$widget.find("span.bootstrap-timepicker-hour").text(a),this.$widget.find("span.bootstrap-timepicker-minute").text(b),this.showSeconds&&this.$widget.find("span.bootstrap-timepicker-second").text(c),this.showMeridian&&this.$widget.find("span.bootstrap-timepicker-meridian").text(this.meridian))}},updateFromWidgetInputs:function(){if(this.$widget!==!1){var a=this.$widget.find("input.bootstrap-timepicker-hour").val()+":"+this.$widget.find("input.bootstrap-timepicker-minute").val()+(this.showSeconds?":"+this.$widget.find("input.bootstrap-timepicker-second").val():"")+(this.showMeridian?this.$widget.find("input.bootstrap-timepicker-meridian").val():"");this.setTime(a,!0)}},widgetClick:function(b){b.stopPropagation(),b.preventDefault();var c=a(b.target),d=c.closest("a").data("action");d&&this[d](),this.update(),c.is("input")&&c.get(0).setSelectionRange(0,2)},widgetKeydown:function(b){var c=a(b.target),d=c.attr("class").replace("bootstrap-timepicker-","");switch(b.which){case 9:if(b.shiftKey){if("hour"===d)return this.hideWidget()}else if(this.showMeridian&&"meridian"===d||this.showSeconds&&"second"===d||!this.showMeridian&&!this.showSeconds&&"minute"===d)return this.hideWidget();break;case 27:this.hideWidget();break;case 38:switch(b.preventDefault(),d){case"hour":this.incrementHour();break;case"minute":this.incrementMinute();break;case"second":this.incrementSecond();break;case"meridian":this.toggleMeridian()}this.setTime(this.getTime()),c.get(0).setSelectionRange(0,2);break;case 40:switch(b.preventDefault(),d){case"hour":this.decrementHour();break;case"minute":this.decrementMinute();break;case"second":this.decrementSecond();break;case"meridian":this.toggleMeridian()}this.setTime(this.getTime()),c.get(0).setSelectionRange(0,2)}},widgetKeyup:function(a){(65===a.which||77===a.which||80===a.which||46===a.which||8===a.which||a.which>=48&&a.which<=57||a.which>=96&&a.which<=105)&&this.updateFromWidgetInputs()}},a.fn.timepicker=function(b){var c=Array.apply(null,arguments);return c.shift(),this.each(function(){var e=a(this),f=e.data("timepicker"),g="object"==typeof b&&b;f||e.data("timepicker",f=new d(this,a.extend({},a.fn.timepicker.defaults,g,a(this).data()))),"string"==typeof b&&f[b].apply(f,c)})},a.fn.timepicker.defaults={defaultTime:"current",disableFocus:!1,disableMousewheel:!1,isOpen:!1,minuteStep:15,modalBackdrop:!1,orientation:{x:"auto",y:"auto"},secondStep:15,snapToStep:!1,showSeconds:!1,showInputs:!0,showMeridian:!0,template:"dropdown",appendWidgetTo:"body",showWidgetOnAddonClick:!0,icons:{up:"glyphicon glyphicon-chevron-up",down:"glyphicon glyphicon-chevron-down"},maxHours:24,explicitMode:!1},a.fn.timepicker.Constructor=d,a(c).on("focus.timepicker.data-api click.timepicker.data-api",'[data-provide="timepicker"]',function(b){var c=a(this);c.data("timepicker")||(b.preventDefault(),c.timepicker())})}(jQuery,window,document); \ No newline at end of file diff --git a/libs/bootstrap-timepicker/package.json b/libs/bootstrap-timepicker/package.json new file mode 100644 index 00000000..f0d3e1cc --- /dev/null +++ b/libs/bootstrap-timepicker/package.json @@ -0,0 +1,36 @@ +{ + "name": "bootstrap-timepicker", + "description": "Timepicker widget for Twitter Bootstrap", + "version": "0.5.2", + "license": "MIT", + "homepage": "http://jdewit.github.com/bootstrap-timepicker", + "author": { + "name": "Joris de Wit", + "email": "joris.w.dewit@gmail.com", + "url": "http://jorisdewit.ca" + }, + "main": "js/bootstrap-timepicker.js", + "files": ["js", "css"], + "repository": { + "type": "git", + "url": "git://github.com/jdewit/bootstrap-timepicker" + }, + "scripts": { + "test": "bower install; grunt test;" + }, + "bugs": { + "url": "https://github.com/jdewit/bootstrap-timepicker/issues" + }, + "devDependencies": { + "grunt-cli": "~0.1", + "grunt": "~0.4.1", + "bower": "latest", + "grunt-contrib-less": "~0.5.0", + "grunt-contrib-jshint": "~0.4.3", + "grunt-contrib-uglify": "~0.2.0", + "grunt-contrib-jasmine": "~0.4.2", + "grunt-contrib-watch": "~0.4.3", + "grunt-shell": "~0.2.2", + "grunt-bump": "0.0.11" + } +} diff --git a/plugin.php b/plugin.php index fcf7ad1a..0755d438 100755 --- a/plugin.php +++ b/plugin.php @@ -8,7 +8,7 @@ // ilias min and max version; must always reflect the versions that should // run with the plugin $ilias_min_version = '5.0.0'; -$ilias_max_version = '5.1.999'; +$ilias_max_version = '5.2.999'; // optional, but useful: Add one or more responsible persons and a contact email $responsible = 'Nadia Ahmad / Michael Jansen / Max Becker / Guido Vollbach'; diff --git a/templates/default/tpl.time_picker.html b/templates/default/tpl.time_picker.html new file mode 100644 index 00000000..0d082af1 --- /dev/null +++ b/templates/default/tpl.time_picker.html @@ -0,0 +1,13 @@ +
+ + +
+ + \ No newline at end of file diff --git a/templates/default/tpl.video_tpl.html b/templates/default/tpl.video_tpl.html index 17b904ca..66f5a0d8 100755 --- a/templates/default/tpl.video_tpl.html +++ b/templates/default/tpl.video_tpl.html @@ -71,26 +71,17 @@

{TASK_TEXT} {TXT_IS_PRIVATE} -
+
{TXT_ENDTIME_WARNING}
- {COMMENT_TIME_END} + {COMMENT_TIME_END}
-
-
+
+
diff --git a/templates/default/xvid.css b/templates/default/xvid.css index 6989fb01..630b5d8b 100755 --- a/templates/default/xvid.css +++ b/templates/default/xvid.css @@ -230,4 +230,7 @@ } .feedback_link_element{ text-align: center; +} +.ilInteractiveVideoFormCommands{ + padding-top: 1em !important; } \ No newline at end of file