Custom gallery added

RELEASE.md

@@ -1,6 +1,6 @@
 ### New Features:
-- Zoom animation on background
-- Animation on refresh/reload buttons
+- Select your own gallery
+- Vertical hight a little bit higher
 
 ### Bugfixes:
-- none
+- Update of directly reloades the images

js/options.js

@@ -9,16 +9,27 @@ async function save_options() {
   var safemode = document.getElementById('safemode').checked;
   var discover = document.getElementById('discover').value;
   var discoverCat = getSelectedValues(document.getElementById('discover_cat'));
+  var cGalleryUrl = document.getElementById('cgalleryurl').value;
   var name = document.getElementById('name').value;
   var interval = parseInt(document.getElementById('interval').value);
   var random = document.getElementById('random').checked;
 
+  // check if custom gallery URL has changed to load id and slug
+  let gallery = await getGallery(cGalleryUrl);
+  if (gallery.legacyId === '' || gallery.slug === '') {
+    document.getElementById('save').classList.remove('is-loading');
+    return;
+  }
+
   saveConfig({
     time: time,
     greetings: greetings,
     safemode: safemode,
     discover: discover,
     discoverCat: discoverCat,
+    cGalleryUrl: cGalleryUrl,
+    cGalleryId: gallery.legacyId,
+    cGallerySlug: gallery.slug,
     name: name,
     interval: interval,
     random: random, 
@@ -75,7 +86,7 @@ function showStatus(text) {
   setTimeout(function () {
     status.textContent = '';
     status.style.display = 'none';
-  }, 2000);
+  }, 5000);
 }
 
 // Restores options using the preferences
@@ -91,6 +102,7 @@ async function restore_options() {
   document.getElementById('discover').value = config.discover;
   setSelectedValues(document.getElementById('discover_cat'), config.discoverCat);
   document.getElementById('name').value = config.name;
+  document.getElementById('cgalleryurl').value = config.cGalleryUrl;
   document.getElementById('interval').value = config.interval;
   document.getElementById('random').checked = config.random;
   updateCategory();
@@ -129,13 +141,84 @@ async function update_cache() {
 function updateCategory() {
   const discover = document.getElementById('discover');
   const category = document.getElementById('discover_cat'); 
+  const cgalleryurl = document.getElementById('cgalleryurl'); 
 
   if (discover.options[0].selected) {
     category.disabled = true;
+    cgalleryurl.disabled = true;
+  }
+  else if (discover.options[1].selected) {
+    category.disabled = true;
+    cgalleryurl.disabled = false;
   }
   else {
     category.disabled = false;
+    cgalleryurl.disabled = true;
+  }
+}
+
+async function getGallery(url) {
+  let result = {
+    "legacyId": "",
+    "slug": ""
+  };
+
+  // parse gallery url
+  let urlSplit = url.split('/');
+
+  // check for a gallery URL
+  if (urlSplit.length < 7) {
+    showStatus(chrome.i18n.getMessage('options_update_error_gallery_short'));
+    return result;
+  }
+
+  if (urlSplit[3]!=='p') {
+    showStatus(chrome.i18n.getMessage('options_update_error_gallery_missing_p'));
+    return result;
+  }
+
+  if (urlSplit[5]!=='galleries') {
+    showStatus(chrome.i18n.getMessage('options_update_error_gallery_missing_galleries'));
+    return result;
+  }
+
+  let userId = urlSplit[4];
+
+  result.legacyId = await getLegacyUserId(userId);
+  if (result.legacyId==='') {
+    showStatus(chrome.i18n.getMessage('options_update_error_gallery_userid', userId));
+    return result;
+  }
+
+  result.slug = urlSplit[6];
+
+  return result;
+}
+
+async function getLegacyUserId(userId) {
+  try {
+    // source of this query
+    // let query = `{"operationName":"ProfileRendererQuery","variables":{"username":"${userId}","avatarSizes":["MEDIUM","LARGE"]},"query":"query ProfileRendererQuery($username: String\u0021, $avatarSizes: [UserAvatarResizeImageSize\u0021]) {\\n  profile: userByUsername(username: $username) {\\n    id\\n    legacyId\\n    userType: type\\n    username\\n    firstName\\n    displayName\\n    registeredAt\\n    canonicalPath\\n    isFeaturedPhotographer\\n    isBlockedByMe\\n    originalAvatar: avatar {\\n      images {\\n        url\\n        id\\n      }\\n      id\\n    }\\n    avatar {\\n      ...ProfileAvatarRefetchContainer_avatar_2v4paw\\n      id\\n    }\\n    badges {\\n      badge\\n    }\\n    userProfile {\\n      username\\n      firstname\\n      lastname\\n      state\\n      country\\n      city\\n      about\\n      id\\n    }\\n    userSetting {\\n      firstnameVisible\\n      locationVisible\\n      id\\n    }\\n    socialMedia {\\n      website\\n      twitter\\n      instagram\\n      facebook\\n      id\\n    }\\n    socialMediaItems {\\n      name\\n      value\\n      visible\\n      id\\n    }\\n    coverPhotoUrl\\n    followedBy {\\n      totalCount\\n      isFollowedByMe\\n    }\\n    followingUsers {\\n      totalCount\\n    }\\n    membership {\\n      expiryDate\\n      membershipTier: tier\\n      photoUploadQuota\\n      refreshPhotoUploadQuotaAt\\n      paymentStatus\\n      id\\n    }\\n    profileTabs {\\n      tabs {\\n        name\\n        visible\\n        count\\n      }\\n    }\\n    ...EditCover_cover\\n    ...EditProfileCover_cover\\n    photoStats {\\n      likeCount\\n      viewCount\\n    }\\n    portfolio {\\n      id\\n      status\\n      userDisabled\\n    }\\n  }\\n}\\n\\nfragment EditCover_cover on User {\\n  coverPhotoUrl\\n}\\n\\nfragment EditProfileCover_cover on User {\\n  coverPhotoUrl\\n}\\n\\nfragment ProfileAvatarRefetchContainer_avatar_2v4paw on UserAvatar {\\n  id\\n  images(sizes: $avatarSizes) {\\n    size\\n    url\\n    id\\n  }\\n}\\n"}`;
+    let query = `{"operationName":"ProfileRendererQuery","variables":{"username":"${userId}"},"query":"query ProfileRendererQuery($username: String\u0021) {\\n  profile: userByUsername(username: $username) {\\n    id\\n    legacyId\\n}\\n}"}`;
+    const res = await fetch('https://api.500px.com/graphql', {
+      headers: {
+        'content-type': 'application/json',
+        'x-csrf-token': 'undefined'
+      },
+      referer: 'https://500px.com/',
+      body: query,
+      method: 'POST',
+      credentials: 'omit',
+    });
+    const result = await res.json();
+    if (result && result.data && result.data.profile && result.data.profile.legacyId) {
+      return result.data.profile.legacyId;
+    }
+  }
+  catch (error) {
+    console.log(error);
   }
+  return '';  // not found
 }
 
 document.addEventListener('DOMContentLoaded', restore_options);

js/storage.js

@@ -40,6 +40,9 @@ async function loadConfig() {
     lastPos: -1,                // the last position shown form the image cache (-1 if no picture has been shown)
     maxPos: 0,                  // the largest position in the cache which has been shown
     cursor: false,              // the search index of the last search for pagination
+    cGalleryUrl: '',            // URL of the gallery defined by the user
+    cGalleryId: '',             // id of the gallery owner defined by the user
+    cGallerySlug: ''            // slug (name of the gallery) of the gallery defined by the user
   }
 
   let opt = defaultConfig;
@@ -85,7 +88,7 @@ async function updateCache(forceUpdate = false, forceUrlUpdate = false) {
       config.imgUrl = images;
       config.imgUrlPos = 0;
       config.lastUrlUpdate = new Date().getTime();
-      if (!config.img) {
+      if (!config.img || forceUpdate) {
         config.maxPos = 0;
         config.lastPos = 0;
         config.img = [];
@@ -162,8 +165,23 @@ async function getImages(useCursor) {
       `{ "operationName":"GalleriesDetailPaginationContainerQuery","variables":{ "cursor": "${config.cursor}", "ownerLegacyId":"1006727773","slug":"500NewTabs","token":null,"pageSize":10,"showNude":true }, "query":"query GalleriesDetailPaginationContainerQuery( $cursor: String, $ownerLegacyId: String, $slug: String, $token: String, $pageSize: Int, $showNude: Boolean ) { gallery: galleryByOwnerIdAndSlugOrToken(ownerLegacyId: $ownerLegacyId, slug: $slug, token: $token) { ...GalleriesDetailPaginationContainer_gallery_15zZXN id } } fragment GalleriesDetailPaginationContainer_gallery_15zZXN on Gallery { id legacyId photos(first: $pageSize, after: $cursor, showNude: $showNude) { totalCount edges { cursor node { id legacyId canonicalPath notSafeForWork photographer: uploader { id legacyId username displayName } images(sizes: [35]) { size jpegUrl } } } pageInfo { endCursor hasNextPage } } }" }`;
     }
   }
+
+  if (config.discover == 'cgallery') {
+    query =
+    `{ "operationName":"GalleriesDetailQueryRendererQuery","variables":{ "ownerLegacyId":"${config.cGalleryId}","slug":"${config.cGallerySlug}","token":null,"pageSize":10,"showNude":true }, "query":"query GalleriesDetailQueryRendererQuery( $ownerLegacyId: String, $slug: String, $token: String, $pageSize: Int, $showNude: Boolean ) { gallery: galleryByOwnerIdAndSlugOrToken(ownerLegacyId: $ownerLegacyId, slug: $slug, token: $token) { ...GalleriesDetailPaginationContainer_gallery_15zZXN id } } fragment GalleriesDetailPaginationContainer_gallery_15zZXN on Gallery { id legacyId photos(first: $pageSize, showNude: $showNude) { totalCount edges { cursor node { id legacyId canonicalPath notSafeForWork photographer: uploader { id legacyId username displayName } images(sizes: [35]) { size jpegUrl } } } pageInfo { endCursor hasNextPage } } }" }`;
+
+    // in case of available cursor, use the cursor query
+    if (useCursor) {
+      // console.log(options.cursor);
+      if (config.cursor) {
+        query =
+        `{ "operationName":"GalleriesDetailPaginationContainerQuery","variables":{ "cursor": "${config.cursor}", "ownerLegacyId":"${config.cGalleryId}","slug":"${config.cGallerySlug}","token":null,"pageSize":10,"showNude":true }, "query":"query GalleriesDetailPaginationContainerQuery( $cursor: String, $ownerLegacyId: String, $slug: String, $token: String, $pageSize: Int, $showNude: Boolean ) { gallery: galleryByOwnerIdAndSlugOrToken(ownerLegacyId: $ownerLegacyId, slug: $slug, token: $token) { ...GalleriesDetailPaginationContainer_gallery_15zZXN id } } fragment GalleriesDetailPaginationContainer_gallery_15zZXN on Gallery { id legacyId photos(first: $pageSize, after: $cursor, showNude: $showNude) { totalCount edges { cursor node { id legacyId canonicalPath notSafeForWork photographer: uploader { id legacyId username displayName } images(sizes: [35]) { size jpegUrl } } } pageInfo { endCursor hasNextPage } } }" }`;
+      }
+    }
+  }
+
     // redefine the query in case of any other discovery option
-  if (config.discover != 'gallery') {
+  if (config.discover != 'gallery' && config.discover != 'cgallery') {
     let feature ='';
     if (config.discover !== '') {
       feature = `{ "key":"FEATURE_NAME", "value":"${config.discover}" }, `
@@ -184,6 +202,7 @@ async function getImages(useCursor) {
     }
 
   }
+
   const res = await fetch('https://api.500px.com/graphql', {
     headers: {
       'content-type': 'application/json',
@@ -198,7 +217,7 @@ async function getImages(useCursor) {
   let nodes;
   let piCursor;
   let hasNextPage = false;
-  if (config.discover === 'gallery') {
+  if (config.discover === 'gallery' || config.discover === 'cgallery') {
     if (result.data.gallery.photos) {
       nodes = result.data.gallery.photos.edges;
       if (result.data.gallery.photos.pageInfo && result.data.gallery.photos.pageInfo.endCursor) {

option.html

@@ -15,7 +15,6 @@
         <p class="modal-card-title" data-i18n="options_title">500NewTabs - Options</p>
       </header>
       <section class="modal-card-body">
-        <form>
           <div class="columns is-gapless is-multiline">
             <div class="column is-4">
               <label 
@@ -68,6 +67,7 @@
               <div class="select">
                 <select id="discover" style="width: 200px">
                   <option value="gallery" data-i18n="options_discover_1">Gallery</option>
+                  <option value="cgallery" data-i18n="options_discover_7">Custom Gallery</option>
                   <option value="" data-i18n="options_discover_6">All</option>
                   <option value="popular" data-i18n="options_discover_2">Popular</option>
                   <option value="upcoming" data-i18n="options_discover_3">Upcoming</option>
@@ -92,6 +92,17 @@
               </div>
             </div>
 
+            <div class="column is-4">
+              <label 
+                data-i18n="options_custom_gallery"
+                class="has-tooltip-right has-tooltip-arrow has-tooltipl-multiline"
+                attr-i18n="data-tooltip:options_tooltip_custom_gallery"
+              >Custom Category</label>
+            </div>
+            <div class="column is-8">
+              <input class="input" type="text" id="cgalleryurl" disabled>
+            </div>
+
             <div class="column is-4">
               <label 
                 data-i18n="options_safemode"
@@ -125,9 +136,7 @@
               <input type="checkbox" id="random">
             </div>
           </div>
-
 
-        </form>
       </section>
       <footer class="modal-card-foot">
         <button 

public/_locales/de/messages.json

@@ -208,5 +208,26 @@
   },
   "initial_waiting": {
     "message": "Laden initiale Bilder ..."
+  },
+  "options_discover_7": {
+    "message": "Eigene Gallerie"
+  },
+  "options_custom_gallery": {
+    "message": "Eigene Gallerie"
+  },
+  "options_tooltip_custom_gallery": {
+    "message": "URL der Gallerie. Wird beim Speichern geprüft."
+  },
+  "options_update_error_gallery_short": {
+    "message": "Speichern fehlgeschlagen! Die URL der Gallerie is zu kurz."
+  },
+  "options_update_error_gallery_missing_p": {
+    "message": "Speichern fehlgeschlagen! In der URL der Gallerie fehlt der Parameter '/p/'"
+  },
+  "options_update_error_gallery_missing_galleries": {
+    "message": "Speichern fehlgeschlagen! In der URL der Gallerie fehlt der Parameter '/galleries/'"
+  },
+  "options_update_error_gallery_userid": {
+    "message": "Speichern fehlgeschlagen! Die Benutzerkennung '$1' konnte nicht gefunden werden."
   }
 }

public/_locales/en/messages.json

@@ -208,5 +208,26 @@
   },
   "initial_waiting": {
     "message": "Loading initial images ..."
+  },
+  "options_discover_7": {
+    "message": "Custom Gallery"
+  },
+  "options_custom_gallery": {
+    "message": "Custom Gallery"
+  },
+  "options_tooltip_custom_gallery": {
+    "message": "URL of the gallery. Will be validated when saved."
+  },
+  "options_update_error_gallery_short": {
+    "message": "Save failed! The URL is too short."
+  },
+  "options_update_error_gallery_missing_p": {
+    "message": "Save failed! The parameter '/p/' is missing in the URL of the gallery."
+  },
+  "options_update_error_gallery_missing_galleries": {
+    "message": "Save failed! The parameter '/galleries/' is missing in the URL of the gallery."
+  },
+  "options_update_error_gallery_userid": {
+    "message": "Save failed! The user ID '$1' could not be validated in the gallery URL."
   }
 }