Skip to content

Commit

Permalink
add some keyboard shortcuts (toxinu#23)
Browse files Browse the repository at this point in the history
  • Loading branch information
@danielmagnussons
socketubs authored and danielmagnussons committed Mar 27, 2013
1 parent f344995 commit ab03a06
Show file tree
Hide file tree
Showing 5 changed files with 104 additions and 16 deletions.
4 changes: 4 additions & 0 deletions leselys/static/css/leselys.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -105,3 +105,7 @@ li a [class^="icon-"] {
.feed.unread {
font-weight: bold;
}

.selected-story {
border: 2px solid #e5e5e5;
}
98 changes: 89 additions & 9 deletions leselys/static/js/leselys.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
// Globals
requests = new Array();
importer = false;
setKeyboard();

function addFeed() {
var url = document.getElementById('urlFeed').value;
Expand Down Expand Up @@ -138,6 +139,7 @@ function viewSettings() {
}
initPage();
initTabs();
initSettingsView();
} else {
if (data.callback == "/api/login") { window.location = "/login" }
}
Expand Down Expand Up @@ -243,6 +245,7 @@ function viewFeed(feedId) {

if (storyRead == false) {
storyAccordion.getElementsByClassName('accordion-toggle')[0].style.fontWeight = "bold";
storyAccordion.classList.add('unread-story');
}

content += storyAccordion.outerHTML;
Expand Down Expand Up @@ -273,13 +276,22 @@ function readStory(storyId, ignore) {
return true
}

var storyHeading = document.getElementById(storyId);
storyHeading.classList.add('selected-story');
for (var i=0;i < document.getElementsByClassName('accordion-group').length;i++) {
var story = document.getElementsByClassName('accordion-group')[i];
if (story.getAttribute('id') != storyId) {
story.classList.remove('selected-story');
}
}

var xhr = getXMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0)) {
var data = JSON.parse(xhr.responseText);
if (data.success == false) {
if (data.callback == "/api/login" ) { window.location = "/login" }
}
}
if (data.content.last_update == false) {
var published = "No date";
} else {
Expand All @@ -298,7 +310,7 @@ function readStory(storyId, ignore) {
var published = data.content.last_update['year'] + '-' + data.content.last_update['month'] +
'-' + data.content.last_update['day'] + " " + hours + ":" + minutes;
}

var feedId = data.content.feed_id;
var story = getStoryTemplate();

Expand All @@ -309,11 +321,15 @@ function readStory(storyId, ignore) {
story.getElementsByClassName("story-content")[0].innerHTML = data.content.description;
story.getElementsByClassName("story-date")[0].innerHTML = published;


document.getElementById(storyId).getElementsByClassName("accordion-inner")[0].innerHTML = story.innerHTML;
document.getElementById(storyId).getElementsByClassName("story-read-toggle")[0].addEventListener(
'click', function(e) { e.preventDefault() }, false
'click', function(e) { e.preventDefault() }, false
);

if (data.success == true) {
document.getElementById(storyId).classList.remove('unread-story');

var counter = cleanCounter(document.getElementById(feedId).getElementsByClassName('unread-counter')[0].innerHTML);
var counter = counter - 1;
document.getElementById(feedId).getElementsByClassName('unread-counter')[0].innerHTML = '(' + counter + ')';
Expand All @@ -339,19 +355,21 @@ function unreadStory(storyId) {
if (data.success == true) {
var feedId = data.content.feed_id;
var story = document.getElementById(storyId);
story.classList.add('unread-story');

// Avoid next click on story title
document.getElementById(storyId).getElementsByClassName("accordion-toggle")[0].setAttribute('onclick', 'readStory("' + storyId + '", true)');

story.getElementsByClassName("story-read-toggle")[0].setAttribute('onclick', 'readStory("' + storyId + '")');
story.getElementsByClassName("story-read-toggle")[0].setAttribute('onclick', 'readStory("' + storyId + '")');
story.getElementsByClassName("story-read-toggle")[0].innerHTML = 'Mark as read';

var counter = cleanCounter(document.getElementById(feedId).getElementsByClassName('unread-counter')[0].innerHTML);
counter = counter + 1;
console.log(counter);

if (counter > 0) {
document.getElementById(feedId).getElementsByClassName('unread-counter')[0].innerHTML = '(' + counter + ')';
document.getElementById(feedId).getElementsByClassName('unread-counter')[0].style.display = "";
document.getElementById(feedId).getElementsByClassName('unread-counter')[0].style.display = "block";
if (!document.getElementById(feedId).classList.contains('unread')) {
document.getElementById(feedId).classList.add('unread');
}
Expand All @@ -363,7 +381,7 @@ function unreadStory(storyId) {
}
document.getElementById(storyId).getElementsByClassName("accordion-toggle")[0].style.fontWeight = 'bold';
} else {
if (callback == "/api/login") { window.location = "/login" }
if (data.callback == "/api/login") { window.location = "/login" }
}
}
}
Expand Down Expand Up @@ -411,6 +429,13 @@ function initAddFeed() {
document.getElementById('menu').appendChild(addFeed);
}

function initSettingsView() {
document.getElementById('OPMLSubmit').addEventListener('click', handleOPMLImport, false);
document.getElementById('OPMLFile').addEventListener('change', function() {
document.getElementById('upload-file-info').innerHTML = document.getElementById('OPMLFile').value.replace("C:\\fakepath\\", "");
});
}

function initPage() {
// Remove anchors binding for mobile view
var feeds = document.getElementById('menu').getElementsByClassName('feed');
Expand Down Expand Up @@ -503,15 +528,71 @@ function collapseIn (accordionGroupRoot) {
}
}

function getCurrentStory() {
var story = document.getElementsByClassName('selected-story')[0];
if (typeof story === "undefined") { return false }
return story;
}

function getNextStory() {
var story = document.getElementsByClassName('selected-story')[0];
if (typeof story === "undefined") { return false }
if (story.nextSibling == null) { return false }
return story.nextSibling;
}

function getPreviousStory() {
var story = document.getElementsByClassName('selected-story')[0];
if (typeof story === "undefined") { return false }
if (story.previousSibling == null) { return false }
return story.previousSibling;
}

function toggleReadState(storyId) {
console.log(storyId);
var story = document.getElementById(storyId);
if (story.classList.contains('unread-story')) {
readStory(storyId);
} else {
unreadStory(storyId);
}
}

// Keyboard
function setKeyboard(){
Mousetrap.bind('g h', function() { viewHome(); });
Mousetrap.bind('r', function() { refreshCounters(); });
Mousetrap.bind('a', function() { addToggle(); });
Mousetrap.bind('m', function() {
var story = getCurrentStory();
if (story == false) { return }
toggleReadState(story.getAttribute('id'));
});
Mousetrap.bind('o', function() {
var story = getCurrentStory();
if (story == false) { return }
story.getElementsByTagName('a')[0].click()
});
Mousetrap.bind('k', function() {
var nextStory = getNextStory();
if (nextStory == false) { return }
nextStory.getElementsByTagName('a')[0].click();
});
Mousetrap.bind('j', function() {
var previousStory = getPreviousStory();
if (previousStory == false) { return }
previousStory.getElementsByTagName('a')[0].click();
});

}

// Utils
function addEventListenerList(list, event, fn) {
for (var i = 0, len = list.length; i < len; i++) {
list[i].addEventListener(event, fn, false);
}
}



function addToggle() {
var add = document.getElementById('add');
if (add.style.display == "block" ) {
Expand Down Expand Up @@ -569,7 +650,6 @@ function cleanCounter(counter) {
};
}(DOMParser));


// Get XHR Object
function getXMLHttpRequest() {
var xhr = null;
Expand Down
9 changes: 9 additions & 0 deletions leselys/static/js/mousetrap.js
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions leselys/templates/layout.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@
<link href="{{ url_for('static', filename='css/bootstrap-responsive.min.css') }}" rel="stylesheet">
<link href="{{ url_for('static', filename='css/leselys.css') }}" rel="stylesheet">
<script src="{{ url_for('static', filename='js/crel.js') }}"></script>
<script src="{{ url_for('static', filename='js/mousetrap.js') }}"></script>
<script src="{{ url_for('static', filename='js/leselys.js') }}"></script>
</head>
<body>
Expand Down
8 changes: 1 addition & 7 deletions leselys/templates/settings.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@
<div style="position:relative;">
<a id="OPMLButton" class='btn' href='javascript:;'>
Choose OPML File here
<input id="OPMLFile" type="file" style='position:absolute;z-index:2;top:0;left:0;filter: alpha(opacity=0);-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";opacity:0;background-color:transparent;color:transparent;' name="files[]" size="40" onchange='$("#upload-file-info").html($(this).val().replace("C:\\fakepath\\", ""));' multiple />
<input id="OPMLFile" type="file" style='position:absolute;z-index:2;top:0;left:0;filter: alpha(opacity=0);-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";opacity:0;background-color:transparent;color:transparent;' name="files[]" size="40" multiple />
</a>
<output id="list"></output>
&nbsp;
Expand Down Expand Up @@ -83,10 +83,4 @@
</div>
</div>
</div>

<script type="text/javascript">
$(document).ready(function(){
document.getElementById('OPMLSubmit').addEventListener('click', handleOPMLImport, false);
});
</script>
{% endblock %}

0 comments on commit ab03a06

Please sign in to comment.