diff --git a/.babelrc b/.babelrc
new file mode 100644
index 0000000..f4bce23
--- /dev/null
+++ b/.babelrc
@@ -0,0 +1,14 @@
+{
+ "presets": ["es2015", "react", "stage-0"],
+ "plugins": [
+ [
+ "react-intl", {
+ "messagesDir": "./client/i18n/messages",
+ "enforceDescriptions": false
+ }
+ ]
+ ],
+ "ignore": [
+ "**/*.test.js"
+ ]
+}
diff --git a/.gitignore b/.gitignore
index 9c9e33c..a61d6c7 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,27 +1,45 @@
+# See http://help.github.com/ignore-files/ for more about ignoring files.
+
+# dependencies
node_modules
bower_components
+# testing
+/coverage
+
+# production
+#/build
+
+stats.html
+client/public/assets/js/stats.html
+
+# misc
+.DS_Store
+.env
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
.sass-cache
+client/lib
+
+client/src/scss/bourbon
+client/src/scss/neat
+client/src/scss/spec
_build/scss/bourbon
_build/scss/neat
_build/scss/font-awesome
_build/scss/html5-boilerplate
-_build/lib
-
-*.css.map
-assets/css/font-awesome*.css
-assets/fonts/
+/sources
+/sources.zip
-.baseDir.ts
-.baseDir.js
-.baseDir.js.map
+crowdin.yml
.tscache
-npm-debug.log
+prod/client/i18n
-_build/ts/DefinitelyTyped
+__snapshots__
-_build/tscommand-*
+/i18n
diff --git a/.travis.yml b/.travis.yml
new file mode 100644
index 0000000..1f56aa7
--- /dev/null
+++ b/.travis.yml
@@ -0,0 +1,16 @@
+language: node_js
+node_js:
+ - "6"
+deploy:
+ provider: heroku
+ api_key:
+ secure: sgbowaUrgNLjctC0b2Ld9Ruqx14PIKq149c7Rb7l0o7SuqLp/W/8NS8NnDzvSPOqzYfDw+fAidWlds1b2Lfbjx+7bYDFUz+zmPIQTTTR1oW0klOXD6h9gDHaV068t1JsbyCr4nvCCy38b+whw2Z+syzWUFwqmlfkSE4tmL6zSNmfB8yd84OWtQ9UoCwMCqiIORPoQUudOqCD5Ve6c1wJKQjftgYeEiit+UJK8dy2rpU5ElNHggDK4RFWf8M8ZlrFvTk9RR86ZUbdIrehXiZ1xIQJDsixDiu44f9XwnS0/c+txywLSKtIXUIPbaA8ftEk3jt4m8PXTxXVp+UQGTPhtjMr0YNBx3VdSEbFHm2zxBhopRgDR3HAyQ4DhDs3N22YkXugkpr8S0z+Vb/KlEf+WjXllVB9mVk5T2CdxVZ4feWDxrguHWP70JAEr1PqXUU2pJ3GKntAIbnfQDr1VJS4WnjxDGx6PVHGeQfmVdr5t9zCYt76z0s/dVhfWnVgTirZ3yAHf5osTnM0cS+/pBC6vMpoyUu+3x3SaBMxR2DhLNGUhGqwbcxndgfKFUeru6noxEBm87S+aFWQ6y3BKs4PRqrBU8bLEky39S1DMkMlHqXnFNwgmwKQbwZ2LCQ4X54hToT9fNWWQHH0zkWUoCoc85h6+9Ai9/TPsGwFXWXxHLo=
+ app: reacteureka
+ on:
+ repo: jpdevries/eureka
+ branch: release-2.0
+
+# safelist
+branches:
+ only:
+ - release-2.0
diff --git a/LICENSE b/LICENSE
index 3b41b4f..9bbafd0 100644
--- a/LICENSE
+++ b/LICENSE
@@ -1,22 +1,31 @@
-The MIT License (MIT)
+BSD License
-Copyright (c) 2015 JP DeVries
+For Eureka Browser software
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
+Copyright (c) 2015-present, John-Paul DeVries
+All rights reserved.
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
+Redistribution and use in source and binary forms, with or without modification,
+are permitted provided that the following conditions are met:
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+ * Redistributions of source code must retain the above copyright notice, this
+ list of conditions and the following disclaimer.
+ * Redistributions in binary form must reproduce the above copyright notice,
+ this list of conditions and the following disclaimer in the documentation
+ and/or other materials provided with the distribution.
+
+ * Neither the name Eureka Browser nor the names of its contributors may be used to
+ endorse or promote products derived from this software without specific
+ prior written permission.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
+ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
+WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR
+ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
+(INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
+LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON
+ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
+SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
diff --git a/README.md b/README.md
index fa101b4..9666eb3 100644
--- a/README.md
+++ b/README.md
@@ -1,194 +1,702 @@
-# Eureka
+# Eureka 🌲
+[](https://travis-ci.org/jpdevries/eureka) [](https://badge.fury.io/js/eureka-browser)
-Flexible Media Browser Component. [Try the demo](http://markup.tips/eureka).
-As seen in [Redactor 2.0](https://www.modmore.com/extras/redactor) by modmore. Contributions welcomed.
+Eureka is a progressively enhanced flexible media browser. Connected to your media sources through a REST API, this accessible web component allows users to browse media sources, upload files, and choose media items.
-> With `eureka.js` your users will be saying "I found it!" in no time.
+[🤗 Try the demo](https://eureka.markup.tips/).
+
+> With `eureka.js` users will be saying "I found it!" in no time.
— [@mrktps](https://twitter.com/mrktps)
-### Discuss
+## 💬 Discuss
Join the conversation in our public Gitter chat room.
[](https://gitter.im/jpdevries/eureka?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
-### Features
+## 📚 Wiki
+Don't forget to [browse the Wiki](https://github.com/jpdevries/eureka/wiki) for [more information on the REST API](https://github.com/jpdevries/eureka/wiki/REST-API), [patterns](https://github.com/jpdevries/eureka/wiki/Patterns), [screenshots](https://github.com/jpdevries/eureka/wiki/Screenshots) and more.
+
+## 🍻 Support
+The Eureka Media Browser and supporting resources are provided free as in beer.
+[Gratuities are accepted through Square Cash](https://cash.me/$devriesdev).
+
+## 🏋️♀️ Weigh In
+The Eureka Media Browser is pretty lightweight all things considered.
+
+| Asset | Weight (GZIP minified)
+| ------------- |:-------------:|
+| CSS Stylesheet | `7.83kB` |
+| SVG Icons | `7.88kB` |
+| React Component | `75.83kB` |
+
+[Have a gander at our Webpack Visualizer](https://eureka.markup.tips/assets/js/stats.html) 👀 .
+
+### 📄 HTML–first
+As a progressively enhanced web component, Eureka is functional HTML–first. This means that technically anything other than the initial HTML layer is a non–critical enhancement. Critical features supported by the HTML layer, such as browse, upload, and choose, are universally supported and do not depend on modern browsers, CSS styles, or script.
+
+😲 Take a gander at Eureka in the nued by waking our incredibly lightweight [raw HTML example](https://reacteureka.herokuapp.com/nued).
+
+We also encourage you to temporarily disable JavaScript in your browser and party with Eureka like it's 1999.
+
+## Powered By 🚀
+ - Progressively Enhanced from HTML components
+ - All–new Virtual DOM powered by React/Redux
+ - Node Server Side Rendering
+ - Node testing server
+
+## Highlights 🖋
+ - Configurable Rest API endpoints
- Browse multiple media sources for images
- Drag and Drop Upload Support
- Flexible Layout
- Responsive Design
- - Lightweight
- - no external dependencies (not even jQuery)
- - `eureka.min.js` 65kb minified
- - `eureka.min.css` 40kb minified
+ - Save Data with responsive thumbnails
+ - Configurable Styles via CSS Variables
- Accessible
- supports mobile and touch devices
- - supports `.no-js`
- - ARIA Keyboard Support
- - please log *any* a11y issues [here](https://github.com/jpdevries/eureka/issues)
+ - supports `.no-js` via server side rendering
+ - ARIA & Keyboard Support
+ - high contrast themes
+
+## 🚥 Features
+The level of isomorphism between the client and server side one can achieve with Node is unmatched. Eureka takes advantage of this unique strength of Node by, through an isomorphic server and standard synchronous forms, achieving full support for critical features.
+
+No features rely solely on sight or the use of a mouse. Keyboard use is supported. Accommodations are taken for users that benefit from high contrast themes. Visually hidden text is used to convey aspects of the interface that are otherwise visually implied to screen readers and assistive technology.
+
+The semantic HTML layer remains usable even absent of style as pure HTML.
+
+
+ Support of features against browser environments
+
+
+ Feature
+ .no-js< IE 9Chrome
+ Safari
+ Firefox
+ IE 11
+ Edge
+
+
+
+
+ Upload multiple files
+ ✅ ✅ ✅ ✅ ✅ ✅ ✅
+
+ Browse directories
+ ✅ ✅ ✅ ✅ ✅ ✅ ✅
+
+ Choose a media item
+ ✅ ✅ ✅ ✅ ✅ ✅ ✅
+
+ Keyboard Support
+ ✅ ✅ ✅ ✅ ✅ ✅ ✅
+
+ ARIA Support
+ ✅ ✳️ ✅ ✅ ✅ ✅ ✅
+
+ WCAG Level AA
+ ✅ ✅ ✅ ✅ ✅ ✅ ✅
+
+ Internationalization
+ ✅ ✅ ✅ ✅ ✅ ✅ ✅
+
+ Download Item
+ ✅ ✅ ✅ ✅ ✅ ✅ ✅
+
+ Choose Multiple Items
+ ❌ ❌ ✅ ✅ ✅ ✅ ✅
+
+ Delete Multiple Items
+ ❌ ❌ ✅ ✅ ✅ ✅ ✅
+
+ Keyboard Shortcuts
+ ❌ ❌ ✅ ✅ ✅ ✅ ✅
+
+ Crop Images
+ ❌ ❌ ✅ ✅ ✅ ✅ ✅
+
+ Paste to Upload
+ ❌ ❌ ✅ ✅ ✅ ✅ ✅
+
+ Media Source panel
+ ❌ ❌ ✅ ✅ ✅ ✅ ✅
+
+ Async UX
+ ❌ ❌ ✅ ✅ ✅ ✅ ✅
+
+ Filterable Data Table
+ ❌ ❌ ✅ ✅ ✅ ✅ ✅
+
+ Sortable Data Table
+ ❌ ❌ ✅ ✅ ✅ ✅ ✅
+
+ Drag 'n drop uploads
+ ❌ ❌ ✅ ✅ ✅ ✅ ✅
+
+ Grid Layout
+ ✅ ❌ ✅ ✅ ✅ ❌ ❌
+
+ Flexible Layout
+ ✅ ❌ ✅ ✅ ✅ ✅ ✅
+
+ View Chooser
+ ❌ ❌ ✅ ✅ ✅ ✅ ✅
+
+ Masonry Layout Mode
+ ❌ ❌ ✅ ✅ ✅ ✅ ✅
+
+ Pathbar
+ ❌ ❌ ✅ ✅ ✅ ✅ ✅
+
+ Rename Item
+ ❌ ❌ ✅ ✅ ✅ ✅ ✅
+
+ Delete Item
+ ❌ ❌ ✅ ✅ ✅ ✅ ✅
+
+ Download Multiple Items
+ ❌ ❌ ✅ ✅ ✅ ✅ ✅
+
+ Local Storage
+ ❌ ❌ ✅ ✅ ✅ ✅ ✅
+
+ Variable Styles
+ ✅ ❌ ✅ ✅ ✅ ❌ ✅
+
+ Accessible Themes
+ ✅ ❌ ✅ ✅ ✅ ❌ ✅
+
+ Mobile First Layout
+ ✅ ✳️ ✅ ✅ ✅ ✅ ✅
+
+ Fullscreen Mode
+ ❌ ❌ ✅ ✅ ✅ ✅ ✅
+
+ HTML5 Context Menus
+ ❌ ❌ 🔧 ❌ ✅ ❌ ❌
+
+ HTML5 Details
+ ✳️ ❌ ✅ ✅ ✅ ✳️ ✅
+
+ HTML5 Datalist
+ ✳️ ❌ ✅ ❌ ✅ ✳️ ✳️
+
+
+
+## 🛠 Usage
-### Tech Specs
- - Built [HTML-first](http://markup.tips/htmlftw) and powered by [Markup.tips](http://markup.tips)
- - ES5/6 JavaScript authored in [TypeScript](http://www.typescriptlang.org)
- - Extensible theme authored in Object Oriented [Sass](http://sass-lang.com)
- - Automation & Build powered by [Grunt](http://gruntjs.com)
+```bash
+npm install eureka-browser --save
+```
-### Preview
-
-Eureka draws a flexible view and allows users to browse, upload, and choose media items from any number of different media sources.
+#### Bower
+You can also install Eureka via Bower, which is a good way to fetch its stylesheet and icon sprite. There is also a UMD export of the `EurekaMediaBrowser` component for the unlikely case you'll need it.
-### Usage
+```bash
+npm install -g bower
+```
-`eureka.js` needs you to load at least one `JavaScript` file and one `CSS` stylesheet before getting started.
-```html
-
-` React component is styled by a standard CSS stylesheet. Include the CSS for the appropriate version of the media browser. Reference the theming section for [more information on styling Eureka](https://github.com/jpdevries/eureka#-theming).
```html
-
+
+
+
+```
+
+#### JS
```js
-var $muckboot = new MuckBoot({ // paint the DOM
- id:'media-browser_0',
- upload:true // if set to false will not add uploading related elements to the DOM
- createDir:false, // add create directory button
- enlargeFocusRows:true, // whether or not to make images in focused rows bigger
- hideImagesOnListView:undefined, // if true hides image thumbs in list view
- allowFullScreen:true
-});
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { EurekaMediaBrowser } from 'eureka-browser';
+
+ReactDOM.render(
+ ` components on the same page do not share the same DOM ids |
+| `assetsBasePath` | `"./assets/"` | Relative path to the Eureka assets directory |
+| `iconSVG` | `"./img/icons.svg"` | Path, relative to `assetsBasePath`, to the Eureka icon sprite sheet |
+| `callbacks` | `{close: undefined, choose: undefined}` | Object containing close and choose callbacks |
+| `headers` | `{'Powered-By': 'Eureka by Markup.tips'}` | Additional request headers sent with XHR requests |
+| `intervals` | `{searchBarPlaceholder: false,fetchDirectoryContents: 18000,updateSourceTree: false}` | Intervals for whether or not and how often to do things like hit the REST API for updated data or update the placeholder attribute based on the current directory listing |
+| `enlargeFocusedRows` | `false` | Whether or not to enlarge thumbnails of focused rows |
+| `mode` | `"table"` | Initial view mode (table, thumb, grid, list) |
+| `sort` | `"name"` | Initial column to sort media items on |
+| `allowFullscreen` | `true` | Whether or not the interface should offer a fullscreen button |
+| `emphasisFocusedMediaItem` | `true` | Whether or not to emphasis selected media items (defaults to emphasizing the filename, only applies to table and list view modes) |
+| `doDragNDrop` | `true` | Whether or not to enable drag 'n drop features |
+| `allowChooseMultiple` | `true` | Whether or not to allow multiple files to be chosen |
+| `allowInvertSelection` | `true` | Whether or not to allow selection of multiple items to be inverted |
+| `allowDownloadMultiple` | `true` | Whether or not to allow multiple selected items to be download as a zip file |
+
+
+
+*Please take note that when `useLocalStorage` is `true` any options manually passed in as props will take precedent.*
+
+## 🌐 Browser Support
+The server side rendering and HTML–first design patterns begin progressively enhancing a universally supported HTML layer. So basic features are supported in any browser. JavaScript support begins at IE9. Desired CSS layout requires Flexbox and is further enhanced with Grid Layout.
+
+## 🔡 i18n
+Eureka is on Crowdin. Please [contribute to our translations](https://crowdin.com/project/eureka-browser) if you are able.
+
+## ♿️ Accessibility Proclaimer
+Eureka strives for WCAG Level AA success criteria in all scenarios with some accessibility preference features leaning towards Level AAA. Please [log *any* a11y issues here](https://github.com/jpdevries/eureka/issues).
+
+## ✅ Getting Started
+We're going to use `yarn` so make sure that is installed.
+
+```bash
+npm install yarn -g
```
-Eureka has been instantiated it's up to your user to find or upload the content they seek.
+To fire up a testing server run the following:
-### API
-The endpoints you'll need to supply Eureka with are documented in [the Wiki](https://github.com/jpdevries/eureka/wiki/API-Docs).
+```bash
+git clone -b release-2.0 git://github.com/jpdevries/eureka.git
+cd eureka
+yarn prestart
+yarn build
+yarn serve # start the development server
+# open http://localhost:3001 # Node server
+```
-### Events
-`eureka.js` likes to let you know when things happen.
+To host the compiled production server run
+```bash
+yarn start # install, fetch sources, build
+```
-| Event | Note |
-| ------------ |:-------------- |
-| `EurekaModel.EurekaFoundIt` | Dispatched when a media item is chosen |
-| `EurekaModel.EurekaFileRename` | Dispatched when a media item is renamed |
-| `EurekaModel.EurekaUnlink` | Dispatched when a media item is deleted |
-| `EurekaModel.EurekaDirectoryCreated` | Dispatched when a new directory is created |
-| `EurekaModel.EurekaDirectoryOpened` | Dispatched when a directory is opened |
-| `EurekaModel.EurekaDirectoryChanged` | Dispatched when the current directory is changed |
-| `EurekaModel.EurekaMediaSourceChange` | Dispatched when the current media source is changed |
-| `EurekaModel.EurekaMediaSourcesListChange` | Dispatched when the list of available sources is updated |
-| `EurekaModel.EurekaViewChange` | Dispatched when the view mode is changed |
+or
+```bash
+yarn prod # fire up the production server
+```
+The testing server hosts the `sources` and `client/build` directories along with a REST API to `GET`, `POST`, `PUT`, `DELETE` media items.
+
-##### Listening to Events
-The `EurekaFoundIt` is dispatched from the DOM element itself. This means that if you create a new Eureka Browser named "foo" like so:
-```html
-
-
+## ⚒ Development
+The Eureka component is created with `create-react-app` and found in the `client` directory. There you can run React tests, build the React component, and start the development server.
+
+Firstly, you'll need the testing server running for the REST API:
+```bash
+cd eureka
+yarn server
```
-You can listen to when things happen like so:
-```js
-var el = document.getElementById('foo');
-el.addEventListener(EurekaModel.EurekaFoundIt,function(e){
- var data = e.detail;
- var src = data.src; // probably what you are interesting in
- var filename = data.filename; // also good to know
- var filesize = data.filesize;
- var timestamp = data.timestap;
-});
+Now, in another terminal tab:
+
+```bash
+cd client
+yarn build
+yarn test
+yarn start
+# open http://localhost:3000 # development server
```
-Isn't that neat?
+The development server, like any other React app created with `create-react-app`, will automatically inject changes as you save changes to your source files.
+
+## 🗄 REST API
+Eureka is hungry for remote media sources. It needs a REST API to feed it JSON data.
+Find docs at the [REST API wiki page](https://github.com/jpdevries/eureka/wiki/REST-API).
-##### Event Data
-Events attach relevent data to the `detail` property of the `Event` itself. `eureka.js` is still in rapid development and events and their corresponding data are not yet fully documented, so log it to the console and see what you get for now. It'll be our own little surprise.
+### 💄 Decorating Actions
+Eureka's core Redux actions assume you'll be using a REST API. If REST isn't really your thing, or you need to modify the Redux actions for some other reason, you can decorate the actions Eureka will use. This is done using a Higher Order Component that wraps `EurekaMediaBrowser` and injects a `decoratedActions` property which will be applied as a shallow merge on top of the default actions. Reference this [Gist example of decorating actions](https://gist.github.com/jpdevries/e967056bd31cf6f01df0e431df68283b) for an example.
-### Browser Support
-Eureka targets modern HTML5 browsers and uses the latest draft of the flexible box model spec. Of course utilizing the HTML layer should get you universal support in theory, but regarding CSS3 and JavaScript support for layout and progressive enhancements we support the following environments:
- - Chrome
- - Safari
- - Firefox
- - IE 11,10
- - Basic IE 9 support is available via some external shivs. See [Supporting IE9](https://github.com/jpdevries/eureka/wiki/Supporting-IE9).
- - Edge
- - Opera 35+
- - iOS Latest
- - Android Latest
+## 📠 Server Side Rendering
+Eureka is progressively enhanced with React to be asynchronous and a richer experience in capable browsers that successfully execute scripts. But Eureka's support doesn't end at modern browsers because its design process doesn't start there. Eureka is a semantic and synchronous HTML form before it is an enhanced Virtual DOM.
-### Keyboard Shortcuts
-In addition to the below shortcuts, Eureka supports standard tab-to-focus usability shortcuts.
+Reference the [Server Side Rendering Wiki page](https://github.com/jpdevries/eureka/wiki/Server-Side-Rendering) for documentations and examples on achieving world wide support.
+
+### ⌨️ Keyboard Shortcuts
+Eureka uses JavaScript events to enrich the user experience of keyboard users.
| Shortcut | Command |
| --------------- |:-------------: |
-| Toggle Sidebar | ctrl ; |
-| Change View | ctrl alt (1-5) |
-| Change Media Source | alt (1-9) |
+| Toggle Sidebar | ctrl+; |
+| Change View | ctrl+alt+(1-5) |
+| Change Media Source | alt+(1-9) |
| Delete Item | backspace |
| Expand Item | spacebar |
| Choose Item | return |
-| Create Directory | ctrl n |
-| Upload Files | ctrl u |
-| Rename Item | ctrl r |
-| Filter Items | ctrl f |
+| Create Directory | ctrl+n |
+| Create file | ctrl+shift+n |
+| Upload Files | ctrl+u |
+| Rename Item | ctrl+r |
+| Filter Items | ctrl+f |
+| Sort Ascending | alt+up |
+| Sort Descending | alt+down |
+| Sort by filename | alt+n |
+| Sort by dimensions | alt+d |
+| Sort by file size | alt+f |
+| Sort by edited on | alt+e |
+| Set Choose Mode to Single | alt+s |
+| Set Choose Mode to Multiple | alt+m |
+| Invert Selection | alt+i |
+
+
+## 🎨 Theming
+Request additional theming options and share your themes by [opening an issue](https://github.com/jpdevries/eureka/issues/new) or [joining the discussion on Gitter](https://gitter.im/jpdevries/eureka?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge).
+
+| Variable | Description |
+| ------------- | -----|
+| `--active` | Color used to highlight activated components such as the drop area |
+| `--border-width` | Generic border width for panels, components, inputs |
+| `--border-style` | Generic border style for panels, components, inputs |
+| `--border-color` | Generic border color for panels, components, inputs |
+| `--button-bg` | Background color of button elements |
+| `--button-color` | Color of button text |
+| `--color` | Default text color |
+| `--dangerous` | Color to use for warnings and errors |
+| `--light-bg` | Generic light background color, used for panels |
+| `--link-color` | Default anchor text color |
+| `--panel-border-color` | Border color of panel components |
+| `--subtle` | Subtle color, used for Media Source Panel |
+| `--very-subtle` | Very subtle color, used for drop zone area |
+| `--very-subtle-icon-opacity` | Opacity for very subtle icons |
+
+## 📣 Audible Interface
+Eureka uses a combination of ARIA attributes and `.visually-hidden` text to offer an experience that is as accessible visually as it is audibly.
+
+
+
+There is one Achilles heel here. Depending on your media source API, you might not be able to provide alternative text for images and media items. In the event that no alt text is provided, Eureka will to the best it can. For example:
+
+> schildpad.jpg displays at 336x125, weighs 37 KB, and was edited on Sunday, April 02, 2017, Central European Summer Time
+
+## 📺 Fullscreen Mode
+To maximize usability Eureka leverages the Fullscreen API.
+
+
+See the Fullscreen Mode in action
+
+
+## 🏞 Masonry Layout
+Eureka is enhanced by a Masonry Layout mode.
+
+
+Masonry Layout Mode
+ ' + thead.outerHTML + '' + tbodyHTML + ' ' + '
';
- try {
- this.getElement().querySelector('nav.tree li.active').classList.remove('active');
- }
- catch (e) {
- }
- try {
- (function () {
- var el = that.getElement().querySelector('nav.tree li > a[data-cd="' + data.cd + '"]').parentNode;
- el.classList.add('active');
- el.classList.add('open');
- var folder = el.querySelector('.folder .fa-folder');
- folder.classList.add('fa-folder-open');
- folder.classList.add('icon-folder-open');
- folder.classList.remove('fa-folder');
- })();
- }
- catch (e) {
- }
- try {
- this.getElement().querySelector('.pathbrowser__topbar > select').value = data.cs;
- }
- catch (e) {
- }
- this.paint();
- };
- EurekaView.prototype.asyncronouslyAddDirectory = function (cd, directory) {
- var that = this;
- if (that.getController().getModel().getDebug())
- console.log('asyncronouslyAddDirectory');
- var pathBrowser = document.getElementById(that.getController().getModel().getUID() + '__pathbrowser');
- var paths = pathBrowser.querySelectorAll('.tree .path');
- var cds = cd.split('/').filter(Boolean);
- var p = cd + directory + '/';
- var psa = p.split('/').filter(Boolean);
- for (var i = 0; i < paths.length; i++) {
- var path = (paths[i]);
- if (path.getAttribute('data-cd').split('/').filter(Boolean).equals(psa)) {
- if (that.getController().getModel().getDebug())
- console.log(p + ' alread exists');
- return;
- }
- }
- for (var i = 0; i < paths.length; i++) {
- var path = (paths[i]);
- var pcd = path.getAttribute('data-cd');
- if (cds.equals(pcd.split('/').filter(Boolean))) {
- (function (_path) {
- var ul = _path.nextSibling;
- var paths = ul.querySelectorAll(':scope > li > .path');
- var inserted = false;
- for (var i = 0; i < paths.length; i++) {
- var path = paths[i];
- var _d = (function (path) {
- var a = path.getAttribute('data-cd').split('/').filter(Boolean);
- return a[a.length - 1];
- })(path);
- var s = [directory, _d];
- s.sort();
- if (s[0] == directory) {
- ul.insertBefore(that.createTreeNode(p), path.parentNode);
- inserted = true;
- break;
- }
- }
- if (!inserted) {
- ul.appendChild(that.createTreeNode(p));
- inserted = true;
- }
- })(path);
- }
- }
- (function () {
- var browsingSelect = document.getElementById(that.getController().getModel().getUID() + '__browsing');
- var mediaSource = that.getController().getModel().getCurrentMediaSource();
- var optsGrp = (function () {
- var os = browsingSelect.querySelectorAll('optgroup');
- for (var i = 0; i < os.length; i++) {
- var o = os[i];
- if (o.getAttribute('data-source') == mediaSource)
- return o;
- }
- return null;
- })();
- if (!optsGrp)
- return;
- var _iH = p.split('/').filter(Boolean).join('/');
- var opts = optsGrp.querySelectorAll('option');
- for (var i = 0; i < opts.length; i++) {
- var opt = opts[i];
- if (opt.innerHTML == _iH)
- return;
- }
- var newOpt = document.createElement('option');
- newOpt.setAttribute('value', JSON.stringify({ cs: that.getController().getModel().getCurrentMediaSource(), cd: _iH }));
- newOpt.setAttribute('data-cd', _iH + '/');
- newOpt.innerHTML = _iH;
- var inserted = false;
- for (var i = 0; i < opts.length; i++) {
- var opt = opts[i];
- var a = [opt.innerHTML, _iH];
- a.sort();
- if (_iH == a[0]) {
- optsGrp.insertBefore(newOpt, opt);
- inserted = true;
- break;
- }
- }
- if (!inserted)
- optsGrp.appendChild(newOpt);
- })();
- };
- EurekaView.prototype.assignContextualClickListeners = function () {
- var that = this;
- that.assignContexualCodeFocusListeners();
- assignChooseListeners();
- assignRenameListeners();
- assignDeleteListeners();
- function assignChooseListeners() {
- var anchors = that.getElement().querySelectorAll('tr.contextual a.choose');
- for (var i = 0; i < anchors.length; i++) {
- var anchor = anchors[i];
- anchor.addEventListener('click', function (e) {
- e.preventDefault();
- handleChooseClicked(this);
- }, false);
- anchor.addEventListener('focus', function (e) {
- that.getElement().parentNode.querySelector('footer.proceed .cta').classList.add('go');
- that.getElement().parentNode.querySelector('footer.proceed .cta').disabled = false;
- that.getElement().parentNode.querySelector('footer.proceed .cta').removeAttribute('disabled');
- }, false);
- anchor.addEventListener('blur', function (e) {
- that.getElement().parentNode.querySelector('footer.proceed .cta').classList.remove('go');
- }, false);
- }
- function handleChooseClicked(anchor) {
- var contextual = that.getClosest(anchor, 'tr');
- var mediaRow = contextual.previousSibling;
- that.getController().getModel().setChoosenMediaItem(mediaRow.getAttribute('data-filename'));
- }
- }
- function assignDeleteListeners() {
- var anchors = document.querySelectorAll('tr.contextual a.trash');
- for (var i = 0; i < anchors.length; i++) {
- var anchor = anchors[i];
- anchor.addEventListener('click', function (e) {
- handleTrashClicked(this);
- }, false);
- anchor.addEventListener('focus', function (e) {
- this.addEventListener('keydown', handleTrashKeyDown, false);
- }, false);
- anchor.removeEventListener('blur', function (e) {
- this.removeEventListener('keydown', handleTrashKeyDown, false);
- }, false);
- }
- function handleTrashClicked(anchor) {
- var contextual = that.getClosest(anchor, 'tr');
- var mediaRow = contextual.previousSibling;
- var nextRow = contextual.nextSibling;
- if (that.getController().getModel().getAlertBeforeDelete() && !window.confirm('Are you sure you want to delete ' + mediaRow.getAttribute('data-filename') + '?')) {
- return false;
- }
- that.getController().getModel().deleteFile(mediaRow.getAttribute('data-filename'), mediaRow);
- function remove(el) {
- try {
- el.remove();
- }
- catch (e) {
- el.parentNode.removeChild(el);
- }
- }
- remove(mediaRow);
- remove(contextual);
- try {
- nextRow.focus();
- }
- catch (e) { }
- }
- function handleTrashKeyDown(e) {
- if (e.keyCode === 13) {
- handleTrashClicked(this);
- }
- }
- }
- function assignRenameListeners() {
- var anchors = document.querySelectorAll('tr.contextual a.rename');
- for (var i = 0; i < anchors.length; i++) {
- var anchor = anchors[i];
- anchor.addEventListener('click', function (e) {
- e.preventDefault();
- var code = getCodeToFocus(this);
- selectCode(code);
- }, false);
- anchor.addEventListener('focus', function (e) {
- this.addEventListener('keydown', handleAnchorKeyDown, false);
- }, false);
- anchor.addEventListener('blur', function (e) {
- this.removeEventListener('keydown', handleAnchorKeyDown, false);
- }, false);
- }
- function handleAnchorKeyDown(e) {
- var code = getCodeToFocus(this);
- var tr = that.getClosest(this, '.contextual').previousSibling;
- if (e.keyCode === 13) {
- e.preventDefault();
- e.stopPropagation();
- selectCode(code);
- }
- }
- function selectCode(code) {
- code.focus();
- try {
- code.select();
- }
- catch (e) { }
- }
- function getCodeToFocus(anchor) {
- var tr = that.getClosest(anchor, 'tr');
- var mediaRow = tr.previousSibling;
- var code = mediaRow.querySelector('.eureka__row-image code[contenteditable="true"]');
- return code;
- }
- }
- };
- EurekaView.prototype.assignContexualCodeFocusListeners = function () {
- var that = this;
- var codes = this.getElement().querySelectorAll('tr.eureka__row .eureka__row-image code[contenteditable="true"]');
- for (var i = 0; i < codes.length; i++) {
- var code = codes[i];
- code.addEventListener('focus', function () {
- this.addEventListener('keydown', handleCodeKeyPress, false);
- }, false);
- function handleCodeKeyPress(e) {
- if (e.keyCode === 13) {
- e.preventDefault();
- var tr = this.parentNode.parentNode;
- var contextual = tr.nextSibling;
- var filename = tr.getAttribute('data-filename');
- code.contentEditable = 'false';
- var newFilename = this.innerHTML;
- that.getController().getModel().renameFile(filename, newFilename);
- var next = contextual.querySelector('nav > a.rename');
- next.focus();
- window.getSelection().collapse(next, 0);
- return false;
- }
- return true;
- }
- }
- };
- EurekaView.prototype.sortBrowseSelectOptGroupsByMediaSourceId = function (select) {
- if (select === undefined)
- select = document.getElementById(this.getController().getModel().getUID() + '__browsing').querySelector('select');
- var os = [];
- var optgrps = select.querySelectorAll('optgroup');
- for (var i = 0; i < optgrps.length; i++) {
- os.push(optgrps[i]);
- }
- var optgroups = os.sort(function (a, b) {
- return parseInt(a.getAttribute('data-source')) - parseInt(b.getAttribute('data-source'));
- });
- select.innerHTML = '';
- for (var _i = 0; _i < optgroups.length; _i++) {
- var optgroup = optgroups[_i];
- select.appendChild(optgroup);
- }
- };
- EurekaView.prototype.updateMediaSourceListings = function (data) {
- var that = this;
- if (that.getController().getModel().getDebug()) {
- console.log('updateMediaSourceListings: ');
- console.log(data);
- }
- var id = data.cs;
- var source = this.getController().getModel().getMediaSourceDTOByID(id);
- function updateTreeSelect() {
- if (that.getController().getModel().getDebug())
- console.log('updateTreeSelect');
- var select = document.getElementById(that.getController().getModel().getUID() + '__mediasource-select');
- var option = null;
- try {
- option = select.querySelector('option[value="' + id + '"]');
- }
- catch (e) { }
- if (!option) {
- option = document.createElement('option');
- option.setAttribute('value', id);
- option.innerHTML = data.title;
- select.appendChild(option);
- }
- }
- function updateTopBarSelect() {
- if (that.getController().getModel().getDebug())
- console.log('updateTopBarSelect');
- var select = document.getElementById(that.getController().getModel().getUID() + '__browsing').querySelector('select');
- if (that.getController().getModel().getDebug())
- console.log(select);
- var optgroup = null;
- try {
- optgroup = select.querySelector('optgroup[data-source="' + id + '"]');
- }
- catch (e) { }
- if (!optgroup) {
- optgroup = document.createElement('optgroup');
- optgroup.setAttribute('label', data.title);
- optgroup.setAttribute('data-source', id);
- }
- var results = data.results;
- if (that.getController().getModel().getPrependOptGroupsWithRootOption())
- results.unshift({ "path": "/" });
- var options = [];
- printOptGroupOptions(results);
- optgroup.innerHTML = '';
- function printOptGroupOptions(results) {
- function serialize(obj) {
- var str = [];
- for (var p in obj) {
- if (obj.hasOwnProperty(p)) {
- str.push((p) + "=" + (obj[p]));
- }
- }
- return str.join("&");
- }
- for (var i = 0; i < results.length; i++) {
- var result = results[i];
- var option = document.createElement('option');
- option.innerHTML = (that.sanitizeDisplayPath(result.path)) ? that.sanitizeDisplayPath(result.path) : result.path;
- option.setAttribute('value', JSON.stringify({ cs: data.cs, cd: that.sanitizeDisplayPath(result.path) }));
- option.setAttribute('data-cd', result.path);
- options.push(option);
- if (result.children && result.children.length)
- printOptGroupOptions(result.children);
- }
- }
- for (var _i = 0; _i < options.length; _i++) {
- var option = options[_i];
- optgroup.appendChild(option);
- }
- select.appendChild(optgroup);
- that.sortBrowseSelectOptGroupsByMediaSourceId(select);
- }
- updateTreeSelect();
- updateTopBarSelect();
- that.setBrowseSelectValue();
- that.setMediaSourceSelectValue();
- };
- EurekaView.prototype.getSelectedOption = function (select) {
- var options = select.querySelectorAll('option');
- for (var i = 0; i < options.length; i++) {
- var option = options[i];
- if (option.selected)
- return option;
- }
- };
- EurekaView.prototype.formatFileSize = function (size) {
- var sizes = [' Bytes', ' KB', ' MB', ' GB', ' TB', ' PB', ' EB', ' ZB', ' YB'];
- for (var i = 1; i < sizes.length; i++) {
- if (size < Math.pow(1024, i))
- return (Math.round((size / Math.pow(1024, i - 1)) * 100) / 100) + sizes[i - 1];
- }
- return size.toString();
- };
- EurekaView.prototype.getClosest = function (elem, selector) {
- var firstChar = selector.charAt(0);
- for (; elem && elem !== document; elem = elem.parentNode) {
- if (firstChar === '.') {
- if (elem.classList.contains(selector.substr(1))) {
- return elem;
- }
- }
- if (firstChar === '#') {
- if (elem.id === selector.substr(1)) {
- return elem;
- }
- }
- if (firstChar === '[') {
- if (elem.hasAttribute(selector.substr(1, selector.length - 2))) {
- return elem;
- }
- }
- if (elem.tagName.toLowerCase() === selector) {
- return elem;
- }
- }
- return null;
- };
- return EurekaView;
-}());
-var EurekaController = (function () {
- function EurekaController(opts) {
- this.opts = opts;
- this._model = opts.model;
- this._view = opts.view;
- }
- EurekaController.prototype.getModel = function () {
- return this._model;
- };
- EurekaController.prototype.getView = function () {
- return this._view;
- };
- EurekaController.prototype.init = function () {
- var that = this;
- var eureka = that.getView().getElement();
- if (that.getModel().useLocalStorage()) {
- (function () {
- var mediaSourcesData = that.getModel().getLocalStorage('mediaSourcesData');
- if (mediaSourcesData) {
- that.getModel().setMediaSourcesData(JSON.parse(mediaSourcesData));
- }
- })();
- (function () {
- var mediaSourceData = that.getModel().getLocalStorage(that.getModel().getCurrentMediaSource() + '_mediaSourceData');
- if (mediaSourceData) {
- that.getView().paintTree(JSON.parse(mediaSourceData));
- }
- })();
- (function () {
- var directoryData = that.getModel().getLocalStorage('lastDirectoryPainted');
- if (directoryData) {
- that.getView().paintJSON(JSON.parse(directoryData));
- }
- })();
- }
- eureka.addEventListener(EurekaModel.EurekaViewChange, function (e) {
- });
- eureka.addEventListener(EurekaModel.EurekaDirectoryChanged, function (e) {
- if (that.getModel().getDebug())
- console.log(EurekaModel.EurekaDirectoryChanged);
- function handleJSONData(d) {
- if (that.getModel().useLocalStorage())
- that.getModel().setLocalStorage('lastDirectoryPainted', JSON.stringify(d));
- if (that.getModel().getDebug())
- console.log(d);
- that.getView().paintJSON(d);
- }
- if (that.getModel().getUseWebWorkers()) {
- (function () {
- var worker = new Worker(that.getModel().getwebWorkersPath() + 'listdirectory.js');
- worker.addEventListener('message', function (e) {
- handleJSONData(e.data);
- }, false);
- worker.postMessage({
- listDirectoryRequestURL: that.getModel().getListDirectoryRequestURL(),
- currentMediaSource: that.getModel().getCurrentMediaSource(),
- currentDirectory: e.detail.currentDirectory || '/',
- headers: that.getModel().getXHRHeaders()
- });
- })();
- }
- else {
- var ajax = new AJAX();
- ajax.get(that.getModel().getListDirectoryRequestURL(), { s: that.getModel().getCurrentMediaSource(), dir: e.detail.currentDirectory || '/' }, function (data) {
- handleJSONData(JSON.parse(data));
- }, true, that.getModel().getXHRHeaders());
- }
- });
- eureka.addEventListener(EurekaModel.EurekaDirectoryOpened, function (e) {
- if (that.getModel().getDebug())
- console.log(EurekaModel.EurekaDirectoryOpened);
- var path = e.detail.path.charAt(e.detail.path.length - 1) == '/' ? e.detail.path : e.detail.path + '/';
- function handleJSONData(d) {
- if (that.getModel().getDebug())
- console.log(d);
- var results = d.results;
- for (var i = 0; i < results.length; i++) {
- var result = results[i];
- if (result.directory) {
- that.getView().asyncronouslyAddDirectory(path, result.directory);
- }
- }
- if (results.length)
- that.getView().assignTreeListeners();
- }
- if (that.getModel().getUseWebWorkers()) {
- (function () {
- var worker = new Worker(that.getModel().getwebWorkersPath() + 'listdirectory.js');
- worker.addEventListener('message', function (e) {
- handleJSONData(e.data);
- }, false);
- worker.postMessage({
- listDirectoryRequestURL: that.getModel().getListDirectoryChildrenRequestURL(),
- currentMediaSource: that.getModel().getCurrentMediaSource(),
- currentDirectory: e.detail.path || '/',
- headers: that.getModel().getXHRHeaders()
- });
- })();
- }
- else {
- var ajax = new AJAX();
- ajax.get(that.getModel().getListDirectoryChildrenRequestURL(), { s: that.getModel().getCurrentMediaSource(), dir: e.detail.path || '/' }, function (data) {
- handleJSONData(JSON.parse(data));
- }, true, that.getModel().getXHRHeaders());
- }
- });
- eureka.addEventListener(EurekaModel.EurekaMediaSourceChange, function (e) {
- if (that.getModel().getDebug())
- console.log(EurekaModel.EurekaMediaSourceChange);
- function handleJSONData(d) {
- if (that.getModel().getDebug())
- console.log(d);
- if (d.cs && that.getModel().useLocalStorage())
- that.getModel().setLocalStorage(d.cs + '_mediaSourceData', JSON.stringify(d));
- that.getView().paintTree(d);
- if (e.detail.clearDirectory == true)
- that.getModel().setCurrentDirectory('', true, false);
- }
- if (that.getModel().getUseWebWorkers()) {
- (function () {
- var worker = new Worker(that.getModel().getwebWorkersPath() + 'listsource.js');
- worker.addEventListener('message', function (e) {
- handleJSONData(e.data);
- }, false);
- worker.postMessage({
- listSourceRequestURL: that.getModel().getListSourceRequestURL(),
- currentMediaSource: that.getModel().getCurrentMediaSource(),
- headers: that.getModel().getXHRHeaders()
- });
- })();
- }
- else {
- var ajax = new AJAX();
- ajax.get(that.getModel().getListSourceRequestURL(), { s: e.detail.currentMediaSource }, function (data) {
- handleJSONData(JSON.parse(data));
- }, true, that.getModel().getXHRHeaders());
- }
- });
- eureka.addEventListener(EurekaModel.EurekaMediaSourcesListChange, function (e) {
- if (that.getModel().getDebug())
- console.log('MediaSourcesListChange: ');
- var sources = e.detail.sources;
- for (var i = 0; i < sources.length; i++) {
- var source = new EurekaMediaSource(sources[i].opts);
- var id = source.getID();
- requestMediaListings(source);
- function requestMediaListings(source) {
- if (that.getModel().getDebug())
- console.log('requestMediaListings');
- var id = source.getID();
- function handleJSONData(d) {
- if (that.getModel().getDebug())
- console.log(d);
- that.getView().updateMediaSourceListings(d);
- }
- if (that.getModel().getUseWebWorkers()) {
- (function () {
- var worker = new Worker(that.getModel().getwebWorkersPath() + 'listsource.js');
- worker.addEventListener('message', function (e) {
- handleJSONData(e.data);
- }, false);
- worker.postMessage({
- listSourceRequestURL: that.getModel().getListSourceRequestURL(),
- currentMediaSource: id,
- headers: that.getModel().getXHRHeaders()
- });
- })();
- }
- else {
- var ajax = new AJAX();
- ajax.get(that.getModel().getListSourceRequestURL(), { s: id }, function (data) {
- data = JSON.parse(data);
- handleJSONData(data);
- }, true, that.getModel().getXHRHeaders());
- }
- }
- }
- });
- if (that.getModel().getDebug())
- console.log('MediaSourcesListChange listener added');
- (function () {
- if (that.getModel().getDebug())
- console.log('requesting sources: ');
- function handleJSONData(d) {
- if (that.getModel().getDebug())
- console.log(d);
- if (that.getModel().useLocalStorage())
- that.getModel().setLocalStorage('mediaSourcesData', JSON.stringify(d));
- that.getModel().setMediaSourcesData(d);
- }
- if (that.getModel().getUseWebWorkers()) {
- (function () {
- var worker = new Worker(that.getModel().getwebWorkersPath() + 'listsources.js');
- worker.addEventListener('message', function (e) {
- handleJSONData(e.data);
- }, false);
- worker.postMessage({
- listSourcesRequestURL: that.getModel().getListSourcesRequestURL(),
- headers: that.getModel().getXHRHeaders()
- });
- })();
- }
- else {
- var ajax = new AJAX();
- ajax.get(that.getModel().getListSourcesRequestURL(), {}, function (data) {
- data = JSON.parse(data);
- handleJSONData(data);
- }, true, that.getModel().getXHRHeaders());
- }
- })();
- };
- return EurekaController;
-}());
-var MuckBoot;
-(function () {
- var d = document;
- MuckBoot = function (opts) {
- var defaults = {
- id: 'media-browser_0',
- upload: true,
- enlargeFocusRows: true,
- hideImagesOnListView: true
- };
- if (opts.id === undefined)
- opts.id = 'media-browser_0';
- if (opts.upload === undefined)
- opts.upload = true;
- if (opts.createDir === undefined)
- opts.createDir = true;
- if (opts.enlargeFocusRows === undefined)
- opts.enlargeFocusRows = true;
- if (opts.hideImagesOnListView === undefined)
- opts.hideImagesOnListView = true;
- if (opts.allowFullScreen === undefined)
- opts.allowFullScreen = true;
- this.opts = opts;
- this.muck();
- };
- MuckBoot.prototype.getID = function () {
- return this.opts.id;
- };
- MuckBoot.prototype.muck = function () {
- var that = this;
- var eureka = d.createElement('div');
- eureka.classList.add('view-a');
- if (this.opts.enlargeFocusRows)
- eureka.classList.add('enlarge-focused-rows');
- if (this.opts.hideImagesOnListView)
- eureka.classList.add('no-images-on-list');
- eureka.classList.add('eureka');
- eureka.classList.add('sidebar-open');
- eureka.setAttribute('id', this.opts.id);
- function createPathBrowser(opts) {
- var nav = d.createElement('nav');
- nav.setAttribute('id', opts.id + '__pathbrowser');
- nav.classList.add('pathbrowser');
- function createPathBrowserTopBar() {
- var div = d.createElement('div');
- div.classList.add('pathbrowser__topbar');
- var label = d.createElement('label');
- label.setAttribute('for', opts.id + '__mediasource-select');
- var heading = d.createElement('h4');
- heading.innerHTML = 'Media Source';
- label.appendChild(heading);
- var mediaSourceSelectLevelup = d.createElement('div');
- mediaSourceSelectLevelup.classList.add('mediasource-select-level-up');
- var select = d.createElement('select');
- select.setAttribute('id', opts.id + '__mediasource-select');
- select.setAttribute('title', 'Choose a Media Source to browse');
- mediaSourceSelectLevelup.appendChild(select);
- (function () {
- var a = d.createElement('a');
- a.setAttribute('href', '#');
- a.setAttribute('class', 'level-up');
- a.setAttribute('title', 'Browse Parent Directory');
- var i = d.createElement('i');
- i.classList.add('fa');
- i.classList.add('fa-level-up');
- i.classList.add('icon');
- i.classList.add('icon-level-up');
- a.appendChild(i);
- var p = d.createElement('p');
- p.classList.add('audible');
- p.innerHTML = 'Browse Parent Directory';
- a.appendChild(p);
- mediaSourceSelectLevelup.appendChild(a);
- })();
- div.appendChild(label);
- div.appendChild(mediaSourceSelectLevelup);
- return div;
- }
- function createPathBrowserNavTree() {
- var nav = d.createElement('nav');
- nav.classList.add('tree');
- var ul = d.createElement('ul');
- nav.appendChild(ul);
- return nav;
- }
- function createPathBrowserFooter() {
- var footer = d.createElement('footer');
- if (that.opts.upload)
- footer.classList.add('drop');
- var nav = d.createElement('nav');
- function createPathBrowserFooterMediaSourceInput() {
- var input = d.createElement('input');
- input.setAttribute('type', 'hidden');
- input.setAttribute('name', 'mediasource'),
- input.setAttribute('value', '0');
- return input;
- }
- function createPathBrowserFooterMediaPathInput() {
- var input = d.createElement('input');
- input.setAttribute('type', 'hidden');
- input.setAttribute('name', 'mediapath'),
- input.setAttribute('value', '/');
- return input;
- }
- function createPathBrowserFooterCreateNewForm() {
- nav.appendChild(createPathBrowserFooterMediaSourceInput());
- nav.appendChild(createPathBrowserFooterMediaPathInput());
- var btn = d.createElement('button');
- btn.setAttribute('type', 'submit');
- btn.setAttribute('class', 'nued create-new');
- btn.setAttribute('title', 'Create a new directory');
- var fa = d.createElement('i');
- fa.classList.add('fa');
- fa.classList.add('fa-plus-square');
- fa.classList.add('icon');
- fa.classList.add('icon-plus-square');
- var p = d.createElement('p');
- p.classList.add('audible');
- p.innerHTML = 'Create a new directory';
- btn.appendChild(fa);
- btn.appendChild(p);
- nav.appendChild(btn);
- return nav;
- }
- function createPathBrowserFooterSearchBtn() {
- var btn = d.createElement('a');
- btn.classList.add('btn');
- btn.setAttribute('href', '#' + that.opts.id + '__filter-images');
- var i = d.createElement('i');
- i.classList.add('fa');
- i.classList.add('fa-search');
- i.classList.add('icon');
- i.classList.add('icon-search');
- btn.appendChild(i);
- return btn;
- }
- function createPathBrowserFooterUploadForm() {
- var form = d.createElement('form');
- form.appendChild(createPathBrowserFooterMediaSourceInput());
- form.appendChild(createPathBrowserFooterMediaPathInput());
- var btn = d.createElement('button');
- btn.setAttribute('type', 'submit');
- btn.setAttribute('class', 'nued upload-files');
- btn.setAttribute('title', 'Upload a file');
- var fa = d.createElement('i');
- fa.classList.add('fa');
- fa.classList.add('fa-upload');
- fa.classList.add('icon');
- fa.classList.add('icon-upload');
- var p = d.createElement('p');
- p.classList.add('audible');
- p.innerHTML = 'Upload media';
- btn.appendChild(fa);
- btn.appendChild(p);
- form.appendChild(btn);
- return form;
- }
- if (that.opts.createDir)
- createPathBrowserFooterCreateNewForm();
- if (that.opts.upload) {
- (function () {
- var da = d.createElement('div');
- da.classList.add('droparea');
- var dz = d.createElement('div');
- dz.classList.add('dropzone');
- dz.setAttribute('title', 'Drag & Drop files here to upload them');
- var dzm = d.createElement('div');
- dzm.classList.add('progress');
- dz.appendChild(dzm);
- da.appendChild(dz);
- footer.appendChild(da);
- })();
- }
- if (opts.upload)
- nav.appendChild(createPathBrowserFooterUploadForm());
- footer.appendChild(nav);
- return footer;
- }
- nav.appendChild(createPathBrowserTopBar());
- nav.appendChild(createPathBrowserNavTree());
- nav.appendChild(createPathBrowserFooter());
- return nav;
- }
- function createBrowserStage(opts) {
- var browserStage = d.createElement('div');
- browserStage.setAttribute('id', opts.id + '__stage');
- browserStage.classList.add('stage');
- function createEurekaTopBar() {
- var div = d.createElement('div');
- div.classList.add('eureka__topbar');
- function createEurekaTopBarNav() {
- var nav = d.createElement('nav');
- nav.classList.add('eureka__topbar-nav');
- function createEurekaTopBarNavToggleBtn() {
- var a = d.createElement('a');
- a.setAttribute('id', opts.id + '__pathbrowser_toggle');
- a.classList.add('pathbrowser_toggle');
- a.setAttribute('title', 'Close Navigation Tree');
- a.setAttribute('data-title-close', 'Close Navigation Tree');
- a.setAttribute('data-title-open', 'Open Navigation Tree');
- a.setAttribute('data-toggle-target', opts.id + '__pathbrowser');
- var fa = d.createElement('i');
- fa.classList.add('fa');
- fa.classList.add('fa-toggle-left');
- fa.classList.add('icon');
- fa.classList.add('icon-toggle-left');
- a.appendChild(fa);
- return a;
- }
- function createEurekaTopbarBrowseSelectForm() {
- var form = d.createElement('form');
- form.setAttribute('action', '#');
- form.setAttribute('id', opts.id + '__browsing');
- var select = d.createElement('select');
- form.appendChild(select);
- return form;
- }
- function createEurekaTopBarBrowseSelect() {
- var div = d.createElement('div');
- div.setAttribute('id', opts.id + '__browse-select');
- div.classList.add('tablet-p-hidden');
- div.classList.add('browse-select');
- var label = d.createElement('label');
- label.classList.add('tablet-p-hidden');
- label.classList.add('browse-select');
- label.setAttribute('for', opts.id + '__browsing');
- label.innerHTML = 'Browse';
- div.appendChild(label);
- div.appendChild(createEurekaTopbarBrowseSelectForm());
- return div;
- }
- function createEurekaTopBarUploadForm() {
- var div = d.createElement('div');
- div.setAttribute('id', opts.id + '__upload');
- div.classList.add('upload-form');
- var label = d.createElement('label');
- label.setAttribute('for', opts.id + '__upload-form');
- label.innerHTML = 'Upload:';
- var form = d.createElement('form');
- form.setAttribute('action', '#');
- form.setAttribute('id', opts.id + '__upload-form');
- var input = d.createElement('input');
- input.setAttribute('id', opts.id + '__upload-input');
- input.setAttribute('multiple', 'multiple');
- input.setAttribute('name', 'uploadFiles');
- input.setAttribute('type', 'file');
- form.appendChild(input);
- div.appendChild(label);
- div.appendChild(form);
- return div;
- }
- function createEurekaTopBarViewBtns() {
- var div = d.createElement('div');
- div.classList.add('view-btns');
- var btns = [
- (function () {
- var a = d.createElement('a');
- a.classList.add('current');
- a.classList.add('view-a-btn');
- a.setAttribute('data-view', 'view-a');
- a.setAttribute('data-view-target', opts.id);
- a.setAttribute('asyncronous-title', 'Tabular Layout displays image thumbnails along with Name, Description, File Size and Edited On columns');
- var fa = d.createElement('i');
- fa.classList.add('fa');
- fa.classList.add('fa-th-list');
- fa.classList.add('icon');
- fa.classList.add('icon-th-list');
- a.appendChild(fa);
- return a;
- })(),
- (function () {
- var a = d.createElement('a');
- a.classList.add('view-b-btn');
- a.setAttribute('data-view', 'view-b');
- a.setAttribute('data-view-target', opts.id);
- a.setAttribute('asyncronous-title', 'Thumbnail layout displays a grid of medium sized thumbnails');
- var fa = d.createElement('i');
- fa.classList.add('fa');
- fa.classList.add('fa-th-large');
- fa.classList.add('icon');
- fa.classList.add('icon-th-large');
- a.appendChild(fa);
- return a;
- })(),
- (function () {
- var a = d.createElement('a');
- a.classList.add('view-d-btn');
- a.setAttribute('data-view', 'view-d');
- a.setAttribute('data-view-target', opts.id);
- a.setAttribute('asyncronous-title', 'Grid View displays images a grid of large images');
- var fa = d.createElement('i');
- fa.classList.add('fa');
- fa.classList.add('fa-square');
- fa.classList.add('icon');
- fa.classList.add('icon-square');
- a.appendChild(fa);
- return a;
- })(),
- (function () {
- var a = d.createElement('a');
- a.classList.add('view-d-btn');
- a.setAttribute('data-view', 'view-e');
- a.setAttribute('data-view-target', opts.id);
- a.setAttribute('asyncronous-title', 'List Layout displays Name, Description, File Size and Edited On columns');
- var fa = d.createElement('i');
- fa.classList.add('fa');
- fa.classList.add('fa-list');
- fa.classList.add('icon');
- fa.classList.add('icon-list');
- a.appendChild(fa);
- return a;
- })()
- ];
- if (opts.allowFullScreen)
- btns.push((function () {
- var a = d.createElement('a');
- a.classList.add('view-f-btn');
- a.setAttribute('data-view', 'view-f');
- a.setAttribute('title', 'Toggle Fullscreen Mode');
- var fa = d.createElement('i');
- fa.classList.add('fa');
- fa.classList.add('fa-expand');
- fa.classList.add('icon');
- fa.classList.add('icon-expand');
- a.appendChild(fa);
- return a;
- })());
- var nav = d.createElement('nav');
- for (var i = 0; i < btns.length; i++)
- nav.appendChild(btns[i]);
- div.appendChild(nav);
- return div;
- }
- function createEurekaTopbarNavHeader() {
- var header = d.createElement('header');
- var h4 = d.createElement('h4');
- h4.setAttribute('id', opts.id + '__mediacontent-current-source');
- var span = d.createElement('span');
- span.classList.add('mediasource-title');
- span.setAttribute('data-prepend', '');
- h4.innerHTML = 'Media Content ';
- h4.appendChild(span);
- header.appendChild(h4);
- header.appendChild(createEurekaTopBarForm());
- return header;
- }
- nav.appendChild(createEurekaTopbarNavHeader());
- function createEurekaTopBarNavSelect() {
- var div = d.createElement('div');
- div.classList.add('eureka__topbar-nav__select');
- div.appendChild(createEurekaTopBarNavToggleBtn());
- div.appendChild(createEurekaTopBarBrowseSelect());
- if (opts.upload)
- div.appendChild(createEurekaTopBarUploadForm());
- div.appendChild(createEurekaTopBarViewBtns());
- return div;
- }
- nav.appendChild(createEurekaTopBarNavSelect());
- return nav;
- }
- function createEurekaTopBarForm() {
- var form = d.createElement('form');
- var input = d.createElement('input');
- input.setAttribute('id', opts.id + '__filter-images');
- input.setAttribute('type', 'search');
- input.setAttribute('placeholder', 'Filter images');
- input.setAttribute('autocomplete', 'off');
- form.appendChild(input);
- return form;
- }
- div.appendChild(createEurekaTopBarNav());
- return div;
- }
- function createEurekaTable() {
- var div = d.createElement('div');
- div.classList.add('eureka-table');
- var table = d.createElement('table');
- var thead = d.createElement('thead');
- var tr = d.createElement('tr');
- var tbody = d.createElement('tbody');
- var ths = [
- (function () {
- var th = d.createElement('th');
- th.innerHTML = 'Name ';
- var fa = d.createElement('i');
- fa.classList.add('fa');
- fa.classList.add('fa-sort');
- fa.classList.add('icon');
- fa.classList.add('icon-sort');
- fa.setAttribute('data-sortby', 'name');
- fa.setAttribute('data-sort-asc', '1');
- th.appendChild(fa);
- return th;
- })(),
- (function () {
- var th = d.createElement('th');
- th.classList.add('dimensions');
- th.innerHTML = 'Dimensions ';
- var fa = d.createElement('i');
- fa.classList.add('fa');
- fa.classList.add('fa-sort');
- fa.classList.add('icon');
- fa.classList.add('icon-sort');
- fa.setAttribute('data-sortby', 'dimensions');
- fa.setAttribute('data-sort-asc', '1');
- th.appendChild(fa);
- return th;
- })(),
- (function () {
- var th = d.createElement('th');
- th.innerHTML = 'File Size ';
- var fa = d.createElement('i');
- fa.classList.add('fa');
- fa.classList.add('fa-sort');
- fa.classList.add('icon');
- fa.classList.add('icon-sort');
- fa.setAttribute('data-sortby', 'filesize');
- fa.setAttribute('data-sort-asc', '1');
- th.appendChild(fa);
- return th;
- })(),
- (function () {
- var th = d.createElement('th');
- th.innerHTML = 'Edited On ';
- var fa = d.createElement('i');
- fa.classList.add('fa');
- fa.classList.add('fa-sort');
- fa.classList.add('icon');
- fa.classList.add('icon-sort');
- fa.setAttribute('data-sortby', 'editedon');
- fa.setAttribute('data-sort-asc', '1');
- th.appendChild(fa);
- return th;
- })()
- ];
- for (var i = 0; i < ths.length; i++)
- tr.appendChild(ths[i]);
- thead.appendChild(tr);
- table.appendChild(thead);
- table.appendChild(tbody);
- div.appendChild(table);
- return div;
- }
- browserStage.appendChild(createEurekaTopBar());
- browserStage.appendChild(createEurekaTable());
- browserStage.appendChild(createEurekaTableUhOh());
- return browserStage;
- }
- function createEurekaTableUhOh() {
- var div = document.createElement('div');
- div.classList.add('eureka-table');
- div.classList.add('oh-no');
- var h3 = document.createElement('h3');
- var i = document.createElement('i');
- i.classList.add('fa');
- i.classList.add('fa-exclamation-triangle');
- i.classList.add('icon');
- i.classList.add('icon-exclamation-triangle');
- var code = document.createElement('code');
- var p = document.createElement('p');
- p.innerHTML = 'Oh no! Nothing was found in this directory .upload some files ? = [];
- private _navTreeHidden:boolean = false;
- private _useLocalStorage:boolean = true;
- private _mediaSource:string;
- private _currentDirectory:string = undefined;
- private _currentView:string = 'view-a';
- private _locale:string = 'en-US';
- private _selected:string = '';
- private _editable:boolean = true;
- private _headers:Array = [];
- private _debug:boolean = false;
- private _confirmBeforeDelete:boolean = true;
- private _fileUploadURL:string;
- private _displayFullTreePaths:boolean = false;
- private _allowRename:boolean = true;
- private _allowDelete:boolean = true;
- private _touch:boolean = false;
- private _prependOptGroupsWithRootOption:boolean = true;
- private _showDimensionsColumn:boolean = true;
- private _webWorkersPath:string = '';
-
- private _directoryRequestURL:string = '';
- private _directoryChildrenRequestURL:string = '';
- private _listSourceRequestURL:string = '';
- private _listSourcesRequestURL:string = '';
- private _useWebWorkers:boolean = false;
- private _sortMediaSources:boolean = false;
- private _fullscreenTarget:string = '.eureka-wrapper';
- private _mediaSourcesListInit:boolean = false;
- private _mediaSourceInit:boolean = false;
-
- public static get EurekaFoundIt():string { return "EurekaFoundIt"; }
- public static get EurekaFileRename():string { return "EurekaFileRename"; }
- public static get EurekaUnlink():string { return "EurekaUnlink"; }
- public static get EurekaDirectoryCreated():string { return "EurekaDirectoryCreated"; }
- public static get EurekaDirectoryOpened():string { return "EurekaDirectoryOpened"; }
- public static get EurekaDirectoryClosed():string { return "EurekaDirectoryClosed"; }
-
- public static get EurekaDirectoryChanged():string { return "EurekaDirectoryChanged"; }
- public static get EurekaMediaSourceInit():string { return "EurekaMediaSourceInit"; }
- public static get EurekaMediaSourceChange():string { return "EurekaMediaSourceChange"; }
- public static get EurekaMediaSourcesListInit():string { return "EurekaMediaSourcesListInit"; }
- public static get EurekaMediaSourcesListChange():string { return "EurekaMediaSourcesListChange"; }
- public static get EurekaViewChange():string { return "EurekaViewChange"; }
- public static get EurekaFilesUploaded():string { return "EurekaFilesUploaded"; }
- public static get EurekaCanceled():string { return "EurekaCanceled"; }
- public static get EurekaTreePainted():string { return "EurekaTreePainted"; }
-
- constructor(opts:any) {
- if(opts.uid !== undefined) this._uid = opts.uid;
- if(opts.storagePrefix !== undefined) this._storagePrefix = opts.storagePrefix;
- if(opts.locale !== undefined) this._locale = opts.locale;
- if(opts.mediaSource !== undefined) this._mediaSource = opts.mediaSource;
- if(opts.currentDirectory !== undefined) this._currentDirectory = opts.currentDirectory;
- if(opts.headers !== undefined) this._headers = opts.headers;
-
- if(opts.navTreeHidden !== undefined) this._navTreeHidden = opts.navTreeHidden;
- if(opts.useLocalStorage !== undefined) this._useLocalStorage = opts.useLocalStorage;
- if(opts.currentView !== undefined) this._currentView = opts.currentView;
- if(opts.selected !== undefined) this._selected = opts.selected;
- if(opts.displayFullTreePaths !== undefined) this._displayFullTreePaths = opts.displayFullTreePaths;
- if(opts.allowRename !== undefined) this._allowRename = opts.allowRename;
- if(opts.allowDelete !== undefined) this._allowDelete = opts.allowDelete;
-
- if(opts.directoryRequestURL !== undefined) this._directoryRequestURL = opts.directoryRequestURL;
- this._directoryChildrenRequestURL = (opts.directoryChildrenRequestURL !== undefined) ? opts.directoryChildrenRequestURL : this._directoryRequestURL;
- if(opts.listSourceRequestURL !== undefined) this._listSourceRequestURL = opts.listSourceRequestURL;
- if(opts.listSourcesRequestURL !== undefined) this._listSourcesRequestURL = opts.listSourcesRequestURL;
- if(opts.fileUploadURL !== undefined) this._fileUploadURL = opts.fileUploadURL;
- if(opts.showDimensionsColumn !== undefined) this._showDimensionsColumn = opts.showDimensionsColumn;
- if(opts.useWebWorkers !== undefined) this._useWebWorkers = ((window).Worker) ? opts.useWebWorkers : false;
- if(opts.sortMediaSources !== undefined) this._sortMediaSources = opts.sortMediaSources;
-
- if(opts.debug === true) this._debug = opts.debug;
- if(opts.confirmBeforeDelete !== undefined) this._confirmBeforeDelete = opts.confirmBeforeDelete;
- if(opts.touch === true) this._touch = true;
-
- this._webWorkersPath = (opts.webWorkersPath !== undefined) ? opts.webWorkersPath : _EUREKA.src.substring(0,_EUREKA.src.lastIndexOf('/')) + '/workers/';
-
- if(this._useLocalStorage) {
- if(this.getLocalStorage('currentMediaSource') && !opts.mediaSource) this._mediaSource = this.getLocalStorage('currentMediaSource');
- if(this.getLocalStorage('navTreeHidden') && !opts.navTreeHidden) this._navTreeHidden = (this.getLocalStorage('navTreeHidden') == 'true' ? true : false);
- if(this.getLocalStorage('currentDirectory') && !opts.currentDirectory) this._currentDirectory = this.getLocalStorage('currentDirectory');
- if(this.getLocalStorage('currentView') && !opts.currentView) this._currentView = this.getLocalStorage('currentView');
- }
- }
-
- getUseWebWorkers() {
- return this._useWebWorkers;
- }
-
- getwebWorkersPath() {
- return this._webWorkersPath;
- }
-
- getShowDimensionsColumn() {
- return this._showDimensionsColumn;
- }
-
- getLocalStorage(id:string) {
- id = this.getStoragePrefix() + id;
- if(localStorage.getItem(id) !== undefined && localStorage.getItem(id) !== 'undefined') return localStorage.getItem(id);
- return '';
- }
-
- setLocalStorage(id,value) {
- id = this.getStoragePrefix() + id;
- localStorage.setItem(id,value);
- }
-
- useLocalStorage() {
- return this._useLocalStorage;
- }
-
- getAlertBeforeDelete() {
- return this._confirmBeforeDelete;
- }
-
- getFileUploadURL() {
- return this._fileUploadURL;
- }
-
- setFileUploadURL(val) {
- this._fileUploadURL = val;
- }
-
- setAlertBeforeDelete(val) {
- this._confirmBeforeDelete = val;
- }
-
- getDebug() {
- return this._debug;
- }
-
- setDebug(debug) {
- this._debug = debug;
- }
-
- getHeaders() {
- return this._headers;
- }
-
- getUID(){
- return this._uid;
- }
-
- getStoragePrefix() {
- return this._storagePrefix;
- }
-
- getSources() {
- return this._sources;
- }
-
- getEditable() {
- return this._editable;
- }
-
- getDisplayFullTreePaths() {
- return this._displayFullTreePaths;
- }
-
- getAllowRename() {
- return this._allowRename;
- }
-
- getAllowDelete() {
- return this._allowDelete;
- }
-
- getHTML5UploadData() {
- return {
- s:this.getCurrentMediaSource(),
- dir:this.getCurrentDirectory()
- };
- }
-
- isTouch() {
- return this._touch;
- }
-
- getMediaSourceDTOByID(id) {
- if(this.getDebug()) console.log('getMediaSourceDTOByID: ' + id);
- var sources = this.getSources();
- for (var i = 0; i < sources.length; i++) {
- var source = sources[i];
- if (source.getID() == id) {
- return source;
- }
- }
- if(this.getDebug()) console.log('no media source found with id: ' + id);
- return null;
- }
- getController() {
- return this._controller;
- }
- setController(controller) {
- this._controller = controller;
- }
- getNavTreeHidden() {
- return this._navTreeHidden;
- }
- setNavTreeHidden(navTreeHidden) {
- this._navTreeHidden = navTreeHidden;
- if (this._useLocalStorage) this.setLocalStorage('navTreeHidden', navTreeHidden);
- }
- setCurrentMediaSource(currentMediaSource:string, dispatch:boolean = true, setLocalStorage:boolean = true, clearDirectory:boolean = true, dispatchIdenticalValues:boolean = false) {
- var that = this;
- if(this.getDebug()) console.log('setCurrentMediaSource', currentMediaSource, dispatch, setLocalStorage, clearDirectory, dispatchIdenticalValues);
- if(this._mediaSource === currentMediaSource && !dispatchIdenticalValues) return;
- this._mediaSource = currentMediaSource;
-
- if (setLocalStorage && currentMediaSource !== undefined) this.setLocalStorage('currentMediaSource', currentMediaSource);
- if (dispatch === false) return;
- var currentMediaSourceDTO = this.getMediaSourceDTOByID(this._mediaSource);
- if(currentMediaSourceDTO) {
- (function(){
- var e = document.createEvent('CustomEvent');
- e.initCustomEvent(EurekaModel.EurekaMediaSourceChange, true, true, {
- currentDirectory:that.getCurrentDirectory(),
- currentMediaSource:currentMediaSourceDTO,
- clearDirectory:clearDirectory,
- });
-
- that.getController().getView().getElement().dispatchEvent(e);
- })();
-
- if(!that._mediaSourceInit) {
- (function(){
- var e = document.createEvent('CustomEvent');
- e.initCustomEvent(EurekaModel.EurekaMediaSourceInit, true, true, {
- currentDirectory:that.getCurrentDirectory(),
- currentMediaSource:currentMediaSourceDTO
- });
-
- that.getController().getView().getElement().dispatchEvent(e);
- })();
- }
- this._mediaSourceInit = true;
- }
-
- }
- getCurrentMediaSource() {
- return this._mediaSource;
- }
- setCurrentDirectory(currentDirectory:string, dispatch:boolean = true, setLocalStorage:boolean = true, dispatchIdenticalValues:boolean = false) {
- if(this.getDebug()) console.log('setCurrentDirectory: ' + currentDirectory, dispatch, setLocalStorage, dispatchIdenticalValues);
- if(setLocalStorage === undefined) setLocalStorage = this.useLocalStorage();
- //if(currentDirectory === undefined || currentDirectory === 'undefined') currentDirectory = '/';
- if(this._currentDirectory === currentDirectory && !dispatchIdenticalValues) return;
- this._currentDirectory = currentDirectory;
- if (setLocalStorage && currentDirectory) this.setLocalStorage('currentDirectory', currentDirectory);
- if (dispatch === false) return;
- var e = document.createEvent('CustomEvent');
- e.initCustomEvent(EurekaModel.EurekaDirectoryChanged, true, true, {
- currentDirectory:currentDirectory,
- currentMediaSource:this.getMediaSourceDTOByID(this._mediaSource)
- });
- this.getController().getView().getElement().dispatchEvent(e);
- }
- getCurrentDirectory() {
- if(this.getDebug()) console.log('getCurrentDirectory: ' + this._currentDirectory);
- return this._currentDirectory || '/';
- }
- setCurrentView(currentView:string, dispatch:boolean = true) {
- if(this._currentView === currentView) return;
- this._currentView = currentView;
- if (this._useLocalStorage) this.setLocalStorage('currentView', currentView);
- if (dispatch === false) return;
- var e = document.createEvent('CustomEvent');
- e.initCustomEvent(EurekaModel.EurekaViewChange, true, true, {
- currentView:currentView
- });
-
- this.getController().getView().getElement().dispatchEvent(e);
- }
- getCurrentView() {
- return this._currentView;
- }
- getFullScreenTarget() : string {
- return this._fullscreenTarget;
- }
- setLocale(locale) {
- this._locale = locale;
- }
- getLocale() {
- return this._locale;
- }
- getPrependOptGroupsWithRootOption() {
- return this._prependOptGroupsWithRootOption;
- }
- getsortMediaSources() {
- return this._sortMediaSources;
- }
- getMediaSourcesListInit() : boolean {
- return this._mediaSourcesListInit;
- }
- setSources(sources, dispatch = true) {
- var that = this;
- if(this.getDebug()) console.log('setSources' + dispatch);
- this._sources = sources;
- if (dispatch === false) return;
-
- (function(){
- var e = document.createEvent('CustomEvent');
- e.initCustomEvent(EurekaModel.EurekaMediaSourcesListChange, true, true, {
- sources:sources
- });
-
- that.getController().getView().getElement().dispatchEvent(e);
- })();
-
- (function(){
- if(!that.getMediaSourcesListInit()) {
- var e = document.createEvent('CustomEvent');
- e.initCustomEvent(EurekaModel.EurekaMediaSourcesListInit, true, true, {
- sources:sources
- });
-
- that.getController().getView().getElement().dispatchEvent(e);
- }
- })();
- }
- sortResultsById(results) {
- var a = [];
- for(var i = 0; i < results.length; i++) {
- var result = results[i];
- a[parseInt(result.id)] = result;
- }
- return a.filter(function(n){ return n != undefined });
- }
- setMediaSourcesData(data:any, dispatch:boolean = true, setLocalStorage:boolean = true, clearDirectory:boolean = false, dispatchIdenticalValues:boolean = false) {
- var that = this;
- if(that.getDebug()) console.log('setMediaSourcesData data,dispatch,setLocalStorage,clearDirectory,dispatchIdenticalValues',data,dispatch,setLocalStorage,clearDirectory,dispatchIdenticalValues);
- var results = data.results;
- if(that.getsortMediaSources()) results = that.sortResultsById(results);
- var sources = [];
- var current = that.getCurrentMediaSource();
- var currentExists = false;
- for (var i = 0; i < results.length; i++) {
- var result = results[i];
- var mediaSourceDTO = new EurekaMediaSource({
- id: result.id,
- title: result.name
- });
- sources.push(mediaSourceDTO);
- if(result.id == current) currentExists = true;
- }
- this.setSources(sources);
- //that.setCurrentMediaSource((!currentExists) ? results[0].id : current, dispatch, setLocalStorage, clearDirectory, dispatchIdenticalValues);
- //setCurrentMediaSource(currentMediaSource:string, dispatch:boolean = true, setLocalStorage:boolean = true, clearDirectory:boolean = true, dispatchIdenticalValues:boolean = false) {
- that.setCurrentMediaSource((!currentExists) ? results[0].id : current, true, true, false, true);
- }
- renameFile(fileName, newFilename) {
- // Create the event
- var e = document.createEvent('CustomEvent');
- e.initCustomEvent('EurekaFileRename', true, true, {
- fileName: fileName,
- newFilename: newFilename,
- cs: this.getController().getModel().getCurrentMediaSource(),
- cd: this.getController().getModel().getCurrentDirectory(),
- path: this.getController().getModel().getCurrentDirectory() + fileName,
- newPath: this.getController().getModel().getCurrentDirectory() + newFilename
- });
-
- this.getController().getView().getElement().dispatchEvent(e);
- }
- deleteFile(filename, tr) {
- var that = this;
-
- var e = document.createEvent('CustomEvent');
- e.initCustomEvent('EurekaUnlink', true, true, {
- filename: tr.getAttribute('data-filename'),
- timestamp: tr.getAttribute('data-timestamp'),
- src: tr.querySelector('.image img, .image .img').getAttribute('src'),
- dimensions: [tr.getAttribute('data-dimensions-w'), tr.getAttribute('data-dimensions-h')],
- filesize: parseInt(tr.getAttribute('data-filesize-bytes'))
- });
-
- that.getController().getView().getElement().dispatchEvent(e);
- }
- setChoosenMediaItem(filename) {
- var that = this;
- var tr = getEurekaRowByFileName(filename); // #more reliable than tr.eureka__row.focused
- var img = tr.querySelector('.image img, .image .img');
-
- var e = document.createEvent('CustomEvent');
- e.initCustomEvent('EurekaFoundIt', true, true, {
- filename: filename,
- timestamp: tr.getAttribute('data-timestamp'),
- src: tr.getAttribute('data-src'),
- thumb:tr.getAttribute('data-thumb'),
- dimensions: [tr.getAttribute('data-dimensions-w'), tr.getAttribute('data-dimensions-h')],
- filesize: parseInt(tr.getAttribute('data-filesize-bytes'))
- });
-
- that.getController().getView().getElement().dispatchEvent(e);
- function getEurekaRowByFileName(filename:string) : HTMLElement {
- var trs = that.getController().getView().getElement().querySelectorAll('tr.eureka__row');
- for (var i = 0; i < trs.length; i++) {
- var tr = trs[i];
- if (tr.getAttribute('data-filename') == filename)
- return tr;
- }
- return null;
- }
- }
- getSelected() {
- return this._selected;
- }
- setSelected(filename) {
- this._selected = filename;
- }
- getXHRHeaders = function() {
- return this._headers;
- }
- getListDirectoryRequestURL() {
- return this._directoryRequestURL;
- }
- getListDirectoryChildrenRequestURL() {
- return this._directoryChildrenRequestURL;
- }
- setListDirectoryRequestURL(url:string) {
- this._directoryRequestURL = url;
- }
- getListSourceRequestURL() {
- return this._listSourceRequestURL;
- }
- setListSourceRequestURL(url:string) {
- this._listSourceRequestURL = url;
- }
- getListSourcesRequestURL() {
- return this._listSourcesRequestURL;
- }
- setListSourcesRequestURL(url:string) {
- this._listSourcesRequestURL = url;
- }
-
-} // end class EurekaModel
-
-class EurekaView {
- private _controller:EurekaController;
- private _html5Upload:Object;
- private _handleTreeNodeClicked:EventListener;
- private _handleTreeFolderClicked:EventListener;
-
- constructor() {}
-
- getController() {
- return this._controller;
- }
-
- setController(controller:EurekaController) {
- this._controller = controller;
- }
-
- getElement() {
- return (document.getElementById(this.getController().getModel().getUID()));
- }
- assignFooterProceedListeners(){
- var that = this;
- (that.getElement().parentNode).querySelector('footer.proceed button.cancel').addEventListener('click', function (e) {
- e.preventDefault();
-
- (function(){
- var e:any = document.createEvent('CustomEvent');
- e.initCustomEvent(EurekaModel.EurekaCanceled, true, true, {});
-
- that.getElement().dispatchEvent(e);
- })();
- });
- (that.getElement().parentNode).querySelector('footer.proceed button.cta').addEventListener('click', function (e) {
- e.preventDefault();
- that.getController().getModel().setChoosenMediaItem(that.getController().getModel().getSelected());
- });
- }
- init(){
- var that = this;
-
- that._handleTreeNodeClicked = function(e) {
- if(that.getController().getModel().getDebug()) console.log('handleTreeNodeClicked');
- e.preventDefault();
- e.stopPropagation();
- that.handleTreePathClicked(this);
- };
-
- that._handleTreeFolderClicked = function(e) {
- e.preventDefault();
- e.stopPropagation();
- if(that.getController().getModel().getDebug()) console.log('handleTreeFolderClicked');
- var _icon = this.querySelector('.fa');
- var _closing = _icon.classList.contains('fa-folder-open');
- var li = that.getClosest(this, 'li');
- var dataCD = this.nextSibling.getAttribute('data-cd') || '/';
- if (_closing) {
- _icon.classList.remove('fa-folder-open');
- _icon.classList.remove('icon-folder-open');
- _icon.classList.add('fa-folder','icon-folder');
- li.classList.remove('open');
-
- if(this.getAttribute('data-open-msg')) this.querySelector('.audible').innerHTML = this.getAttribute('data-open-msg');
- }
- else {
- _icon.classList.remove('fa-folder');
- _icon.classList.remove('icon-folder');
- _icon.classList.add('fa-folder-open');
- _icon.classList.add('icon-folder-open');
- li.classList.add('open');
- if(this.getAttribute('data-close-msg')) this.querySelector('.audible').innerHTML = this.getAttribute('data-close-msg');
- }
-
- (function(){
- var e:any = document.createEvent('CustomEvent');
- e.initCustomEvent((_closing) ? EurekaModel.EurekaDirectoryClosed : EurekaModel.EurekaDirectoryOpened, true, true, {
- cd:that.getController().getModel().getCurrentDirectory(),
- s:that.getController().getModel().getCurrentMediaSource(),
- path:dataCD
- });
-
- that.getElement().dispatchEvent(e);
- })();
- };
-
- function assignShortcutListeners() {
- document.addEventListener('keydown', function(event) {
- if(that.getController().getModel().getDebug()) console.log(event);
- if (event.ctrlKey && event.which === 186) { // ctrl ; to toggle sidebar
- var e = document.createEvent('Event');
- e.initEvent('click', true, true);
-
- document.getElementById(that.getController().getModel().getUID() + '__pathbrowser_toggle').dispatchEvent(e);
- }
- if (event.altKey && event.ctrlKey && (event.which >= 48 && event.which <= 57)) {
- try {
- var btns = that.getElement().querySelectorAll('.view-btns > nav > a');
- var btn:HTMLElement = (btns[event.which-48-1]);
- if(btn) {
- var e = document.createEvent('Event');
- e.initEvent('click', true, true);
-
- btn.dispatchEvent(e);
- }
- } catch(e) {}
- }
- if (event.altKey && !event.ctrlKey && (event.which >= 49 && event.which <= 57)) { // alt 1-9
- function setSelectOptGroup(select:HTMLSelectElement,group) {
- function getOptGroup() : Element {
- var optgroups = select.querySelectorAll('optgroup');
- for(var i = 0; i < optgroups.length; i++) {
- var optgroup:Element = (optgroups[i]);
- if(optgroup.getAttribute('data-source') == group) return optgroup;
- }
- return null;
- }
- var optGroup:Element = getOptGroup();
- if(optGroup) {
- select.value = (optGroup.querySelector('option')).value;
- }
- }
- function setSelectOption(select,value) {
- try {
- var options = select.querySelectorAll('option');
- var option:HTMLOptionElement = options[value];
- if(option) {
- select.value = option.getAttribute('value');
- }
- } catch(e) {}
-
- /*function hasOption(val) {
- var options = select.querySelectorAll('option');
- for(var i = 0; i < options.length; i++) {
- if((((options[i])).value) == val) return true;
- }
- return false;
- }
- if(hasOption((event.which - 49).toString())) {
- select.value = value;
- }*/
- }
- var msSelect = (document.getElementById(that.getController().getModel().getUID() + '__mediasource-select'));
- setSelectOption(
- msSelect,
- (event.which - 49).toString()
- );
- setSelectOptGroup(
- (document.getElementById(that.getController().getModel().getUID() + '__browsing').querySelector('select')),
- (event.which - 49).toString()
- );
- that.getController().getModel().setCurrentMediaSource(msSelect.value, true, true, true, false);
- }
-
- if(event.which === 8 && document.activeElement) { // delete to delete
- var e = document.createEvent('Event');
- e.initEvent('click', true, true);
-
- try {
- (document.activeElement.nextSibling).querySelector('a.trash').dispatchEvent(e);
- } catch(e) {}
- }
-
- if(event.altKey && event.which === 32 && document.activeElement) { // space to expand
- try {
- var e = document.createEvent('Event');
- e.initEvent('click', true, true);
-
- (document.activeElement.nextSibling).querySelector('a.expand').dispatchEvent(e);
- } catch(e) {}
- }
-
- if(event.which === 13 && document.activeElement) { // enter to choose
- try {
- var e = document.createEvent('Event');
- e.initEvent('click', true, true);
-
- (document.activeElement.nextSibling).querySelector('a.choose').dispatchEvent(e);
- } catch(e) {}
- }
-
- if(event.ctrlKey && event.which === 82) { // ctrl r to rename
- try {
- var e = document.createEvent('Event');
- e.initEvent('click', true, true);
-
- (document.activeElement.nextSibling).querySelector('a.rename').dispatchEvent(e);
- } catch(e) {}
- }
-
- if(event.ctrlKey && event.which === 78) { // ctrl n to create directory
- try {
- var e = document.createEvent('Event');
- e.initEvent('click', true, true);
-
- (that.getElement()).querySelector('.create-new').dispatchEvent(e);
- } catch(e) {}
- }
-
- if(event.ctrlKey && event.which === 85) { // ctrl n to create directory
- try {
- var e = document.createEvent('Event');
- e.initEvent('click', true, true);
- document.getElementById(that.getController().getModel().getUID() + '__upload-input').dispatchEvent(e);
- } catch(e) {}
- }
-
- if(event.ctrlKey && event.which === 70) { // ctrl f to filter
- try {
- document.getElementById(that.getController().getModel().getUID() + '__filter-images').focus();
- } catch(e) {}
- }
- });
- }
- function showSidebar() {
- var tog = document.getElementById(that.getController().getModel().getUID() + '__pathbrowser_toggle');
- var el = document.getElementById(tog.getAttribute('data-toggle-target'));
- el.classList.remove('hidden');
- document.getElementById(that.getController().getModel().getUID()).classList.add('sidebar-open');
- //document.querySelectorAll('#media-browser_0 .browse-select')[0].classList.add('tablet-p-hidden');
- (that.getElement().querySelector('.browse-select')).classList.add('tablet-p-hidden');
- that.getController().getModel().setNavTreeHidden(false);
- var toggle = document.getElementById(that.getController().getModel().getUID() + '__pathbrowser_toggle').getElementsByTagName("i")[0];
- toggle.classList.remove('fa-toggle-right');
- toggle.classList.remove('icon-toggle-right');
- toggle.classList.add('fa-toggle-left');
- toggle.classList.add('icon-toggle-left');
- tog.title = tog.getAttribute('data-title-close');
- }
- function hideSidebar() {
- var tog = document.getElementById(that.getController().getModel().getUID() + '__pathbrowser_toggle');
- var el = document.getElementById(tog.getAttribute('data-toggle-target'));
-
- el.classList.add('hidden');
- document.getElementById(that.getController().getModel().getUID()).classList.remove('sidebar-open');
- //document.querySelectorAll('#media-browser_0 .browse-select')[0].classList.remove('tablet-p-hidden');
- (that.getElement().querySelector('.browse-select')).classList.remove('tablet-p-hidden');
- that.getController().getModel().setNavTreeHidden(true);
- var toggle = document.getElementById(that.getController().getModel().getUID() + '__pathbrowser_toggle').getElementsByTagName("i")[0];
- toggle.classList.add('fa-toggle-right');
- toggle.classList.add('icon-toggle-right');
- toggle.classList.remove('fa-toggle-left');
- toggle.classList.remove('icon-toggle-left');
- tog.title = tog.getAttribute('data-title-open');
- }
-
- document.getElementById(that.getController().getModel().getUID() + '__pathbrowser_toggle').addEventListener('click', function (e) {
- var el = document.getElementById(this.getAttribute('data-toggle-target'));
- e.preventDefault();
- if (el.classList.contains('hidden')) {
- showSidebar();
- }
- else {
- hideSidebar();
- }
- });
- this.assignViewButtonListeners();
- this.assignFooterProceedListeners();
- this.assignBrowsingSelectOptGroupListeners();
-
- this.assignSelectListeners();
- this.assignSortBtnListeners();
- this.assignFilterListeners();
- this.assignCreateNewDirectoryListener();
- this.assignUploadListeners();
-
- assignShortcutListeners();
-
- var e = document.createEvent('Event');
- e.initEvent('click', true, true);
- that.getElement().querySelector('.eureka__topbar-nav .view-btns a[data-view="' + that.getController().getModel().getCurrentView() + '"]').dispatchEvent(e);
-
- if (this.getController().getModel().getNavTreeHidden() === true) {
- hideSidebar();
- }
-
- // if a droptarget exists and a modern mouse enabled browser is being used
- var dropContainer = document.getElementById(that.getController().getModel().getUID()).querySelector('.dropzone') || null;
- if (html5Upload !== undefined && !(that.getController().getModel().isTouch()) && html5Upload.fileApiSupported() && dropContainer) {
- that._html5Upload = html5Upload.initialize({
- // URL that handles uploaded files
- uploadUrl: that.getController().getModel().getFileUploadURL(),
-
- // HTML element on which files should be dropped (optional)
- dropContainer: dropContainer,
-
- // HTML file input element that allows to select files (optional)
- inputField: document.getElementById(that.getController().getModel().getUID() + '__upload-input'),
-
- // Key for the file data (optional, default: 'file')
- key: 'File',
-
- data:that.getController().getModel().getHTML5UploadData(),
-
- // Additional data submitted with file (optional)
- //data: that.getController().getModel().getHeaders(), // NOTE: could also send additional data here
-
- // Maximum number of simultaneous uploads
- // Other uploads will be added to uploads queue (optional)
- maxSimultaneousUploads: 4,
-
- // Callback for each dropped or selected file
- // It receives one argument, add callbacks
- // by passing events map object: file.on({ ... })
-
- onFileAdded: function (file) {
- function removeMessages() {
- var rs = dropContainer.querySelector('.progress').querySelectorAll('h2,p');
- for(var i = 0; i < rs.length; i++) {
- (rs[i]).remove();
- }
- }
- removeMessages();
- // make a really unique identifer
- var id = file.fileName.replace(/[!\"#$%&'\(\)\*\+,\.\/:;<=>\?\@\[\\\]\^`\{\|\}~]/g, '') + file.fileSize.toString().replace(/[!\"#$%&'\(\)\*\+,\.\/:;<=>\?\@\[\\\]\^`\{\|\}~]/g, '');
-
- var bar = document.createElement('div');
- bar.classList.add('bar');
-
- bar.setAttribute('id',id);
- bar.title = file.fileName + ' is preparing for upload.';
-
- var pill = document.createElement('div');
- pill.setAttribute('style','right:100%');
-
- bar.appendChild(pill);
-
- var dropzone:HTMLElement = document.getElementById(that.getController().getModel().getUID()).querySelector('.dropzone');
- dropzone.classList.remove('complete');
- dropzone.classList.remove('error');
- dropzone.classList.add('uploading');
-
- dropzone.querySelector('.progress').appendChild(bar);
-
- file.on({
- // Called after received response from the server
- onCompleted: function (response) {
- function isJSON(data) {
- try {
- JSON.parse(data);
- return true;
- } catch(e) {}
- return false;
- }
- if(!isJSON(response)) {
- dropzone.classList.add('error');
- }
- bar.setAttribute('title', file.fileName + ' has uploaded');
-
- if(dropzone.querySelectorAll('.bar').length >= 2)(bar).remove();
- if(dropzone.querySelectorAll('.bar').length < 2) { // everything is up
- setTimeout(function(){
- (dropzone.querySelector('.progress')).innerHTML = '';
- dropzone.classList.remove('uploading');
- dropzone.classList.add('complete');
-
- (function(){ // wait a bit, then show the complete message
- var div = dropzone.querySelector('.progress');
- var h2 = document.createElement('h2');
- var icon = document.createElement('i');
- icon.setAttribute('class','fa fa-check-circle-o icon icon-check-circle-o');
- h2.appendChild(icon);
- div.appendChild(h2);
-
- var span = document.createElement('span');
- span.setAttribute('title','files here...');
- span.innerHTML = 'Your files';
-
- var p = document.createElement('p');
- p.appendChild(span);
- p.innerHTML += ' have been successfully uploaded.';
- div.appendChild(p);
-
- if(dropzone.classList.contains('error')) {
- icon.setAttribute('class','fa fa-times-circle icon icon-times-circle');
- p.innerHTML = 'Oh no,document.createEvent('CustomEvent');
- //that.getElement().dispatchEvent(e);
- e.initCustomEvent(EurekaModel.EurekaFilesUploaded, true, true, {
- });
- that.getElement().dispatchEvent(e);
-
- (document.getElementById(that.getController().getModel().getUID() + '__upload-form')).reset();
- })();
- }, 640);
- }
-
- },
-
- // Called during upload progress, first parameter
- // is decimal value from 0 to 100.
- onProgress: function (progress, fileSize, uploadedBytes) {
- progress = Math.ceil(progress);
- bar.setAttribute('title', file.fileName + ' is ' + progress + '% uploaded');
- pill.setAttribute('style','right:' + (100-progress).toString() + '%');
- }
- });
- }
- });
- } else {
- if(dropContainer) (dropContainer).remove(); // remove the drop container because we can't use it
- }
-
- if(that.getController().getModel().getFileUploadURL() === undefined || that.getController().getModel().getFileUploadURL() == '') {
- try {
- (that.getElement().querySelector('.pathbrowser footer form')).remove();
- } catch(e) {}
-
- try {
- (that.getElement().querySelector('.upload-form')).remove();
- } catch(e) {}
-
- try {
- (that.getElement().querySelector('.upload-perhaps')).remove();
- } catch(e) {}
- }
-
- if(that.getController().getModel().getCurrentMediaSource() !== undefined && that.getController().getModel().getCurrentMediaSource() !== '/' && that.getController().getModel().getCurrentMediaSource() !== '') {
- that.recursivelyOpenTreeToCurrentDirectory();
- }
-
- that.getElement().addEventListener(EurekaModel.EurekaDirectoryChanged, function (e:any) {
- if(that.getController().getModel().getDebug()) console.log(EurekaModel.EurekaDirectoryChanged);
- var currentDirectory = e.detail.currentDirectory;
- var currentMediaSource = that.getController().getModel().getCurrentMediaSource();
- var split = currentDirectory.split('/');
- split = split.filter(function (n) { return (n !== undefined && n != ""); });
- var levelup:HTMLElement = (document.getElementById(that.getController().getModel().getUID() + '__pathbrowser')).querySelector('.level-up');
- if(split.length >= 1) levelup.classList.remove('hidden');
- else levelup.classList.add('hidden');
-
- (function(){
- try {
- var el:HTMLElement = (that.getElement().querySelector('.pathbrowser .create-new'));
- el.setAttribute('title','Create a new directory in ' + that.sanitizeDisplayPath(currentDirectory));
- (el.querySelector('.audible')).innerHTML = el.getAttribute('title');
- } catch(e) {}
- })();
- (function(){
- try {
- var el:HTMLElement = (that.getElement().querySelector('.pathbrowser .upload-files'));
- el.setAttribute('title','Upload media to ' + that.sanitizeDisplayPath(currentDirectory));
- (el.querySelector('.audible')).innerHTML = el.getAttribute('title');
- } catch(e) {}
- })();
- that.setBrowseSelectValue();
- that.setMediaSourceSelectValue();
- try {
- ((that._html5Upload)).data = that.getController().getModel().getHTML5UploadData();
- } catch(e) {}
- try {
- (that.getElement().querySelector('.oh-no code')).innerHTML = currentDirectory;
- } catch(e) {}
- });
- that.getElement().addEventListener(EurekaModel.EurekaMediaSourceChange, function(e:any){
- var mediaSourceTitle:HTMLElement = (that.getElement().querySelector('.eureka__topbar-nav .mediasource-title'));
-
- if(e.detail.currentMediaSource) {
- var prepend = mediaSourceTitle.getAttribute('data-prepend') || '';
- mediaSourceTitle.innerHTML = prepend + e.detail.currentMediaSource.getTitle();
- }
-
- that.setBrowseSelectValue();
- that.setMediaSourceSelectValue();
- try {
- ((that._html5Upload)).data = that.getController().getModel().getHTML5UploadData();
- } catch(e) {}
- });
-
- if(!that.getController().getModel().getShowDimensionsColumn()) {
- try {
- (that.getElement().querySelector('.eureka-table th.dimensions')).remove();
- } catch(e) {}
- }
- }
-
- setMediaSourceSelectValue() {
- var that = this;
- if(that.getController().getModel().getDebug()) console.log('setMediaSourceSelectValue');
-
- var currentDirectory = that.getController().getModel().getCurrentDirectory();
- var currentMediaSource = that.getController().getModel().getCurrentMediaSource();
-
- var select:HTMLSelectElement = (document.getElementById(that.getController().getModel().getUID() + '__mediasource-select'));
-
- if(select.value !== currentMediaSource) {
- select.value = currentMediaSource;
- }
- }
-
- setBrowseSelectValue() {
- var that = this;
- if(that.getController().getModel().getDebug()) console.log('setBrowseSelectValue');
-
- var currentDirectory = that.getController().getModel().getCurrentDirectory();
- var currentMediaSource = that.getController().getModel().getCurrentMediaSource();
-
- var select:HTMLSelectElement = (document.getElementById(that.getController().getModel().getUID() + '__browsing')).querySelector('select');
- var optgroups = select.querySelectorAll('optgroup');
- var optgroup = getOptGroup(optgroups);
- if(optgroup) {
- var opt:HTMLElement = searchForValue(optgroup);
- if(opt && select.value !== opt.getAttribute('value')) {
- select.value = opt.getAttribute('value');
- }
- }
-
- function getOptGroup(optgroups) : HTMLElement {
- for(var i = 0; i < optgroups.length; i++) {
- var optgroup = optgroups[i];
- if((optgroup).getAttribute('data-source') == currentMediaSource) {
- return optgroup;
- }
- }
- return null;
- }
- function searchForValue(optgroup) : HTMLElement {
- function splitFilter(path) {
- if(!path) return '';
- var split = path.split('/');
- split = split.filter(function (n) { return (n !== undefined && n != ""); });
- return split;
- }
- var opts = optgroup.querySelectorAll('option');
- for(var i = 0; i < opts.length; i++) {
- var opt:HTMLElement = (opts[i]);
- var path = (opt).getAttribute('data-cd');
- if(splitFilter(path).toString() == splitFilter(currentDirectory).toString()) {
- return opt;
- }
- }
- }
- }
-
- recursivelyOpenTreeToCurrentDirectory() {
- var that = this;
-
- var pathbrowser = document.getElementById(that.getController().getModel().getUID() + '__pathbrowser');
- var paths = pathbrowser.querySelectorAll('a.path');
- if(that.getController().getModel().getDebug()) console.log('recursivelyOpenTreeToCurrentDirectory', paths);
- for(var i = 0; i < paths.length; i++) {
- var path:HTMLElement = paths[i];
- if(that.getController().getModel().getDebug()) console.log(path.getAttribute('data-cd').split('/').filter(Boolean).toString(), that.getController().getModel().getCurrentDirectory().split('/').filter(Boolean).toString());
- if(path.getAttribute('data-cd').split('/').filter(Boolean).toString() == that.getController().getModel().getCurrentDirectory().split('/').filter(Boolean).toString()) {
- (function(){
- (path.parentNode).classList.add('active');
- (path.parentNode).classList.add('open');
- var parents = getParents(path,'ul');
- function openFolder(folder:HTMLElement) {
- folder.classList.remove('fa-folder');
- folder.classList.remove('icon-folder');
- folder.classList.add('fa-folder-open');
- folder.classList.add('icon-folder-open');
- try {
- (folder.querySelector('.audible')).innerHTML = folder.getAttribute('data-close-msg');
- } catch(e) {}
- }
- if(parents.length > 1) {
- for(var i = 0; i < parents.length; i++) {
- var li:HTMLElement = (parents[i].parentNode);
- li.classList.add('open');
- openFolder((li.querySelector('.folder > i')));
- }
- }
- })();
- }
- }
- }
-
- assignUploadListeners() {
- var that = this;
- var upload_files = that.getElement().querySelector('.pathbrowser .upload-files');
- if(upload_files) {
- upload_files.addEventListener('click',function(e){
- e.preventDefault();
- e.stopPropagation();
-
- (function(){
- //var e = document.createEvent('Event');
- //e.initEvent('click', true, true);
- var e = new MouseEvent('click', {
- 'view': window,
- 'bubbles': true,
- 'cancelable': true
- });
- document.getElementById(that.getController().getModel().getUID() + '__upload-input').dispatchEvent(e);
- })();
- });
- }
- var upload_perhaps = that.getElement().querySelector('.upload-perhaps a');
- if(upload_perhaps) {
- upload_perhaps.addEventListener('click',function(e){
- e.preventDefault();
-
- var e = document.createEvent('Event');
- e.initEvent('click', true, true);
-
- try {
- (upload_files).dispatchEvent(e);
- } catch(e) {}
- });
- }
- }
-
- assignBrowsingSelectOptGroupListeners(){
- var that = this;
-
- if(that.getController().getModel().getDebug())console.log('assignBrowsingSelectOptGroupListeners');
- var select = document.getElementById(that.getController().getModel().getUID() + '__browsing').querySelector('select');
- select.addEventListener('change', function (e) {
- var option = that.getSelectedOption(this);
- var optgroup = that.getClosest(option, 'optgroup');
- var source = optgroup.getAttribute('data-source');
- that.getController().getModel().setCurrentMediaSource(source);
- that.getController().getModel().setCurrentDirectory(option.getAttribute('data-cd'), true, that.getController().getModel().useLocalStorage());
- // fetch current media source's directories
- var ajax = new AJAX();
- ajax.get(
- that.getController().getModel().getListSourceRequestURL(),
- { s: that.getController().getModel().getCurrentMediaSource() },
- function (data) {
- },
- true,
- that.getController().getModel().getXHRHeaders()
- );
- });
- }
- assignCreateNewDirectoryListener() {
- var that = this;
-
- try {
- that.getElement().querySelector('.create-new').addEventListener('click',function(e){
- var li = document.createElement('li');
- var folder = document.createElement('a');
- folder.classList.add('folder');
- folder.innerHTML = ' path).select();
- } catch(e) {}
- },240);
-
- var ul:HTMLElement = (that.getElement().querySelector('.pathbrowser .tree li.active > ul') || that.getElement().querySelector('.pathbrowser .tree > ul'));
- ul.classList.add('open');
- ((ul.parentNode)).classList.add('open');
- try {
- (((ul.previousSibling).previousSibling)).querySelector('.fa').setAttribute('class','fa icon fa-folder-open icon-folder-open');
- } catch(e) {}
-
- path.addEventListener('focus', function (e) {
- this.addEventListener('keydown', handleKeyDown, false);
- }, false);
- path.addEventListener('blur', function (e) {
- this.removeEventListener('keydown', handleKeyDown, false);
- }, false);
-
- function handleKeyDown(e) {
- //var code = getCodeToFocus(this);
- //var tr = that.getClosest(this, '.contextual').previousSibling;
- if (e.keyCode === 13) {
- e.preventDefault();
- e.stopPropagation();
- this.blur();
- this.setAttribute('contenteditable','false');
- (that.getElement().querySelector('button.create-new')).focus();
-
- var foldername = this.innerHTML;
-
- var e:any = document.createEvent('CustomEvent');
- //that.getElement().dispatchEvent(e);
- e.initCustomEvent('EurekaDirectoryCreated', true, true, {
- newdirectory: foldername,
- cd:that.getController().getModel().getCurrentDirectory(),
- s:that.getController().getModel().getCurrentMediaSource(),
- path:that.getController().getModel().getCurrentDirectory()+foldername
- });
- that.getElement().dispatchEvent(e);
- }
- }
-
- ul.appendChild(li);
- });
- } catch(e) {}
- }
- assignViewButtonListeners(){
- var that = this;
- var model = this.getController().getModel();
- function setCurrent(el) {
- var anchors = document.querySelectorAll(".eureka__topbar-nav .view-btns a[data-view]:not(.view-f-btn)");
- for (var i = 0; i < anchors.length; i++) {
- var anchor = anchors[i];
- (anchor).classList.remove('current');
- }
- el.classList.add('current');
- }
- var anchors = document.querySelectorAll(".eureka__topbar-nav .view-btns a[data-view]:not(.view-f-btn)");
- for (var i = 0; i < anchors.length; i++) {
- var current = anchors[i];
- current.addEventListener('click', function (e) {
- e.preventDefault();
- var that = this;
- var _v = this.getAttribute('data-view');
- var classes = ['view-a', 'view-b', 'view-c', 'view-d','view-e'];
- for (var _i = 0; _i < classes.length; _i++) {
- var c = classes[_i];
- document.getElementById(that.getAttribute('data-view-target')).classList.remove(c);
- }
- document.getElementById(that.getAttribute('data-view-target')).classList.add(_v);
- setCurrent(that);
- model.setCurrentView(_v);
- }, true);
- }
- var fullscreenBtn = document.querySelector(".eureka__topbar-nav .view-btns .view-f-btn");
-
- if(fullscreenBtn) fullscreenBtn.addEventListener('click', function(e){
- e.preventDefault();
-
- if (that.isFullScreen()) {
- that.runPrefixMethod(document, "CancelFullScreen");
- fullscreenBtn.querySelector('i').classList.remove('fa-compress');
- fullscreenBtn.querySelector('i').classList.remove('icon-compress');
- }
- else {
- //setCurrent(this);
- that.requestFullScreen();
- fullscreenBtn.querySelector('i').classList.add('fa-compress');
- fullscreenBtn.querySelector('i').classList.add('icon-compress');
- }
- });
- }
- isFullScreen() {
- return this.runPrefixMethod(document, "FullScreen") || this.runPrefixMethod(document, "IsFullScreen");
- }
- requestFullScreen() {
- this.runPrefixMethod(document.querySelector(this.getController().getModel().getFullScreenTarget()), "RequestFullScreen");
- }
- runPrefixMethod(obj, method) {
- var pfx = ["webkit", "moz", "ms", "o", ""];
- var p = 0, m, t;
- while (p < pfx.length && !obj[m]) {
- m = method;
- if (pfx[p] == "") {
- m = m.substr(0,1).toLowerCase() + m.substr(1);
- }
- m = pfx[p] + m;
- t = typeof obj[m];
- if (t != "undefined") {
- pfx = [pfx[p]];
- return (t == "function" ? obj[m]() : obj[m]);
- }
- p++;
- }
- }
- assignARIAKeyListeners(){
- var that = this;
- // ARIA focus support for non-contextual rows
- (function () {
- function setFocused(el) {
- var rows = document.querySelectorAll(".eureka-table tbody > tr:not(.contextual)");
- for (var i = 0; i < rows.length; i++) {
- var current = (rows[i]);
- if (el !== current && current.classList.contains("focused"))
- current.classList.remove('focused');
- }
- el.classList.add('focused');
- var _cta = (that.getProceedFooter().querySelector('button.cta'));
- _cta.removeAttribute('disabled');
- _cta.classList.remove('muted');
-
- _cta.classList.add('go');
- that.getController().getModel().setSelected(el.getAttribute('data-filename'));
- }
- function handleBlur(el) {
- var contextual = document.getElementById('eureka_contextual__' + el.getAttribute('data-safe-filename'));
- contextual.focus();
- //that.getProceedFooter().querySelector('button.cta').classList.add('muted');
- var _cta = (that.getProceedFooter().querySelector('button.cta'));
- _cta.classList.remove('go');
-
- //_cta.setAttribute('disabled','disabled');
- _cta.classList.add('muted');
- }
- var rows = document.querySelectorAll(".eureka-table tbody > tr:not(.contextual)");
- for (var i = 0; i < rows.length; i++) {
- var current = rows[i];
- current.addEventListener('click', function (e) {
- e.preventDefault();
- //var _as = document.querySelectorAll(".eureka-table tbody > tr:not(.contextual)");
- setFocused(this);
- }, false);
- current.addEventListener('focus', function (e) {
- e.preventDefault();
- //var _as = document.querySelectorAll(".eureka-table tbody > tr:not(.contextual)");
- setFocused(this);
- }, false);
- current.addEventListener('blur', function (e) {
- handleBlur(this);
- }, false);
- }
- }());
- }
- assignSortBtnListeners(){
- var that = this;
-
- var sortBtns = that.getElement().querySelectorAll('.eureka-table th .fa-sort');
- for (var i = 0; i < sortBtns.length; i++) {
- var sortBtn = sortBtns[i];
- function handleSortBtnClicked(e) {
- e.preventDefault();
- e.stopPropagation();
- // toggle between 0 and 1
- this.setAttribute('data-sort-asc', Math.abs(parseInt(this.getAttribute('data-sort-asc')) - 1).toString());
- var sortby = this.getAttribute('data-sortby');
- var sortASC = (this.getAttribute('data-sort-asc') == "1") ? true : false;
- var rows = [];
- var rs = document.querySelectorAll('.eureka-table tbody > tr:not(.contextual)');
- for (var i = 0; i < rs.length; i++) {
- rows.push(rs[i]);
- }
- switch (sortby) {
- case 'dimensions':
- rows.sort(function (a, b) {
- return (parseInt(a.getAttribute('data-dimensions-w')) * parseInt(a.getAttribute('data-dimensions-h'))) - (parseInt(b.getAttribute('data-dimensions-w')) * parseInt(b.getAttribute('data-dimensions-h')));
- });
- break;
- case 'filesize':
- rows.sort(function (a, b) {
- return parseInt(a.getAttribute('data-filesize-bytes')) - parseInt(b.getAttribute('data-filesize-bytes'));
- });
- break;
- case 'editedon':
- rows.sort(function (a, b) {
- return parseInt(a.getAttribute('data-timestamp')) - parseInt(b.getAttribute('data-timestamp'));
- });
- break;
- default:
- rows.sort(function (a, b) {
- if (a.getAttribute('data-filename') > b.getAttribute('data-filename'))
- return 1;
- if (a.getAttribute('data-filename') < b.getAttribute('data-filename'))
- return -1;
- return 0;
- });
- break;
- }
- if (!sortASC) {
- rows.reverse();
- }
- var s = '';
- for (var _i = 0; _i < rows.length; _i++) {
- var row = rows[_i];
- s += row.outerHTML;
- }
- (that.getElement().querySelector('.eureka-table tbody')).innerHTML = s;
- }
-
- sortBtn.removeEventListener('click', handleSortBtnClicked, true); // assignSortBtnListeners should only be called once but this is another layer of protection
- sortBtn.addEventListener('click', handleSortBtnClicked, true);
- }
- }
- assignFilterListeners(){
- var that = this;
- function unFilterView() {
- var rows = document.querySelectorAll(".eureka-table tbody > tr:not(.contextual)");
- for (var i = 0; i < rows.length; i++) {
- var row = (rows[i]);
- row.classList.remove('hidden');
- }
- (document.getElementById(that.getController().getModel().getUID()).querySelector('.eureka-table > table > tbody')).classList.remove('filtered');
- }
- function filterView(value) {
- var rows = that.getElement().querySelectorAll(".eureka-table tbody > tr:not(.contextual)");
- for (var i = 0; i < rows.length; i++) {
- var row = (rows[i]);
- var show = false;
- var tokens = [row.getAttribute('data-filename')];
- if (row.getAttribute('data-tokens')) tokens = tokens.concat(row.getAttribute('data-tokens').split('||'));
-
- (function(){
- for (var _i = 0; _i < tokens.length; _i++) {
- var token = tokens[_i];
- if (value.length && (token == value || token.indexOf(value) > -1)) {
- show = true;
- break;
- }
- }
- })();
-
- if (!show) {
- row.classList.add('hidden');
- row.classList.remove('visible');
- }
- else {
- row.classList.add('visible');
- row.classList.remove('hidden');
- }
- (document.getElementById(that.getController().getModel().getUID()).querySelector('.eureka-table > table > tbody')).classList.add('filtered');
- }
- }
- var input = document.getElementById(that.getController().getModel().getUID() + '__filter-images');
- input.addEventListener("input", function (e) {
- if (this.value) {
- filterView(this.value);
- }
- else {
- unFilterView();
- }
- }, false);
- }
- sanitizeDisplayPath(path) : string {
- var split = path.split('/');
- split = split.filter(function (n) { return (n !== undefined && n != ""); });
- return split.join('/');
- }
- getProceedFooter(){
- return ((this.getElement().parentNode).querySelector('footer.proceed'));
- }
- handleTreePathClicked(el) {
- var that = this;
- if(that.getController().getModel().getDebug()) console.log('handleTreePathClicked: ' + (el.getAttribute('data-cd') || '/'));
- that.getController().getModel().setCurrentDirectory((el.getAttribute('data-cd') || '/'), true,undefined);
- function deactivatePaths() {
- var pathBrowser:HTMLElement = (document.getElementById(that.getController().getModel().getUID() + '__pathbrowser'));
- var paths = pathBrowser.querySelectorAll("nav.tree a.path");
- for (var i = 0; i < paths.length; i++) {
- var path:HTMLElement = (paths[i]);
- var li:HTMLElement = (that.getClosest(path, 'li'));
- li.classList.remove('active');
- }
- }
- /*var source = that.getController().getModel().getCurrentMediaSource();
- var ajax = new AJAX();
- ajax.get(
- that.getController().getModel().getListDirectoryRequestURL(),
- { s: source, dir: el.getAttribute('data-cd') || '/' },
- function (data) {
- data = JSON.parse(data);
- if(that.getController().getModel().getDebug()) console.log(data);
- that.paintJSON(data);
- },
- true,
- that.getController().getModel().getXHRHeaders()
- );*/
-
- /*
- ajax.get(that.getController().getModel().getListDirectoryRequestURL(), { s: source, dir: el.getAttribute('data-cd') }, function (data) {
- that.paintJSON(data);
- });
- */
- var li = that.getClosest(el, 'li');
- deactivatePaths();
- li.classList.add('active');
- }
- assignTreeListeners(){
- var that = this;
- if(that.getController().getModel().getDebug()) console.log('assignTreeListeners');
- var pathBrowser:HTMLElement = (document.getElementById(that.getController().getModel().getUID() + '__pathbrowser'));
- var paths = pathBrowser.querySelectorAll("nav.tree a.path");
- for (var i = 0; i < paths.length; i++) {
- var path = paths[i];
- path.addEventListener('click', that._handleTreeNodeClicked, false);
- }
- this.assignTreeFolderListeners();
- }
- assignTreeFolderListeners(){
- var that = this;
- if(that.getController().getModel().getDebug()) console.log('assignTreeFolderListeners');
- var pathBrowser:HTMLElement = (document.getElementById(that.getController().getModel().getUID() + '__pathbrowser'));
- var folders = pathBrowser.querySelectorAll("nav.tree a.folder");
- for (var i = 0; i < folders.length; i++) {
- var folder = folders[i];
- folder.addEventListener('click', that._handleTreeFolderClicked, false);
- }
- }
- assignSelectListeners(){
- var that = this;
- var mediaSourceSelect = that.getElement().querySelector('#' + that.getController().getModel().getUID() + '__mediasource-select');
- mediaSourceSelect.addEventListener('change', function () {
- that.getController().getModel().setCurrentMediaSource(this.value, true, that.getController().getModel().useLocalStorage());
- that.getController().getModel().setCurrentDirectory('/',false,that.getController().getModel().useLocalStorage());
- var ajax = new AJAX();
- ajax.get(
- that.getController().getModel().getListSourceRequestURL(),
- { s: that.getController().getModel().getCurrentMediaSource() },
- function (data) {
- },
- true,
- that.getController().getModel().getXHRHeaders()
- );
- });
-
- var levelUp:HTMLAnchorElement = (that.getElement().querySelector('.level-up'));
- levelUp.addEventListener('click', function(e){
- e.preventDefault();
- var currentDirectory = that.getController().getModel().getCurrentDirectory();
- var split = currentDirectory.split('/');
- split = split.filter(function (n) { return (n !== undefined && n != ""); });
- if(split && split.length) {
- var destDirectory = '/';
- if(split.length > 1) {
- split.pop();
- destDirectory = split.join('/');
- }
- that.getController().getModel().setCurrentDirectory(destDirectory, true, true, false);
- }
- });
- }
- emptyTree(){
- var that = this;
- var pathBrowser:HTMLElement = (document.getElementById(that.getController().getModel().getUID() + '__pathbrowser'));
- (function(){
- var paths = pathBrowser.querySelectorAll("nav.tree a.path");
- for (var i = 0; i < paths.length; i++) {
- var path = (paths[i]); // #janky typescript doesn't seem to support .remove();
- path.removeEventListener('click', that._handleTreeNodeClicked, false);
- path.remove();
- }
- })();
- (function(){
- var folders = pathBrowser.querySelectorAll("nav.tree a.folder");
- for (var i = 0; i < folders.length; i++) {
- var folder = (folders[i]); // #janky typescript doesn't seem to support .remove();
- folder.removeEventListener('click', that._handleTreeFolderClicked, false);
- folder.remove();
- }
- })();
- }
- assignDraggableListeners(){
- var kindaDraggables = document.querySelectorAll('*[sorta-draggable="true"]');
- for (var i = 0; i < kindaDraggables.length; i++) {
- var kindaDraggable = kindaDraggables[i];
- kindaDraggable.addEventListener('blur', function (e) {
- this.parentNode.draggable = false;
- });
- kindaDraggable.addEventListener('focus', function (e) {
- this.parentNode.draggable = false;
- });
- }
- }
- assignChooseClickListeners() {
- var that = this;
-
- if(that.getController().getModel().getDebug()) console.log('assignChooseClickListeners');
-
- var rows = that.getElement().querySelectorAll('tr.eureka__row');
- for(var i = 0; i < rows.length; i++) {
- function addDblClickListener(tr:HTMLElement) {
- tr.querySelector('div.image').addEventListener('dblclick',function(e){
- var image = this;
-
- (function(){
- var e:any = (document.createEvent('CustomEvent'));
- e.initCustomEvent('EurekaFoundIt', true, true, {
- filename: tr.getAttribute('data-filename'),
- timestamp: tr.getAttribute('data-timestamp'),
- src: tr.getAttribute('data-src'),
- thumb:tr.getAttribute('data-thumb'),
- dimensions: [tr.getAttribute('data-dimensions-w'), tr.getAttribute('data-dimensions-h')],
- filesize: parseInt(tr.getAttribute('data-filesize-bytes'))
- });
-
- that.getController().getView().getElement().dispatchEvent(e);
- })();
- })
- }
- addDblClickListener((rows[i]));
- }
- }
- paint(){
- this.assignARIAKeyListeners();
- this.assignContextualClickListeners();
- this.assignDraggableListeners();
- this.assignChooseClickListeners();
- this.assignSortBtnListeners();
- //this.assignContextualRowListeners();
- }
- createTreeNode(path) : HTMLElement {
- var that = this;
- path = path.split('/').filter(Boolean).join('/') + '/';
- var li = document.createElement('li');
- var folder = document.createElement('a');
- folder.innerHTML = ' ';
- folder.setAttribute('href', 'javascript:;');
- folder.classList.add('folder');
- folder.setAttribute('data-open-msg','Expand ' + path + ' ');
- folder.setAttribute('data-close-msg','Collapse ' + path + ' ');
- var folderOpenIcon = document.createElement('i');
- folderOpenIcon.classList.add('fa');
- folderOpenIcon.classList.add('icon');
- folderOpenIcon.classList.add('fa-folder');
- folderOpenIcon.classList.add('icon-folder');
- folder.appendChild(folderOpenIcon);
- (function(){
- var audible = document.createElement('span');
- audible.classList.add('audible');
- audible.innerHTML = folder.getAttribute('data-open-msg');
- folder.appendChild(audible);
- })();
- var a = document.createElement('a');
- a.classList.add('path');
- a.setAttribute('href', 'javascript:;');
- a.setAttribute('title', 'Browse ' + path);
-
- var split = path.split('/');
- split = split.filter(function (n) { return (n !== undefined && n != ""); });
- var displayPath = split.join('/');
- if(!that.getController().getModel().getDisplayFullTreePaths()) {
- displayPath = split[split.length-1];
- } else {
- if(displayPath[displayPath.length-1] == '/') displayPath = displayPath.substring(0,displayPath.length - 1);
- }
-
- a.setAttribute('data-cd', path);
- a.innerHTML = ' ' + displayPath;
- li.appendChild(folder);
- li.appendChild(a);
- var _ul = document.createElement("ul");
- li.appendChild(_ul);
-
- return li;
- }
- paintTree(data) {
- var that = this;
- if(that.getController().getModel().getDebug()) console.log('paintTree',data);
- var tree : HTMLElement = (that.getElement().querySelector('nav.tree'));
- var results = data.results;
- function printTreeNavResults(results, ul) {
- for (var i = 0; i < results.length; i++) {
- var result = results[i];
- var li:HTMLElement = that.createTreeNode(result.path);
- var _ul = li.querySelector('ul');
- if (result.children !== undefined && result.children.length) {
- printTreeNavResults(result.children, _ul);
- }
- ul.appendChild(li);
- }
- }
- tree.innerHTML = '';
- var ul = document.createElement('ul');
- tree.appendChild(ul);
- printTreeNavResults(results, ul);
- that.assignTreeListeners();
- that.recursivelyOpenTreeToCurrentDirectory();
-
- var e = document.createEvent('CustomEvent');
- e.initCustomEvent(EurekaModel.EurekaTreePainted, true, true, {
- data:data
- });
-
- that.getElement().dispatchEvent(e);
- }
- paintJSON(data:any) : void {
- var that = this;
- if(that.getController().getModel().getDebug()) console.log('paintJSON',data);
- var model = this.getController().getModel();
- var cd = data.cd.charAt(data.cd.length - 1) == '/' ? data.cd : data.cd + '/';
- var results = data.results;
- var tbodyHTML = '';
- var directoriesToAdd:Array = [];
- var fileAdded:Boolean = false;
-
- that.getElement().classList.remove('nothing-found');
- for (var i = 0; i < results.length; i++) {
- var result = results[i];
- if(result.filename) {
- var filename = result.filename;
- var safeFileName = filename.replace(/[!\"#$%&'\(\)\*\+,\.\/:;<=>\?\@\[\\\]\^`\{\|\}~]/g, '');
- var src = result.src;
- var thumb = result.thumb;
- var filesize = result.filesize;
- var dimensions = result.dimensions;
- var editedon = (parseInt(result.editedon)) > 0 ? parseInt(result.editedon) : null;
- var tr = document.createElement("tr");
- tr.classList.add('eureka__row');
- //tr.setAttribute('contenteditable', true);
- tr.setAttribute('tabindex', "0");
- tr.setAttribute('data-tokens', '');
- tr.setAttribute('data-filename', filename);
- tr.setAttribute('data-safe-filename', safeFileName);
- tr.setAttribute('data-src',src);
- if(thumb) tr.setAttribute('data-thumb',thumb);
- tr.setAttribute('data-dimensions-w', dimensions.split('x')[0]);
- tr.setAttribute('data-dimensions-h', dimensions.split('x')[1]);
- tr.setAttribute('data-filesize-bytes', filesize);
- tr.setAttribute('data-timestamp', (editedon) ? editedon.toString() : '0');
- var td = document.createElement("td");
- td.setAttribute('contenteditable', 'false');
- td.classList.add('eureka__row-image');
- var imgD = document.createElement('div');
- imgD.classList.add('image');
- var img = document.createElement('img');
- img.setAttribute('id',safeFileName + '__thumb');
- function addErrorListener(img,result,safeFileName) {
- img.addEventListener('error',function(){
- var a = result.filename.split('.');
- var icon = 'file-o';
- switch(a[a.length-1].toLowerCase()) { // consider abstracting this part out into it's own plugin
- case 'css':
- icon = 'css3';
- break;
-
- case 'csv':
- icon = 'file-excel-o';
- break;
-
- case 'xls':
- icon = 'file-excel-o';
- break;
-
- case 'numbers':
- icon = 'file-excel-o';
- break;
-
- case 'css':
- icon = 'file-excel-o';
- break;
-
- case 'mp3':
- icon = 'file-sound-o';
- break;
-
- case 'wav':
- icon = 'file-sound-o';
- break;
-
- case 'wma':
- icon = 'file-sound-o';
- break;
-
- case 'aac':
- icon = 'file-sound-o';
- break;
-
- case 'flac':
- icon = 'file-sound-o';
- break;
-
- case 'ppt':
- icon = 'file-powerpoint-o';
- break;
-
- case 'pot':
- icon = 'file-powerpoint-o';
- break;
-
- case 'pps':
- icon = 'file-powerpoint-o';
- break;
-
- case 'zip':
- icon = 'file-zip-o';
- break;
-
- case 'gzip':
- icon = 'file-zip-o';
- break;
-
- case 'tar':
- icon = 'file-zip-o';
- break;
-
- case 'mp4':
- icon = 'file-movie-o';
- break;
-
- case 'ogv':
- icon = 'file-movie-o';
- break;
-
- case 'm4v':
- icon = 'file-movie-o';
- break;
-
- case 'avi':
- icon = 'file-movie-o';
- break;
-
- case 'jpg':
- case 'jpeg':
- case 'gif':
- case 'tiff':
- case 'png':
- case 'bpg':
- case 'img':
- case 'webp':
- icon = 'file-picture-o';
- break;
-
- case 'php':
- case 'html':
- case 'htm':
- case 'md':
- icon = 'file-code-o';
- break;
-
- case 'js':
- icon = 'file-text-o';
- break;
-
- default:
- icon = 'file-o';
- break;
- }
- var div = (function(){
- var div = document.createElement('div');
- div.classList.add('icon-wrapper');
- div.classList.add('img');
- var i = document.createElement('i');
- i.classList.add('fa');
- i.classList.add('icon');
- i.classList.add('fa-' + icon);
- i.classList.add('icon-' + icon);
- div.appendChild(i);
-
- return div;
- })();
-
-
- try {
- document.getElementById(safeFileName + '__thumb').outerHTML = div.outerHTML;
- } catch(e) {}
- });
- }
- addErrorListener(img,result,safeFileName);
-
-
- //img.setAttribute('alt',filename); // after a11y testing this was determined to be unecessary - jp
- imgD.appendChild(img);
- img.setAttribute('src', (thumb) ? thumb : src);
- var code = document.createElement('code');
- code.setAttribute('contenteditable', 'true');
- code.setAttribute('tabindex', '-1');
- code.setAttribute('sorta-draggable', 'true');
- code.innerHTML = filename;
- td.appendChild(imgD);
-
- td.appendChild(code);
- function createCode(html) {
- var tag = document.createElement('code');
- tag.innerHTML = html;
- return tag;
- }
- var tdDimensionCell = document.createElement('td');
- tdDimensionCell.classList.add('eureka__row-dimensions');
- tdDimensionCell.appendChild(createCode(dimensions || "n/a"));
- var tdFilesizeCell = document.createElement('td');
- tdFilesizeCell.classList.add('eureka__row-filesize');
- if(parseInt(filesize)) {
- tdFilesizeCell.appendChild(createCode(that.formatFileSize(filesize)));
- } else {
- tdFilesizeCell.appendChild(createCode('n/a'));
- }
- var tdEditedOnCell = document.createElement('td');
- tdEditedOnCell.classList.add('eureka__row-editedon');
- if(editedon) {
- tdEditedOnCell.appendChild(createCode((new Date(editedon * 1000)).toLocaleDateString(model.getLocale(), { //https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString
- month: 'short',
- day: 'numeric',
- year: 'numeric'
- })));
- } else {
- tdEditedOnCell.appendChild(createCode('n/a'));
- }
- tr.appendChild(td);
- if(that.getController().getModel().getShowDimensionsColumn()) tr.appendChild(tdDimensionCell);
- tr.appendChild(tdFilesizeCell);
- tr.appendChild(tdEditedOnCell);
- tbodyHTML += tr.outerHTML;
-
- function createContextualRow() {
- var tr = document.createElement('tr');
- tr.classList.add('contextual');
- tr.setAttribute('id', 'eureka_contextual__' + safeFileName);
- //tr.setAttribute('tabindex','0');
- var td = document.createElement('td');
- td.setAttribute('colspan', '4');
- function createFlexibleNav() {
- var nav = document.createElement('nav');
- nav.classList.add('flexible_row');
- nav.classList.add('contextual__nav');
- function createExpandBtn() {
- var a = document.createElement('a');
- a.classList.add('expand');
- a.setAttribute('href', src);
- a.setAttribute('title', 'Expand ' + filename);
- a.setAttribute('target', '_blank');
- a.setAttribute('tabindex', '0');
- var fa = document.createElement('i');
- fa.classList.add('fa');
- fa.classList.add('icon');
- fa.classList.add('fa-expand');
- fa.classList.add('icon-expand');
- a.appendChild(fa);
- a.innerHTML += ' Expand';
- return a;
- }
- function createChooseBtn() {
- var a = document.createElement('a');
- a.classList.add('choose');
- a.setAttribute('title', 'Choose ' + filename);
- a.setAttribute('target', '_blank');
- a.setAttribute('tabindex', '0');
- var fa = document.createElement('i');
- fa.classList.add('fa');
- fa.classList.add('icon');
- fa.classList.add('fa-check-circle-o');
- fa.classList.add('icon-check-circle-o');
- a.appendChild(fa);
- a.innerHTML += ' Choose';
- return a;
- }
- function createRenameBtn() {
- var a = document.createElement('a');
- a.classList.add('rename');
- a.setAttribute('title', 'Rename ' + filename);
- a.setAttribute('target', '_blank');
- a.setAttribute('tabindex', '0');
- var fa = document.createElement('i');
- fa.classList.add('fa');
- fa.classList.add('icon');
- fa.classList.add('fa-edit');
- fa.classList.add('icon-edit');
- a.appendChild(fa);
- a.innerHTML += ' Rename';
- return a;
- }
- function createTrashBtn() {
- var a = document.createElement('a');
- a.classList.add('dangerous');
- a.classList.add('trash');
- a.setAttribute('title', 'Delete ' + filename);
- a.setAttribute('target', '_blank');
- a.setAttribute('tabindex', '0');
- var fa = document.createElement('i');
- fa.classList.add('fa');
- fa.classList.add('icon');
- fa.classList.add('fa-trash');
- fa.classList.add('icon-trash');
- a.appendChild(fa);
- a.innerHTML += ' Delete';
- return a;
- }
- nav.appendChild(createExpandBtn());
- nav.appendChild(createChooseBtn());
- if (that.getController().getModel().getAllowRename() && document.execCommand)
- nav.appendChild(createRenameBtn()); // should probably polyfill or just juse a standard text input instead #janky? #shame?
- if (that.getController().getModel().getAllowDelete())
- nav.appendChild(createTrashBtn());
- //nav.appendChild(createFlexibleNavTagForm());
- //nav.appendChild(createFlexibleNavShareForm());
- function createFlexibleNavTagForm() {
- var form = document.createElement('form');
- form.classList.add('tag');
- form.setAttribute('method', 'post');
- form.setAttribute('action', '#');
- var label = document.createElement('label');
- label.setAttribute('title', 'Tagging this media item will make it easier to find');
- var fa = document.createElement('i');
- fa.classList.add('fa');
- fa.classList.add('icon');
- fa.classList.add('fa-tag');
- fa.classList.add('icon-tag');
- label.appendChild(fa);
- label.innerHTML += ' Tag:';
- var input = document.createElement('input');
- input.setAttribute('type', 'text');
- input.setAttribute('placeholder', 'Tag this media item');
- input.setAttribute('tabindex', '-1');
- form.appendChild(label);
- form.appendChild(input);
- return form;
- }
- function createFlexibleNavShareForm() {
- var form = document.createElement('form');
- form.classList.add('share');
- form.setAttribute('action', '#');
- form.setAttribute('title', "Share " + filename + " with other");
- form.appendChild(createMediaSourceInput());
- form.appendChild(createMediaItemInput());
- var button = document.createElement('button');
- button.classList.add('nued');
- button.setAttribute('type', 'submit');
- button.setAttribute('tabindex', '0');
- var fa = document.createElement('i');
- fa.classList.add('fa');
- fa.classList.add('icon');
- fa.classList.add('fa-share-square-o');
- fa.classList.add('icon-share-square-o');
- button.appendChild(fa);
- button.innerHTML += ' Share';
- form.appendChild(button);
- function createMediaSourceInput() {
- var input = document.createElement('input');
- input.setAttribute('type', 'hidden');
- input.setAttribute('name', 'mediasource');
- input.setAttribute('value', '0');
- return input;
- }
- function createMediaItemInput() {
- var input = document.createElement('input');
- input.setAttribute('type', 'hidden');
- input.setAttribute('name', 'mediaitem');
- input.setAttribute('value', filename);
- return input;
- }
- return form;
- }
- return nav;
- }
- td.appendChild(createFlexibleNav());
- tr.appendChild(td);
- return tr;
- }
-
- tbodyHTML += createContextualRow().outerHTML;
- fileAdded = true;
- } else { // it's a folder
- //console.log(cd);
- //console.log(result.directory);
- //that.asyncronouslyAddDirectory(cd,result.directory);
- directoriesToAdd.push({cd:cd,directory:result.directory})
- }
- }
- if(!fileAdded) that.getElement().classList.add('nothing-found');
- (function(){
- for(var i = 0; i < directoriesToAdd.length; i++) {
- var d:any = (directoriesToAdd[i]);
- that.asyncronouslyAddDirectory(d.cd,d.directory);
- }
- if(directoriesToAdd.length) {
- //console.log('directoriesToAdd.length: ' + directoriesToAdd.length);
- that.assignTreeListeners();
- //that.recursivelyOpenTreeToCurrentDirectory();
- }
- })();
-
- var thead:HTMLElement = (document.querySelector('#' + this.getController().getModel().getUID() + ' .eureka-table > table > thead'));
- (document.querySelector('#' + this.getController().getModel().getUID() + ' .eureka-table')).innerHTML = '' + thead.outerHTML + '' + tbodyHTML + ' ' + '
';
- // bolden the correct tree item
- try {
- (this.getElement().querySelector('nav.tree li.active')).classList.remove('active');
- }
- catch (e) {
- }
- try {
- (function(){
- var el:HTMLElement = (that.getElement().querySelector('nav.tree li > a[data-cd="' + data.cd + '"]').parentNode);
- el.classList.add('active');
- el.classList.add('open');
-
- var folder:HTMLElement = (el.querySelector('.folder .fa-folder'));
- folder.classList.add('fa-folder-open');
- folder.classList.add('icon-folder-open');
- folder.classList.remove('fa-folder');
- })();
- }
- catch (e) {
- }
- try {
- (this.getElement().querySelector('.pathbrowser__topbar > select')).value = data.cs;
- }
- catch (e) {
- }
- this.paint();
- }
- asyncronouslyAddDirectory(cd, directory) { // this was added abruptly to support updating the media source tree asyncronously
- var that = this;
- if(that.getController().getModel().getDebug()) console.log('asyncronouslyAddDirectory');
-
- var pathBrowser:HTMLElement = (document.getElementById(that.getController().getModel().getUID() + '__pathbrowser'));
- var paths = pathBrowser.querySelectorAll('.tree .path');
-
- var cds:Array = cd.split('/').filter(Boolean);
- var p = cd + directory + '/';
- var psa = p.split('/').filter(Boolean);
- for(var i = 0; i < paths.length; i++) {
- var path:HTMLElement = (paths[i]);
- if((path.getAttribute('data-cd').split('/').filter(Boolean)).equals(psa)) {
- if(that.getController().getModel().getDebug()) console.log(p + ' alread exists');
- return;
- }
- }
-
- for(var i = 0; i < paths.length; i++) {
- var path:HTMLElement = (paths[i]);
- var pcd = path.getAttribute('data-cd');
- if(cds.equals(pcd.split('/').filter(Boolean))) { // "paths" are equal regardless of trailing slashes
- (function(_path){
- var ul:HTMLElement = _path.nextSibling;
- var paths = ul.querySelectorAll(':scope > li > .path');
- var inserted = false;
-
- for(var i = 0; i < paths.length; i++) {
- var path:HTMLElement = (paths[i]);
- var _d = (function(path){
- var a = path.getAttribute('data-cd').split('/').filter(Boolean);
- return a[a.length-1];
- })(path);
- var s = [directory,_d];
- s.sort();
-
- if(s[0] == directory) { // the directory to be inserted should preceed paths[i]
- ul.insertBefore(that.createTreeNode(p),path.parentNode);
- inserted = true;
- break;
- }
- }
-
- if(!inserted) { // the directory to be inserted should be last
- ul.appendChild(that.createTreeNode(p));
- inserted = true;
- }
-
- })(path);
- }
- }
-
- (function(){
- var browsingSelect:HTMLElement = (document.getElementById(that.getController().getModel().getUID() + '__browsing'));
- var mediaSource = that.getController().getModel().getCurrentMediaSource();
- //console.log('setting optGrp');
- //console.log('currentMediaSource: ' + that.getController().getModel().getCurrentMediaSource());
- var optsGrp:HTMLElement = (function() : HTMLElement {
- var os = browsingSelect.querySelectorAll('optgroup');
- for(var i =0; i < os.length; i++) {
- var o:HTMLElement = os[i];
- if(o.getAttribute('data-source') == mediaSource) return o;
- }
- return null;
- })();
- if(!optsGrp) return;
- var _iH:string = p.split('/').filter(Boolean).join('/');
- var opts = optsGrp.querySelectorAll('option');
- for(var i = 0; i < opts.length; i++) {
- var opt:HTMLElement = opts[i];
- if(opt.innerHTML == _iH) return; // it already exists
- }
-
- var newOpt:HTMLElement = document.createElement('option');
- newOpt.setAttribute('value',JSON.stringify({cs:that.getController().getModel().getCurrentMediaSource(),cd:_iH}));
- newOpt.setAttribute('data-cd',_iH + '/');
- newOpt.innerHTML = _iH;
-
- var inserted = false;
- for(var i = 0; i < opts.length; i++) {
- var opt:HTMLElement = opts[i];
- //console.log(opt.innerHTML);
- var a = [opt.innerHTML,_iH];
- a.sort();
-
- if(_iH == a[0]) {
- optsGrp.insertBefore(newOpt,opt);
- inserted = true;
- break;
- }
- }
- if(!inserted) optsGrp.appendChild(newOpt);
- })();
-
- (function(){
- var e = document.createEvent('CustomEvent');
- var data = that.getTreeData();
- e.initCustomEvent(EurekaModel.EurekaTreePainted, true, true, {
- data:data
- });
-
- that.getElement().dispatchEvent(e);
- })();
- }
- getTreeData() {
- var that = this;
- if(that.getController().getModel().getDebug()) console.log('getTreeData');
-
- var data = {
- cs:parseInt(that.getController().getModel().getCurrentMediaSource()),
- title:that.getController().getModel().getMediaSourceDTOByID(that.getController().getModel().getCurrentMediaSource()).getTitle(),
- results:new Array()
- };
- //{"cs":1,"title":"Filesystem","results":[{"path":"assets"},{"path":"connect"},{"path":"manage"}]}
- var pathBrowser:HTMLElement = (document.getElementById(that.getController().getModel().getUID() + '__pathbrowser'));
- var navTree:HTMLElement = (pathBrowser.querySelector('nav.tree'));
- var tops = navTree.querySelectorAll(':scope > ul > li');
- for(var i = 0; i < tops.length; i++) {
- var top:HTMLElement = tops[i];
- var dir = {
- path:top.querySelector(':scope > a.path').getAttribute('data-cd'),
- children:new Array()
- };
- recursivelyAddChildrenToDir(dir, top.querySelectorAll(':scope > ul > li'));
- data.results.push(dir);
-
- }
-
- return data;
-
- function recursivelyAddChildrenToDir(dir:any,lis:NodeList) {
- for(var i = 0; i < lis.length; i++) {
- var li:HTMLElement = (lis[i]);
- var child = {
- path:li.querySelector(':scope > a.path').getAttribute('data-cd'),
- children:new Array()
- };
- recursivelyAddChildrenToDir(child, li.querySelectorAll(':scope > ul > li'));
- dir.children.push(child);
- }
- }
- }
- assignContextualClickListeners() {
- var that = this;
- that.assignContexualCodeFocusListeners();
- assignChooseListeners();
- assignRenameListeners();
- assignDeleteListeners();
- function assignChooseListeners() {
- var anchors = that.getElement().querySelectorAll('tr.contextual a.choose');
- for (var i = 0; i < anchors.length; i++) {
- var anchor = anchors[i];
- anchor.addEventListener('click', function (e) {
- e.preventDefault();
- handleChooseClicked(this);
- }, false);
- anchor.addEventListener('focus', function (e) {
- ((that.getElement().parentNode).querySelector('footer.proceed .cta')).classList.add('go');
- ((that.getElement().parentNode).querySelector('footer.proceed .cta')).disabled = false;
- (that.getElement().parentNode).querySelector('footer.proceed .cta').removeAttribute('disabled');
- }, false);
- anchor.addEventListener('blur', function (e) {
- ((that.getElement().parentNode).querySelector('footer.proceed .cta')).classList.remove('go');
- //that.getElement().parentNode.querySelector('footer.proceed .cta').disabled = true;
- //that.getElement().parentNode.querySelector('footer.proceed .cta').setAttribute('disabled','disabled');
- }, false);
- /*anchor.addEventListener('mouseover',function(e) {
- ((that.getElement().parentNode).querySelector('footer.proceed .cta')).classList.add('go');
- }, false);
- anchor.addEventListener('mouseout',function(e) {
- ((that.getElement().parentNode).querySelector('footer.proceed .cta')).classList.remove('go');
- }, false);*/
- }
- function handleChooseClicked(anchor) {
- var contextual = that.getClosest(anchor, 'tr');
- var mediaRow:HTMLElement = (contextual.previousSibling);
- that.getController().getModel().setChoosenMediaItem(mediaRow.getAttribute('data-filename'));
- }
- }
- function assignDeleteListeners() {
- var anchors = document.querySelectorAll('tr.contextual a.trash');
- for (var i = 0; i < anchors.length; i++) {
- var anchor = anchors[i];
- anchor.addEventListener('click', function (e) {
- handleTrashClicked(this);
- }, false);
- anchor.addEventListener('focus', function (e) {
- this.addEventListener('keydown', handleTrashKeyDown, false);
- }, false);
- anchor.removeEventListener('blur', function (e) {
- this.removeEventListener('keydown', handleTrashKeyDown, false);
- }, false);
- }
- function handleTrashClicked(anchor) {
- var contextual:any = that.getClosest(anchor, 'tr');
- var mediaRow:any = (contextual.previousSibling);
- var nextRow:HTMLElement = (contextual.nextSibling);
-
- // give them a way out
- if(that.getController().getModel().getAlertBeforeDelete() && !window.confirm('Are you sure you want to delete ' + mediaRow.getAttribute('data-filename') + '?')) {
- return false;
- }
-
- // proceed
- that.getController().getModel().deleteFile(mediaRow.getAttribute('data-filename'), mediaRow);
-
- function remove(el) {
- try {
- el.remove();
- } catch(e) {
- el.parentNode.removeChild(el); // IE 10 doesn't support HTMLElement.remove()
- }
- }
-
- remove(mediaRow);
- remove(contextual);
-
- try {
- nextRow.focus();
- }
- catch (e) { }
- }
- function handleTrashKeyDown(e) {
- if (e.keyCode === 13) {
- handleTrashClicked(this);
- }
- }
- }
- function assignRenameListeners() {
- var anchors = document.querySelectorAll('tr.contextual a.rename');
- for (var i = 0; i < anchors.length; i++) {
- var anchor = anchors[i];
- anchor.addEventListener('click', function (e) {
- e.preventDefault();
- var code = getCodeToFocus(this);
- selectCode(code);
- }, false);
- anchor.addEventListener('focus', function (e) {
- this.addEventListener('keydown', handleAnchorKeyDown, false);
- }, false);
- anchor.addEventListener('blur', function (e) {
- this.removeEventListener('keydown', handleAnchorKeyDown, false);
- }, false);
- }
- function handleAnchorKeyDown(e) {
- var code = getCodeToFocus(this);
- var tr = that.getClosest(this, '.contextual').previousSibling;
- if (e.keyCode === 13) {
- e.preventDefault();
- e.stopPropagation();
- selectCode(code);
- }
- }
- function selectCode(code) {
- code.focus();
- try {
- code.select(); // if you think about it contenteditable nodes should probably be selectable...
- }
- catch (e) { }
- // consider selecting also
- }
- function getCodeToFocus(anchor) {
- var tr = that.getClosest(anchor, 'tr');
- var mediaRow:HTMLElement = (tr.previousSibling);
- var code = mediaRow.querySelector('.eureka__row-image code[contenteditable="true"]');
- return code;
- }
- }
- }
- assignContexualCodeFocusListeners(){
- var that = this;
- var codes = this.getElement().querySelectorAll('tr.eureka__row .eureka__row-image code[contenteditable="true"]');
- for (var i = 0; i < codes.length; i++) {
- var code = (codes[i]);
- code.addEventListener('focus', function () {
- this.addEventListener('keydown', handleCodeKeyPress, false);
- }, false);
- function handleCodeKeyPress(e) {
- if (e.keyCode === 13) {
- e.preventDefault();
- var tr = this.parentNode.parentNode; // #janky? :/
- var contextual = tr.nextSibling;
- var filename = tr.getAttribute('data-filename');
- code.contentEditable = 'false';
- var newFilename = this.innerHTML;
- that.getController().getModel().renameFile(filename, newFilename);
- var next = contextual.querySelector('nav > a.rename');
- next.focus();
- window.getSelection().collapse(next, 0);
- return false;
- }
- return true;
- }
- }
- }
- // ensure the optgroups are always sorted in order of their respective media source ids
- sortBrowseSelectOptGroupsByMediaSourceId(select) {
- if (select === undefined)
- select = document.getElementById(this.getController().getModel().getUID() + '__browsing').querySelector('select');
- var os = [];
- var optgrps = select.querySelectorAll('optgroup');
- for (var i = 0; i < optgrps.length; i++) {
- os.push(optgrps[i]);
- }
- var optgroups = os.sort(function (a, b) {
- return parseInt(a.getAttribute('data-source')) - parseInt(b.getAttribute('data-source'));
- });
- select.innerHTML = '';
- for (var _i = 0; _i < optgroups.length; _i++) {
- var optgroup = optgroups[_i];
- select.appendChild(optgroup);
- }
- }
- updateMediaSourceListings(data) {
- var that = this;
-
- if(that.getController().getModel().getDebug()) console.log('updateMediaSourceListings: ', data);
-
- var id = data.cs;
- var source = this.getController().getModel().getMediaSourceDTOByID(id);
- function updateTreeSelect() {
- if(that.getController().getModel().getDebug()) console.log('updateTreeSelect');
- var select = document.getElementById(that.getController().getModel().getUID() + '__mediasource-select');
- var option = null;
- try {
- option = select.querySelector('option[value="' + id + '"]');
- }
- catch (e) { }
- if (!option) {
- option = document.createElement('option');
- option.setAttribute('value', id);
- option.innerHTML = data.title;
- select.appendChild(option);
- }
- }
- function updateTopBarSelect() {
- if(that.getController().getModel().getDebug()) console.log('updateTopBarSelect');
- var select = document.getElementById(that.getController().getModel().getUID() + '__browsing').querySelector('select');
- if(that.getController().getModel().getDebug()) console.log(select);
- var optgroup = null;
- try {
- optgroup = select.querySelector('optgroup[data-source="' + id + '"]');
- }
- catch (e) { }
- if (!optgroup) {
- optgroup = document.createElement('optgroup');
- optgroup.setAttribute('label', data.title);
- optgroup.setAttribute('data-source', id);
- }
- var results = data.results;
- if(that.getController().getModel().getPrependOptGroupsWithRootOption()) results.unshift({"path":"/"});
- var options = [];
- printOptGroupOptions(results);
- optgroup.innerHTML = '';
- function printOptGroupOptions(results) {
- function serialize(obj) {
- var str = [];
- for(var p in obj){
- if (obj.hasOwnProperty(p)) {
- str.push((p) + "=" + (obj[p]));
- }
- }
- return str.join("&");
- }
- for (var i = 0; i < results.length; i++) {
- var result = results[i];
- var option = document.createElement('option');
- option.innerHTML = (that.sanitizeDisplayPath(result.path)) ? that.sanitizeDisplayPath(result.path) : result.path;
- option.setAttribute('value', JSON.stringify({cs:data.cs,cd:that.sanitizeDisplayPath(result.path)}));
- option.setAttribute('data-cd', result.path);
- options.push(option);
- if (result.children && result.children.length)
- printOptGroupOptions(result.children);
- }
- }
- for (var _i = 0; _i < options.length; _i++) {
- var option = options[_i];
- optgroup.appendChild(option);
- }
- select.appendChild(optgroup);
- that.sortBrowseSelectOptGroupsByMediaSourceId(select);
- }
- updateTreeSelect();
- updateTopBarSelect();
- that.setBrowseSelectValue();
- that.setMediaSourceSelectValue();
- }
- getSelectedOption (select) {
- var options = select.querySelectorAll('option');
- for(var i = 0; i < options.length; i++) {
- var option = options[i];
- if(option.selected) return option;
- }
- }
- formatFileSize(size:number) : String {
- var sizes = [' Bytes', ' KB', ' MB', ' GB', ' TB', ' PB', ' EB', ' ZB', ' YB'];
- for (var i = 1; i < sizes.length; i++) {
- if (size < Math.pow(1024, i)) return (Math.round((size/Math.pow(1024, i-1))*100)/100) + sizes[i-1];
- }
- return size.toString();
- }
- getClosest(elem:any, selector:string) : HTMLElement {
- var firstChar = selector.charAt(0);
-
- // Get closest match
- for ( ; elem && elem !== document; elem = elem.parentNode ) {
-
- // If selector is a class
- if ( firstChar === '.' ) {
- if ( elem.classList.contains( selector.substr(1) ) ) {
- return elem;
- }
- }
-
- // If selector is an ID
- if ( firstChar === '#' ) {
- if ( elem.id === selector.substr(1) ) {
- return elem;
- }
- }
-
- // If selector is a data attribute
- if ( firstChar === '[' ) {
- if ( elem.hasAttribute( selector.substr(1, selector.length - 2) ) ) {
- return elem;
- }
- }
-
- // If selector is a tag
- if ( elem.tagName.toLowerCase() === selector ) {
- return elem;
- }
-
- }
-
- return null;
- }
-
-} // end class EurekaView
-
-
-interface ModelViewObj {
- model: EurekaModel;
- view: EurekaView;
-}
-
-class EurekaController {
- private _model:EurekaModel;
- private _view:EurekaView;
-
- getModel() {
- return this._model;
- }
- getView() {
- return this._view;
- }
-
- constructor(public opts:ModelViewObj) {
- this._model = opts.model;
- this._view = opts.view;
- }
-
- init() {
- var that = this;
- var eureka:HTMLElement = that.getView().getElement(); // we found it!
-
- if(that.getModel().getDebug()) console.log('init');
-
- that.getView().getElement().addEventListener(EurekaModel.EurekaTreePainted, function(e:any){
- var d = e.detail.data;
- if(that.getModel().getDebug()) console.log('EurekaTreePainted!!!',e,d);
- if(that.getModel().useLocalStorage()) that.getModel().setLocalStorage(d.cs.toString() + '_mediaSourceData',JSON.stringify(d));
- });
-
- if(that.getModel().useLocalStorage()) {
- (function(){
- var mediaSourcesData = that.getModel().getLocalStorage('mediaSourcesData');
- if(that.getModel().getDebug()) console.log('using local storage setMediaSourcesData', 'mediaSourcesData: ', mediaSourcesData);
- if(mediaSourcesData) {
- // data,dispatch,setLocalStorage,clearDirectory,dispatchIdenticalValues
- that.getModel().setMediaSourcesData(JSON.parse(mediaSourcesData), true, false, false, true);
- }
- })();
-
- (function(){
- var mediaSourceData = that.getModel().getLocalStorage(that.getModel().getCurrentMediaSource() + '_mediaSourceData');
- if(mediaSourceData) {
- if(that.getModel().getDebug()) console.log('using local storage paintTree', 'mediaSourceData: ', mediaSourceData);
- that.getView().paintTree(JSON.parse(mediaSourceData));
- that.getView().recursivelyOpenTreeToCurrentDirectory();
- }
- })();
-
- (function(){
- var directoryData:string = that.getModel().getLocalStorage('lastDirectoryPainted');
- if(that.getModel().getDebug()) console.log('using local storage paintJSON', 'directoryData: ', directoryData);
- if(directoryData) {
- var dd:any = JSON.parse(directoryData);
- that.getModel().setCurrentDirectory(dd.cd,false,false,false);
- that.getView().paintJSON(dd);
- that.getView().recursivelyOpenTreeToCurrentDirectory();
- }
- })();
- }
-
- // listen for when certain things happen (currently the DOM element itself dispatches the events)
- eureka.addEventListener(EurekaModel.EurekaViewChange, function (e:any) { // #janky
- //that.getModel().setCurrentView(e.currentView, false);
- });
- eureka.addEventListener(EurekaModel.EurekaDirectoryChanged, function (e:any) {
- if(!that.getModel().getCurrentMediaSource()) return;
- if(that.getModel().getDebug()) console.log(EurekaModel.EurekaDirectoryChanged, ' requesting data from ', that.getModel().getListDirectoryRequestURL());
- function handleJSONData(d) {
- if(that.getModel().useLocalStorage()) that.getModel().setLocalStorage('lastDirectoryPainted',JSON.stringify(d));
- if(that.getModel().getDebug()) console.log(d);
- that.getView().paintJSON(d);
- }
- if(that.getModel().getUseWebWorkers()) {
- (function(){
- var worker = new Worker(that.getModel().getwebWorkersPath() + 'listdirectory.js');
- worker.addEventListener('message',function(e){
- handleJSONData(e.data);
- }, false);
- worker.postMessage({
- listDirectoryRequestURL:that.getModel().getListDirectoryRequestURL(),
- currentMediaSource:that.getModel().getCurrentMediaSource(),
- currentDirectory: e.detail.currentDirectory || '/',
- headers:that.getModel().getXHRHeaders()
- });
- })();
- } else {
- var ajax = new AJAX();
- ajax.get(
- that.getModel().getListDirectoryRequestURL(),
- { s: that.getModel().getCurrentMediaSource(), dir: e.detail.currentDirectory || '/' },
- function (data) {
- handleJSONData(JSON.parse(data));
- },
- true,
- that.getModel().getXHRHeaders()
- );
- }
- });
- eureka.addEventListener(EurekaModel.EurekaDirectoryOpened, function(e:any) {
- if(that.getModel().getDebug()) console.log(EurekaModel.EurekaDirectoryOpened);
- var path = e.detail.path.charAt(e.detail.path.length - 1) == '/' ? e.detail.path : e.detail.path + '/';
-
- function handleJSONData(d) {
- if(that.getModel().getDebug()) console.log(d);
-
- var results = d.results;
- for(var i = 0; i < results.length; i++) {
- var result = results[i];
-
- if(result.directory) {
- that.getView().asyncronouslyAddDirectory(path, result.directory);
- }
- }
- if(results.length) that.getView().assignTreeListeners();
- }
- if(that.getModel().getUseWebWorkers()) {
- (function(){
- var worker = new Worker(that.getModel().getwebWorkersPath() + 'listdirectory.js');
- worker.addEventListener('message',function(e){
- handleJSONData(e.data);
- }, false);
- worker.postMessage({
- listDirectoryRequestURL:that.getModel().getListDirectoryChildrenRequestURL(),
- currentMediaSource:that.getModel().getCurrentMediaSource(),
- currentDirectory: e.detail.path || '/',
- headers:that.getModel().getXHRHeaders()
- });
- })();
- } else {
- var ajax = new AJAX();
- ajax.get(
- that.getModel().getListDirectoryChildrenRequestURL(),
- { s: that.getModel().getCurrentMediaSource(), dir: e.detail.path || '/' },
- function (data) {
- handleJSONData(JSON.parse(data));
- },
- true,
- that.getModel().getXHRHeaders()
- );
- }
- });
- eureka.addEventListener(EurekaModel.EurekaMediaSourceChange, function (e:any) {
- if(that.getModel().getDebug()) console.log(EurekaModel.EurekaMediaSourceChange);
- function handleJSONData(d) {
- if(that.getModel().getDebug()) console.log('EurekaMediaSourceChange handleJSONData: ',d, e);
- if(d.cs && that.getModel().useLocalStorage()) that.getModel().setLocalStorage(d.cs + '_mediaSourceData',JSON.stringify(d));
- that.getView().paintTree(d);
- if(e.detail.clearDirectory == true) {
- if(that.getModel().getDebug()) console.log('clearing directory');
- that.getModel().setCurrentDirectory('',true,false); // clear the current directory and trigger a repaint
- }
- }
- if(that.getModel().getUseWebWorkers()) {
- (function(){
- var worker = new Worker(that.getModel().getwebWorkersPath() + 'listsource.js');
- worker.addEventListener('message',function(e){
- handleJSONData(e.data);
- }, false);
- worker.postMessage({
- listSourceRequestURL:that.getModel().getListSourceRequestURL(),
- currentMediaSource:that.getModel().getCurrentMediaSource(),
- headers:that.getModel().getXHRHeaders()
- });
- })();
- } else {
- var ajax = new AJAX();
- ajax.get(
- that.getModel().getListSourceRequestURL(),
- { s: e.detail.currentMediaSource },
- function (data) {
- handleJSONData(JSON.parse(data));
- },
- true,
- that.getModel().getXHRHeaders()
- );
- }
- });
- eureka.addEventListener(EurekaModel.EurekaMediaSourceInit, function(e:any) {
- if(that.getModel().getDebug()) console.log('EurekaMediaSourceInit: !!!!',e);
- if(!that.getModel().useLocalStorage()) {
- that.getModel().setCurrentDirectory(that.getModel().getCurrentDirectory(), true, false, true);
- }
- });
- eureka.addEventListener(EurekaModel.EurekaMediaSourcesListChange, function (e:any) {
- if(that.getModel().getDebug()) console.log('MediaSourcesListChange: ');
- var sources = e.detail.sources;
- for (var i = 0; i < sources.length; i++) {
- var source = new EurekaMediaSource(sources[i].opts);
- var id = source.getID();
- //var title = source.getTitle();
-
- requestMediaListings(source);
- function requestMediaListings(source:EurekaMediaSource) {
- if(that.getModel().getDebug()) console.log('requestMediaListings');
- var id = source.getID();
- function handleJSONData(d) {
- if(that.getModel().getDebug()) console.log(d);
- that.getView().updateMediaSourceListings(d);
- }
- if(that.getModel().getUseWebWorkers()) {
- (function(){
- var worker = new Worker(that.getModel().getwebWorkersPath() + 'listsource.js');
- worker.addEventListener('message',function(e){
- handleJSONData(e.data);
- }, false);
- worker.postMessage({
- listSourceRequestURL:that.getModel().getListSourceRequestURL(),
- currentMediaSource:id,
- headers:that.getModel().getXHRHeaders()
- });
- })();
- } else {
- var ajax = new AJAX();
- ajax.get(
- that.getModel().getListSourceRequestURL(),
- { s: id },
- function (data) {
- data = JSON.parse(data);
- handleJSONData(data);
- },
- true,
- that.getModel().getXHRHeaders()
- );
- }
- }
- }
- });
- if(that.getModel().getDebug()) console.log('MediaSourcesListChange listener added');
- (function(){
- if(that.getModel().getDebug()) console.log('requesting sources: ');
- function handleJSONData(d) {
- if(that.getModel().getDebug()) console.log(d);
- if(that.getModel().useLocalStorage()) that.getModel().setLocalStorage('mediaSourcesData',JSON.stringify(d));
- that.getModel().setMediaSourcesData(d);
- }
- if(that.getModel().getUseWebWorkers()) {
- (function(){
- var worker = new Worker(that.getModel().getwebWorkersPath() + 'listsources.js');
- worker.addEventListener('message',function(e){
- handleJSONData(e.data);
- }, false);
- worker.postMessage({
- listSourcesRequestURL:that.getModel().getListSourcesRequestURL(),
- headers:that.getModel().getXHRHeaders()
- });
- })();
- } else {
- var ajax = new AJAX();
- ajax.get(
- that.getModel().getListSourcesRequestURL(),
- {},
- function (data) {
- data = JSON.parse(data);
- handleJSONData(data);
- },
- true,
- that.getModel().getXHRHeaders()
- );
- }
- })();
-
- }
-} // end class EurekaController
diff --git a/_build/ts/muckboot.eureka.ts b/_build/ts/muckboot.eureka.ts
deleted file mode 100644
index 21ec08c..0000000
--- a/_build/ts/muckboot.eureka.ts
+++ /dev/null
@@ -1,661 +0,0 @@
-/// this directory .upload some files ? {
- equals(o: T): Boolean;
-}
-
-// attach the .equals method to Array's prototype to call it on any array http://stackoverflow.com/a/14853974/4671250
-Array.prototype.equals = function (array) : Boolean {
- // if the other array is a falsy value, return
- if (!array)
- return false;
-
- // compare lengths - can save a lot of time
- if (this.length != array.length)
- return false;
-
- for (var i = 0, l=this.length; i < l; i++) {
- // Check if we have nested arrays
- if (this[i] instanceof Array && array[i] instanceof Array) {
- // recurse into the nested arrays
- if (!this[i].equals(array[i]))
- return false;
- }
- else if (this[i] != array[i]) {
- // Warning - two different object instances will never be equal: {x:20} != {x:20}
- return false;
- }
- }
- return true;
-}
-
diff --git a/_build/ts/tsconfig.json b/_build/ts/tsconfig.json
deleted file mode 100644
index 29b95ce..0000000
--- a/_build/ts/tsconfig.json
+++ /dev/null
@@ -1,13 +0,0 @@
-{
- "compilerOptions": {
- "module": "commonjs",
- "noImplicitAny": true,
- "removeComments": true,
- "preserveConstEnums": true,
- "outFile": "../examples/assets/eureka.1.2.0.js",
- "sourceMap": true
- },
- "exclude": [
- "node_modules"
- ]
-}
diff --git a/_build/ts/workers/listdirectory.ts b/_build/ts/workers/listdirectory.ts
deleted file mode 100644
index 5d92b32..0000000
--- a/_build/ts/workers/listdirectory.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-/// self).postMessage(JSON.parse(data));
- },
- true,
- data.headers
- );
-}, false);
\ No newline at end of file
diff --git a/_build/ts/workers/listsource.ts b/_build/ts/workers/listsource.ts
deleted file mode 100644
index cb91220..0000000
--- a/_build/ts/workers/listsource.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-/// self).postMessage(JSON.parse(data));
- },
- true,
- data.headers
- );
-}, false);
\ No newline at end of file
diff --git a/_build/ts/workers/listsources.ts b/_build/ts/workers/listsources.ts
deleted file mode 100644
index 0914d6f..0000000
--- a/_build/ts/workers/listsources.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-/// self).postMessage(JSON.parse(data));
- },
- true,
- data.headers
- );
-}, false);
\ No newline at end of file
diff --git a/bower.json b/bower.json
new file mode 100644
index 0000000..070de52
--- /dev/null
+++ b/bower.json
@@ -0,0 +1,57 @@
+{
+ "name": "eureka-browser",
+ "description": "Eureka is a progressively enhanced Media Browser Component.",
+ "main": [
+ "client/build/assets/css/eureka.0.0.21.min.css",
+ "client/build/assets/js/eureka.0.0.21.min.js"
+ ],
+ "version": "0.0.21",
+ "authors": [
+ "JP de Vries "
+ ],
+ "license": "MIT",
+ "homepage": "https://github.com/jpdevries/eureka",
+ "private": true,
+ "ignore": [
+ "**/.*",
+ "node_modules",
+ "bower_components",
+ "test",
+ "tests",
+ "lib",
+ "prod",
+ "server.js",
+ "yarn.lock",
+ "client/public",
+ "client/build/index.html",
+ "client/build/favicon.ico",
+ "client/build/fakepi",
+ "client/src",
+ "client/build/assets/css/main*",
+ ".babelrc",
+ ".DS_Store",
+ "client/gruntfile.js",
+ "package.json",
+ "client/package.json",
+ "client/yarn.lock"
+ ],
+ "dependencies": {
+ "url-search-params": "^0.6.2"
+ },
+ "devDependencies": {
+ "bourbon": "^4.3.2",
+ "neat": "^1.8.0",
+ "spectacular": "^0.0.0"
+ },
+ "exportsOverride": {
+ "bourbon": {
+ "": "app/assets/stylesheets/"
+ },
+ "neat": {
+ "": "app/assets/stylesheets/"
+ },
+ "spectacular": {
+ "": "app/assets/stylesheets/"
+ }
+ }
+}
diff --git a/client/.babelrc b/client/.babelrc
new file mode 100644
index 0000000..adf9c3b
--- /dev/null
+++ b/client/.babelrc
@@ -0,0 +1,14 @@
+{
+ "presets": ["es2015", "react", "stage-0"],
+ "plugins": [
+ [
+ "react-intl", {
+ "messagesDir": "./i18n/messages",
+ "enforceDescriptions": false
+ }
+ ]
+ ],
+ "ignore": [
+ "**/*.test.js"
+ ]
+}
diff --git a/client/.eslintrc b/client/.eslintrc
new file mode 100644
index 0000000..da945bb
--- /dev/null
+++ b/client/.eslintrc
@@ -0,0 +1,5 @@
+{
+ "plugins": [
+ "jsx-a11y"
+ ]
+}
diff --git a/client/.gitignore b/client/.gitignore
new file mode 100644
index 0000000..b39038c
--- /dev/null
+++ b/client/.gitignore
@@ -0,0 +1,2 @@
+build/assets/img/src/png
+public/assets/img/src/png
diff --git a/client/LICENSE b/client/LICENSE
new file mode 100644
index 0000000..91b8f6f
--- /dev/null
+++ b/client/LICENSE
@@ -0,0 +1,31 @@
+BSD License
+
+For React software
+
+Copyright (c) 2013-present, Facebook, Inc.
+All rights reserved.
+
+Redistribution and use in source and binary forms, with or without modification,
+are permitted provided that the following conditions are met:
+
+ * Redistributions of source code must retain the above copyright notice, this
+ list of conditions and the following disclaimer.
+
+ * Redistributions in binary form must reproduce the above copyright notice,
+ this list of conditions and the following disclaimer in the documentation
+ and/or other materials provided with the distribution.
+
+ * Neither the name Facebook nor the names of its contributors may be used to
+ endorse or promote products derived from this software without specific
+ prior written permission.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
+ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
+WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR
+ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
+(INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
+LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON
+ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
+SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
diff --git a/client/README.md b/client/README.md
new file mode 100644
index 0000000..cf62936
--- /dev/null
+++ b/client/README.md
@@ -0,0 +1,680 @@
+# Eureka 🌲
+[](https://travis-ci.org/jpdevries/eureka) [](https://badge.fury.io/js/eureka-browser)
+
+Eureka is a progressively enhanced flexible media browser. Connected to your media sources through a REST API, this accessible web component allows users to browse media sources, upload files, and choose media items.
+
+[🤗 Try the demo](https://eureka.markup.tips/).
+As to be found in [Redactor 3.0 for MODX](https://www.modmore.com/extras/redactor/?via=2) by modmore. Contributions welcomed.
+
+> With `eureka.js` users will be saying "I found it!" in no time.
+ — [@mrktps](https://twitter.com/mrktps)
+
+## 💬 Discuss
+Join the conversation in our public Gitter chat room.
+
+[](https://gitter.im/jpdevries/eureka?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
+
+## 📚 Wiki
+Don't forget to [browse the Wiki](https://github.com/jpdevries/eureka/wiki) for [more information on the REST API](https://github.com/jpdevries/eureka/wiki/REST-API), [patterns](https://github.com/jpdevries/eureka/wiki/Patterns), [screenshots](https://github.com/jpdevries/eureka/wiki/Screenshots) and more.
+
+## 🍻 Support
+The Eureka Media Browser and supporting resources are provided free as in beer.
+[Gratuities are accepted through Square Cash](https://cash.me/$devriesdev).
+
+## 🏋️♀️ Weigh In
+The Eureka Media Browser is pretty lightweight all things considered.
+
+| Asset | Weight (GZIP minified)
+| ------------- |:-------------:|
+| CSS Stylesheet | `5.18kB` |
+| SVG Icons | `5.04kB` |
+| React Component | `47.40kB` |
+
+### 📄 HTML–first
+As a progressively enhanced web component, Eureka is functional HTML–first. This means that technically anything other than the initial HTML layer is a non–critical enhancement. Critical features supported by the HTML layer, such as browse, upload, and choose, are universally supported and do not depend on modern browsers, CSS styles, or script.
+
+😲 Take a gander at Eureka in the nued by waking our incredibly lightweight [raw HTML example](https://reacteureka.herokuapp.com/nued).
+
+We also encourage you to temporarily disable JavaScript in your browser and party with Eureka like it's 1999.
+
+## Powered By 🚀
+ - Progressively Enhanced from HTML components
+ - All–new Virtual DOM powered by React/Redux
+ - Node Server Side Rendering
+ - Node testing server
+
+## Highlights 🖋
+ - Configurable Rest API endpoints
+ - Browse multiple media sources for images
+ - Drag and Drop Upload Support
+ - Flexible Layout
+ - Responsive Design
+ - Configurable Styles via CSS Variables
+ - Accessible
+ - supports mobile and touch devices
+ - supports `.no-js` via server side rendering
+ - ARIA & Keyboard Support
+ - high contrast themes
+
+## 🚥 Features
+The level of isomorphism between the client and server side one can achieve with Node is unmatched. Eureka takes advantage of this unique strength of Node by, through an isomorphic server and standard synchronous forms, achieving full support for critical features.
+
+No features rely solely on sight or the use of a mouse. Keyboard use is supported. Accommodations are taken for users that benefit from high contrast themes. Visually hidden text is used to convey aspects of the interface that are otherwise visually implied to screen readers and assistive technology.
+
+The semantic HTML layer remains usable even absent of style as pure HTML.
+
+
+ Support of features against browser environments
+
+
+ Feature
+ .no-js< IE 9Chrome
+ Safari
+ Firefox
+ IE 11
+ Edge
+
+
+
+
+ Upload multiple files
+ ✅ ✅ ✅ ✅ ✅ ✅ ✅
+
+ Browse directories
+ ✅ ✅ ✅ ✅ ✅ ✅ ✅
+
+ Choose a media item
+ ✅ ✅ ✅ ✅ ✅ ✅ ✅
+
+ Keyboard Support
+ ✅ ✅ ✅ ✅ ✅ ✅ ✅
+
+ ARIA Support
+ ✅ ✳️ ✅ ✅ ✅ ✅ ✅
+
+ WCAG Level AA
+ ✅ ✅ ✅ ✅ ✅ ✅ ✅
+
+ Internationalization
+ ✅ ✅ ✅ ✅ ✅ ✅ ✅
+
+ Choose Multiple Items
+ ❌ ❌ ✅ ✅ ✅ ✅ ✅
+
+ Delete Multiple Items
+ ❌ ❌ ✅ ✅ ✅ ✅ ✅
+
+ Keyboard Shortcuts
+ ❌ ❌ ✅ ✅ ✅ ✅ ✅
+
+ Media Source panel
+ ❌ ❌ ✅ ✅ ✅ ✅ ✅
+
+ Async UX
+ ❌ ❌ ✅ ✅ ✅ ✅ ✅
+
+ Filterable Data Table
+ ❌ ❌ ✅ ✅ ✅ ✅ ✅
+
+ Sortable Data Table
+ ❌ ❌ ✅ ✅ ✅ ✅ ✅
+
+ Drag 'n drop uploads
+ ❌ ❌ ✅ ✅ ✅ ✅ ✅
+
+ Grid Layout
+ ✅ ❌ ✅ ✅ ✅ ❌ ❌
+
+ Flexible Layout
+ ✅ ❌ ✅ ✅ ✅ ✅ ✅
+
+ View Chooser
+ ❌ ❌ ✅ ✅ ✅ ✅ ✅
+
+ Masonry Layout Mode
+ ❌ ❌ ✅ ✅ ✅ ✅ ✅
+
+ Pathbar
+ ❌ ❌ ✅ ✅ ✅ ✅ ✅
+
+ Rename Item
+ ❌ ❌ ✅ ✅ ✅ ✅ ✅
+
+ Delete Item
+ ❌ ❌ ✅ ✅ ✅ ✅ ✅
+
+ Download Item
+ ✅ ✅ ✅ ✅ ✅ ✅ ✅
+
+ Download Multiple Items
+ ❌ ❌ ✅ ✅ ✅ ✅ ✅
+
+ Local Storage
+ ❌ ❌ ✅ ✅ ✅ ✅ ✅
+
+ Variable Styles
+ ✅ ❌ ✅ ✅ ✅ ❌ ✅
+
+ Accessible Themes
+ ✅ ❌ ✅ ✅ ✅ ❌ ✅
+
+ Mobile First Layout
+ ✅ ✳️ ✅ ✅ ✅ ✅ ✅
+
+ Fullscreen Mode
+ ❌ ❌ ✅ ✅ ✅ ✅ ✅
+
+ HTML5 Context Menus
+ ❌ ❌ 🔧 ❌ ✅ ❌ ❌
+
+ HTML5 Details
+ ✳️ ❌ ✅ ✅ ✅ ✳️ ✅
+
+ HTML5 Datalist
+ ✳️ ❌ ✅ ❌ ✅ ✳️ ✳️
+
+
+
+## 🛠 Usage
+
+```bash
+npm install eureka-browser --save
+```
+
+#### Bower
+You can also install Eureka via Bower, which is a good way to fetch its stylesheet and icon sprite. There is also a UMD export of the `EurekaMediaBrowser` component for the unlikely case you'll need it.
+
+```bash
+npm install -g bower
+```
+
+```bash
+bower install eureka-browser#release-2.0
+ls bower_components/eureka-browser/client/build/assets/css/ # default eureka theme
+ls bower_components/eureka-browser/client/build/assets/img # icon sprite
+ls bower_components/eureka-browser/client/build/assets/js # bundled and unbundled UMD exports of EurekaMediaBrowser component
+```
+
+#### HTML
+The `` React component is styled by a standard CSS stylesheet. Include the CSS for the appropriate version of the media browser. Reference the theming section for [more information on styling Eureka](https://github.com/jpdevries/eureka#-theming).
+
+```html
+
+
+
+
+```
+
+#### JS
+```js
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { EurekaMediaBrowser } from 'eureka-browser';
+
+ReactDOM.render(
+ ` components on the same page do not share the same DOM ids |
+| `assetsBasePath` | `"./assets/"` | Relative path to the Eureka assets directory |
+| `iconSVG` | `"./img/icons.svg"` | Path, relative to `assetsBasePath`, to the Eureka icon sprite sheet |
+| `callbacks` | `{close: undefined, choose: undefined}` | Object containing close and choose callbacks |
+| `headers` | `{'Powered-By': 'Eureka by Markup.tips'}` | Additional request headers sent with XHR requests |
+| `intervals` | `{searchBarPlaceholder: false,fetchDirectoryContents: 18000,updateSourceTree: false}` | Intervals for whether or not and how often to do things like hit the REST API for updated data or update the placeholder attribute based on the current directory listing |
+| `enlargeFocusedRows` | `false` | Whether or not to enlarge thumbnails of focused rows |
+| `mode` | `"table"` | Initial view mode (table, thumb, grid, list) |
+| `sort` | `"name"` | Initial column to sort media items on |
+| `allowFullscreen` | `true` | Whether or not the interface should offer a fullscreen button |
+| `emphasisFocusedMediaItem` | `true` | Whether or not to emphasis selected media items (defaults to emphasizing the filename, only applies to table and list view modes) |
+| `doDragNDrop` | `true` | Whether or not to enable drag 'n drop features |
+| `allowChooseMultiple` | `true` | Whether or not to allow multiple files to be chosen |
+| `allowInvertSelection` | `true` | Whether or not to allow selection of multiple items to be inverted |
+| `allowDownloadMultiple` | `true` | Whether or not to allow multiple selected items to be download as a zip file |
+
+
+
+*Please take note that when `useLocalStorage` is `true` any options manually passed in as props will take precedent.*
+
+## 🌐 Browser Support
+The server side rendering and HTML–first design patterns begin progressively enhancing a universally supported HTML layer. So basic features are supported in any browser. JavaScript support begins at IE9. Desired CSS layout requires Flexbox and is further enhanced with Grid Layout.
+
+## 🔡 i18n
+Eureka is on Crowdin. Please [contribute to our translations](https://crowdin.com/project/eureka-browser) if you are able.
+
+## ♿️ Accessibility Proclaimer
+Eureka strives for WCAG Level AA success criteria in all scenarios with some accessibility preference features leaning towards Level AAA. Please [log *any* a11y issues here](https://github.com/jpdevries/eureka/issues).
+
+## ✅ Getting Started
+We're going to use `yarn` so make sure that is installed.
+
+```bash
+npm install yarn -g
+```
+
+To fire up a testing server run the following:
+
+```bash
+git clone -b release-2.0 git://github.com/jpdevries/eureka.git
+cd eureka
+yarn prestart
+yarn build
+yarn serve # start the development server
+# open http://localhost:3001 # Node server
+```
+
+To host the compiled production server run
+```bash
+yarn start # install, fetch sources, build
+```
+
+or
+```bash
+yarn prod # fire up the production server
+```
+
+The testing server hosts the `sources` and `client/build` directories along with a REST API to `GET`, `POST`, `PUT`, `DELETE` media items.
+
+
+
+## ⚒ Development
+The Eureka component is created with `create-react-app` and found in the `client` directory. There you can run React tests, build the React component, and start the development server.
+
+Firstly, you'll need the testing server running for the REST API:
+```bash
+cd eureka
+yarn server
+```
+
+Now, in another terminal tab:
+
+```bash
+cd client
+yarn build
+yarn test
+yarn start
+# open http://localhost:3000 # development server
+```
+
+The development server, like any other React app created with `create-react-app`, will automatically inject changes as you save changes to your source files.
+
+## 🗄 REST API
+Eureka is hungry for remote media sources. It needs a REST API to feed it JSON data.
+Find docs at the [REST API wiki page](https://github.com/jpdevries/eureka/wiki/REST-API).
+
+### 💄 Decorating Actions
+Eureka's core Redux actions assume you'll be using a REST API. If REST isn't really your thing, or you need to modify the Redux actions for some other reason, you can decorate the actions Eureka will use. This is done using a Higher Order Component that wraps `EurekaMediaBrowser` and injects a `decoratedActions` property which will be applied as a shallow merge on top of the default actions. Reference this [Gist example of decorating actions](https://gist.github.com/jpdevries/e967056bd31cf6f01df0e431df68283b) for an example.
+
+## 📠 Server Side Rendering
+Eureka is progressively enhanced with React to be asynchronous and a richer experience in capable browsers that successfully execute scripts. But Eureka's support doesn't end at modern browsers because its design process doesn't start there. Eureka is a semantic and synchronous HTML form before it is an enhanced Virtual DOM.
+
+Reference the [Server Side Rendering Wiki page](https://github.com/jpdevries/eureka/wiki/Server-Side-Rendering) for documentations and examples on achieving world wide support.
+
+### ⌨️ Keyboard Shortcuts
+Eureka uses JavaScript events to enrich the user experience of keyboard users.
+
+| Shortcut | Command |
+| --------------- |:-------------: |
+| Toggle Sidebar | ctrl+; |
+| Change View | ctrl+alt+(1-5) |
+| Change Media Source | alt+(1-9) |
+| Delete Item | backspace |
+| Expand Item | spacebar |
+| Choose Item | return |
+| Create Directory | ctrl+n |
+| Create file | ctrl+shift+n |
+| Upload Files | ctrl+u |
+| Rename Item | ctrl+r |
+| Filter Items | ctrl+f |
+| Sort Ascending | alt+up |
+| Sort Descending | alt+down |
+| Sort by filename | alt+n |
+| Sort by dimensions | alt+d |
+| Sort by file size | alt+f |
+| Sort by edited on | alt+e |
+| Set Choose Mode to Single | alt+s |
+| Set Choose Mode to Multiple | alt+m |
+| Invert Selection | alt+i |
+
+
+## 🎨 Theming
+Request additional theming options and share your themes by [opening an issue](https://github.com/jpdevries/eureka/issues/new) or [joining the discussion on Gitter](https://gitter.im/jpdevries/eureka?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge).
+
+| Variable | Description |
+| ------------- | -----|
+| `--active` | Color used to highlight activated components such as the drop area |
+| `--border-width` | Generic border width for panels, components, inputs |
+| `--border-style` | Generic border style for panels, components, inputs |
+| `--border-color` | Generic border color for panels, components, inputs |
+| `--button-bg` | Background color of button elements |
+| `--button-color` | Color of button text |
+| `--color` | Default text color |
+| `--dangerous` | Color to use for warnings and errors |
+| `--light-bg` | Generic light background color, used for panels |
+| `--link-color` | Default anchor text color |
+| `--panel-border-color` | Border color of panel components |
+| `--subtle` | Subtle color, used for Media Source Panel |
+| `--very-subtle` | Very subtle color, used for drop zone area |
+| `--very-subtle-icon-opacity` | Opacity for very subtle icons |
+
+## 📣 Audible Interface
+Eureka uses a combination of ARIA attributes and `.visually-hidden` text to offer an experience that is as accessible visually as it is audibly.
+
+
+
+There is one Achilles heel here. Depending on your media source API, you might not be able to provide alternative text for images and media items. In the event that no alt text is provided, Eureka will to the best it can. For example:
+
+> schildpad.jpg displays at 336x125, weighs 37 KB, and was edited on Sunday, April 02, 2017, Central European Summer Time
+
+## 📺 Fullscreen Mode
+To maximize usability Eureka leverages the Fullscreen API.
+
+
+See the Fullscreen Mode in action
+
+
+## 🏞 Masonry Layout
+Eureka is enhanced by a Masonry Layout mode.
+
+
+Masonry Layout Mode
+ "
+ ],
+ "license": "MIT",
+ "homepage": "https://github.com/jpdevries/eureka",
+ "private": true,
+ "ignore": [
+ "**/.*",
+ "node_modules",
+ "bower_components",
+ "test",
+ "tests",
+ "lib",
+ "client/public",
+ "client/build/nued.html",
+ "client/src",
+ "client/build/assets/img/src",
+ ".babelrc",
+ ".DS_Store",
+ "client/gruntfile.js",
+ "package.json",
+ "client/package.json",
+ "client/yarn.lock"
+ ],
+ "dependencies": {
+ "url-search-params": "^0.6.2",
+ "masonry": "~4.2.0"
+ },
+ "devDependencies": {
+ "bourbon": "^4.3.2",
+ "neat": "*",
+ "spectacular": "^0.0.0"
+ },
+ "exportsOverride": {
+ "bourbon": {
+ "": "app/assets/stylesheets/"
+ },
+ "neat": {
+ "": "app/assets/stylesheets/"
+ },
+ "spectacular": {
+ "": "app/assets/stylesheets/"
+ }
+ }
+}
diff --git a/client/build/asset-manifest.json b/client/build/asset-manifest.json
new file mode 100644
index 0000000..ba2e100
--- /dev/null
+++ b/client/build/asset-manifest.json
@@ -0,0 +1,6 @@
+{
+ "main.css": "static/css/main.243c0c43.css",
+ "main.css.map": "static/css/main.243c0c43.css.map",
+ "main.js": "static/js/main.a6b5a45c.js",
+ "main.js.map": "static/js/main.a6b5a45c.js.map"
+}
\ No newline at end of file
diff --git a/client/build/assets/css/eureka.0.0.129.css b/client/build/assets/css/eureka.0.0.129.css
new file mode 100644
index 0000000..10114f3
--- /dev/null
+++ b/client/build/assets/css/eureka.0.0.129.css
@@ -0,0 +1,1843 @@
+.eureka {
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box; }
+
+.eureka *, .eureka *::after, .eureka *::before {
+ -webkit-box-sizing: inherit;
+ box-sizing: inherit; }
+
+.eureka.eureka__view-mode__thumb img, .eureka.eureka__view-mode__grid img, .eureka .eureka__media-source-selector select {
+ width: 100%; }
+
+.eureka th[aria-sort], .eureka select, .eureka button, .eureka .button, .eureka .eureka__upload-form label, .eureka .eureka__layout-chooser .eureka__icon-radio-btns label {
+ cursor: pointer; }
+
+.eureka .eureka__modal, .eureka .eureka__modal .eureka__modal-scrim {
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0; }
+
+/*
+http://www.phase2technology.com/blog/exploring-maps-in-sass-3-3/
+*/
+.eureka input[aria-pressed="true"] + label, .eureka .eureka__crop-modal input[type="radio"]:checked + label, .eureka button[aria-pressed="true"] {
+ -webkit-box-shadow: 0 0 0 1px #E4E4E4, inset 0 0.175em 0 #c5c5c5;
+ -webkit-box-shadow: 0 0 0 1px var(--border-shadow-color, #E4E4E4), inset 0 0.175em 0 var(--border-shadow-color, #c5c5c5);
+ box-shadow: 0 0 0 1px #E4E4E4, inset 0 0.175em 0 #c5c5c5;
+ box-shadow: 0 0 0 1px var(--border-shadow-color, #E4E4E4), inset 0 0.175em 0 var(--border-shadow-color, #c5c5c5); }
+
+.eureka-root .eureka.eureka__view-mode__table.eureka__server-side table > thead > tr > th:nth-of-type(1), .eureka-root .eureka.eureka__view-mode__list.eureka__server-side table > thead > tr > th:nth-of-type(1), .visually-hidden, .eureka:not(.eureka__server-side) .eureka__upload-form input[type="file"], .eureka .eureka__layout-chooser legend, .eureka .eureka__layout-chooser .eureka__icon-radio-btns input[type="radio"], .eureka .eureka__layout-chooser .eureka__icon-radio-btns input[type="checkbox"] {
+ /*https://developer.yahoo.com/blogs/ydn/clip-hidden-content-better-accessibility-53456.html*/
+ position: absolute !important;
+ clip: rect(1px 1px 1px 1px);
+ /* IE6, IE7 */
+ clip: rect(1px, 1px, 1px, 1px);
+ padding: 0 !important;
+ border: 0 !important;
+ height: 1px !important;
+ width: 1px !important;
+ overflow: hidden; }
+ body:hover .eureka-root .eureka.eureka__view-mode__table.eureka__server-side table > thead > tr > th:nth-of-type(1) a, .eureka-root .eureka.eureka__view-mode__table.eureka__server-side body:hover table > thead > tr > th:nth-of-type(1) a, body:hover .eureka-root .eureka.eureka__view-mode__list.eureka__server-side table > thead > tr > th:nth-of-type(1) a, .eureka-root .eureka.eureka__view-mode__list.eureka__server-side body:hover table > thead > tr > th:nth-of-type(1) a, body:hover .visually-hidden a, body:hover .eureka:not(.eureka__server-side) .eureka__upload-form input[type="file"] a, .eureka:not(.eureka__server-side) .eureka__upload-form body:hover input[type="file"] a, body:hover .eureka .eureka__layout-chooser legend a, .eureka .eureka__layout-chooser body:hover legend a, body:hover .eureka .eureka__layout-chooser .eureka__icon-radio-btns input[type="radio"] a, .eureka .eureka__layout-chooser .eureka__icon-radio-btns body:hover input[type="radio"] a, body:hover .eureka .eureka__layout-chooser .eureka__icon-radio-btns input[type="checkbox"] a, .eureka .eureka__layout-chooser .eureka__icon-radio-btns body:hover input[type="checkbox"] a, body:hover .eureka-root .eureka.eureka__view-mode__table.eureka__server-side table > thead > tr > th:nth-of-type(1) input, .eureka-root .eureka.eureka__view-mode__table.eureka__server-side body:hover table > thead > tr > th:nth-of-type(1) input, body:hover .eureka-root .eureka.eureka__view-mode__list.eureka__server-side table > thead > tr > th:nth-of-type(1) input, .eureka-root .eureka.eureka__view-mode__list.eureka__server-side body:hover table > thead > tr > th:nth-of-type(1) input, body:hover .visually-hidden input, body:hover .eureka:not(.eureka__server-side) .eureka__upload-form input[type="file"] input, .eureka:not(.eureka__server-side) .eureka__upload-form body:hover input[type="file"] input, body:hover .eureka .eureka__layout-chooser legend input, .eureka .eureka__layout-chooser body:hover legend input, body:hover .eureka .eureka__layout-chooser .eureka__icon-radio-btns input[type="radio"] input, .eureka .eureka__layout-chooser .eureka__icon-radio-btns body:hover input[type="radio"] input, body:hover .eureka .eureka__layout-chooser .eureka__icon-radio-btns input[type="checkbox"] input, .eureka .eureka__layout-chooser .eureka__icon-radio-btns body:hover input[type="checkbox"] input, body:hover .eureka-root .eureka.eureka__view-mode__table.eureka__server-side table > thead > tr > th:nth-of-type(1) button, .eureka-root .eureka.eureka__view-mode__table.eureka__server-side body:hover table > thead > tr > th:nth-of-type(1) button, body:hover .eureka-root .eureka.eureka__view-mode__list.eureka__server-side table > thead > tr > th:nth-of-type(1) button, .eureka-root .eureka.eureka__view-mode__list.eureka__server-side body:hover table > thead > tr > th:nth-of-type(1) button, body:hover .visually-hidden button, body:hover .eureka:not(.eureka__server-side) .eureka__upload-form input[type="file"] button, .eureka:not(.eureka__server-side) .eureka__upload-form body:hover input[type="file"] button, body:hover .eureka .eureka__layout-chooser legend button, .eureka .eureka__layout-chooser body:hover legend button, body:hover .eureka .eureka__layout-chooser .eureka__icon-radio-btns input[type="radio"] button, .eureka .eureka__layout-chooser .eureka__icon-radio-btns body:hover input[type="radio"] button, body:hover .eureka .eureka__layout-chooser .eureka__icon-radio-btns input[type="checkbox"] button, .eureka .eureka__layout-chooser .eureka__icon-radio-btns body:hover input[type="checkbox"] button {
+ display: none !important; }
+
+[class*="modal-section"], [class*="eureka-wrapper"] {
+ padding: 0; }
+ @media screen and (min-width: 641px) {
+ [class*="modal-section"], [class*="eureka-wrapper"] {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ overflow-y: hidden;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column; } }
+
+.eureka-root {
+ /*.eureka {
+ tbody {
+ &:not(.empty) {
+ > tr:not(.empty) {
+ @supports (display:grid) {
+ grid-template-areas:"media name dimensions file-size edited-on" "actions actions actions actions actions";
+ grid-template-columns: auto 24% 12% 12% 12%;
+ }
+ }
+ }
+ }
+ }*/ }
+ .eureka-root:-webkit-full-screen {
+ width: 100vw;
+ height: 100vh;
+ overflow-y: auto;
+ background: #ececec;
+ background: var(--bg-color, #ececec); }
+ .eureka-root label[for*="fullscreen-toggle"] {
+ margin-left: 8px;
+ margin-left: .5rem; }
+ .eureka-root .eureka__view-mode__table tbody:not(.empty) > tr.eureka__focused-media-item > td.eureka__context-row, .eureka-root .eureka__view-mode__table tbody:not(.empty) > tr:focus > td.eureka__context-row, .eureka-root .eureka__view-mode__list tbody:not(.empty) > tr.eureka__focused-media-item > td.eureka__context-row, .eureka-root .eureka__view-mode__list tbody:not(.empty) > tr:focus > td.eureka__context-row {
+ display: block !important; }
+ .eureka-root .eureka__view-mode__table tbody:not(.empty) > tr.eureka__focused-media-item > td.eureka__context-row[hidden], .eureka-root .eureka__view-mode__table tbody:not(.empty) > tr:focus > td.eureka__context-row[hidden], .eureka-root .eureka__view-mode__list tbody:not(.empty) > tr.eureka__focused-media-item > td.eureka__context-row[hidden], .eureka-root .eureka__view-mode__list tbody:not(.empty) > tr:focus > td.eureka__context-row[hidden] {
+ display: block !important; }
+ @media screen and (max-width: 640px) {
+ .eureka-root .eureka__view-mode__table tbody:not(.empty) > tr > td.eureka__td-media, .eureka-root .eureka__view-mode__list tbody:not(.empty) > tr > td.eureka__td-media {
+ text-align: center; } }
+ .eureka-root .eureka__view-mode__table tbody:not(.empty) > tr:focus > td.eureka__context-row, .eureka-root .eureka__view-mode__list tbody:not(.empty) > tr:focus > td.eureka__context-row {
+ display: block !important; }
+ .eureka-root .eureka__view-mode__table tbody:not(.empty) > tr:focus > td.eureka__context-row[hidden], .eureka-root .eureka__view-mode__list tbody:not(.empty) > tr:focus > td.eureka__context-row[hidden] {
+ display: block !important; }
+ .eureka-root .eureka__view-mode__table tbody:not(.empty) > tr:focus-within > td.eureka__context-row, .eureka-root .eureka__view-mode__list tbody:not(.empty) > tr:focus-within > td.eureka__context-row {
+ display: block !important; }
+ .eureka-root .eureka__view-mode__table tbody:not(.empty) > tr:focus-within > td.eureka__context-row[hidden], .eureka-root .eureka__view-mode__list tbody:not(.empty) > tr:focus-within > td.eureka__context-row[hidden] {
+ display: block !important; }
+ .eureka-root tbody:not(.empty) > tr:not(.empty) {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -ms-flex-wrap: wrap;
+ flex-wrap: wrap;
+ /*@supports (display: flex) and ( not (display:grid) ) {
+ }*/ }
+ .eureka-root tbody:not(.empty) > tr:not(.empty) > * {
+ -webkit-box-flex: 1;
+ -ms-flex: 1 0 auto;
+ flex: 1 0 auto; }
+ @supports (display: grid) {
+ .eureka-root tbody:not(.empty) > tr:not(.empty) {
+ display: grid; }
+ .eureka-root tbody:not(.empty) > tr:not(.empty) > td .eureka__td-media {
+ grid-area: media; }
+ .eureka-root tbody:not(.empty) > tr:not(.empty) > td .eureka__td-filename {
+ grid-area: name; }
+ .eureka-root tbody:not(.empty) > tr:not(.empty) > td.eureka__context-row {
+ grid-area: actions; }
+ .eureka-root tbody:not(.empty) > tr:not(.empty) > td.eureka__dimensions {
+ grid-area: dimensions; }
+ @media screen and (max-width: 640px) {
+ .eureka-root tbody:not(.empty) > tr:not(.empty) > td.eureka__dimensions {
+ display: none; } }
+ .eureka-root tbody:not(.empty) > tr:not(.empty) > td.eureka__file-size {
+ grid-area: file-size; }
+ @media screen and (max-width: 640px) {
+ .eureka-root tbody:not(.empty) > tr:not(.empty) > td.eureka__file-size {
+ display: none; } }
+ .eureka-root tbody:not(.empty) > tr:not(.empty) > td.eureka__edited-on {
+ grid-area: edited-on; }
+ @media screen and (max-width: 640px) {
+ .eureka-root tbody:not(.empty) > tr:not(.empty) > td.eureka__edited-on {
+ display: none; } } }
+ @supports (display: grid) {
+ .eureka-root .eureka tbody:not(.empty) > tr:not(.empty) > td.eureka__choose {
+ grid-area: choose; }
+ .eureka-root .eureka tbody:not(.empty) > tr:not(.empty) > td.eureka__td-media {
+ grid-area: media; }
+ .eureka-root .eureka tbody:not(.empty) > tr:not(.empty) > td.eureka__td-filename {
+ grid-area: name; }
+ .eureka-root .eureka tbody:not(.empty) > tr:not(.empty) > td.eureka__context-row {
+ grid-area: actions; }
+ .eureka-root .eureka tbody:not(.empty) > tr:not(.empty) > td.eureka__dimensions {
+ grid-area: dimensions; }
+ @media screen and (max-width: 640px) {
+ .eureka-root .eureka tbody:not(.empty) > tr:not(.empty) > td.eureka__dimensions {
+ display: none; } }
+ .eureka-root .eureka tbody:not(.empty) > tr:not(.empty) > td.eureka__file-size {
+ grid-area: file-size; }
+ @media screen and (max-width: 640px) {
+ .eureka-root .eureka tbody:not(.empty) > tr:not(.empty) > td.eureka__file-size {
+ display: none; } }
+ .eureka-root .eureka tbody:not(.empty) > tr:not(.empty) > td.eureka__edited-on {
+ grid-area: edited-on; }
+ @media screen and (max-width: 640px) {
+ .eureka-root .eureka tbody:not(.empty) > tr:not(.empty) > td.eureka__edited-on {
+ display: none; } } }
+ @supports (display: grid) {
+ @media screen and (min-width: 641px) {
+ .eureka-root .eureka.eureka__choose-multiple.eureka__view-mode__table tbody:not(.empty) > tr:not(.empty), .eureka-root .eureka.eureka__choose-multiple.eureka__view-mode__list tbody:not(.empty) > tr:not(.empty) {
+ grid-template-areas: "choose media name dimensions file-size edited-on" "actions actions actions actions actions actions";
+ grid-template-columns: 2rem auto 24% 12% 12% 12%; } } }
+
+.eureka .eureka__choose-radio {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex; }
+ .eureka .eureka__choose-radio fieldset {
+ margin: 0;
+ padding: 0; }
+ .eureka .eureka__choose-radio .eureka__fieldset {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex; }
+ .eureka .eureka__choose-radio .eureka__fieldset > * {
+ -webkit-box-flex: 0;
+ -ms-flex: 0 0 auto;
+ flex: 0 0 auto; }
+
+.eureka-root .eureka.eureka__view-mode__table.eureka__server-side table.eureka__table > thead > tr {
+ grid-template-columns: 2rem 16% 40% 8% auto auto !important;
+ grid-template-areas: "radio name media dimensions file-size edited-on" !important; }
+ .eureka-root .eureka.eureka__view-mode__table.eureka__server-side table.eureka__table > thead > tr th:nth-of-type(3) {
+ text-align: left !important; }
+
+.eureka-root .eureka.eureka__view-mode__table.eureka__server-side table.eureka__table > tbody:not(.empty) > tr:not(.empty) {
+ grid-template-columns: 2rem 16% 40% 8% auto auto !important;
+ grid-template-areas: "radio name media dimensions file-size edited-on" !important; }
+ @supports (display: grid) {
+ .eureka-root .eureka.eureka__view-mode__table.eureka__server-side table.eureka__table > tbody:not(.empty) > tr:not(.empty) > td {
+ /*&:nth-of-type(1) {
+ grid-area:media;
+ }
+ &:nth-of-type(2) {
+ grid-area:name;
+ }
+ &:nth-of-type(3) {
+ grid-area:actions;
+ }*/ }
+ .eureka-root .eureka.eureka__view-mode__table.eureka__server-side table.eureka__table > tbody:not(.empty) > tr:not(.empty) > td.eureka__td-filename {
+ text-align: left !important; }
+ .eureka-root .eureka.eureka__view-mode__table.eureka__server-side table.eureka__table > tbody:not(.empty) > tr:not(.empty) > td:nth-of-type(4) {
+ grid-area: dimensions !important; }
+ .eureka-root .eureka.eureka__view-mode__table.eureka__server-side table.eureka__table > tbody:not(.empty) > tr:not(.empty) > td:nth-of-type(5) {
+ grid-area: file-size !important; }
+ .eureka-root .eureka.eureka__view-mode__table.eureka__server-side table.eureka__table > tbody:not(.empty) > tr:not(.empty) > td:nth-of-type(6) {
+ grid-area: edited-on !important; } }
+
+.eureka-root {
+ padding: 8px;
+ padding: .5rem; }
+ @media screen and (max-width: 640px) {
+ .eureka-root .eureka table > thead {
+ position: absolute !important;
+ clip: rect(1px 1px 1px 1px);
+ /* IE6, IE7 */
+ clip: rect(1px, 1px, 1px, 1px);
+ padding: 0 !important;
+ border: 0 !important;
+ height: 1px !important;
+ width: 1px !important;
+ overflow: hidden; }
+ body:hover .eureka-root .eureka table > thead a, body:hover .eureka-root .eureka table > thead input, body:hover .eureka-root .eureka table > thead button {
+ display: none !important; } }
+ @media screen and (max-width: 640px) {
+ .eureka-root .eureka tbody > tr > td:not(.eureka__context-row) {
+ padding-right: .5rem; } }
+ .eureka-root .eureka.eureka__choose-multiple.eureka__view-mode__table table > thead > tr, .eureka-root .eureka.eureka__choose-multiple.eureka__view-mode__table table > tbody > tr, .eureka-root .eureka.eureka__choose-multiple.eureka__view-mode__list table > thead > tr, .eureka-root .eureka.eureka__choose-multiple.eureka__view-mode__list table > tbody > tr {
+ grid-template-areas: "choose choose choose choose choose choose" "media media media media media media" "name name name name name name" "actions actions actions actions actions actions"; }
+ @media screen and (min-width: 641px) {
+ .eureka-root .eureka.eureka__choose-multiple.eureka__view-mode__table table > thead > tr, .eureka-root .eureka.eureka__choose-multiple.eureka__view-mode__table table > tbody > tr, .eureka-root .eureka.eureka__choose-multiple.eureka__view-mode__list table > thead > tr, .eureka-root .eureka.eureka__choose-multiple.eureka__view-mode__list table > tbody > tr {
+ grid-template-areas: "choose media name dimensions file-size edited-on";
+ grid-template-columns: 2rem auto 24% 12% 12% 12%; } }
+ .eureka-root .eureka.eureka__choose-multiple.eureka__view-mode__thumb table > thead > tr, .eureka-root .eureka.eureka__choose-multiple.eureka__view-mode__thumb table > tbody > tr, .eureka-root .eureka.eureka__choose-multiple.eureka__view-mode__grid table > thead > tr, .eureka-root .eureka.eureka__choose-multiple.eureka__view-mode__grid table > tbody > tr, .eureka-root .eureka.eureka__choose-multiple.eureka__view-mode__masonry table > thead > tr, .eureka-root .eureka.eureka__choose-multiple.eureka__view-mode__masonry table > tbody > tr {
+ grid-template-areas: "choose choose choose choose choose choose" "media media media media media media"; }
+ .eureka-root .eureka.eureka__view-mode__table table, .eureka-root .eureka.eureka__view-mode__list table {
+ /*> thead > tr {
+ grid-template-areas:"media name dimensions file-size edited-on";
+ }*/ }
+ .eureka-root .eureka.eureka__view-mode__table table > thead > tr, .eureka-root .eureka.eureka__view-mode__table table > tbody > tr, .eureka-root .eureka.eureka__view-mode__list table > thead > tr, .eureka-root .eureka.eureka__view-mode__list table > tbody > tr {
+ display: grid;
+ grid-gap: 0; }
+ @media screen and (min-width: 641px) {
+ .eureka-root .eureka.eureka__view-mode__table table > thead > tr, .eureka-root .eureka.eureka__view-mode__table table > tbody > tr, .eureka-root .eureka.eureka__view-mode__list table > thead > tr, .eureka-root .eureka.eureka__view-mode__list table > tbody > tr {
+ grid-template-areas: "media name dimensions file-size edited-on";
+ grid-template-columns: 40% 24% 12% 12% 12%; } }
+ .eureka-root .eureka.eureka__view-mode__table table > tbody > tr, .eureka-root .eureka.eureka__view-mode__list table > tbody > tr {
+ grid-template-areas: "media media media media media" "name name name name name" "actions actions actions actions actions"; }
+ @media screen and (min-width: 641px) {
+ .eureka-root .eureka.eureka__view-mode__table table > tbody > tr, .eureka-root .eureka.eureka__view-mode__list table > tbody > tr {
+ grid-template-areas: "media name dimensions file-size edited-on" "actions actions actions actions actions"; } }
+ .eureka-root .eureka.eureka__view-mode__table table > tbody.empty > tr, .eureka-root .eureka.eureka__view-mode__list table > tbody.empty > tr {
+ display: block; }
+ .eureka-root .eureka.eureka__view-mode__table.eureka__server-side .eureka__tree-toggle .eureka__upload-form label[for*="upload-form"], .eureka-root .eureka.eureka__view-mode__list.eureka__server-side .eureka__tree-toggle .eureka__upload-form label[for*="upload-form"] {
+ padding: 0.5em;
+ margin-right: 16px;
+ margin-right: 1rem; }
+ @media screen and (min-width: 641px) {
+ .eureka-root .eureka.eureka__view-mode__table.eureka__server-side table > thead > tr, .eureka-root .eureka.eureka__view-mode__table.eureka__server-side table > tbody:not(.empty) > tr:not(.empty), .eureka-root .eureka.eureka__view-mode__list.eureka__server-side table > thead > tr, .eureka-root .eureka.eureka__view-mode__list.eureka__server-side table > tbody:not(.empty) > tr:not(.empty) {
+ grid-template-areas: "radio media name dimensions file-size edited-on";
+ grid-template-columns: 2rem 40% 24% auto auto auto; }
+ .eureka-root .eureka.eureka__view-mode__table.eureka__server-side table > thead > tr > td:nth-of-type(1), .eureka-root .eureka.eureka__view-mode__table.eureka__server-side table > thead > tr > th:nth-of-type(1), .eureka-root .eureka.eureka__view-mode__table.eureka__server-side table > tbody:not(.empty) > tr:not(.empty) > td:nth-of-type(1), .eureka-root .eureka.eureka__view-mode__table.eureka__server-side table > tbody:not(.empty) > tr:not(.empty) > th:nth-of-type(1), .eureka-root .eureka.eureka__view-mode__list.eureka__server-side table > thead > tr > td:nth-of-type(1), .eureka-root .eureka.eureka__view-mode__list.eureka__server-side table > thead > tr > th:nth-of-type(1), .eureka-root .eureka.eureka__view-mode__list.eureka__server-side table > tbody:not(.empty) > tr:not(.empty) > td:nth-of-type(1), .eureka-root .eureka.eureka__view-mode__list.eureka__server-side table > tbody:not(.empty) > tr:not(.empty) > th:nth-of-type(1) {
+ grid-area: radio; }
+ .eureka-root .eureka.eureka__view-mode__table.eureka__server-side table > thead > tr > td:nth-of-type(2), .eureka-root .eureka.eureka__view-mode__table.eureka__server-side table > thead > tr > th:nth-of-type(2), .eureka-root .eureka.eureka__view-mode__table.eureka__server-side table > tbody:not(.empty) > tr:not(.empty) > td:nth-of-type(2), .eureka-root .eureka.eureka__view-mode__table.eureka__server-side table > tbody:not(.empty) > tr:not(.empty) > th:nth-of-type(2), .eureka-root .eureka.eureka__view-mode__list.eureka__server-side table > thead > tr > td:nth-of-type(2), .eureka-root .eureka.eureka__view-mode__list.eureka__server-side table > thead > tr > th:nth-of-type(2), .eureka-root .eureka.eureka__view-mode__list.eureka__server-side table > tbody:not(.empty) > tr:not(.empty) > td:nth-of-type(2), .eureka-root .eureka.eureka__view-mode__list.eureka__server-side table > tbody:not(.empty) > tr:not(.empty) > th:nth-of-type(2) {
+ grid-area: media;
+ text-align: left; }
+ .eureka-root .eureka.eureka__view-mode__table.eureka__server-side table > thead > tr > td:nth-of-type(3), .eureka-root .eureka.eureka__view-mode__table.eureka__server-side table > thead > tr > th:nth-of-type(3), .eureka-root .eureka.eureka__view-mode__table.eureka__server-side table > tbody:not(.empty) > tr:not(.empty) > td:nth-of-type(3), .eureka-root .eureka.eureka__view-mode__table.eureka__server-side table > tbody:not(.empty) > tr:not(.empty) > th:nth-of-type(3), .eureka-root .eureka.eureka__view-mode__list.eureka__server-side table > thead > tr > td:nth-of-type(3), .eureka-root .eureka.eureka__view-mode__list.eureka__server-side table > thead > tr > th:nth-of-type(3), .eureka-root .eureka.eureka__view-mode__list.eureka__server-side table > tbody:not(.empty) > tr:not(.empty) > td:nth-of-type(3), .eureka-root .eureka.eureka__view-mode__list.eureka__server-side table > tbody:not(.empty) > tr:not(.empty) > th:nth-of-type(3) {
+ grid-area: name; }
+ .eureka-root .eureka.eureka__view-mode__table.eureka__server-side table > thead > tr > td:nth-of-type(5), .eureka-root .eureka.eureka__view-mode__table.eureka__server-side table > thead > tr > th:nth-of-type(5), .eureka-root .eureka.eureka__view-mode__table.eureka__server-side table > tbody:not(.empty) > tr:not(.empty) > td:nth-of-type(5), .eureka-root .eureka.eureka__view-mode__table.eureka__server-side table > tbody:not(.empty) > tr:not(.empty) > th:nth-of-type(5), .eureka-root .eureka.eureka__view-mode__list.eureka__server-side table > thead > tr > td:nth-of-type(5), .eureka-root .eureka.eureka__view-mode__list.eureka__server-side table > thead > tr > th:nth-of-type(5), .eureka-root .eureka.eureka__view-mode__list.eureka__server-side table > tbody:not(.empty) > tr:not(.empty) > td:nth-of-type(5), .eureka-root .eureka.eureka__view-mode__list.eureka__server-side table > tbody:not(.empty) > tr:not(.empty) > th:nth-of-type(5) {
+ grid-area: dimensions; }
+ .eureka-root .eureka.eureka__view-mode__table.eureka__server-side table > thead > tr > td:nth-of-type(6), .eureka-root .eureka.eureka__view-mode__table.eureka__server-side table > thead > tr > th:nth-of-type(6), .eureka-root .eureka.eureka__view-mode__table.eureka__server-side table > tbody:not(.empty) > tr:not(.empty) > td:nth-of-type(6), .eureka-root .eureka.eureka__view-mode__table.eureka__server-side table > tbody:not(.empty) > tr:not(.empty) > th:nth-of-type(6), .eureka-root .eureka.eureka__view-mode__list.eureka__server-side table > thead > tr > td:nth-of-type(6), .eureka-root .eureka.eureka__view-mode__list.eureka__server-side table > thead > tr > th:nth-of-type(6), .eureka-root .eureka.eureka__view-mode__list.eureka__server-side table > tbody:not(.empty) > tr:not(.empty) > td:nth-of-type(6), .eureka-root .eureka.eureka__view-mode__list.eureka__server-side table > tbody:not(.empty) > tr:not(.empty) > th:nth-of-type(6) {
+ grid-area: file-size; }
+ .eureka-root .eureka.eureka__view-mode__table.eureka__server-side table > thead > tr > td:nth-of-type(7), .eureka-root .eureka.eureka__view-mode__table.eureka__server-side table > thead > tr > th:nth-of-type(7), .eureka-root .eureka.eureka__view-mode__table.eureka__server-side table > tbody:not(.empty) > tr:not(.empty) > td:nth-of-type(7), .eureka-root .eureka.eureka__view-mode__table.eureka__server-side table > tbody:not(.empty) > tr:not(.empty) > th:nth-of-type(7), .eureka-root .eureka.eureka__view-mode__list.eureka__server-side table > thead > tr > td:nth-of-type(7), .eureka-root .eureka.eureka__view-mode__list.eureka__server-side table > thead > tr > th:nth-of-type(7), .eureka-root .eureka.eureka__view-mode__list.eureka__server-side table > tbody:not(.empty) > tr:not(.empty) > td:nth-of-type(7), .eureka-root .eureka.eureka__view-mode__list.eureka__server-side table > tbody:not(.empty) > tr:not(.empty) > th:nth-of-type(7) {
+ grid-area: edited-on; } }
+ .eureka-root .eureka.eureka__view-mode__table.eureka__server-side table > thead > tr > th:nth-of-type(1), .eureka-root .eureka.eureka__view-mode__list.eureka__server-side table > thead > tr > th:nth-of-type(1) {
+ grid-area: none; }
+ .eureka-root .eureka.eureka__view-mode__list table > thead > tr td:first-child, .eureka-root .eureka.eureka__view-mode__list table > thead > tr th:first-child, .eureka-root .eureka.eureka__view-mode__list table > tbody > tr td:first-child, .eureka-root .eureka.eureka__view-mode__list table > tbody > tr th:first-child {
+ padding-left: 8px;
+ padding-left: .5rem; }
+ .eureka-root .eureka.eureka__view-mode__list table > tbody > tr {
+ grid-template-areas: "name name name name name" "actions actions actions actions actions";
+ margin-bottom: 8px;
+ margin-bottom: .5rem; }
+ .eureka-root .eureka.eureka__view-mode__list table > tbody > tr > td.eureka__choose {
+ text-align: center; }
+ @media screen and (min-width: 641px) {
+ .eureka-root .eureka.eureka__view-mode__list table > tbody > tr {
+ grid-template-areas: "media name dimensions file-size edited-on" "actions actions actions actions actions"; } }
+
+.eureka-root .eureka__table img, .eureka-root .eureka__table embed, .eureka-root .eureka__table object, .eureka-root .eureka__table video {
+ -o-object-fit: contain;
+ object-fit: contain; }
+
+@media screen and (min-width: 641px) {
+ .eureka-root {
+ /*display:grid;
+ grid-gap:0;
+ grid-template-columns:20vw auto;
+ grid-template-areas:"header header" "sidebar content" "footer footer";*/
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-flex: 1;
+ -ms-flex: 1;
+ flex: 1;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column; }
+ .eureka-root .eureka {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ -webkit-box-flex: 1;
+ -ms-flex: 1;
+ flex: 1; }
+ .eureka-root .eureka > .eureka__browse-content {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-flex: 1;
+ -ms-flex: 1 1 100%;
+ flex: 1 1 100%; }
+ .eureka-root .eureka.eureka__view-mode__table {
+ /*@supports (display: grid) {
+ }*/ }
+ .eureka-root .eureka > .eureka__browse-content {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-flex: 1;
+ -ms-flex: 1 1 100%;
+ flex: 1 1 100%; }
+ .eureka-root .eureka > .eureka__browse-content > .eureka__pathbrowser {
+ -webkit-box-flex: 0;
+ -ms-flex: 0 0 14rem;
+ flex: 0 0 14rem;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ -ms-flex-negative: 0;
+ flex-shrink: 0;
+ -ms-flex-positive: 0;
+ flex-grow: 0;
+ margin-right: .5rem; }
+ .eureka-root .eureka > .eureka__browse-content > .eureka__pathbrowser[hidden], .eureka-root .eureka > .eureka__browse-content > .eureka__pathbrowser[aria-hidden="true"] {
+ display: none; }
+ .eureka-root .eureka > .eureka__browse-content > .eureka__stage {
+ -webkit-box-flex: 1;
+ -ms-flex: 1 1 100%;
+ flex: 1 1 100%;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column; }
+ .eureka-root .eureka > .eureka__browse-content > .eureka__stage > .eureka__stage__filter-view {
+ -ms-flex-preferred-size: auto;
+ flex-basis: auto;
+ -ms-flex-negative: 1;
+ flex-shrink: 1;
+ -webkit-box-flex: 0;
+ -ms-flex-positive: 0;
+ flex-grow: 0;
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: row;
+ flex-direction: row; }
+ .eureka-root .eureka > .eureka__browse-content > .eureka__stage > .eureka__stage__filter-view > header {
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: row;
+ flex-direction: row;
+ min-width: 0;
+ min-height: 0;
+ -ms-flex-wrap: nowrap;
+ flex-wrap: nowrap;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ margin-bottom: .5rem; }
+ .eureka-root .eureka > .eureka__browse-content > .eureka__stage > .eureka__stage__filter-view > header > h2 {
+ margin-bottom: 0;
+ margin-right: auto; }
+ .eureka-root .eureka > .eureka__browse-content > .eureka__stage > .eureka__stage__filter-view > header > h2 form {
+ float: right; }
+ .eureka-root .eureka > .eureka__browse-content > .eureka__stage > .eureka__table-wrapper {
+ -ms-flex-preferred-size: 0;
+ flex-basis: 0;
+ -webkit-box-flex: 1;
+ -ms-flex-positive: 1;
+ flex-grow: 1;
+ height: auto;
+ -ms-flex-negative: 0;
+ flex-shrink: 0;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: stretch;
+ -ms-flex-align: stretch;
+ align-items: stretch;
+ -webkit-box-pack: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ padding: 0 .5rem .5rem 0; }
+ .eureka-root .eureka > .eureka__browse-content > .eureka__stage > .eureka__table-wrapper > div {
+ -ms-flex-preferred-size: 0;
+ flex-basis: 0;
+ -webkit-box-flex: 1;
+ -ms-flex-positive: 1;
+ flex-grow: 1;
+ max-height: 100%;
+ height: 100%;
+ -webkit-box-align: stretch;
+ -ms-flex-align: stretch;
+ align-items: stretch;
+ -webkit-box-pack: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ -ms-flex-negative: 1;
+ flex-shrink: 1;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ max-width: 100%; }
+ .eureka-root .eureka > .eureka__browse-content > .eureka__stage > .eureka__table-wrapper > div > table {
+ -ms-flex-preferred-size: 0;
+ flex-basis: 0;
+ -webkit-box-flex: 1;
+ -ms-flex-positive: 1;
+ flex-grow: 1;
+ max-height: 100%;
+ height: 100%;
+ -webkit-box-align: stretch;
+ -ms-flex-align: stretch;
+ align-items: stretch;
+ -webkit-box-pack: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ -ms-flex-negative: 1;
+ flex-shrink: 1;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ max-width: 100%; }
+ .eureka-root .eureka > .eureka__choose-bar {
+ -webkit-box-flex: 0;
+ -ms-flex: 0 0 auto;
+ flex: 0 0 auto;
+ margin-top: .5rem; } }
+
+.eureka-root .eureka.eureka__view-mode__masonry > .eureka__browse-content > .eureka__stage > .eureka__table-wrapper {
+ padding-left: 8px;
+ padding-left: .5rem; }
+ @media screen and (max-width: 640px) {
+ .eureka-root .eureka.eureka__view-mode__masonry > .eureka__browse-content > .eureka__stage > .eureka__table-wrapper {
+ padding-right: .5rem; } }
+
+@media screen and (max-width: 640px) {
+ .eureka-root .eureka > .eureka__choose-bar > * {
+ margin-right: .5rem; }
+ .eureka-root .eureka > .eureka__choose-bar > *:last-child {
+ margin-right: 0; } }
+
+.eureka-root thead {
+ -ms-flex-preferred-size: auto;
+ flex-basis: auto;
+ display: block;
+ -webkit-box-pack: end;
+ -ms-flex-pack: end;
+ justify-content: flex-end;
+ -ms-flex-negative: 0;
+ flex-shrink: 0;
+ -webkit-box-flex: 0;
+ -ms-flex-positive: 0;
+ flex-grow: 0; }
+ .eureka-root thead.eureka__tbody-scrolling {
+ padding-right: 16px; }
+ .eureka-root thead[hidden] {
+ display: none; }
+ .eureka-root thead > tr {
+ display: block;
+ width: 100%;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -ms-flex-wrap: wrap;
+ flex-wrap: wrap;
+ /*@supports (display: flex) and ( not (display: grid) ) {
+ }*/ }
+ .eureka-root thead > tr > th {
+ -webkit-box-flex: 1;
+ -ms-flex: 1 0 auto;
+ flex: 1 0 auto; }
+ .eureka-root thead > tr > th.eureka__choose {
+ grid-area: choose; }
+ .eureka-root thead > tr > th.eureka__th-media {
+ grid-area: media; }
+ .eureka-root thead > tr > th.eureka__th-filename {
+ grid-area: name; }
+ .eureka-root thead > tr > th.eureka__th-actions {
+ grid-area: none; }
+ .eureka-root thead > tr > th.eureka__th-dimensions {
+ grid-area: dimensions; }
+ .eureka-root thead > tr > th.eureka__th-file-size {
+ grid-area: file-size; }
+ .eureka-root thead > tr > th.eureka__th-edited-on {
+ grid-area: edited-on; }
+
+.eureka-root tbody.empty {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-pack: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center; }
+ .eureka-root tbody.empty > tr {
+ text-align: center;
+ display: block; }
+ .eureka-root tbody.empty > tr td {
+ margin: 0 auto;
+ display: inline-block; }
+
+.eureka-root tbody {
+ -ms-flex-preferred-size: 0;
+ flex-basis: 0;
+ text-align: center;
+ display: block;
+ -ms-flex-wrap: no-wrap;
+ flex-wrap: no-wrap;
+ overflow-y: auto;
+ -webkit-box-align: stretch;
+ -ms-flex-align: stretch;
+ align-items: stretch;
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: row;
+ flex-direction: row;
+ -webkit-box-pack: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ -ms-flex-negative: 1;
+ flex-shrink: 1;
+ -webkit-box-flex: 1;
+ -ms-flex-positive: 1;
+ flex-grow: 1;
+ max-width: 100%;
+ -webkit-overflow-scrolling: touch; }
+
+.eureka.eureka__choose-multiple:not(.eureka__view-mode__grid) .eureka__th-media, .eureka.eureka__choose-multiple:not(.eureka__view-mode__grid) .eureka__td-media {
+ padding-left: 16px;
+ padding-left: 1rem; }
+
+@media screen and (min-width: 641px) {
+ .eureka__media-directory-selector form {
+ display: inline-block; }
+ .eureka__media-directory-selector > div {
+ display: inline-block;
+ margin-left: .5em; } }
+
+.eureka__sort-select select {
+ margin-bottom: 16px;
+ margin-bottom: 1rem; }
+
+@media screen and (min-width: 641px) {
+ .eureka__sort-select {
+ margin-left: auto;
+ margin-right: auto; }
+ .eureka__sort-select label {
+ margin-right: .5rem; }
+ .eureka__sort-select select {
+ margin-right: 1rem;
+ margin-bottom: 0; } }
+
+@media screen and (min-width: 641px) {
+ .eureka__tree-toggle {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-pack: end;
+ -ms-flex-pack: end;
+ justify-content: flex-end;
+ -ms-flex-wrap: wrap;
+ flex-wrap: wrap;
+ padding-bottom: .5rem; }
+ .eureka__tree-toggle > *:first-child {
+ margin-right: auto; }
+ .eureka__tree-toggle .eureka__upload-form {
+ margin-right: auto; } }
+ @media screen and (min-width: 641px) and (min-width: 641px) {
+ .eureka__tree-toggle .eureka__upload-form form {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex; }
+ .eureka .eureka__tree-toggle .eureka__upload-form label[for*="upload-form"] {
+ padding-top: 0;
+ padding-bottom: 0;
+ line-height: 2.2; } }
+
+@media screen and (min-width: 641px) {
+ .eureka__server-side .eureka__tree-toggle .eureka__upload-form {
+ margin-right: 0; } }
+
+.eureka.eureka__view-mode__table {
+ /*@include media($gtMobile) {
+ }*/ }
+ @media screen and (min-width: 641px) {
+ .eureka.eureka__view-mode__table .eureka__table img {
+ max-height: 20vh; } }
+ .eureka.eureka__view-mode__table .eureka__table thead th:first-child {
+ padding-left: 8px;
+ padding-left: .5rem; }
+ .eureka.eureka__view-mode__table .eureka__table thead th:last-child {
+ padding-right: 8px;
+ padding-right: .5rem; }
+ .eureka.eureka__view-mode__table .eureka__table tr[contextmenu] td:first-child {
+ padding-left: 8px;
+ padding-left: .5rem; }
+ .eureka.eureka__view-mode__table .eureka__table tr[contextmenu] td:last-child {
+ padding-right: 8px;
+ padding-right: .5rem; }
+ .eureka.eureka__view-mode__table .eureka__table tr td, .eureka.eureka__view-mode__table .eureka__table tr th {
+ text-align: center; }
+ @media screen and (min-width: 641px) {
+ .eureka.eureka__view-mode__table .eureka__table tr td, .eureka.eureka__view-mode__table .eureka__table tr th {
+ text-align: right; }
+ .eureka.eureka__view-mode__table .eureka__table tr td.eureka__th-media, .eureka.eureka__view-mode__table .eureka__table tr th.eureka__th-media {
+ text-align: left; } }
+ .eureka.eureka__view-mode__table .eureka__table tr td.eureka__th-media, .eureka.eureka__view-mode__table .eureka__table tr th.eureka__th-media {
+ text-align: left; }
+ .eureka.eureka__view-mode__table.eureka__enlarge-focused-rows .eureka__table img {
+ max-height: 20vh; }
+ .eureka.eureka__view-mode__table.eureka__enlarge-focused-rows .eureka__table tr:focus img {
+ max-height: 30vh; }
+
+.eureka.eureka__view-mode__thumb .eureka__table thead, .eureka.eureka__view-mode__grid .eureka__table thead, .eureka.eureka__view-mode__masonry .eureka__table thead {
+ display: none !important; }
+
+.eureka.eureka__view-mode__thumb .eureka__table td:not(.eureka__td-media):not(.eureka__choose), .eureka.eureka__view-mode__grid .eureka__table td:not(.eureka__td-media):not(.eureka__choose), .eureka.eureka__view-mode__masonry .eureka__table td:not(.eureka__td-media):not(.eureka__choose) {
+ display: none; }
+
+.eureka.eureka__view-mode__thumb .eureka__table td[colspan], .eureka.eureka__view-mode__grid .eureka__table td[colspan], .eureka.eureka__view-mode__masonry .eureka__table td[colspan] {
+ display: block; }
+
+.eureka.eureka__view-mode__thumb .eureka__table tbody, .eureka.eureka__view-mode__grid .eureka__table tbody, .eureka.eureka__view-mode__masonry .eureka__table tbody {
+ -ms-flex-wrap: wrap;
+ flex-wrap: wrap;
+ -webkit-box-pack: center;
+ -ms-flex-pack: center;
+ justify-content: center; }
+ @media screen and (min-width: 641px) {
+ .eureka.eureka__view-mode__thumb .eureka__table tbody, .eureka.eureka__view-mode__grid .eureka__table tbody, .eureka.eureka__view-mode__masonry .eureka__table tbody {
+ display: -webkit-box !important;
+ display: -ms-flexbox !important;
+ display: flex !important; } }
+ .eureka.eureka__view-mode__thumb .eureka__table tbody tr[tabindex], .eureka.eureka__view-mode__grid .eureka__table tbody tr[tabindex], .eureka.eureka__view-mode__masonry .eureka__table tbody tr[tabindex] {
+ margin: 0 8px 8px 0;
+ margin: 0 .5rem .5rem 0;
+ -ms-flex-preferred-size: 42vw;
+ flex-basis: 42vw;
+ width: 100%; }
+ @media screen and (min-width: 641px) {
+ .eureka.eureka__view-mode__thumb .eureka__table tbody tr[tabindex], .eureka.eureka__view-mode__grid .eureka__table tbody tr[tabindex], .eureka.eureka__view-mode__masonry .eureka__table tbody tr[tabindex] {
+ display: inline-block; } }
+ .eureka.eureka__view-mode__thumb .eureka__table tbody tr[tabindex] td, .eureka.eureka__view-mode__grid .eureka__table tbody tr[tabindex] td, .eureka.eureka__view-mode__masonry .eureka__table tbody tr[tabindex] td {
+ display: block; }
+ @media screen and (min-width: 641px) {
+ .eureka.eureka__view-mode__thumb .eureka__table tbody tr[tabindex], .eureka.eureka__view-mode__grid .eureka__table tbody tr[tabindex], .eureka.eureka__view-mode__masonry .eureka__table tbody tr[tabindex] {
+ -ms-flex-preferred-size: 16vw;
+ flex-basis: 16vw; } }
+ .eureka.eureka__view-mode__thumb .eureka__table tbody .eureka__context-row, .eureka.eureka__view-mode__grid .eureka__table tbody .eureka__context-row, .eureka.eureka__view-mode__masonry .eureka__table tbody .eureka__context-row {
+ display: none; }
+
+@media screen and (max-width: 640px) {
+ .eureka.eureka__view-mode__thumb .eureka__table tbody {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex; } }
+
+@media screen and (max-width: 640px) {
+ .eureka.eureka__view-mode__grid .eureka__table tbody tr[tabindex], .eureka.eureka__view-mode__masonry .eureka__table tbody tr[tabindex] {
+ margin-bottom: 0; } }
+
+@media screen and (min-width: 641px) {
+ .eureka.eureka__view-mode__grid .eureka__table tbody tr[tabindex], .eureka.eureka__view-mode__masonry .eureka__table tbody tr[tabindex] {
+ -ms-flex-preferred-size: 25vw;
+ flex-basis: 25vw; } }
+
+@media screen and (max-width: 640px) {
+ .eureka.eureka__view-mode__grid .eureka__table tbody tr[tabindex] > td:not(.eureka__context-row), .eureka.eureka__view-mode__masonry .eureka__table tbody tr[tabindex] > td:not(.eureka__context-row) {
+ padding-right: 0; } }
+
+@media screen and (min-width: 641px) {
+ .eureka.eureka__view-mode__masonry .eureka__table tbody tr[tabindex] {
+ max-width: 20%;
+ margin: 0;
+ padding: 0 .25rem; } }
+
+@media screen and (min-width: 641px) {
+ .eureka .eureka__tree {
+ -ms-flex-preferred-size: 0;
+ flex-basis: 0;
+ -webkit-box-flex: 1;
+ -ms-flex-positive: 1;
+ flex-grow: 1; } }
+
+.eureka.eureka__view-mode__table .eureka__context-row {
+ margin-top: 8px;
+ margin-top: .5rem; }
+
+@media screen and (min-width: 641px) {
+ .eureka .eureka__context-row {
+ margin-top: 0;
+ width: 100%;
+ display: block;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-ordinal-group: 11;
+ -ms-flex-order: 10;
+ order: 10;
+ width: 100%;
+ /*> td[colspan] {
+ }*/ }
+ .eureka .eureka__context-row[hidden] {
+ display: none !important; }
+ .eureka .eureka__context-row .eureka__context-buttons {
+ width: 100%; } }
+
+.eureka .eureka__tree-bar {
+ text-align: center; }
+
+.eureka.eureka__view-mode__grid .eureka__td-media, .eureka.eureka__view-mode__masonry .eureka__td-media {
+ margin: 0 auto;
+ display: inline-block; }
+
+@media screen and (max-width: 640px) {
+ .eureka.eureka__view-mode__list .eureka__table thead th:first-child {
+ display: none; } }
+
+@media screen and (max-width: 640px) {
+ .eureka.eureka__view-mode__list .eureka__table thead th:nth-of-type(2) {
+ text-align: left;
+ padding-left: .5rem; } }
+
+.eureka.eureka__view-mode__list .eureka__table thead th:last-child {
+ padding-right: 8px;
+ padding-right: .5rem; }
+
+.eureka.eureka__view-mode__list .eureka__table thead td, .eureka.eureka__view-mode__list .eureka__table thead th, .eureka.eureka__view-mode__list .eureka__table tr[contextmenu] td, .eureka.eureka__view-mode__list .eureka__table tr[contextmenu] th {
+ text-align: right; }
+ .eureka.eureka__view-mode__list .eureka__table thead td.eureka__td-media, .eureka.eureka__view-mode__list .eureka__table thead td.eureka__th-media, .eureka.eureka__view-mode__list .eureka__table thead th.eureka__td-media, .eureka.eureka__view-mode__list .eureka__table thead th.eureka__th-media, .eureka.eureka__view-mode__list .eureka__table tr[contextmenu] td.eureka__td-media, .eureka.eureka__view-mode__list .eureka__table tr[contextmenu] td.eureka__th-media, .eureka.eureka__view-mode__list .eureka__table tr[contextmenu] th.eureka__td-media, .eureka.eureka__view-mode__list .eureka__table tr[contextmenu] th.eureka__th-media {
+ text-align: left; }
+ @supports (display: grid) {
+ .eureka.eureka__view-mode__list .eureka__table thead td.eureka__td-media, .eureka.eureka__view-mode__list .eureka__table thead td.eureka__th-media, .eureka.eureka__view-mode__list .eureka__table thead th.eureka__td-media, .eureka.eureka__view-mode__list .eureka__table thead th.eureka__th-media, .eureka.eureka__view-mode__list .eureka__table tr[contextmenu] td.eureka__td-media, .eureka.eureka__view-mode__list .eureka__table tr[contextmenu] td.eureka__th-media, .eureka.eureka__view-mode__list .eureka__table tr[contextmenu] th.eureka__td-media, .eureka.eureka__view-mode__list .eureka__table tr[contextmenu] th.eureka__th-media {
+ display: block; } }
+ @media screen and (max-width: 640px) {
+ .eureka.eureka__view-mode__list .eureka__table thead td.eureka__td-media, .eureka.eureka__view-mode__list .eureka__table thead td.eureka__th-media, .eureka.eureka__view-mode__list .eureka__table thead th.eureka__td-media, .eureka.eureka__view-mode__list .eureka__table thead th.eureka__th-media, .eureka.eureka__view-mode__list .eureka__table tr[contextmenu] td.eureka__td-media, .eureka.eureka__view-mode__list .eureka__table tr[contextmenu] td.eureka__th-media, .eureka.eureka__view-mode__list .eureka__table tr[contextmenu] th.eureka__td-media, .eureka.eureka__view-mode__list .eureka__table tr[contextmenu] th.eureka__th-media {
+ display: none; } }
+ @media screen and (max-width: 640px) {
+ .eureka.eureka__view-mode__list .eureka__table thead td.eureka__td-filename, .eureka.eureka__view-mode__list .eureka__table thead th.eureka__td-filename, .eureka.eureka__view-mode__list .eureka__table tr[contextmenu] td.eureka__td-filename, .eureka.eureka__view-mode__list .eureka__table tr[contextmenu] th.eureka__td-filename {
+ text-align: center;
+ padding-top: .5rem;
+ padding-bottom: .5rem; } }
+
+@media screen and (max-width: 640px) {
+ .eureka.eureka__view-mode__list .eureka__table tbody {
+ line-height: 2; } }
+
+.eureka.eureka__view-mode__list .eureka__table tbody .eureka__td-media img, .eureka.eureka__view-mode__list .eureka__table tbody .eureka__td-media video, .eureka.eureka__view-mode__list .eureka__table tbody .eureka__td-media embed {
+ max-width: 10vh;
+ max-height: 10vh; }
+
+.eureka.eureka__view-mode__list .eureka__table tbody tr[contextmenu] {
+ padding-top: 0;
+ padding-bottom: 0; }
+ .eureka.eureka__view-mode__list .eureka__table tbody tr[contextmenu] > td:nth-of-type(2) {
+ padding-left: 8px;
+ padding-left: .5rem; }
+ .eureka.eureka__view-mode__list .eureka__table tbody tr[contextmenu] > td:last-child {
+ padding-right: 8px;
+ padding-right: .5rem; }
+
+@media screen and (max-width: 640px) {
+ .eureka .eureka__crop-btn {
+ display: none; } }
+
+.eureka .flex-bar fieldset {
+ margin: 0;
+ padding: 0; }
+ .eureka .flex-bar fieldset label {
+ margin-bottom: 0; }
+
+.eureka .eureka__invert-horz {
+ -webkit-transform: scaleX(-1);
+ transform: scaleX(-1); }
+
+.eureka .eureka__td-media {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center; }
+
+@media screen and (min-width: 641px) {
+ .eureka .eureka__show-for-mobile-up p, .eureka .eureka__show-for-mobile-up textarea {
+ max-height: 3em;
+ overflow-y: auto;
+ display: block;
+ width: 100%; } }
+
+.eureka .eureka__pathbar textarea {
+ resize: none; }
+
+.eureka label[for="eureka__crop_show-adv-controls"] {
+ position: absolute;
+ top: .75em;
+ right: 1em; }
+
+.eureka .eureka__crop-modal .icon-bar {
+ margin-top: 1em;
+ font-size: 16px;
+ font-size: 1rem; }
+ .eureka .eureka__crop-modal .icon-bar label[for="eureka__crop-drag-mode-move"] {
+ border-top-left-radius: 3px;
+ border-bottom-left-radius: 3px; }
+ .eureka .eureka__crop-modal .icon-bar button, .eureka .eureka__crop-modal .icon-bar .button {
+ border-radius: 0; }
+ .eureka .eureka__crop-modal .icon-bar button:first-child, .eureka .eureka__crop-modal .icon-bar .button:first-child {
+ border-top-left-radius: 3px;
+ border-bottom-left-radius: 3px; }
+ .eureka .eureka__crop-modal .icon-bar button:last-child, .eureka .eureka__crop-modal .icon-bar .button:last-child {
+ border-top-right-radius: 3px;
+ border-bottom-right-radius: 3px; }
+ .eureka .eureka__crop-modal .icon-bar.flex-bar > * {
+ margin-right: 0; }
+ .eureka .eureka__crop-modal .icon-bar button {
+ font-size: 16px;
+ font-size: 1rem; }
+
+.eureka .eureka__crop-modal .wrappable.flex-bar {
+ -ms-flex-pack: distribute;
+ justify-content: space-around;
+ margin-bottom: 32px;
+ margin-bottom: 2rem; }
+ .eureka .eureka__crop-modal .wrappable.flex-bar > * {
+ padding-left: 16px;
+ padding-left: 1rem;
+ padding-right: 16px;
+ padding-right: 1rem; }
+ .eureka .eureka__crop-modal .wrappable.flex-bar summary {
+ margin-bottom: 8px;
+ margin-bottom: .5rem; }
+
+.eureka .eureka__modal .eureka__modal-panel .eureka__crop-bounding-box {
+ margin-top: 16px;
+ margin-top: 1rem; }
+ .eureka .eureka__modal .eureka__modal-panel .eureka__crop-bounding-box label {
+ margin-bottom: 0; }
+ .eureka .eureka__modal .eureka__modal-panel .eureka__crop-bounding-box label[for="eureka__crop-aspect-ratio"] {
+ line-height: 2; }
+ .eureka .eureka__modal .eureka__modal-panel .eureka__crop-bounding-box input[type="number"] {
+ width: 5em; }
+ .eureka .eureka__modal .eureka__modal-panel .eureka__crop-bounding-box input[id*="eureka__crop-scale"] {
+ width: 4em; }
+ @media screen and (min-width: 641px) {
+ .eureka .eureka__modal .eureka__modal-panel .eureka__crop-bounding-box summary {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex; } }
+ @media screen and (min-width: 641px) {
+ .eureka .eureka__modal .eureka__modal-panel .eureka__crop-bounding-box > div, .eureka .eureka__modal .eureka__modal-panel .eureka__crop-bounding-box > details > div {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -ms-flex-wrap: wrap;
+ flex-wrap: wrap;
+ -webkit-box-pack: justify;
+ -ms-flex-pack: justify;
+ justify-content: space-between; }
+ .eureka .eureka__modal .eureka__modal-panel .eureka__crop-bounding-box > div > *, .eureka .eureka__modal .eureka__modal-panel .eureka__crop-bounding-box > details > div > * {
+ margin-right: .5rem; }
+ .eureka .eureka__modal .eureka__modal-panel .eureka__crop-bounding-box > div:last-child, .eureka .eureka__modal .eureka__modal-panel .eureka__crop-bounding-box > details > div:last-child {
+ margin-right: 0; } }
+
+.eureka [hidden] {
+ display: none !important; }
+
+.eureka .eureka__crop-save-as-checkbox {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-pack: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center; }
+
+.eureka .eureka__crop-as {
+ padding-right: 16px;
+ padding-right: 1rem; }
+ .eureka .eureka__crop-as input[type="text"] {
+ -webkit-box-flex: 1;
+ -ms-flex-positive: 1;
+ flex-grow: 1; }
+
+.eureka label[for="eureka__crop-save-as-name"] {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-pack: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center; }
+
+.eureka label[for="eureka__crop-aspect-ratio-remember"] {
+ line-height: 2; }
+
+.eureka label[for="eureka__crop-rotate"] + input[type="range"] {
+ min-width: 14em; }
+
+.eureka .eureka__choose-multile > label {
+ display: block;
+ height: 100%; }
+
+.dangerous {
+ color: red;
+ color: var(--dangerous, red); }
+
+input:not([type="checkbox"]):not([type="radio"]):focus {
+ outline: 1px solid #3697cd;
+ outline: 1px solid var(--active, #3697cd); }
+
+tr[tabindex]:focus, tr.eureka__context-row:focus, [role="listbox"]:focus {
+ outline: 1px solid #3697cd;
+ outline: 1px solid var(--active, #3697cd); }
+
+summary:focus {
+ outline: none;
+ font-weight: bold;
+ color: #3697cd;
+ color: var(--active, #3697cd); }
+
+.eureka .eureka__tree-bar, .flex-bar, .eureka .eureka__button-bar {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex; }
+ .eureka .wrappable.eureka__tree-bar, .wrappable.flex-bar, .eureka .wrappable.eureka__button-bar {
+ -ms-flex-wrap: wrap;
+ flex-wrap: wrap; }
+ .eureka .wrappable.eureka__tree-bar > *, .wrappable.flex-bar > *, .eureka .wrappable.eureka__button-bar > * {
+ padding-left: 16px;
+ padding-left: 1rem;
+ padding-right: 16px;
+ padding-right: 1rem; }
+ .eureka .balanced.eureka__tree-bar, .balanced.flex-bar, .eureka .balanced.eureka__button-bar {
+ -webkit-box-pack: center;
+ -ms-flex-pack: center;
+ justify-content: center; }
+ .eureka .eureka__tree-bar > *, .flex-bar > *, .eureka .eureka__button-bar > * {
+ margin-right: 8px;
+ margin-right: .5rem; }
+ .eureka .eureka__tree-bar > *.growable, .flex-bar > *.growable, .eureka .eureka__button-bar > *.growable {
+ -webkit-box-flex: 1;
+ -ms-flex-positive: 1;
+ flex-grow: 1; }
+ .eureka .eureka__tree-bar > *:last-child, .flex-bar > *:last-child, .eureka .eureka__button-bar > *:last-child {
+ margin-right: 0; }
+
+[role="dialog"] .flex-bar {
+ margin-top: 8px;
+ margin-top: .5rem; }
+
+.eureka .eureka__button-bar, .eureka .eureka__notice {
+ text-align: center; }
+
+a[role="presentation"] {
+ color: currentColor !important;
+ text-decoration: none !important; }
+
+@-webkit-keyframes spinner {
+ to {
+ -webkit-transform: rotate(360deg);
+ transform: rotate(360deg); } }
+
+@keyframes spinner {
+ to {
+ -webkit-transform: rotate(360deg);
+ transform: rotate(360deg); } }
+
+.icon-circle-o-notch {
+ -webkit-animation: spinner 1s linear infinite;
+ animation: spinner 1s linear infinite; }
+
+.eureka__table tr[tabindex].eureka__focused-media-item .eureka__td-filename {
+ font-weight: bold; }
+
+.eureka__table tr[tabindex]:target .eureka__td-media > * {
+ outline: 3px solid #32AB9A; }
+
+.eureka__table tr[tabindex]:target .eureka__td-filename {
+ font-weight: bold; }
+
+/* start leave out */
+/*body {
+ background:$gray;
+ font: normal .8125em/1.375em "Helvetica Neue", Helvetica, Arial, Tahoma, sans-serif;
+ //font-family: "Helvetica Neue", Helvetica, Arial, Tahoma, sans-serif;
+ color:$color;
+ margin:0;
+ padding:0.5rem;
+}*/
+/* end leave out */
+.eureka .eureka__stage, .eureka *[class^="alert"], .eureka .eureka__pathbrowser, .eureka .eureka__pathbar, .eureka .eureka__modal .eureka__modal-panel, .eureka-root .eureka__notification-wrapper > *, .eureka .eureka__context-buttons {
+ border: 1px solid #dddddd;
+ border: var(--border-width, 1px) var(--border-style, solid) var(--panel-border-color, #dddddd); }
+
+.eureka .eureka__stage, .eureka *[class^="alert"], .eureka .eureka__pathbrowser, .eureka .eureka__pathbar, .eureka .eureka__modal .eureka__modal-panel, .eureka-root .eureka__notification-wrapper > *, .eureka .eureka__table td.comfortable {
+ padding: 16px;
+ padding: 1rem; }
+ @media screen and (min-width: 641px) {
+ .eureka .eureka__stage, .eureka *[class^="alert"], .eureka .eureka__pathbrowser, .eureka .eureka__pathbar, .eureka .eureka__modal .eureka__modal-panel, .eureka-root .eureka__notification-wrapper > *, .eureka .eureka__table td.comfortable {
+ padding: .5rem; } }
+
+.eureka .eureka__stage, .eureka *[class^="alert"], .eureka .eureka__pathbrowser, .eureka .eureka__pathbar, .eureka .eureka__modal .eureka__modal-panel {
+ border-radius: 0.25rem;
+ background: white;
+ background: var(--light-bg, white); }
+
+.eureka-root .eureka__notification-wrapper > * {
+ border-radius: 0.25rem;
+ padding-left: 1.5em;
+ padding-right: 1.5em;
+ background: #d9edf7;
+ background: var(--notification-background, #d9edf7);
+ color: #1D6E95;
+ color: var(--notification-color, #1D6E95);
+ border: 1px solid #309dd4;
+ border: 1px solid var(--notification-border-color, var(--notification-color, #309dd4)); }
+ .eureka-root .eureka__notification-wrapper > * a {
+ color: currentColor; }
+ @media screen and (min-width: 641px) {
+ .eureka-root .eureka__notification-wrapper > * br {
+ display: none; } }
+ .eureka-root .eureka__notification-wrapper > * button {
+ position: absolute;
+ top: 4px;
+ top: .25rem;
+ right: 4px;
+ right: .25rem;
+ color: currentColor;
+ -webkit-transition: color 240ms ease;
+ transition: color 240ms ease;
+ -webkit-box-shadow: none;
+ box-shadow: none; }
+ .eureka-root .eureka__notification-wrapper > * button:focus, .eureka-root .eureka__notification-wrapper > * button:hover {
+ color: #247fad !important;
+ color: var(--notification-focus-color, #247fad) !important;
+ border: none;
+ -webkit-box-shadow: none;
+ box-shadow: none; }
+ .eureka-root .eureka__notification-wrapper > * button:focus svg, .eureka-root .eureka__notification-wrapper > * button:hover svg {
+ fill: currentColor !important; }
+ .eureka-root .eureka__notification-wrapper > .eureka__dangerous {
+ --notification-background: #f7a2a2;
+ --notification-color: #911912;
+ --notification-border-color: #911912;
+ --notification-focus-color: #911912; }
+
+.eureka {
+ /* styling of blink/webkit marker */
+ /* styling of fierfox marker */
+ /*&.eureka__view-mode__table, &.eureka__view-mode__list {
+ .eureka__pathbar {
+ .eureka__context-buttons {
+ display:none;
+ }
+ }
+ }*/
+ /*&.eureka__view-mode__thumb {
+
+ }
+
+ &.eureka__view-mode__grid {
+
+ }
+
+ &.eureka__view-mode__list {
+
+ }*/
+ /*.eureka__tree-toggle {
+ //margin-bottom:1rem;
+ @include media($gtMobile) {
+ //margin-bottom:0;
+ button {
+ //@include button-reset;
+ }
+ }
+ }*/
+ /*#eureka__tree-toggle__button {
+ position:relative;
+ svg {
+ position:absolute;
+ top:0;
+ bottom:0;
+ }
+ }*/ }
+ .eureka .eureka__notification-wrapper {
+ -webkit-transition: top 240ms ease 90ms, opacity 240ms ease;
+ transition: top 240ms ease 90ms, opacity 240ms ease;
+ opacity: 1;
+ top: 0;
+ text-align: center; }
+ .eureka .eureka__notification-wrapper > * {
+ position: relative; }
+ @media screen and (max-width: 640px) {
+ .eureka .eureka__notification-wrapper {
+ -webkit-transition: opacity 240ms ease;
+ transition: opacity 240ms ease;
+ left: 0;
+ right: 0; } }
+ .eureka .eureka__notification-wrapper[aria-hidden="true"] {
+ opacity: 0;
+ top: -5em;
+ display: block;
+ -webkit-transition: opacity 340ms ease-out 90ms, top 420ms ease-out;
+ transition: opacity 340ms ease-out 90ms, top 420ms ease-out; }
+ @media screen and (min-width: 641px) {
+ .eureka .eureka__notification-wrapper {
+ position: absolute;
+ left: 0;
+ right: 0;
+ top: .25rem; } }
+ .eureka .eureka__notification-wrapper p {
+ margin: 0; }
+ .eureka .eureka__notification-wrapper .icon {
+ -webkit-transform: translateY(0.125em);
+ transform: translateY(0.125em); }
+ .eureka .eureka__upload-form input[name*="uploadFiles"]:disabled + label {
+ cursor: default;
+ position: relative;
+ padding-left: 1.5em; }
+ .eureka .eureka__upload-form input[name*="uploadFiles"]:disabled + label .spinner {
+ position: absolute;
+ top: 0;
+ left: .275em;
+ bottom: 0;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-pack: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center; }
+ .eureka .eureka__upload-form input[name*="uploadFiles"]:disabled + label:hover {
+ background: white;
+ background: var(--button-bg, white);
+ color: #555555;
+ color: var(--button-color, #555555); }
+ .eureka .eureka__upload-form input[name*="uploadFiles"]:disabled + label:hover svg {
+ fill: currentColor; }
+ .eureka a {
+ color: #3697cd;
+ color: var(--link-color, #3697cd); }
+ .eureka h1, .eureka h2, .eureka h3, .eureka h4, .eureka h5, .eureka h6 {
+ font-weight: normal; }
+ .eureka h1, .eureka h2, .eureka h3, .eureka h4, .eureka h5, .eureka h6, .eureka thead {
+ color: #555555;
+ color: var(--subtle, #555555); }
+ .eureka select {
+ background: white;
+ background: var(--button-bg, white);
+ -webkit-box-shadow: 0 0 0 1px #E4E4E4;
+ -webkit-box-shadow: 0 0 0 1px var(--border-color, #E4E4E4);
+ box-shadow: 0 0 0 1px #E4E4E4;
+ box-shadow: 0 0 0 1px var(--border-color, #E4E4E4);
+ color: #555555;
+ color: var(--button-color, #555555);
+ border: 0;
+ border-radius: 3px;
+ padding: .5em .5em;
+ padding-right: 1.5em;
+ -webkit-appearance: none;
+ -moz-appearance: none;
+ appearance: none;
+ background-image: url("data:image/svg+xml;utf8,arrow-down arrow-left arrow-right arrow-up arrows-h arrows-v arrows caret-down caret-left caret-right caret-square-o-down caret-square-o-left caret-square-o-right caret-square-o-up caret-up check circle-o-notch compress crop download exclamation-circle exclamation-triangle exclamation expand file-archive-o file-audio-o file-code-o file-excel-o file-image-o file-o file-pdf-o file-powerpoint-o file-text-o file-text file-video-o file-word-o file folder-o folder-open-o folder-open folder info-circle list masonry plus-square-o plus-square search-minus search-plus sort-alpha-asc sort-alpha-desc sort-amount-asc sort-amount-desc sort-asc sort-desc sort-numeric-asc sort-numeric-desc sort spinner square-o square table th-large th-list times trash-o trash undo upload
+
+ arrow-down
+
+
+ arrow-left
+
+
+ arrow-right
+
+
+ arrow-up
+
+
+ arrows-h
+
+
+ arrows-v
+
+
+ arrows
+
+
+ caret-down
+
+
+ caret-left
+
+
+ caret-right
+
+
+ caret-square-o-down
+
+
+ caret-square-o-left
+
+
+ caret-square-o-right
+
+
+ caret-square-o-up
+
+
+ caret-up
+
+
+ check
+
+
+ circle-o-notch
+
+
+ compress
+
+
+ crop
+
+
+ download
+
+
+ exclamation-circle
+
+
+ exclamation-triangle
+
+
+ exclamation
+
+
+ expand
+
+
+ file-archive-o
+
+
+ file-audio-o
+
+
+ file-code-o
+
+
+ file-excel-o
+
+
+ file-image-o
+
+
+ file-o
+
+
+ file-pdf-o
+
+
+ file-powerpoint-o
+
+
+ file-text-o
+
+
+ file-text
+
+
+ file-video-o
+
+
+ file-word-o
+
+
+ file
+
+
+ folder-o
+
+
+ folder-open-o
+
+
+ folder-open
+
+
+ folder
+
+
+ info-circle
+
+
+ list
+
+
+ masonry
+
+
+
+
+ plus-square-o
+
+
+ plus-square
+
+
+ search-minus
+
+
+ search-plus
+
+
+ sort-alpha-asc
+
+
+ sort-alpha-desc
+
+
+ sort-amount-asc
+
+
+ sort-amount-desc
+
+
+ sort-asc
+
+
+ sort-desc
+
+
+ sort-numeric-asc
+
+
+ sort-numeric-desc
+
+
+ sort
+
+
+ spinner
+
+
+ square-o
+
+
+ square
+
+
+ table
+
+
+ th-large
+
+
+ th-list
+
+
+ times
+
+
+ trash-o
+
+
+ trash
+
+
+ undo
+
+
+ upload
+
+
\ No newline at end of file
diff --git a/client/build/assets/img/select-arrow.svg b/client/build/assets/img/select-arrow.svg
new file mode 100644
index 0000000..420275d
--- /dev/null
+++ b/client/build/assets/img/select-arrow.svg
@@ -0,0 +1 @@
+
+ masonry
+
+
+
diff --git a/client/build/assets/img/src/svg/plus-square-o.svg b/client/build/assets/img/src/svg/plus-square-o.svg
new file mode 100644
index 0000000..649b992
--- /dev/null
+++ b/client/build/assets/img/src/svg/plus-square-o.svg
@@ -0,0 +1 @@
+
+ search-minus
+
diff --git a/client/build/assets/img/src/svg/search-plus.svg b/client/build/assets/img/src/svg/search-plus.svg
new file mode 100644
index 0000000..f6a7d98
--- /dev/null
+++ b/client/build/assets/img/src/svg/search-plus.svg
@@ -0,0 +1 @@
+Webpack Visualizer
+
+
+ 
+
+