Script + theme tweak to add colors to anything due today or tomorrow

[esotaria]

Because it’s Friday and I can’t concentrate on anything genuinely productive, I’ve been playing around with scripts and themes. Below are the theme tweak + script to turn this

into this

When I looked through the documentation, I didn’t see a way to call on what’s in parentheses in the theme, so what the script does is replace anything tagged with @due(today’s date) with @dueToday and anything tagged with @due(tomorrow’s date) to @dueTomorrow. It also adds a @today tag to all of them. The logic being I use the @today tag to look at everything I want to work on today, regardless of when it’s due (or if there’s no due date). The @dueToday and @dueTomorrow tags are just there to highlight items with looming deadlines.

function TaskPaperContextScript(editor, options) {
    var today = DateTime.format('today');
    var outline = editor.outline;
    
    outline.groupUndoAndChanges(function () {
        outline.evaluateItemPath('//@due = [d] today')
            .forEach(function (each) {
      			each.setAttribute('data-dueToday', '');
	  		each.setAttribute('data-today','');
			each.removeAttribute('data-due');
    		});
  		 });
		 
        outline.evaluateItemPath('//@due = [d] tomorrow')
            .forEach(function (each) {
      			each.setAttribute('data-dueTomorrow', '');
	  		each.setAttribute('data-today','');
			each.removeAttribute('data-due');
    		});
}

Application("TaskPaper")
    .documents[0].evaluate({
        script: TaskPaperContextScript.toString()
    })

If you don’t want the extra @today, just remove the two instances of each.setAttribute('data-today','');

In the theme.less file, add the following bits of code to get the colors (or change however you want to get your own formatting).

item[data-dueToday] {
color: red;
font-weight: bold;
}

item[data-dueTomorrow] {
color: rgb(79, 179, 209);
font-weight: bold;
}

Thanks to @jessegrosjean and @complexpoint for putting together the scripts I based this on and answering questions. They’ve made Javascript a lot less intimidating to look at.

[jessegrosjean]

I didn’t see a way to call on what’s in parentheses in the theme

This is actually possible. You would do it like this:

item[data-due="today"] {
}

That would match @due(today), but it would not match @due(tomorrow) or just @due. But for your case I’m not sure if that would help much or not, since it’s just working on raw strings… doesn’t really know what “today” means so “today” could never match “2016-03-04” no matter what the date is.

In other words I do think you probably needed a script in this case, but if you are ever trying to style something with a more limited number of options you can definitely style based on the tag value!

[esotaria]

Hah, I figured there would be a way I didn’t see! Thanks!

[esotaria]

Revised it again once I realized that if you remove the tag with the real due date, anything tagged @dueTomorrow loses the ability to become @dueToday. Also added a tag for anything @overdue

function TaskPaperContextScript(editor, options) {
    var today = DateTime.format('today');
    var outline = editor.outline;
    
    outline.groupUndoAndChanges(function () {
        outline.evaluateItemPath('//@due = [d] today')
            .forEach(function (each) {
      			each.setAttribute('data-dueToday', '');
	  			each.setAttribute('data-today','');
				each.removeAttribute('data-dueTomorrow');
    		});
  		 });
		 
        outline.evaluateItemPath('//@due = [d] tomorrow')
            .forEach(function (each) {
      			each.setAttribute('data-dueTomorrow', '');
	  			each.setAttribute('data-today','');
    		});
        outline.evaluateItemPath('//@due < [d] today')
            .forEach(function (each) {
      			each.setAttribute('data-OVERDUE', '');
	  			each.setAttribute('data-today','');
    		});
}

Application("TaskPaper")
    .documents[0].evaluate({
        script: TaskPaperContextScript.toString()
    })

[frevo]

This is actually possible. You would do it like this:

item[data-due=“today”] {
}

That would match @due(today), but it would not match @due(tomorrow) or just @due. But for your case I’m not sure if that would help much or not, since it’s just working on raw strings… doesn’t really know what “today” means so “today” could never match “2016-03-04” no matter what the date is.

It’s probably not doable, but wouldn’t it be great if we could use TaskPapers date queries for the theme?

[jessegrosjean]

It’s probably not doable, but wouldn’t it be great if we could use TaskPapers date queries for the theme?

It could be made to kinda work (with some extra coding on my end), but I don’t think it’s the right place for date based stuff. The issue is that the current styling is meant to style the “state” of the outline. Style only update when the outline state updates. But time isn’t part of the outline state, so there’s no way to cleanly/efficiently rerun the styles as time ticks forward.

I do think there’s a good solution to the general problem problem of “make this thing red when it’s overdue”. But it will require a script that periodically searches the outline for overdue items, and marks them as such. I don’t expect this in the next release, but maybe after that. I would likely add this at the same time that I did “Reminders.app Integration” as listed here:

What's next at Hog Bay Software? Vote!

I hope this will be a little fun and also help me better understand where you'd like me to spend my programming time. I've still got a release or two of smaller things for TaskPaper Mac, but then I need to start picking and choosing from a wide variety of potential directions for both TaskPaper Mac and Hog Bay Software in general. These polls are for information gathering purposes. There are many factors that will help me decide what I worked on next. Poll results will be one of those things…

[frevo]

That’s good - and I had already voted for Reminders integration.

What’s interesting about a date-based formatting in the theme is that you would have very much control over what exactly “that thing” is in “make this thing red”. Personally, I’d prefer it if only the tag changed its color, not the whole line.

What if you could define past, today, soon, and future like saved searches, e.g. @tagcolor(today, green) or @taskcolor(past, red)? Maybe this could be expanded to other data strings: @taskcolor(“Boss”, orange)? Then the theme wouldn’t be needed to deal with emphasis based on data at all.

Just a quick idea.

[Victor]

@frevo, while you wait for the integration reminders, you can try using a script to accomplish this. I included the instructions and the script file in here. So that if you include a @remind(2016-06-01) tag, it automatically creates a reminder in your first available reminders list. You can specify which reminder list with another simple tag like @list(Inbox).

[frevo]

Thanks, @Victor! I’ll try it at the weekend!

[midas]

wondering if this has been simplified over the past 1.5 years… is there a way to style @due(yyyy-mm-dd) based on the value of the ‘due’ tag?

[jessegrosjean]

No, at least not really if you mean general date based comparisons. Of course you can do some string compare as described earlier in the thread.

…issue is that the current styling is meant to style the “state” of the outline. Style only update when the outline state updates. But time isn’t part of the outline state, so there’s no way to cleanly/efficiently rerun the styles as time ticks forward.

This is changing in WriteRoom 4’s engine… which will make it into TaskPaper 4 next. Things have changed so that I recalculate all styles for any change. And that means it now makes sense to support this sort of styling. So long term I think should show be possible… color overdue items in stylesheet. But it will be quite a while before TaskPaper 4 is out, so I would look to script solutions for now.

[midas]

should’ve known that you have something brewing glad to hear that it is on the horizon for TP4… will look for alternative patch-work until then. cheers.