Initial release

ciriousjoker · Mar 5, 2017 · 94e7c3b · 94e7c3b
1 parent d10d97f
commit 94e7c3b
Show file tree

Hide file tree

Showing 38 changed files with 30,947 additions and 0 deletions.
diff --git a/MainActivity.html b/MainActivity.html
@@ -0,0 +1,107 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>ShufflePaper</title>
+
+    <!-- Import jquery -->
+    <script src="lib/jquery/js/jquery-3.1.1.min.js"></script>
+
+    <!-- Import mdl -->
+    <script src="lib/material-design-lite/js/material.min.js"></script>
+    <link rel="stylesheet" href="lib/material-design-lite/css/material.min.css">
+    <link rel="stylesheet" href="lib/material-design-lite/css/material-icons.css">
+
+    <!-- Import tether (dependency for bootstrap -->
+    <script src="lib/tether/js/tether.min.js"></script>
+
+    <!-- Import bootstrap -->
+    <link rel="stylesheet" href="lib/bootstrap/css/bootstrap.min.css">
+    <script src="lib/bootstrap/js/bootstrap.min.js"></script>
+  </head>
+  <body style="height: 100%;">
+    <div id="body" style="display:none;">
+      <div class="container-fluid">
+        <div class="row">
+          <div class="col-12">
+            <div class="mdl-shadow--2dp">
+              <div class="mdl-card__title">
+                <h2 class="mdl-card__title-text">ShufflePaper 0.9.0</h2>
+              </div>
+              <div class="mdl-card__supporting-text">
+                Choose a folder with your backgroud images. These will then be set as your wallpaper according to your preferences below.
+              </div>
+              <div class="mdl-card__actions mdl-card--border" style="padding: 16px; padding-bottom: 8px; padding-top: 8px;">
+                <div class="mdl-grid" style="padding: 0px !important">
+                  <div class="mdl-cell mdl-cell--6-col" style="width: calc(75%); margin: 0px; display: flex; align-items: center">
+                    <span></span>
+                    <div id="tv_chosen_folder" class="center-vertically"></div>
+                  </div>
+                  <div class="mdl-cell mdl-cell--2-col" style="width: calc(25%); margin: 0px">
+                    <button id="btn_choose_folder" class="mdl-button nofocus mdl-js-button mdl-button--raised mdl-button--colored mdl-js-ripple-effect" style="width: 100%; padding: 0">
+                      Choose a folder
+                    </button>
+                  </div>
+                </div>
+              </div>
+              <div class="mdl-card__menu">
+                <button id="btn_refresh" class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect">
+                  <i class="material-icons">autorenew</i>
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+
+      <!-- Preferences start here -->
+        <div class="row" style="flex-grow: 1; padding-top: 8px;">
+          <div class="col-12" style="display: flex;">
+            <div class="mdl-shadow--2dp" style="flex-grow: 1;">
+              <div class="mdl-card__title">
+                <h2 class="mdl-card__title-text">Preferences</h2>
+              </div>
+              <div class="mdl-card__supporting-text" style="width: 100%;">
+
+                <!-- START Switch "Choose random" -->
+                <div class="mdl-grid">
+                <label id="cb_choose_random" for="cb_choose_random_checkbox" class="mdl-switch mdl-js-switch mdl-js-ripple-effect nosidepadding">
+                  <div class="mdl-cell mdl-cell--6-col pref-label">
+                    Pick randomly
+                  </div>
+                  <div class="mdl-cell mdl-cell--2-col" style="width: calc(25%); margin: 0px">
+                      <input type="checkbox" id="cb_choose_random_checkbox" class="mdl-switch__input">
+                  </div>
+                </label>
+                </div>
+                <!-- END Switch "Choose random" -->
+
+                <!-- START Switch "New wallpaper every 15 minutes" -->
+                <div class="mdl-grid">
+                  <label id="cb_use_interval" for="cb_use_interval_checkbox" class="mdl-switch mdl-js-switch mdl-js-ripple-effect nosidepadding">
+                    <div class="mdl-cell mdl-cell--6-col pref-label">
+                      New wallpaper every 15 minutes
+                    </div>
+                    <div class="mdl-cell mdl-cell--2-col" style="width: calc(25%); margin: 0px">
+                        <input type="checkbox" id="cb_use_interval_checkbox" class="mdl-switch__input">
+                    </div>
+                  </label>
+                </div>
+                <!-- END Switch "New wallpaper every 15 minutes" -->
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </body>
+  <!-- Import utility packages -->
+  <script src="js/KeyConstants.js"></script>
+  <script src="js/SharedPreferences.js"></script>
+  <script src="js/Helper.js"></script>
+  <script src="js/WallpaperManager.js"></script>
+  <script src="js/AlarmManager.js"></script>
+
+  <!-- Load page specific scripts and styles -->
+  <script src="js/MainActivity.js"></script>
+  <link rel="stylesheet" href="css/general-styles.css">
+  <link rel="stylesheet" href="css/MainActivity.css">
+</html>
diff --git a/assets/ic_launcher_128.png b/assets/ic_launcher_128.png
diff --git a/assets/ic_launcher_16.png b/assets/ic_launcher_16.png
diff --git a/assets/ic_launcher_48.png b/assets/ic_launcher_48.png
diff --git a/assets/ic_launcher_512.png b/assets/ic_launcher_512.png
diff --git a/css/MainActivity.css b/css/MainActivity.css
@@ -0,0 +1,38 @@
+/*
+Material Switches:
+  Simple change from left-aligned to right aligned
+*/
+.mdl-switch__thumb {
+  right: 16px;
+  left: unset;
+  transition-property: right; }
+  .mdl-switch.is-checked .mdl-switch__thumb {
+    right: 0px;
+    left: unset; }
+.mdl-switch__track {
+  right: 0px;
+  left: unset;
+}
+.mdl-switch.is-upgraded {
+    padding-left: 0px; }
+
+/*
+Cards:
+  Remove some padding between title and text
+*/
+.mdl-card__title {
+  padding-bottom: 4px;
+}
+.mdl-card__supporting-text {
+  padding-top: 4px;
+}
+
+.container-fluid {
+    position: absolute;
+    bottom: 16px;
+    top: 16px;
+    left: 0;
+    right: 0;
+    display: flex;
+    flex-direction: column;
+}
diff --git a/css/general-styles.css b/css/general-styles.css
@@ -0,0 +1,29 @@
+.nofocus:focus {
+  outline: none !important;
+  border: none !important;
+  -moz-appearance:none;
+}
+
+.nosidepadding {
+  padding-left: 0;
+  padding-right: 0;
+  padding-top: 0px;
+  padding-bottom: 0px;
+}
+
+.pref-label {
+  width: calc(75%);
+  height: 100%;
+  margin: 0px;
+  display: flex;
+  align-items: center;
+}
+
+.center-vertically {
+  display: flex;
+  align-items: center;
+}
+
+.divider-top {
+  border-top: 1px solid rgba(0,0,0,.1);
+}
diff --git a/fonts/material-icons.woff2 b/fonts/material-icons.woff2
diff --git a/js/AlarmManager.js b/js/AlarmManager.js
@@ -0,0 +1,20 @@
+function ALARM() {}
+
+// Used as an identifier for the alarm used
+// to change the wallpaper every x minutes
+ALARM.WALLPAPER_INTERVAL = "wallpaper_change_interval";
+
+
+function AlarmManager() {}
+
+AlarmManager.set = function(id, interval) {
+  chrome.alarms.create(id, {
+   delayInMinutes: interval,
+   periodInMinutes: interval
+  });
+  console.log("Alarm created.");
+};
+
+AlarmManager.clear = function(id) {
+  chrome.alarms.clear(id);
+};
diff --git a/js/BackgroundService.js b/js/BackgroundService.js
@@ -0,0 +1,25 @@
+chrome.app.runtime.onLaunched.addListener(function(launchData) {
+  chrome.app.window.create(
+    '../MainActivity.html',
+    {
+      id: 'shufflepaper_mainActivity',
+      bounds: {
+        width: 630,
+        height: 350
+      },
+      innerBounds: {
+        minWidth: 600,
+        minHeight: 350
+      },
+      frame: {
+        type: "chrome",
+        color: "#323232"
+      }
+    }
+  );
+});
+
+chrome.alarms.onAlarm.addListener(function( alarm ) {
+  console.log("Changing wallpaper!", alarm);
+  loadNextWallpaper();
+});
diff --git a/js/Helper.js b/js/Helper.js
@@ -0,0 +1,32 @@
+function randomMinMax(min, max)
+{
+  return Math.floor(Math.random()*(max-min+1)+min);
+}
+
+function isdef(o) {
+  if(typeof o !== 'undefined') {
+    return true;
+  }
+  return false;
+}
+
+function getRoot(callback, return_anyway) {
+  prefs.get(Key.dir_id, function(result) {
+    if(isdef(result)) {
+      // Try to load the folder using the key
+      chrome.fileSystem.isRestorable(result, function (is_recoverable) {
+        if(is_recoverable) {
+          chrome.fileSystem.restoreEntry(result, function(rootDir) {
+            callback(rootDir);
+          });
+        }
+      });
+    } else {
+      if(return_anyway) {
+        callback();
+      }
+    }
+  },
+  // Flag to return even if the result would be 'undefined'
+  true);
+}
diff --git a/js/KeyConstants.js b/js/KeyConstants.js
@@ -0,0 +1,9 @@
+function Key() {}
+
+// File system
+Key.dir_id = "dir_id";
+Key.current_file_id = "current_file_id";
+
+// Wallpaper preferences
+Key.choose_random = "choose_random";
+Key.use_interval = "use_interval";
diff --git a/js/MainActivity.js b/js/MainActivity.js
@@ -0,0 +1,96 @@
+window.onload = function() {
+  loadDirPath();
+};
+
+function callbackCreator() {
+    var functionToCall = arguments[0];
+    var argumentsOfFunctionToCall = Array.prototype.slice.apply(arguments, [1]);
+    return function () {
+        var argumentsOfCallback = Array.prototype.slice.apply(arguments, [0]);
+        functionToCall.apply(this, argumentsOfFunctionToCall.concat(argumentsOfCallback));
+    };
+}
+
+var directory;
+
+$(document).ready(function() {
+  // Show the body once it's ready
+  $('#body').show();
+
+  // Load DirPath on startup
+  loadPreferences();
+
+  // Button handler for the "Choose a folder" - button
+  $('#btn_choose_folder').click(function(e) {
+    chrome.fileSystem.chooseEntry( {
+      type: 'openDirectory',
+      acceptsAllTypes: true
+    }, function(entry, fileentries) {
+      if(entry.isDirectory) {
+        // Directory was selected, store the key (to retain it) and the 
+        prefs.set(Key.dir_id, chrome.fileSystem.retainEntry(entry));
+        prefs.apply();
+        loadDirPath();
+      }
+    });
+  });
+
+  // Button handler for the refresh-button
+  $('#btn_refresh').click(function(e) {
+    loadNextWallpaper();
+  });
+
+  // Handler for the "random mode" - switch
+  $('#cb_choose_random_checkbox').change(function() {
+    console.log(this.checked);
+    prefs.set(Key.choose_random, this.checked);
+    prefs.apply();
+  });
+
+  // Handler for the "interval mode" - switch
+  $('#cb_use_interval_checkbox').change(function() {
+    console.log(this.checked);
+    prefs.set(Key.use_interval, this.checked);
+    prefs.apply();
+
+    if(!this.checked) {
+      AlarmManager.clear(ALARM.WALLPAPER_INTERVAL);
+    } else {
+      AlarmManager.set(ALARM.WALLPAPER_INTERVAL, 0.1);
+    }
+  });
+});
+
+// Functions to load preferences
+function loadPreferences() {
+  // Load the random mode checkbox
+  prefs.get(Key.choose_random, function(result) {
+    console.log("Random mode: " + result);
+    if(result === true) {
+      $('#cb_choose_random')[0].MaterialSwitch.on();
+    }
+  });
+
+  // Load the interval checkbox
+  prefs.get(Key.use_interval, function(result) {
+    console.log("Interval mode: " + result);
+    if(result === true) {
+      $('#cb_use_interval')[0].MaterialSwitch.on();
+    }
+  });
+}
+
+// Functions to store specific preferences
+function loadDirPath() {
+  getRoot(function(rootDir) {
+    if(!isdef(rootDir)) {
+      $('#tv_chosen_folder').html("Please speficy a folder <i class=\"material-icons\">keyboard_arrow_right</i>");
+    } else {
+      chrome.fileSystem.getDisplayPath(rootDir, function(path) {
+        $('#tv_chosen_folder').html(path);
+      }); 
+    }
+  },
+  // flag to return even if the result would be 'undefined'
+  true);
+}