Skip to content

Commit 84aa4c9

Browse files
patuwwypatuwwy
authored
Merge pull request #92 from patuwwy/hot-fixes
Hot fixes for Shadertoy update
2 parents 1b898b7 + f348000 commit 84aa4c9

5 files changed

+379
-152
lines changed

‎CHANGELOG.md

+4
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
11
## ShaderToy extension changelog:
22

3+
- 0.12.172 (01-10-2019)
4+
5+
- Hot fixes for ShaderToy layout update.
6+
37
- 0.12.170 (08-09-2019)
48

59
- Show shader screenshot.

‎app/manifest.json

+7-7
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
{
22
"manifest_version": 2,
33
"name": "Shadertoy unofficial plugin.",
4-
"version": "0.12.170",
4+
"version": "0.12.172",
55
"description": "Shadertoy.com unofficial plugin.",
66
"homepage_url": "https://github.com/patuwwy/ShaderToy-Chrome-Plugin",
77
"background": {
8-
"scripts": ["background.js"],
8+
"scripts": [ "background.js" ],
99
"persistent": false
1010
},
11-
"permissions": ["https://www.shadertoy.com/*", "activeTab", "storage"],
11+
"permissions": [ "https://www.shadertoy.com/*", "activeTab", "storage" ],
1212
"icons": {
1313
"128": "assets/icon_active_128.png"
1414
},
@@ -19,10 +19,10 @@
1919
},
2020
"content_scripts": [
2121
{
22-
"matches": ["https://www.shadertoy.com/*"],
23-
"exclude_matches": ["https://www.shadertoy.com/signin"],
24-
"js": ["contentscript.js"],
25-
"css": ["style.css"],
22+
"matches": [ "https://www.shadertoy.com/*" ],
23+
"exclude_matches": [ "https://www.shadertoy.com/signin" ],
24+
"js": [ "contentscript.js" ],
25+
"css": [ "style.css" ],
2626
"run_at": "document_end"
2727
}
2828
],

‎app/shadertoy-plugin-common.js

+32-9
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,11 @@ class RecentShaders {
88
this.shaderID = window.gShaderID;
99
this.addRecent();
1010

11-
document.getElementById('saveButton').addEventListener('click', () => {
12-
this.addRecent();
13-
});
11+
document
12+
.getElementById('saveButton')
13+
.addEventListener('click', () => {
14+
this.addRecent();
15+
});
1416
}
1517

1618
this.createComponent();
@@ -43,15 +45,27 @@ class RecentShaders {
4345
let infoElement = document.createElement('li');
4446

4547
infoElement.classList.add('no-shaders-info');
46-
infoElement.textContent = 'All your shaders that you open \r\nwill be visible here.';
48+
infoElement.textContent =
49+
'All your shaders that you open \r\nwill be visible here.';
4750
list.appendChild(infoElement);
4851
}
4952

5053
return list;
5154
}
5255

5356
createComponent() {
54-
const targetEl = document.getElementById('headerLogin');
57+
let targetEl = document.querySelector('#headerBlock2 > span');
58+
59+
if (!targetEl) {
60+
targetEl = document.createElement('span');
61+
document
62+
.querySelector('#headerBlock2')
63+
.insertBefore(
64+
targetEl,
65+
document.querySelector('#headerBlock2 > *')
66+
);
67+
targetEl.style.margin = '14px 0';
68+
}
5569

5670
if (this.recentList) {
5771
targetEl.removeChild(this.recentList);
@@ -68,14 +82,18 @@ class RecentShaders {
6882
checkbox.id = 'ste-recent-checkbox';
6983

7084
this.recentList.textContent = 'Open recent...';
71-
this.recentList.classList.add('recent-list', 'formButton', 'formButton-extension');
85+
this.recentList.classList.add(
86+
'recent-list',
87+
'formButton',
88+
'formButton-extension'
89+
);
7290

7391
this.recentList.appendChild(checkbox);
7492
this.recentList.appendChild(list);
7593

7694
targetEl.insertBefore(this.recentList, targetEl.firstChild);
7795

78-
window.addEventListener('click', event => {
96+
window.addEventListener('click', (event) => {
7997
if (event.target.id !== 'ste-recent-checkbox') {
8098
checkbox.checked = false;
8199
}
@@ -95,7 +113,9 @@ class RecentShaders {
95113
addRecent() {
96114
const titleElement = document.getElementById('shaderTitle');
97115

98-
this.recentShaders = this.recentShaders.filter(shader => shader.id !== this.shaderID);
116+
this.recentShaders = this.recentShaders.filter(
117+
(shader) => shader.id !== this.shaderID
118+
);
99119

100120
if (titleElement.value) {
101121
this.recentShaders.unshift({
@@ -112,7 +132,10 @@ class RecentShaders {
112132
}
113133

114134
saveRecentShaders() {
115-
window.localStorage.setItem('RecentShaders', JSON.stringify(this.recentShaders));
135+
window.localStorage.setItem(
136+
'RecentShaders',
137+
JSON.stringify(this.recentShaders)
138+
);
116139
}
117140
}
118141

‎app/shadertoy-plugin-profile.js

+87-42
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@
2929
'<a href="{shaderUrl}" class="shader-tile">' +
3030
'<img class="shader-image" src="{previewUrl}"/>' +
3131
'<span class="shader-name">{shaderTitle}</span></a>',
32-
contentWrapper = null,
32+
userContent = null,
3333
/**
3434
* Stores Helpers instance.
3535
*
@@ -93,8 +93,12 @@
9393
*/
9494
rebuildList() {
9595
this.shadersListContainer = document.getElementById('divShaders');
96-
this.shadersTable = this.shadersListContainer.querySelector('table');
97-
this.shadersListRows = helpers.collectionToArray(this.shadersListContainer.querySelectorAll('tr'));
96+
this.shadersTable = this.shadersListContainer.querySelector(
97+
'table'
98+
);
99+
this.shadersListRows = helpers.collectionToArray(
100+
this.shadersListContainer.querySelectorAll('tr')
101+
);
98102
this.shadersListHeadRow = this.shadersListRows[0];
99103
// Add small preview images to shaders list.
100104
// Images are shown on hover.
@@ -125,10 +129,16 @@
125129
*/
126130
init() {
127131
document.body.classList.add('alternate-profile');
132+
128133
this.tilesWrapper = document.createElement('div');
129134
this.tilesWrapper.classList.add('tiles-wrapper');
130-
contentWrapper = document.getElementById('contentScroll');
131-
document.body.insertBefore(this.tilesWrapper, contentWrapper);
135+
136+
userContent = document.getElementById('userContent');
137+
138+
document
139+
.getElementById('content')
140+
.insertBefore(this.tilesWrapper, userContent);
141+
132142
this.userShaders = this.getShaders();
133143
// Need to wait for user's shaders to load.
134144
// This is a hot fix.
@@ -148,27 +158,36 @@
148158
* @returns {ShaderTile[]}
149159
*/
150160
getShaders() {
151-
return helpers.collectionToArray(document.querySelectorAll('#divShaders tr + tr')).map(function parseRow(tr) {
152-
var linkElement = tr.querySelector('td + td a'),
153-
link = linkElement.getAttribute('href'),
154-
status = tr.lastElementChild.previousElementSibling.textContent;
155-
return new ShaderTile(
156-
{
157-
id: link.replace('/view/', ''),
158-
link: link,
159-
title: linkElement.textContent,
160-
statusOrginal: status,
161-
status: status.replace(/(\s+|\+)/g, '').toLowerCase()
162-
},
163-
this
164-
);
165-
}, this);
161+
return helpers
162+
.collectionToArray(
163+
document.querySelectorAll('#divShaders tr + tr')
164+
)
165+
.map(function parseRow(tr) {
166+
var linkElement = tr.querySelector('td + td a'),
167+
link = linkElement.getAttribute('href'),
168+
status =
169+
tr.lastElementChild.previousElementSibling
170+
.textContent;
171+
return new ShaderTile(
172+
{
173+
id: link.replace('/view/', ''),
174+
link: link,
175+
title: linkElement.textContent,
176+
statusOrginal: status,
177+
status: status
178+
.replace(/(\s+|\+)/g, '')
179+
.toLowerCase()
180+
},
181+
this
182+
);
183+
}, this);
166184
}
167185
/**
168186
* Adds header with links to shaders' groups.
169187
*/
170188
addSecondHeader() {
171-
var SECOND_HEADER_CONTENT = '<a href="#contentScroll">Original part</a>',
189+
var SECOND_HEADER_CONTENT =
190+
'<a href="#contentScroll">Original part</a>',
172191
secondHeaderElement = document.createElement('div'),
173192
contents = '',
174193
headerAnchors = [],
@@ -177,17 +196,21 @@
177196
orginalPartAnchor.setAttribute('href', '#contentScroll');
178197
orginalPartAnchor.textContent = 'Orginal part';
179198
headerAnchors.push(orginalPartAnchor);
180-
helpers.collectionToArray(document.querySelectorAll('.tiles-wrapper > ul')).forEach((tilesList, i) => {
181-
var attr = tilesList.getAttribute('data-status'),
182-
anchor = document.createElement('a');
183-
184-
tilesList.setAttribute('id', 'toy-list-' + i);
185-
anchor.href = '#toy-list-' + i;
186-
anchor.textContent = attr;
187-
headerAnchors.push(anchor);
188-
});
199+
helpers
200+
.collectionToArray(
201+
document.querySelectorAll('.tiles-wrapper > ul')
202+
)
203+
.forEach((tilesList, i) => {
204+
var attr = tilesList.getAttribute('data-status'),
205+
anchor = document.createElement('a');
206+
207+
tilesList.setAttribute('id', 'toy-list-' + i);
208+
anchor.href = '#toy-list-' + i;
209+
anchor.textContent = attr;
210+
headerAnchors.push(anchor);
211+
});
189212
secondHeaderElement.classList.add('toyPlugHeader');
190-
headerAnchors.forEach(anchor => {
213+
headerAnchors.forEach((anchor) => {
191214
secondHeaderElement.appendChild(anchor);
192215
});
193216
document.body.prepend(secondHeaderElement);
@@ -213,7 +236,9 @@
213236
*/
214237
createHTML() {
215238
var tile = document.createElement('li'),
216-
targetElement = this.tilesView.tilesWrapper.querySelector('.list.' + this.shader.status);
239+
targetElement = this.tilesView.tilesWrapper.querySelector(
240+
'.list.' + this.shader.status
241+
);
217242

218243
if (!targetElement) {
219244
let list = document.createElement('ul'),
@@ -227,7 +252,10 @@
227252
}
228253

229254
tile.classList.add('shader');
230-
tile.innerHTML = TILE_TEMPLATE.replace('{previewUrl}', getPreviewUrlById(this.shader.id))
255+
tile.innerHTML = TILE_TEMPLATE.replace(
256+
'{previewUrl}',
257+
getPreviewUrlById(this.shader.id)
258+
)
231259
.replace('{shaderUrl}', getShaderUrlById(this.shader.id))
232260
.replace('{shaderTitle}', this.shader.title);
233261
targetElement.appendChild(tile);
@@ -265,16 +293,22 @@
265293
i = 0;
266294

267295
if (me.loading) {
268-
window.alert('Please wait while we are processing your request!');
296+
window.alert(
297+
'Please wait while we are processing your request!'
298+
);
269299
return;
270300
}
271301

272302
this.textContent = me.loadingCaption;
273-
ids = helpers.collectionToArray(document.querySelectorAll('#divShaders tr + tr')).map(function getShaderIdFromURL(tr) {
274-
var linkElement = tr.querySelector('a'),
275-
link = linkElement.getAttribute('href');
276-
return link.replace('/view/', '');
277-
}, this);
303+
ids = helpers
304+
.collectionToArray(
305+
document.querySelectorAll('#divShaders tr + tr')
306+
)
307+
.map(function getShaderIdFromURL(tr) {
308+
var linkElement = tr.querySelector('a'),
309+
link = linkElement.getAttribute('href');
310+
return link.replace('/view/', '');
311+
}, this);
278312
me.numShaders = ids.length;
279313

280314
if (ids.length > 0) {
@@ -300,7 +334,12 @@
300334
httpReq,
301335
str = '';
302336

303-
me.button.textContent = me.loadingCaption + ' ' + me.downloadResults.length + '/' + (me.numShaders + 1);
337+
me.button.textContent =
338+
me.loadingCaption +
339+
' ' +
340+
me.downloadResults.length +
341+
'/' +
342+
(me.numShaders + 1);
304343

305344
try {
306345
httpReq = new window.XMLHttpRequest();
@@ -318,7 +357,10 @@
318357
} else {
319358
me.loading = false;
320359
me.button.textContent = me.downloadCaption;
321-
window.ToyPlug.common.downloadJson(me.downloadResults[0].info.username + '.json', JSON.stringify(me.downloadResults));
360+
window.ToyPlug.common.downloadJson(
361+
me.downloadResults[0].info.username + '.json',
362+
JSON.stringify(me.downloadResults)
363+
);
322364
}
323365
},
324366
false
@@ -332,7 +374,10 @@
332374
);
333375
httpReq.open('POST', '/shadertoy', true);
334376
httpReq.responseType = 'json';
335-
httpReq.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
377+
httpReq.setRequestHeader(
378+
'Content-Type',
379+
'application/x-www-form-urlencoded'
380+
);
336381
str = '{ "shaders" : ["' + request.join('","') + '"] }';
337382
str = 's=' + encodeURIComponent(str);
338383
httpReq.send(str);

0 commit comments

Comments
 (0)