Skip to content
This repository has been archived by the owner on Nov 3, 2021. It is now read-only.

Commit

Permalink
Merge pull request #32412 from Cwiiis/bug1168969-new-homescreen-unpin…
Browse files Browse the repository at this point in the history 
…-page

Bug 1168969 - Allow unpinning of pages. r=gmarty
  • Loading branch information
@Cwiiis
Cwiiis committed Oct 14, 2015
2 parents ab08c32 + 11a5c77 commit 3b4ca60
Show file tree
Hide file tree
Showing 15 changed files with 313 additions and 175 deletions.
12 changes: 6 additions & 6 deletions apps/homescreen/index.html
View file
Expand Up @@ -59,17 +59,13 @@
</head>

<body>
<div id="page-indicator"><span></span><span></span></div>
<div id="page-indicator"><span></span><span></span></div>
<div id="panels"><!--
--><div id="apps-panel">
<div class="shadow"></div>
<div class="scrollable">
<gaia-container id="apps" drag-and-drop></gaia-container>
</div>
<div id="bottombar">
<div id="uninstall"></div>
<div id="edit"></div>
</div>
<gaia-dialog id="cancel-download" class="dialog-action">
<section>
<p class="body" data-l10n-id="stop-download-body"></p>
Expand All @@ -88,9 +84,13 @@
--><div id="pages-panel">
<div class="shadow"></div>
<div class="scrollable">
<div id="pages"></div>
<gaia-container id="pages" drag-and-drop></gaia-container>
</div>
</div><!--
--></div>
<div id="bottombar">
<div id="remove"></div>
<div id="edit"></div>
</div>
</body>
</html>
101 changes: 50 additions & 51 deletions apps/homescreen/js/app.js
View file
Expand Up @@ -3,55 +3,54 @@
/* jshint nonew: false */
'use strict';

/**
* Timeout before resizing the apps grid after apps change.
*/
const RESIZE_TIMEOUT = 500;

/**
* Timeout before showing a dialog. Without this, the click that comes through
* after an activate event from gaia-container will close the dialog.
*/
const DIALOG_SHOW_TIMEOUT = 50;

/**
* The distance at the top and bottom of the icon container that when hovering
* an icon in will cause scrolling.
*/
const AUTOSCROLL_DISTANCE = 30;

/**
* The timeout before auto-scrolling a page when hovering at the edges
* of the grid.
*/
const AUTOSCROLL_DELAY = 750;

/**
* The time to wait after setting a scroll-position before disabling
* overflow during drag-and-drop.
*/
const AUTOSCROLL_OVERFLOW_DELAY = 500;

/**
* The height of the delete-app bar at the bottom of the container when
* dragging a deletable app.
*/
const DELETE_DISTANCE = 60;

/**
* App roles that will be skipped on the homescreen.
*/
const HIDDEN_ROLES = [
'system', 'input', 'homescreen', 'theme', 'addon', 'langpack'
];

/**
* Strings that are matched against to black-list app origins.
* TODO: This should not be hard-coded.
*/
const BLACKLIST = [];

(function(exports) {
/**
* Timeout before resizing the apps grid after apps change.
*/
const RESIZE_TIMEOUT = 500;

/**
* Timeout before showing a dialog. Without this, the click that comes through
* after an activate event from gaia-container will close the dialog.
*/
const DIALOG_SHOW_TIMEOUT = 50;

/**
* The distance at the top and bottom of the icon container that when hovering
* an icon in will cause scrolling.
*/
const AUTOSCROLL_DISTANCE = 30;

/**
* The timeout before auto-scrolling a page when hovering at the edges
* of the grid.
*/
const AUTOSCROLL_DELAY = 750;

/**
* The time to wait after setting a scroll-position before disabling
* overflow during drag-and-drop.
*/
const AUTOSCROLL_OVERFLOW_DELAY = 500;

/**
* The height of the delete-app bar at the bottom of the container when
* dragging a deletable app.
*/
const DELETE_DISTANCE = 60;

/**
* App roles that will be skipped on the homescreen.
*/
const HIDDEN_ROLES = [
'system', 'input', 'homescreen', 'theme', 'addon', 'langpack'
];

/**
* Strings that are matched against to black-list app origins.
* TODO: This should not be hard-coded.
*/
const BLACKLIST = [];

function App() {
// Chrome is displayed
Expand All @@ -65,7 +64,7 @@ const BLACKLIST = [];
this.scrollable = document.querySelector('#apps-panel > .scrollable');
this.icons = document.getElementById('apps');
this.bottombar = document.getElementById('bottombar');
this.uninstall = document.getElementById('uninstall');
this.remove = document.getElementById('remove');
this.edit = document.getElementById('edit');
this.cancelDownload = document.getElementById('cancel-download');
this.resumeDownload = document.getElementById('resume-download');
Expand Down Expand Up @@ -751,7 +750,7 @@ const BLACKLIST = [];
this.scrollable.style.overflow = '';
this.bottombar.classList.remove('active');
this.edit.classList.remove('active');
this.uninstall.classList.remove('active');
this.remove.classList.remove('active');

if (this.autoScrollInterval !== null) {
clearInterval(this.autoScrollInterval);
Expand Down Expand Up @@ -879,7 +878,7 @@ const BLACKLIST = [];
this.autoScrollInterval = null;
}

this.uninstall.classList.toggle('active', inDelete);
this.remove.classList.toggle('active', inDelete);
this.edit.classList.toggle('active', inEdit);
break;

Expand Down
73 changes: 68 additions & 5 deletions apps/homescreen/js/pages.js
View file
Expand Up @@ -8,12 +8,20 @@ const PAGES_ICON_SIZE = 30;

(function(exports) {

/**
* The height of the delete-app bar at the bottom of the container when
* dragging a deletable app.
*/
const DELETE_DISTANCE = 60;

function Pages() {
// Element references
this.panels = document.getElementById('panels');
this.pages = document.getElementById('pages');
this.shadow = document.querySelector('#pages-panel > .shadow');
this.scrollable = document.querySelector('#pages-panel > .scrollable');
this.bottombar = document.getElementById('bottombar');
this.remove = document.getElementById('remove');

// Scroll behaviour
this.scrolled = false;
Expand All @@ -24,6 +32,10 @@ const PAGES_ICON_SIZE = 30;
// Signal handlers
this.pages.addEventListener('click', this);
this.pages.addEventListener('contextmenu', this);
this.pages.addEventListener('drag-start', this);
this.pages.addEventListener('drag-move', this);
this.pages.addEventListener('drag-end', this);
this.pages.addEventListener('drag-finish', this);
this.scrollable.addEventListener('scroll', this);
window.addEventListener('hashchange', this);

Expand All @@ -34,17 +46,21 @@ const PAGES_ICON_SIZE = 30;
document.addEventListener('places-set', (e) => {
var id = e.detail.id;
this.pagesStore.get(id).then((page) => {
if (!page.data.pinned) {
return;
}

for (var child of this.pages.children) {
if (child.dataset.id === id) {
this.updatePinnedPage(child, page.data);
if (!page.data.pinned) {
this.pages.removeChild(child);
} else {
this.updatePinnedPage(child, page.data);
}
return;
}
}

if (!page.data.pinned) {
return;
}

// A new page was pinned.
this.addPinnedPage(page.data);
});
Expand Down Expand Up @@ -148,6 +164,53 @@ const PAGES_ICON_SIZE = 30;
e.stopImmediatePropagation();
break;

case 'drag-start':
document.body.classList.add('dragging');
this.bottombar.classList.toggle('editable', false);
this.bottombar.classList.toggle('removable', true);
this.bottombar.classList.add('active');
break;

case 'drag-move':
this.remove.classList.toggle('active',
e.detail.clientY > window.innerHeight - DELETE_DISTANCE);
break;

case 'drag-end':
e.preventDefault();
if (e.detail.clientY <= window.innerHeight - DELETE_DISTANCE) {
return;
}

var card = e.detail.target;
var id = card.dataset.id;

// Take the child out of flow so it doesn't return to its original
// position before being removed.
card.classList.add('unpinning');
card.style.transform = card.parentNode.style.transform;

this.pagesStore.get(id).then(entry => {
entry.data.pinned = false;
this.pagesStore.datastore.put(entry.data, id).then(() => {},
e => {
card.classList.remove('unpinning');
card.style.transform = '';
console.error('Error unpinning page:', e);
});
}, e => {
card.classList.remove('unpinning');
card.style.transform = '';
console.error('Error retrieving page to unpin:', e);
});
break;

case 'drag-finish':
document.body.classList.remove('dragging');
this.bottombar.classList.remove('active');
this.remove.classList.remove('active');
break;

case 'scroll':
var position = this.scrollable.scrollTop;
var scrolled = position > 1;
Expand Down
4 changes: 2 additions & 2 deletions apps/homescreen/manifest.webapp
View file
Expand Up @@ -30,8 +30,8 @@
"description": "View bookmarks."
},
"places": {
"readonly": true,
"description": "View data about browsing history."
"readonly": false,
"description": "View and modify data about browsing history."
},
"icons": {
"readonly": false,
Expand Down

0 comments on commit 3b4ca60

Please sign in to comment.