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 #31025 from albertopq/1168948-pinning-preview-card2
Browse files Browse the repository at this point in the history 
Bug 1168948 - Adding preview card r=benfrancis
  • Loading branch information
@benfrancis
benfrancis committed Jul 28, 2015
2 parents 862f089 + 6f1656f commit 3a14891
Show file tree
Hide file tree
Showing 17 changed files with 500 additions and 29 deletions.
1 change: 1 addition & 0 deletions apps/system/index.html
View file
Expand Up @@ -48,6 +48,7 @@
<script defer src="shared/elements/gaia_checkbox/script.js"></script>
<script defer src="shared/elements/gaia_progress/script.js"></script>
<script defer src="shared/elements/gaia_subheader/script.js"></script>
<script defer src="shared/elements/gaia_pin_card/script.js"></script>
<script defer src="shared/elements/gaia-header/dist/gaia-header.js"></script>

<!-- Include shared resources
Expand Down
129 changes: 113 additions & 16 deletions apps/system/js/app_chrome.js
View file
Expand Up @@ -6,11 +6,13 @@
/* global MozActivity */
/* global SettingsListener */
/* global Service */
/* global GaiaPinCard */

'use strict';

(function(exports) {
const DEFAULT_ICON_URL = '/style/chrome/images/default_icon.png';
const PINNING_PREF = 'dev.gaia.pinning_the_web';

var _id = 0;

Expand Down Expand Up @@ -39,6 +41,7 @@
this.scrollable = app.browserContainer;
this._currentOrigin = app.origin || '';
this._currentIconUrl = '';
this._loading = false;
this.render();

if (this.app.themeColor && this.app.themeColor !== '') {
Expand Down Expand Up @@ -122,6 +125,22 @@
<button type="button" class="forward-button"
data-l10n-id="forward-button" disabled></button>
<div class="urlbar js-chrome-ssl-information">
<section role="dialog" class="pin-dialog hidden">
<a href="#" data-action="cancel"></a>
<header>
<h2 data-l10n-id="pinning.pin-page">Pin Page</h2>
</header>
<div class="card-container"></div>
<div class="footer-container">
<button data-l10n-id="pinning.pin" data-action="pin">
Pin
</button>
<footer>
<span data-l10n-id="from">from</span>
<span class="origin"></span>
</footer>
</div>
</section>
<span class="pb-icon"></span>
<div class="site-icon"></div>
<div class="chrome-ssl-indicator chrome-title-container">
Expand Down Expand Up @@ -198,6 +217,14 @@
this.windowsButton = this.element.querySelector('.windows-button');
this.title = this.element.querySelector('.chrome-title-container > .title');
this.siteIcon = this.element.querySelector('.site-icon');

if (this.useCombinedChrome()) {
this.pinDialog = this.element.querySelector('.pin-dialog');
this.closePin = this.pinDialog.querySelector('a[data-action="cancel"]');
this.originElement = this.pinDialog.querySelector('.origin');
this.pinCardContainer = this.pinDialog.querySelector('.card-container');
}

this.sslIndicator =
this.element.querySelector('.js-chrome-ssl-information');

Expand All @@ -218,6 +245,7 @@
break;

case 'click':
this.hidePinDialogCard();
this.handleClickEvent(evt);
break;

Expand All @@ -232,11 +260,13 @@
case '_loading':
this.show(this.progress);
this.progress.start();
this._loading = true;
break;

case '_loaded':
this.hide(this.progress);
this.progress.stop();
this._loading = false;
break;

case 'mozbrowserloadstart':
Expand All @@ -252,6 +282,7 @@
break;

case '_locationchange':
this.hidePinDialogCard();
this.handleLocationChange();
break;

Expand Down Expand Up @@ -291,6 +322,11 @@
this.app.forward();
break;

case this.siteIcon:
evt.stopImmediatePropagation();
this.onClickSiteIcon();
break;

case this.title:
this.titleClicked();
break;
Expand Down Expand Up @@ -323,10 +359,6 @@
evt.stopImmediatePropagation();
this.onShare();
break;

case this.siteIcon:
evt.stopImmediatePropagation();
break;
}
};

Expand All @@ -340,6 +372,68 @@
window.dispatchEvent(new CustomEvent('global-search-request'));
};

AppChrome.prototype.onClickSiteIcon = function onClickSiteIcon() {
if (!this.app.isBrowser() || this._loading) {
this.app.debug('Pinning is only enabled in the browser');
return;
}
this.setPinDialogCard();
};

AppChrome.prototype.setPinDialogCard = function ac_setPinDialogCard(url) {
var card = new GaiaPinCard();
card.title = this.app.title;
card.icon = {
url: this.siteIcon.style.backgroundImage,
small: this.siteIcon.classList.contains('small-icon')
};
this.pinCardContainer.innerHTML = '';
this.app.getScreenshot(function() {
card.background = {
src: URL.createObjectURL(this.app._screenshotBlob),
themeColor: this.app.themeColor
};
}.bind(this));
this.pinCardContainer.appendChild(card);
this.setOrigin();
this.pinDialog.classList.remove('hidden');
};

AppChrome.prototype.setOrigin = function ac_setOrigin() {
var origin = this._currentOrigin.split('://')[1].split('.');
var tld = this.originElement.querySelector('.tld');

if (!tld) {
tld = document.createElement('span');
tld.className = 'tld';
} else {
tld.remove();
}

tld.textContent = origin.slice(origin.length - 2, origin.length).join('.');

if (origin.length > 2) {
var subdomains = origin.slice(0, origin.length - 2).join('.');
this.originElement.textContent = subdomains + '.';
}

this.originElement.appendChild(tld);
};

AppChrome.prototype.hidePinDialogCard = function ac_setPinDialogCard(url) {
this.pinDialog && this.pinDialog.classList.add('hidden');
};

AppChrome.prototype.expand = function ac_expand() {
this.element.classList.add('maximized');
};

AppChrome.prototype.collapse = function ac_collapse() {
window.removeEventListener('rocketbar-overlayclosed', this);
this.hidePinDialogCard();
this.element.classList.remove('maximized');
};

AppChrome.prototype.handleActionEvent = function ac_handleActionEvent(evt) {
if (evt.detail.type === 'close') {
this.app.kill();
Expand All @@ -358,11 +452,10 @@
// XXX Open a bug since I wonder if there is scrollgrab rounding issue
// somewhere. While panning from the bottom to the top, there is often
// a scrollTop position of scrollTopMax - 1, which triggers the transition!
var element = this.element;
if (this.scrollable.scrollTop >= this.scrollable.scrollTopMax - 1) {
element.classList.remove('maximized');
this.expand();
} else {
element.classList.add('maximized');
this.collapse();
}

if (this.app.isActive()) {
Expand All @@ -387,7 +480,17 @@
this.scrollable.addEventListener('scroll', this);
this.menuButton.addEventListener('click', this);
this.windowsButton.addEventListener('click', this);
this.siteIcon.addEventListener('click', this);

// Adding or removing the click listener, depending on
// the 'Pinning the Web' setting enabled or disabled
SettingsListener.observe(PINNING_PREF, '', function(enabled) {
var targets = [this.siteIcon, this.closePin];
var method = enabled ? 'addEventListener' : 'removeEventListener';
targets.forEach(function(element) {
element[method]('click', this);
}.bind(this));
}.bind(this));

} else {
this.header.addEventListener('action', this);
}
Expand Down Expand Up @@ -686,9 +789,7 @@
this.containerElement.classList.remove('scrollable');

// Expand
if (!this.isMaximized()) {
this.element.classList.add('maximized');
}
this.expand();
this.scrollable.scrollTop = 0;
}

Expand Down Expand Up @@ -737,11 +838,6 @@
eventSafety(element, 'transitionend', callback, 250);
};

AppChrome.prototype.collapse = function ac_collapse() {
window.removeEventListener('rocketbar-overlayclosed', this);
this.element.classList.remove('maximized');
};

AppChrome.prototype.isMaximized = function ac_isMaximized() {
return this.element.classList.contains('maximized');
};
Expand Down Expand Up @@ -900,6 +996,7 @@
if (url) {
this.siteIcon.classList.remove('small-icon');
this.siteIcon.style.backgroundImage = `url("${url}")`;
this._currentIconUrl = url;
return;
}

Expand Down
5 changes: 5 additions & 0 deletions apps/system/locales/system.en-US.properties
View file
Expand Up @@ -608,6 +608,11 @@ private-window-info2=While this device won’t have a record of your browsing hi

okCharsLeft = OK ({{n}})

# Pinning the Web
pinning.pin=Pin
pinning.pin-page=Pin Page
from=from

# Multi-Screen
multiscreen-pick=Choose an external display

Expand Down

0 comments on commit 3a14891

Please sign in to comment.