ElkArte Community

Masa: Surfer's Local Live Time

- For Elk 1.0.x.
- Fully hook, no file modification.

1. Please do your own backup though every installation is backed up automatically.
2. On default, the time is not shown in the header either for member or for guest.
3. This mod will add surfer's local date and live time, so one can keep track to it while in the forum.
4. All you need to do is turn it on or off in Mod Settings page, save it and you are good to go.
5. You have the option to change the date format. Click here for reference. (http://php.net/manual/en/datetime.createfromformat.php)
6. Admin can choose whether the live time and date is shown or hidden to guest.
7. The css for both besocial and light is also added to make the mode suitable for both variant.
8. You can test it in all Elk 1.0.x lower version as IMO it should work just fine. ;)


Thank you for using/testing it.


Yours friendly,
Abu Fahim Ismail.

BSD License. Feel free to modify accordingly but keep author's link if it is in there somewhere. ;)

(http://validator.w3.org/images/valid_icons/valid-xhtml10)  (http://jigsaw.w3.org/css-validator/images/vcss)

Spoiler (click to show/hide)

#Change Logs

@Version 1.0.5
- Fixing up css for small screen / mobile view.
- Fixing up css for 1.1x.

@Version 1.0.4
- Cleaning up and remove bad code.
- Add option to remove pm/am.
- Add option to hide date in mobile view.

@Version 1.0.3
- Fixing mobile view
- Restore sources as addons main folder

@Version 1.0.2
- Cleaning up unused code.
- Reorganize so that css can be minified together with other css.
- Restructure addon's files' directories and locations.

@Version 1.0.1
- Fix language string error due to language not loaded.

@Version 1.0.0
- Initial Release.

I noticed that ElkArte does not have time and date in the header and thus, I wish to add them via mod. I think that can simply be achieved by adding a template layer specifically a new template_th_time_bar. The code:

function template_th_time_bar()
{
	global $txt;

	echo '
			' . date('l, d F Y,') . ' <span id="masa"></span><script type="text/javascript">//<![CDATA[
				function JamHidup() {
					var t=new Date(); var j=t.getHours(); var d=t.getMinutes(); var s=t.getSeconds(); var kala; if (j<=9) {j="0" + j} if (d<=9) {d="0" + d} if (s<=9) {s="0" + s} if (j>=13) {j-=12;kala = " ' . $txt['time_pm'] . '"} else {kala=" ' . $txt['time_am'] . '"} 
					document.getElementById("masa").innerHTML=j + ":" + d + ":" + s + kala; setTimeout("JamHidup()",1000);
				} JamHidup();
			//]]></script>';
}

If I were to put it inside the th_search_bar template (without using its own template function), the code work just fine. But if the suggested code is applied directly before th_search_bar template, however, doesn't seem to work. I was thinking that it supposed to be called together with the callback for th template, but it wasn't called at all.

I will try to pack it and add that after th_login_bar and see how it goes. I will update later.

All these templates are not called "just by themselves". You have to add them to an array in $context.

$context['theme_header_callbacks'][] = 'time_bar';

I thought I added some comment here and there, but apparently I forgot... O:-)
Well, you can search for "call_template_callbacks", this function takes as first argument the "bit" that identifies the template that will be called (for example "th") and as second argument the array that will be used to find the functions to call.

For example:

call_template_callbacks('th', $context['theme_header_callbacks']);

will call all the template functions containing "th" in the name and contained in the array $context['theme_header_callbacks'].

HTH

Minor script improvement on settimeout ... also no need for type="text/javascript" with html5

			<script>//<![CDATA[
				JamHidup();

				function JamHidup() {
					var t = new Date(),
						j = t.getHours(),
						d = t.getMinutes(),
						s = t.getSeconds(),
						kala;

					if (j <= 9)
						j = "0" + j;

					if (d <= 9)
						d = "0" + d;

					if (s <= 9)
						s = "0" + s;

					if (j >= 13)
					{
						j -= 12;
						kala = " ' . $txt['time_pm'] . '";
					}
					else
					{
						kala = " ' . $txt['time_am'] . '";
					}

					document.getElementById("masa").innerHTML = j + ":" + d + ":" + s + kala;

					setTimeout(function () {
						"use strict";
						JamHidup();
					}, 1000);
				}
			//]]></script>

Or the minimized version

<script>//<![CDATA[
function JamHidup(){var e,a=new Date,b=a.getHours(),c=a.getMinutes(),d=a.getSeconds();9>=b&&(b="0"+b),9>=c&&(c="0"+c),9>=d&&(d="0"+d),b>=13?(b-=12,e=" ' . $txt['time_pm'] . '"):e=" ' . $txt['time_am'] . '",document.getElementById("masa").innerHTML=b+":"+c+":"+d+e,setTimeout(function(){"use strict";JamHidup()},1e3)}JamHidup();
//]]></script>

I like this one but I just posted the package in the OP. I reserved this one for the next version.  ;)

This mod add date and live time for with option to change date format and option whether to show it for all (including guest) or just for members.

Thank you @emanuele and @Spuds for sharing tips and guides.

Updated for the following reason(s):

#Change Logs

@Version 1.0.1
- Fix language string error due to language not loaded.

#Change Logs

@Version 1.0.2
- Cleaning up unused code.
- Reorganize so that css can be minified together with other css.
- Restructure addon's files' directories and locations.

Hello Ahrasis,

Thank for this another great Mod,

My settings:

(https://static.forum.mpdb.tv/uploadimages/images/1486295891-h2.png)

But it show always hour am/pm

(https://static.forum.mpdb.tv/uploadimages/images/1486295878-h1.png)

That's not a problem for me, I like the idée to have time in two format, I have many English members.

---

Responsive amélioration ?

Is it possible to place all just near the search box ? 

(https://static.forum.mpdb.tv/uploadimages/images/1486295905-h3.png)

(I use chromium tools for responsive emulation)

You can remove $txt['time_am'] and $txt['time_pm'] in the source code (Masa.template.php) if you don't like the am/pm thingy.  Though technically the am/pm should follow your forum language.

I already noted the mobile view problem but haven't got a chance to fix it before. I already added up v.103 in the first post.

Thank you Ahrasis,




Ok, but I will keep it for the moment. (waiting people reaction)


Hmm, Am/pm don't exist in french, we have 24 hours format only.

Understand.

I will update.

Many thank for your work and support.  :)

Ahrasis,

I tried 1.03 version on my mobile and on my wife Mobile.
Note 2 and Galaxy grand Prime.
Perfect ! the hour is exactly near the search box,
Same if I emulate: (nexus 5 for example in attachments)


Hmm, it was a joke, you fixed it  ;)

There is a bad code inside the last v.103 so I updated it to version v.104 with option to hide date in mobile view (show only clock) and option to remove pm/am.

#Change Logs

@Version 1.0.4
- Cleaning up and remove bad code.
- Add option to remove pm/am.
- Add option to hide date in mobile view.

@Version 1.0.3
- Fixing mobile view
- Restore sources as addons main folder

#Change Logs

@Version 1.0.5
- Fixing up css for small screen / mobile view.
- Fixing up css for 1.1x.

@ahrasis

Thanks. Just a suggestion: use the show/hide am/pm switch to use 12h/24h display.

Like 08:00:00 without am/pm does make no sense, likewise 20:00:00 with am/pm is also useless.

TIA

Thank you. Haven't visited this for quite some times. Will see what can be done.

@ahrasis

something new ???

still not ???  :'(

Sorry, I totally forgot about it. I finished doing some testing. However, I need to confirm something that is even in 24 hours format, time below 12:00:00
This can be done easily. I can change this but there still be issue as in 24 hours format morning sessions will be seen similar to 12 hours format morning and night session.
Not really. it is the visitors' time and currently they are set to 12 hours format. Some may want am/pm, some may not, so the current option seems fine to me.

Anyway, I have prepared a draft for 1.0.6 version where morning session will display am for both formats but afternoon session will only display pm for 12 hours format. To test replace Masa.template.php with the attached below.

What do you think?