diff --git a/contact-center/app/src/main/java/com/chatopera/cc/webim/web/handler/apps/contacts/ContactsController.java b/contact-center/app/src/main/java/com/chatopera/cc/webim/web/handler/apps/contacts/ContactsController.java index 1b90970f..88113072 100644 --- a/contact-center/app/src/main/java/com/chatopera/cc/webim/web/handler/apps/contacts/ContactsController.java +++ b/contact-center/app/src/main/java/com/chatopera/cc/webim/web/handler/apps/contacts/ContactsController.java @@ -193,7 +193,7 @@ public class ContactsController extends Handler{ @Menu(type = "contacts" , subtype = "contacts") public ModelAndView detail(ModelMap map , HttpServletRequest request , @Valid String id) { map.addAttribute("contacts", contactsRes.findOne(id)) ; - return request(super.createRequestPageTempletResponse("/apps/business/contacts/detail")); + return request(super.createAppsTempletResponse("/apps/business/contacts/detail")); } diff --git a/contact-center/app/src/main/resources/static/js/timeliner/.bower.json b/contact-center/app/src/main/resources/static/js/timeliner/.bower.json new file mode 100644 index 00000000..e538b7c4 --- /dev/null +++ b/contact-center/app/src/main/resources/static/js/timeliner/.bower.json @@ -0,0 +1,14 @@ +{ + "name": "timeliner", + "homepage": "https://github.com/technotarek/timeliner", + "_release": "2b17590fae", + "_resolution": { + "type": "branch", + "branch": "master", + "commit": "2b17590fae9d8fb2cc96746962ff14d825f2a122" + }, + "_source": "https://github.com/technotarek/timeliner.git", + "_target": "*", + "_originalSource": "timeliner", + "_direct": true +} \ No newline at end of file diff --git a/contact-center/app/src/main/resources/static/js/timeliner/README.md b/contact-center/app/src/main/resources/static/js/timeliner/README.md new file mode 100644 index 00000000..d44e144c --- /dev/null +++ b/contact-center/app/src/main/resources/static/js/timeliner/README.md @@ -0,0 +1,407 @@ +# Timeliner + +## Overview +Build a simple, interactive, historical timeline with HTML, CSS, and jQuery. The benefits of this timeline script are that it's (1) simple, (2) able to handle nearly any form of content (including images, video, audio), (3) printer friendly, and highly customizable with just CSS and HTML. + +Please [drop me a line](http://www.technotarek.com/contact "drop me a line") if you do do something interesting with it. See below for samples from other users. + +## Demos and Live Implementations + +###### Advanced CSS3 Customization Demo +https://technotarek.com/timeliner/demo-future/timeliner-future.html + +###### Implementation with Custom CSS: Investigating Power +https://investigatingpower.org/civil-rights/ + +###### Original Demo +https://www.technotarek.com/timeliner/timeliner.html + +## Quick Start + +#### Load Plugin and Dependencies + +```html + + + + +``` + +#### Instantiate + +```html + +``` + +#### Markup +Using the plugin's defaults and recommended markup, a timeline with two major time markers (1976 and 1984) and a total of three events looks like this: + +```html +
+
+

1976

+ +
+ +
Event
+
+

Content about the event goes here.

+
+ +
Another Event
+
+

Content about the other event.

+
+ +
+
+
+

1984

+ +
+ +
Yet Another Event
+
+

Content about the event goes here.

+
+ +
+
+
+
+``` + +[Emmet](http://emmet.io/) snippet: + + div#timeline.timeline-container>div.timeline-wrapper>h2.timeline-time+dl.timeline-series>dt.timeline-event#my-event-01+dd.timeline-event-content#my-event-01EX + +## Important Upgrade Notes + +Users wishing to upgrade from v1.x to v2.x should note that the default markup for timeliner.js has changed. Specifically, most of the default class names have changed. + +* screen.css was divided into two separate files, demo.css and timeliner.css +* "timelineContainer" ==> "timeline-container" +* "timelineMajor" ==> "timeline-wrapper" +* "timelineMajorMarker" ==> "timeline-time" +* "timelineMinor" ==> "timeline-series" +* "timelineEvent" ==> "timeline-event-content" + +To resolve these changes, either update your markup and/or use the new customization options introducted with v2.0. For example, you could use the new "timelineSection" option to change the selector from "timeline-wrapper" back to "timelineMajor". Otherwise, simply replace your original timeliner javascript and css files with the 2.x versions. + +In addition, note: + +* Each minor marker tag needs a class of timeline-event +* The display:none property from the previous timelineEvent (now timeline-event-content) element is no longer necessary +* The expand/collapse element uses new and simplified markup. See the Usage section for details. +* The license has been changed from a _Creative Commons Attribution-ShareAlike 3.0 Unported License_ to a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License. The former continues to apply to version 1.x implementations. + +The 2.x changes provide an improved semantic markup. They also help other developers use a custom markup structure. Whereas version 1.x required the use of dl, dt, dd tags, it is now possible to use your own markup in coordination with the plugin's options. Other changes were made for the sake of consistency and to simplify future development. + +## Requirements +* jQuery +* Optional: Jack Moore's ColorBox jQuery plugin + +## Detailed Usage Instructions +1. Include timeliner.css (or timeliner.min.css) and timeliner.js (or timeliner.min.js). Optionally, also include responsive.css / responsive.min.css for basic responsive behavior on phones and mobile devices below 480px wide (iPad responsive behavior forthcoming). + +2. Wrap your timeline in an element with an ID of "timeline" and CLASS of timeline-container. You can set your own container ID using the plugin's options. If you need to use a customized class value as well, update the CSS accordingly. + +```html +
+ ... +
+``` + +3. Separate the major marker content (e.g., content for each century, year, decade etc) into elements with a class of timeline-wrapper. See the options if you need to customize this class value. + +```html +
+ ... +
+``` + +4. Wrap the major markers in an element with a class of 'timeline-year'. See the options if you need to customize this class value. + +```html +

1954

+``` + +5. Separate the individual events into DL elements with a class of "timeline-series". See the options if you need to customize this class value. + +```html +
+ ... +
+``` + +6. Wrap the title of the individual events in a DT tag surrounding an A tag; give each DT a unique ID and the class of "timeline-event". + +```html +
Brown vs Board of Education
+``` + +7. Wrap the full event content in a DD tag; give each DD an ID based on the DT with 'EX' appended and a class of 'timeline-event-content'. See the options to customize these values. + +```html +
+ ... +
+``` + +8. Instantiate: + +```js +$.timeliner({}); +``` + +9. Or, instantiate with multiple timelines: + +```js +$.timeliner({timelineContainer: '#timeline'}); +$.timeliner({timelineContainer: '#timeline2'}); +``` + +10. Or, instantiate with options. Use as many or as few as you like. If you're using multiple timelines on a single page, options can be set on each individual timeline. + +```js +$.timeliner({ + timelineContainer: '#timeline', + // Container for the element holding the entire timeline (e.g. a DIV) + // value: ID or class selector + // default: #timeline + // note: must be unique for each timeline on page + + timelineSection: '.timeline-wrapper', + // Wrapper that contains items under a specific marker (e.g., all of the events under a year on the timeline) + // value: class selector + // default: .timeline-wrapper + // note: changing this selector from the default will require modifications to the CSS file in order to retain default styling + + timelineSectionMarker: '.timeline-time', + // Class selector applied to each major item on the timeline, such as each year + // value: class selector + // default: .timeline-year + + timelineTriggerContainer: '.timeline-series', + // Class assigned to wrappers surrounding each individual event + // value: selector + // default: .timeline-series + // note: changing this selector from the default will require modifications to the CSS file in order to retain default styling + + timelineTriggerAnchor: '.timeline-event', + // Element that is wrapped around the event's title; when clicked, expands the event and reveals its full contents + // value: class selector + // default: .timeline-event + // note: changing this tag from the default will require modifications to the CSS file in order to retain default styling + + timelineEventContainer: options['timelineEventContainer'] || 'dt', + // Wrapper surrounding a series of events corresponding to the timelineSectionMarker + // value: tag or class selector + // default: dt + // note: When leaving this value at its default, you do not need to apply a class to the dt element if you use the plugins recommended tag structure and markup + // note: Change this from the default, perhaps to a class like ".timeline-event", in the case that you do not want to use the plugins recommened markup structure and prefer to use anothe element (e.g, div) instead of a dt tag to mark each event within a series. + // note: Changing this value from the default will require modifications to the CSS file in order to retain default styling + + timelineEXContent: '.timeline-event-content', + // Element that contains the event's full content to be displayed when event is expanded, an event's expanded ID should alway be on this item + // value: class selector + // default: .timeline-event-ex + // note: changing this selector from the default will require modifications to the CSS file in order to retain default styling + + EXContentIdSuffix: 'EX', + // ID suffix to identify expanded (aka EX) content + // value: string + // default: EX + + oneOpen: false, + // sets whether only one item on the timeline can be open at a time. If true, other items will close when one is opened. + // value: true | false + // default: false + // note: does not apply to events identified in startOpen option + + startState: options['startState'] || 'closed', + // sets whether the timeline is initially collapsed, fully expanded, or "flat" mode + // value: closed | open | flat + // default: closed + // note: setting to "open" makes the startOpen option meaningless + // note: flat mode initally collapses the entire timeline except for the major markers + // note: the flat state is an initial display option only -- the timeline major markers return to normal once they've been opened/displayed + + startOpen: options['startOpen'] || ['.start-open'], + // As of version 2.3, you can simply add the "start-open" class to each timeline-event you want to have open by default; see the demo source code or code sample below + // sets the events to display expanded on page load + // value: array of IDs of single timelineEvents (e.g., ['#event01'] or ['#event01','#event02']) + // default: ['.start-open'] + + baseSpeed: 200, + // sets the base speed for animation of an event + // value: numeric + // default: 200 + + speed: 4, + // multiplier applied to the base speed that sets the speed at which an event's contents are displayed and hidden + // value: numeric + // default: 4 + + fontOpen: '1.2em', + // sets the font size of an event after it is opened + // value: any valid CSS font-size value, + // default: 1.2em + + fontClosed: '1em', + // sets the font size of an event after it is closed + // value: any valid CSS font-size value + // defaults: 1em + + expandAllText: '+ expand all', + // sets the text of the expandAll selector after the timeline is fully collapsed + // value: string + // default: + expand all + + collapseAllText: '- collapse all' + //sets the text of the expandAll selector after the timeline is fully expanded + // value: string + // default: - collapse all + +}); +``` + +11. Add an expand/collapse all events by adding the following inside of the main #timeline. Use the expandAllText and collapseAllText options to customize this button. You may include more than one expand/collapse button per timeline, such as at the top and bottom of your timeline. When the state of one changes, it will update all others. + +```html + +``` + +## Sample + +Using the plugins defaults and recommended markup, a timeline with only one time marker and two events would look like this: + +```html +
+
+

1976

+ +
+ +
Event
+
+

Content about the event goes here.

+
+ +
Another Event
+
+

Content about the other event.

+
+ +
+
+
+
+``` + +Using the customization options introduced in v2.0, it's possible to customize the tags and class names used by the plugin. For example, the "timeline-time" class applied to the h2 tag can be customized. Perhaps, if you're using the plugin to outline the steps involved in a task (like putting together a piece of furniture), you could use "timeline-step" instead. + +In fact, it's possible to use a different markup structure entirely by fully using the v2.0 customization options. + +## Additional Examples + +* http://technotarek.com/timeliner/demo-future/timeliner-future.html +* http://investigatingpower.org/vietnam/ +* http://www.ncld-youth.info/index.php?id=61 + +## Change Log + +###### v2.3.1 (3/23/2018) +* Added minified responsive css file. + +###### v2.3 (5/12/2017) +* Confirmed compatibility with jQuery 3.x. See issue #22. + +###### v2.3 (5/9/2016) +* Add ability to set .start-open class on events (resolves #17) + +###### v2.2 (10/12/2014) +* Added new "flat" startState which allows for a fully collapsed timeline upon load + +###### v2.1 (10/10/2014) +* Separated css into two separate files to isolate demo from plugin styles (demo.css and timeliner.css) +* Added minified css file (timeliner.min.css) +* Support multiple expand/collapse buttons per timeline +* Added new demo files for "Future" theme + +###### v2.0 (10/10/2014) +* Merged customization efforts developed by https://github.com/ascloutier/timeliner +* Merge includes new oneOpen option +* Revised plugin's default selector labels to reflect semantic naming in the case of a traditional timeline +* Fixed issue where major markers would not re-open after one cycle +* Added LESS file for faster CSS revisions and customization + +###### v1.6 (1/7/2013) +* Merged multiple-timeline per page enhancement \( supported by https://github.com/luisalima \) + +###### v1.5.1 (10/1/2013) +* Changed click events to use jQuery delegated events via the .on\(\) method \( supported partially by code contributed by https://github.com/gkarka \) + +###### v1.5.responsive (7/9/2013) +* Added basic responsive behavior for phone/mobile devices below 480px wide \(supported partially by code contributed by Geus Maxime\) + +###### v1.5 (6/7/2013) +* startOpen option now accepts multiple timeline events + +###### v1.4.1 (6/7/2013) +* Merged in openStart-fix \( via https://github.com/rs017991 \) + +###### v1.4 (4/27/2013) +* Fixed jQuery 1.9 Toggle deprecation \( #0d2755 via https://github.com/Marco129 \) +* Customization for expand/collpase all \( #927fac via https://github.com/Marco129 \) +* Updated ColorBox plugin for jQuery 1.9 + +###### v1.3 (1/25/2013) +* Major js code simplification and optimization + +###### v1.2 (1/24/2013) +* Added in additional instantiation options +* Fixed startOpen bug + +###### v1.1 (1/23/2013) +* Added startOpen option + +###### v1.0 (5/1/2012) +* First release + +## Accessbility + +The original 1.0 version was also fully accessible and 508 compliant as of its original production (mid-2000s). Accessibility technologies have since changed as have coding practices to address accessibility (e.g., the adoption of ARIA). It is recommended that you review your own implementation to ensure accessiblity if that is a requirement of your project. I hope to re-review and update the plugin's native accessiblity at a later date. + +## Roadmap + +* Replace ColorBox plugin with alternative +* Improve responsiveness for a variety of device sizes +* Add easy theming and new visual options +* Revisit accesibility: add in ARIA and keyboard controls + +## Ideas for v3 + +http://codepen.io/plasm/pen/oZbXmj + +## Credits +The content used in the repo and in the demo is from the Investigating Power project (https://investigatingpower.org), a website which I developed on behalf of author and journalist Charles Lewis. + +Thanks to on-going development and contributions from the community, timeliner continues to improve. Notable enhancements include basic responsiveness for mobile devices, the ability to add multiple timelines to a single page, and customizable selectors to allow for semantic markup. + +The repo is packaged with a version of Jack Moore's ColorBox jQuery plugin (http://www.jacklmoore.com/colorbox). It is for demonstration purposes only. See https://github.com/jackmoore/colorbox for support. + +## License +What's most important to me is that you [let me know](http://www.technotarek.com/contact "contact") if you implement it somewhere so I can take a peek. As of version 2.0, I've changed the license to prohibit commerical usage without my consent. The intent is not to limit a single implementation (e.g,. on a company website), but to prohibit the use and packaging of this plugin within other commercial products (e.g, themes, applications etc). + +##### version 2.x+ +Timeliner.js by Tarek Anandan, version 2.x+, is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License. + +![License](https://i.creativecommons.org/l/by-nc-sa/4.0/80x15.png "Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License") + +##### version 1.x +Timeliner.js by Tarek Anandan, version 1.x, is licensed under a Creative Commons Attribution-ShareAlike 3.0 Unported License. diff --git a/contact-center/app/src/main/resources/static/js/timeliner/css/demo.css b/contact-center/app/src/main/resources/static/js/timeliner/css/demo.css new file mode 100644 index 00000000..c16e4d84 --- /dev/null +++ b/contact-center/app/src/main/resources/static/js/timeliner/css/demo.css @@ -0,0 +1,58 @@ +/* ======= DEMO LAYOUT ======= */ +body { + background-color: #2f2f2f; + color: #eeefef; + font-size: 62.5%; + font-family: Arial, Helvetica, sans-serif; + margin: 0; + padding: 0; +} +.container { + width: 940px; + margin-left: auto; + margin-right: auto; + padding: 10px; + *zoom: 1; +} +h1 { + color: #7DBADF; + font-size: 36px; + font-weight: 400; + margin: 0; +} +h2 { + font-size: 22px; + font-weight: 400; + margin: 5px 0; + letter-spacing: .1em; +} +h3 { + font-size: 1.6em; + margin: 10px 0 10px 10px; +} +a:link, +a:visited { + color: #7097af; + text-decoration: none; +} +a:hover { + color: #7DBADF; +} +a img { + border: none; +} +p { + margin: 0 0 10px 8px; + font-size: 1.5em; + font-weight: 400; + line-height: 1.6em; +} +.lead { + font-size: 2em; + margin-bottom: 40px; +} +.clear { + clear: both; + line-height: 0; + font-size: 0; +} diff --git a/contact-center/app/src/main/resources/static/js/timeliner/css/demo.less b/contact-center/app/src/main/resources/static/js/timeliner/css/demo.less new file mode 100644 index 00000000..0fe82f07 --- /dev/null +++ b/contact-center/app/src/main/resources/static/js/timeliner/css/demo.less @@ -0,0 +1,68 @@ +/* ======= DEMO LAYOUT ======= */ + +body { + background-color:#2f2f2f; + color:#eeefef; + font-size:62.5%; + font-family:Arial, Helvetica, sans-serif; + margin:0; + padding:0; +} + +.container { + width:940px; + margin-left:auto; + margin-right:auto; + padding:10px; + *zoom:1; +} + +h1 { + color:#7DBADF; + font-size:36px; + font-weight:400; + margin:0; +} + +h2 { + font-size:22px; + font-weight:400; + margin:5px 0; + letter-spacing:.1em; +} + +h3 { + font-size:1.6em; + margin:10px 0 10px 10px; +} + +a:link,a:visited { + color:#7097af; + text-decoration:none; +} + +a:hover { + color:#7DBADF; +} + +a img { + border:none; +} + +p { + margin:0 0 10px 8px; + font-size:1.5em; + font-weight:400; + line-height:1.6em; +} + +.lead { + font-size:2em; + margin-bottom:40px; +} + +.clear { + clear:both; + line-height:0; + font-size:0; +} \ No newline at end of file diff --git a/contact-center/app/src/main/resources/static/js/timeliner/css/responsive.css b/contact-center/app/src/main/resources/static/js/timeliner/css/responsive.css new file mode 100644 index 00000000..535397e7 --- /dev/null +++ b/contact-center/app/src/main/resources/static/js/timeliner/css/responsive.css @@ -0,0 +1,71 @@ +/* Smartphones (landscape and portrait) ----------- */ +@media screen and (max-width: 768px) { + + * { + max-width: 460px; + } + + body { + font-size: large; + } + + .container { + padding:10px; + } + + div.timelineToggle { + float:none; + } + + .timelineEvent div.media { + display:none; + float:none; + } + + .timelineMinor dt { + font-size:1.2em; + white-space: normal; + } + + .timelineMinor dd h3 { + font-size:1em; + white-space: normal; + } + + div#timelineContainer { + } + + .timelineMinor dd { + margin-left:20px; + padding-left:0; + width:100%; + } + + .timelineEvent .media p { + font-size:1em; + } + + dl.timelineMinor { + float:none; + max-width:80%; + } + + .timelineEvent p { + float:none; + width:100%; + } + + .timelineEvent blockquote { + float:none; + width:200px; + font-size:1em; + } +} +/* Smartphones (portrait) ----------- */ +@media only screen and (max-width : 320px) { + + * { + max-width: 300px; + } + +} \ No newline at end of file diff --git a/contact-center/app/src/main/resources/static/js/timeliner/css/responsive.min.css b/contact-center/app/src/main/resources/static/js/timeliner/css/responsive.min.css new file mode 100644 index 00000000..620b691c --- /dev/null +++ b/contact-center/app/src/main/resources/static/js/timeliner/css/responsive.min.css @@ -0,0 +1 @@ +@media screen and (max-width:768px){*{max-width:460px}body{font-size:large}.container{padding:10px}div.timelineToggle{float:none}.timelineEvent div.media{display:none;float:none}.timelineMinor dt{font-size:1.2em;white-space:normal}.timelineMinor dd h3{font-size:1em;white-space:normal}.timelineMinor dd{margin-left:20px;padding-left:0;width:100%}.timelineEvent .media p{font-size:1em}dl.timelineMinor{float:none;max-width:80%}.timelineEvent p{float:none;width:100%}.timelineEvent blockquote{float:none;width:200px;font-size:1em}}@media only screen and (max-width :320px){*{max-width:300px}} \ No newline at end of file diff --git a/contact-center/app/src/main/resources/static/js/timeliner/css/timeliner.css b/contact-center/app/src/main/resources/static/js/timeliner/css/timeliner.css new file mode 100644 index 00000000..c91b62d0 --- /dev/null +++ b/contact-center/app/src/main/resources/static/js/timeliner/css/timeliner.css @@ -0,0 +1,145 @@ +/* ============ TIMELINER.JS ============= */ +.timeline-container { + border-left: 2px solid #ccc; + margin: 20px auto; + width: 900px; +} +.timeline-toggle { + background: #000; + border-color: #161616; + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + border-radius: 4px; + color: #ccc; + cursor: pointer; + float: right; + font-size: 12px; + margin-right: 0; + padding: 3px 5px; + white-space: nowrap; +} +.timeline-wrapper { + clear: left; + float: left; + margin: 0 0 12px; + width: 900px; +} +.timeline-wrapper h2 { + background: url(../images/timeline_century_tick.gif) left center no-repeat; + font-family: Palatino, "Times New Roman", Times, serif; + cursor: pointer; + font-size: 3em; + font-weight: 400; + margin: 0 0 10px; + padding: 4px 4px 4px 20px; +} +.timeline-wrapper h2 span { + background: #ccc; + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + border-radius: 4px; + color: #131313; + letter-spacing: 0.1em; + line-height: 1.7em; + padding: 3px 5px 1px; +} +.timeline-series { + clear: left; + float: left; + margin: 0 12px 0 0; + padding: 4px 4px 4px 0; + position: relative; + width: 880px; +} +.timeline-series dt { + background: url(../images/timeline_decade_tick.gif) left center no-repeat; + clear: left; + font-size: 1.6em; + list-style-type: none; + line-height: 1.2em; + margin: 0 0 12px; + padding: 0 0 0 24px; + white-space: nowrap; +} +.timeline-series dt a { + color: #999; + cursor: pointer; +} +.timeline-series dt a .closed { + color: #999; + font-size: 1em; + margin-left: 0; +} +.timeline-series dt a .open { + color: #7DBADF; +} +.timeline-series dt a:hover { + color: #7DBADF; +} +.timeline-series dd { + padding-left: 24px; + width: 100%; +} +.timeline-series dd h3 { + color: #FFF; + clear: both; + float: left; + font-size: 1.5em; + margin: 0; + white-space: nowrap; +} +.timeline-event-content { + display: none; +} +.timeline-event-content p { + clear: left; + float: left; + line-height: 1.5em; + margin: 6px 0 10px; + width: 500px; +} +.timeline-event-content h4 { + clear: left; + float: left; + font-size: 1.4em; + font-weight: 400; + margin: 10px 0 0; + padding: 0 0 0 20px; +} +.timeline-event-content blockquote { + border-left: 2px solid #ccc; + clear: left; + float: left; + font-size: 1.8em; + margin-left: 0; + padding: 0 30px; + width: 400px; +} +.timeline-event-content blockquote .attribution { + font-size: 0.7em; + text-align: right; +} +.timeline-event-content .media { + float: right; + padding: 0 0 12px; + width: 300px; +} +.timeline-event-content .media img { + border: 2px solid #000; + margin: 0; +} +.timeline-event-content .media p { + font-size: 1.2em; + margin: 0; + padding: 0; +} +.timeline-event-content .media a:link, +.timeline-event-content .media a:visited { + color: #ab221b; +} +.timeline-event-content .media a:hover { + color: #7DBADF; +} +.clear { + clear: both; +} diff --git a/contact-center/app/src/main/resources/static/js/timeliner/css/timeliner.less b/contact-center/app/src/main/resources/static/js/timeliner/css/timeliner.less new file mode 100644 index 00000000..0ec7aa1b --- /dev/null +++ b/contact-center/app/src/main/resources/static/js/timeliner/css/timeliner.less @@ -0,0 +1,151 @@ +/* ============ TIMELINER.JS ============= */ + +.timeline-container { + border-left:2px solid #ccc; + margin:20px auto; + width:900px; +} + +.timeline-toggle { + background:#000; + border-color:#161616; + -webkit-border-radius:4px; + -moz-border-radius:4px; + border-radius:4px; + color:#ccc; + cursor:pointer; + float:right; + font-size:12px; + margin-right:0; + padding:3px 5px; + white-space:nowrap; +} + +.timeline-wrapper { + clear:left; + float:left; + margin:0 0 12px; + width:900px; + h2 { + background:url(../images/timeline_century_tick.gif) left center no-repeat; + font-family:Palatino,"Times New Roman", Times, serif; + cursor: pointer; + font-size:3em; + font-weight:400; + margin:0 0 10px; + padding:4px 4px 4px 20px; + span { + background:#ccc; + -webkit-border-radius:4px; + -moz-border-radius:4px; + border-radius:4px; + color:#131313; + letter-spacing:0.1em; + line-height:1.7em; + padding:3px 5px 1px; + } + } +} + +.timeline-series { + clear:left; + float:left; + margin:0 12px 0 0; + padding:4px 4px 4px 0; + position:relative; + width:880px; + dt { + background:url(../images/timeline_decade_tick.gif) left center no-repeat; + clear:left; + font-size:1.6em; + list-style-type:none; + line-height:1.2em; + margin:0 0 12px; + padding:0 0 0 24px; + white-space:nowrap; + a { + color:#999; + cursor:pointer; + .closed { + color:#999; + font-size:1em; + margin-left:0; + } + .open { + color:#7DBADF; + } + } + a:hover { + color:#7DBADF; + } + } + dd { + padding-left:24px; + width:100%; + h3 { + color:#FFF; + clear:both; + float:left; + font-size:1.5em; + margin:0; + white-space:nowrap; + } + } +} + +.timeline-event-content { + display:none; + p { + clear:left; + float:left; + line-height:1.5em; + margin:6px 0 10px; + width:500px; + } + h4 { + clear:left; + float:left; + font-size:1.4em; + font-weight:400; + margin:10px 0 0; + padding:0 0 0 20px; + } + blockquote { + border-left:2px solid #ccc; + clear:left; + float:left; + font-size:1.8em; + margin-left:0; + padding:0 30px; + width:400px; + .attribution { + font-size:0.7em; + text-align: right; + } + } + .media { + float:right; + padding:0 0 12px; + width:300px; + img { + border:2px solid #000; + margin:0; + } + p { + font-size:1.2em; + margin:0; + padding:0; + } + a:link, a:visited { + color:#ab221b; + } + a:hover { + color:#7DBADF; + } + } + +} + +.clear { + clear:both; +} \ No newline at end of file diff --git a/contact-center/app/src/main/resources/static/js/timeliner/css/timeliner.min.css b/contact-center/app/src/main/resources/static/js/timeliner/css/timeliner.min.css new file mode 100644 index 00000000..b8976e38 --- /dev/null +++ b/contact-center/app/src/main/resources/static/js/timeliner/css/timeliner.min.css @@ -0,0 +1 @@ +.timeline-container{border-left:2px solid #ccc;margin:20px auto;width:900px}.timeline-toggle{background:#000;border-color:#161616;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;color:#ccc;cursor:pointer;float:right;font-size:12px;margin-right:0;padding:3px 5px;white-space:nowrap}.timeline-wrapper{clear:left;float:left;margin:0 0 12px;width:900px}.timeline-wrapper h2{background:url(../images/timeline_century_tick.gif) left center no-repeat;font-family:Palatino,"Times New Roman",Times,serif;cursor:pointer;font-size:3em;font-weight:400;margin:0 0 10px;padding:4px 4px 4px 20px}.timeline-wrapper h2 span{background:#ccc;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;color:#131313;letter-spacing:.1em;line-height:1.7em;padding:3px 5px 1px}.timeline-series{clear:left;float:left;margin:0 12px 0 0;padding:4px 4px 4px 0;position:relative;width:880px}.timeline-series dt{background:url(../images/timeline_decade_tick.gif) left center no-repeat;clear:left;font-size:1.6em;list-style-type:none;line-height:1.2em;margin:0 0 12px;padding:0 0 0 24px;white-space:nowrap}.timeline-series dt a{color:#999;cursor:pointer}.timeline-series dt a .closed{color:#999;font-size:1em;margin-left:0}.timeline-series dt a .open,.timeline-series dt a:hover{color:#7DBADF}.timeline-series dd{padding-left:24px;width:100%}.timeline-series dd h3{color:#FFF;clear:both;float:left;font-size:1.5em;margin:0;white-space:nowrap}.timeline-event-content{display:none}.timeline-event-content p{clear:left;float:left;line-height:1.5em;margin:6px 0 10px;width:500px}.timeline-event-content h4{clear:left;float:left;font-size:1.4em;font-weight:400;margin:10px 0 0;padding:0 0 0 20px}.timeline-event-content blockquote{border-left:2px solid #ccc;clear:left;float:left;font-size:1.8em;margin-left:0;padding:0 30px;width:400px}.timeline-event-content blockquote .attribution{font-size:.7em;text-align:right}.timeline-event-content .media{float:right;padding:0 0 12px;width:300px}.timeline-event-content .media img{border:2px solid #000;margin:0}.timeline-event-content .media p{font-size:1.2em;margin:0;padding:0}.timeline-event-content .media a:link,.timeline-event-content .media a:visited{color:#ab221b}.timeline-event-content .media a:hover{color:#7DBADF}.clear{clear:both} \ No newline at end of file diff --git a/contact-center/app/src/main/resources/static/js/timeliner/demo-future/css/timeliner-future.css b/contact-center/app/src/main/resources/static/js/timeliner/demo-future/css/timeliner-future.css new file mode 100644 index 00000000..8836a1a5 --- /dev/null +++ b/contact-center/app/src/main/resources/static/js/timeliner/demo-future/css/timeliner-future.css @@ -0,0 +1,321 @@ +@import url(https://fonts.googleapis.com/css?family=Josefin+Sans:100,400,700); +/* ======= DEMO LAYOUT ======= */ +body { + background-color: #2f2f2f; + color: #eeefef; + font-size: 62.5%; + font-family: Arial, Helvetica, sans-serif; + margin: 0; + padding: 0; +} +.container { + width: 940px; + margin-left: auto; + margin-right: auto; + padding: 10px; + *zoom: 1; +} +h1 { + color: #7DBADF; + font-size: 36px; + font-weight: 400; + margin: 0; +} +h2 { + font-size: 22px; + font-weight: 400; + margin: 5px 0; + letter-spacing: .1em; +} +h3 { + font-size: 1.6em; + margin: 10px 0 10px 10px; +} +a:link, +a:visited { + color: #7097af; + text-decoration: none; +} +a:hover { + color: #7DBADF; +} +a img { + border: none; +} +p { + margin: 0 0 10px 8px; + font-size: 1.5em; + font-weight: 400; + line-height: 1.6em; +} +.lead { + font-size: 2em; + margin-bottom: 40px; +} +.clear { + clear: both; + line-height: 0; + font-size: 0; +} +body { + background: #090a0f url("../img/bg-space-mod.jpg") no-repeat bottom right fixed; + -webkit-background-size: cover; + -moz-background-size: cover; + -o-background-size: cover; + background-size: cover; + color: rgba(255, 255, 255, 0.85); + font-family: "Josefin Sans", arial, sans serif; + font-size: 68.5%; + padding: 40px 0; +} +h1 { + color: #78a8b2; + font-size: 4.8em; + font-weight: 400; + text-transform: uppercase; +} +h2 { + font-size: 3.6em; + font-weight: 400; + text-transform: uppercase; +} +.step1 { + color: rgba(255, 255, 255, 0.2); +} +.step2 { + color: rgba(255, 255, 255, 0.4); +} +.step3 { + color: rgba(255, 255, 255, 0.6); +} +.lead { + color: rgba(255, 255, 255, 0.6); +} +a:hover, +a:link, +a:visited { + color: #78a8b2; +} +.timeline-container { + border-left: 4px solid rgba(0, 69, 121, 0.65); + margin: 20px auto; + width: 900px; +} +.timeline-container-tick { + background: rgba(0, 69, 121, 0.65); + content: ""; + display: block; + height: 4px; + left: -8px; + width: 14px; + position: relative; +} +.timeline-container::before { + background: rgba(0, 69, 121, 0.65); + content: ""; + display: block; + height: 4px; + left: -8px; + width: 14px; + position: relative; + top: -4px; +} +.timeline-container::after { + background: rgba(0, 69, 121, 0.65); + content: ""; + display: block; + height: 4px; + left: -8px; + width: 14px; + position: relative; + top: 4px; +} +.timeline-toggle { + background: rgba(23, 66, 98, 0.65); + border: 0; + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + border-radius: 4px; + color: rgba(255, 255, 255, 0.85); + cursor: pointer; + float: right; + font-size: 12px; + margin-right: 0; + padding: 10px 15px; + text-transform: uppercase; + white-space: nowrap; +} +.timeline-toggle:hover { + background: rgba(119, 0, 63, 0.8); + -webkit-transition: background 0.2s ease-in; + -moz-transition: background 0.2s ease-in; + -o-transition: background 0.2s ease-in; + transition: background 0.2s ease-in; +} +.timeline-toggle:focus { + outline: none; +} +.timeline-wrapper { + clear: left; + float: left; + margin: 0 0 12px; + width: 900px; +} +.timeline-wrapper .timeline-time::before { + border-top: 4px solid rgba(0, 69, 121, 0.65); + content: ""; + display: inline-block; + height: 4px; + margin-right: 0px; + vertical-align: middle; + width: 24px; +} +.timeline-wrapper .timeline-time { + cursor: pointer; + font-size: 2.8em; + font-weight: 400; + margin: 0 0 30px 0; + padding: 0; +} +.timeline-wrapper .timeline-time span { + background: rgba(0, 69, 121, 0.65); + -moz-border-radius: 10px; + border-radius: 10px; + color: rgba(255, 255, 255, 0.85); + display: inline-block; + letter-spacing: 0; + padding: 10px 10px 5px 10px; + text-align: center; +} +.timeline-wrapper .timeline-time span:hover { + background: rgba(0, 69, 121, 0.95); + -webkit-transition: background 0.2s ease-in; + -moz-transition: background 0.2s ease-in; + -o-transition: background 0.2s ease-in; + transition: background 0.2s ease-in; +} +.timeline-series { + clear: left; + float: left; + margin: 0 12px 0 0; + padding: 4px 4px 4px 0; + position: relative; + width: 880px; +} +.timeline-series dt::before { + border-top: 3px solid rgba(0, 69, 121, 0.65); + content: ""; + display: inline-block; + height: 3px; + margin-right: 10px; + vertical-align: middle; + width: 10px; +} +.timeline-series dt { + clear: left; + font-size: 2em; + line-height: 1.2em; + margin: 0 0 12px; + text-transform: uppercase; + white-space: nowrap; +} +.timeline-series dt a { + color: rgba(255, 255, 255, 0.4); + cursor: pointer; +} +.timeline-series dt a .closed { + color: #999; + font-size: 1em; + margin-left: 0; +} +.timeline-series dt a .open { + color: #7DBADF; +} +.timeline-series dt a:hover { + color: rgba(255, 255, 255, 0.6); + -webkit-transition: color 0.2s ease-in; + -moz-transition: color 0.2s ease-in; + -o-transition: color 0.2s ease-in; + transition: color 0.2s ease-in; +} +.timeline-series dd { + padding-left: 24px; + width: 100%; +} +.timeline-series dd h3 { + color: #FFF; + clear: both; + float: left; + font-size: 1.5em; + margin: 0; + white-space: nowrap; +} +.tick { + background: rgba(0, 69, 121, 0.65); + clear: both; + display: block; + height: 2px; + left: 0; + width: 4px; + position: relative; +} +.tick-before { + top: -6px; +} +.tick-after { + top: -4px; +} +.timeline-event-content { + display: none; + margin-bottom: 40px; +} +.timeline-event-content p { + clear: left; + float: left; + font-size: 2em; + font-weight: 100; + line-height: 1.2em; + margin: 6px 0 10px; + width: 500px; +} +.timeline-event-content h4 { + clear: left; + float: left; + font-size: 1.4em; + font-weight: 400; + margin: 10px 0 0; + padding: 0 0 0 20px; +} +.timeline-event-content blockquote { + border-left: 2px solid #174262; + clear: left; + float: left; + line-height: 1.2em; + margin-left: 0; + padding: 0 30px; + width: 400px; +} +.timeline-event-content blockquote .attribution { + font-size: 0.7em; + text-align: right; +} +.timeline-event-content .media { + float: right; + padding: 0 0 12px; + width: 300px; +} +.timeline-event-content .media img { + border: 2px solid rgba(255, 255, 255, 0.85); + border-radius: 100px; + height: 200px; + margin: 0; + width: 200px; +} +.timeline-event-content .media p { + clear: both; + font-size: 1.4em; + margin: 15px 0; +} +.timeline-event-content .media p a { + text-transform: lowercase; +} diff --git a/contact-center/app/src/main/resources/static/js/timeliner/demo-future/css/timeliner-future.less b/contact-center/app/src/main/resources/static/js/timeliner/demo-future/css/timeliner-future.less new file mode 100644 index 00000000..27e04561 --- /dev/null +++ b/contact-center/app/src/main/resources/static/js/timeliner/demo-future/css/timeliner-future.less @@ -0,0 +1,278 @@ +@import url(https://fonts.googleapis.com/css?family=Josefin+Sans:100,400,700); +@import "/css/demo.less"; + +@color-body: #090A0F; +@color-time:saturate(fade(@color-accent,65%),50%); +@color-ink: fade(#FFF,85%); +@color-accent: #174262; +@color-accent-2: #78A8B2; +@color-contrast: #FF2A9C; +@font: "Josefin Sans",arial,sans serif; +@background-img: "../img/bg-space-mod.jpg"; + +body { + background: @color-body url(@background-img) no-repeat bottom right fixed; + -webkit-background-size: cover; + -moz-background-size: cover; + -o-background-size: cover; + background-size: cover; + color: @color-ink; + font-family:@font; + font-size:68.5%; + padding:40px 0; +} + +h1 { + color:@color-accent-2; + font-size:4.8em; + font-weight: 400; + text-transform: uppercase; +} + +h2 { + font-size:3.6em; + font-weight: 400; + text-transform: uppercase; +} + +.step1 { color:fade(@color-ink,20%); } +.step2 { color:fade(@color-ink,40%); } +.step3 { color:fade(@color-ink,60%); } + +.lead { + .step3; +} + +a:hover,a:link,a:visited { + color:@color-accent-2; +} + +.timeline-container { + border-left:4px solid @color-time; + margin:20px auto; + width:900px; +} + +.timeline-container-tick { + background: @color-time; + content:""; + display:block; + height:4px; + left:-8px; + width:14px; + position:relative; +} + +.timeline-container::before { + .timeline-container-tick; + top:-4px; +} +.timeline-container::after { + .timeline-container-tick; + top:4px; +} + +.timeline-toggle { + background:fade(@color-accent,65%); + border:0; + -webkit-border-radius:4px; + -moz-border-radius:4px; + border-radius:4px; + color:@color-ink; + cursor:pointer; + float:right; + font-size:12px; + margin-right:0; + padding:10px 15px; + text-transform: uppercase; + white-space:nowrap; +} +.timeline-toggle:hover { + background: fade(darken(@color-contrast,35%),80%); + -webkit-transition:background 0.2s ease-in; + -moz-transition:background 0.2s ease-in; + -o-transition:background 0.2s ease-in; + transition:background 0.2s ease-in; +} +.timeline-toggle:focus { + outline:none; +} + + +.timeline-wrapper { + clear:left; + float:left; + margin:0 0 12px; + width:900px; + .timeline-time::before { + border-top:4px solid @color-time; + content: ""; + display:inline-block; + height:4px; + margin-right:0px; + vertical-align: middle; + width:24px; + } + .timeline-time { + cursor: pointer; + font-size:2.8em; + font-weight:400; + margin:0 0 30px 0; + padding:0; + span { + background: @color-time; + -moz-border-radius: 10px; + border-radius: 10px; + color:@color-ink; + display: inline-block; + letter-spacing:0; + padding:10px 10px 5px 10px; + text-align: center; + } + span:hover { + background: fade(@color-time,95%); + -webkit-transition:background 0.2s ease-in; + -moz-transition:background 0.2s ease-in; + -o-transition:background 0.2s ease-in; + transition:background 0.2s ease-in; + } + + } +} + + +.timeline-series { + clear:left; + float:left; + margin:0 12px 0 0; + padding:4px 4px 4px 0; + position:relative; + width:880px; + dt::before { + border-top:3px solid @color-time; + content: ""; + display:inline-block; + height:3px; + margin-right:10px; + vertical-align: middle; + width:10px; + } + dt { + clear:left; + font-size:2em; + line-height:1.2em; + margin:0 0 12px; + text-transform: uppercase; + white-space:nowrap; + a { + .step2; + cursor:pointer; + .closed { + color:#999; + font-size:1em; + margin-left:0; + } + .open { + color:#7DBADF; + } + } + a:hover { + .step3; + -webkit-transition:color 0.2s ease-in; + -moz-transition:color 0.2s ease-in; + -o-transition:color 0.2s ease-in; + transition:color 0.2s ease-in; + } + } + dd { + padding-left:24px; + width:100%; + h3 { + color:#FFF; + clear:both; + float:left; + font-size:1.5em; + margin:0; + white-space:nowrap; + } + } +} + +.tick { + background:@color-time; + clear:both; + display:block; + height:2px; + left:0; + width:4px; + position:relative; +} + +.tick-before { + top: -6px; +} + +.tick-after { + top:-4px; +} + + +.timeline-event-content { + display:none; + margin-bottom:40px; + p { + clear:left; + float:left; + font-size:2em; + font-weight: 100; + line-height:1.2em; + margin:6px 0 10px; + width:500px; + } + h4 { + clear:left; + float:left; + font-size:1.4em; + font-weight:400; + margin:10px 0 0; + padding:0 0 0 20px; + } + blockquote { + border-left:2px solid @color-accent; + clear:left; + float:left; + line-height: 1.2em; + margin-left:0; + padding:0 30px; + width:400px; + .attribution { + font-size:0.7em; + text-align: right; + } + } + .media { + float:right; + padding:0 0 12px; + width:300px; + img { + border:2px solid @color-ink; + border-radius:100px; + height:200px; + margin:0; + width:200px; + } + p { + clear:both; + font-size:1.4em; + margin:15px 0; + a { + text-transform: lowercase; + } + } + a:link, a:visited { + } + a:hover { + } + } + +} diff --git a/contact-center/app/src/main/resources/static/js/timeliner/demo-future/img/bg-space-mod.jpg b/contact-center/app/src/main/resources/static/js/timeliner/demo-future/img/bg-space-mod.jpg new file mode 100644 index 00000000..3872edbe Binary files /dev/null and b/contact-center/app/src/main/resources/static/js/timeliner/demo-future/img/bg-space-mod.jpg differ diff --git a/contact-center/app/src/main/resources/static/js/timeliner/demo-future/img/event-cars.jpg b/contact-center/app/src/main/resources/static/js/timeliner/demo-future/img/event-cars.jpg new file mode 100644 index 00000000..dfb5b0d0 Binary files /dev/null and b/contact-center/app/src/main/resources/static/js/timeliner/demo-future/img/event-cars.jpg differ diff --git a/contact-center/app/src/main/resources/static/js/timeliner/demo-future/img/event-robots.jpg b/contact-center/app/src/main/resources/static/js/timeliner/demo-future/img/event-robots.jpg new file mode 100644 index 00000000..3720de09 Binary files /dev/null and b/contact-center/app/src/main/resources/static/js/timeliner/demo-future/img/event-robots.jpg differ diff --git a/contact-center/app/src/main/resources/static/js/timeliner/demo-future/img/event-singularity.gif b/contact-center/app/src/main/resources/static/js/timeliner/demo-future/img/event-singularity.gif new file mode 100644 index 00000000..97ba77e0 Binary files /dev/null and b/contact-center/app/src/main/resources/static/js/timeliner/demo-future/img/event-singularity.gif differ diff --git a/contact-center/app/src/main/resources/static/js/timeliner/demo-future/img/event-teleportation.jpg b/contact-center/app/src/main/resources/static/js/timeliner/demo-future/img/event-teleportation.jpg new file mode 100644 index 00000000..f27eeca6 Binary files /dev/null and b/contact-center/app/src/main/resources/static/js/timeliner/demo-future/img/event-teleportation.jpg differ diff --git a/contact-center/app/src/main/resources/static/js/timeliner/demo-future/img/event-urbanity.jpg b/contact-center/app/src/main/resources/static/js/timeliner/demo-future/img/event-urbanity.jpg new file mode 100644 index 00000000..aad99273 Binary files /dev/null and b/contact-center/app/src/main/resources/static/js/timeliner/demo-future/img/event-urbanity.jpg differ diff --git a/contact-center/app/src/main/resources/static/js/timeliner/demo-future/timeliner-future.html b/contact-center/app/src/main/resources/static/js/timeliner/demo-future/timeliner-future.html new file mode 100644 index 00000000..b34269a3 --- /dev/null +++ b/contact-center/app/src/main/resources/static/js/timeliner/demo-future/timeliner-future.html @@ -0,0 +1,171 @@ + + + + + Timeliner.js Demo + + + + + +
+

Timeliner.js

+

Into The Future

+ +

Example of the timeliner.js jquery plugin with advanced, custom theming. All theming accomplished with CSS and minor modifications to the HTML markup. No modifications to the plugin's core javascript. Note that this demonstration does not fully support older browsers (e.g, before Internet Explorer 9) due to the use of CSS3 properties. Also view the original demo.

+ +
+ + + +
+ +
+

2000

+
+ +
Robots
+ +
+
+ singing robots +

Listen

+
+ +
+

The world is very different ever since the robotic uprising of the mid-nineties. There is no more unhappiness.

+

Affirmative.

+

We no longer say yes, instead we say affirmative.

+

Yes, affirmative.

+

Unless its a more colloquial situation with a few robo friends.

+

There is only one type of dance, the robot.

+

And the robo-boogie.

+

Oh yes, two kinds of dances.

+
+ +
+
+ + +
+
+ + +
+

2062

+
+ +
Flying Cars
+ +
+
+ flying car +

See it in Action

+
+ +

A flying car is hypothetical personal aircraft that provides door-to-door aerial transportation (e.g., from home to work or to the supermarket) as conveniently as a car but without the requirement for roads, runways or other specially-prepared operating areas.

+

The flying car has been depicted in works of fantasy and science fiction such as The Jetsons, Star Wars, Blade Runner, Back to the Future Part II and The Fifth Element. The Jetsons took place in 2062.

+ +
+
+ + +
Aged Urbanity
+ +
+
+ jam packed city fuels tempers +

read the predictions

+
+ +

From Discover magazine's "The State of the World: 2062":

+ +
+

6 billion people live in cities—the population of the entire world at the turn of the century.

+
+
+

Earth now home to 2 billion people age 60 and over.

+
+
+

Coastal cities go under. Renewable energy rules the day. Cows use up precious water and drive the ongoing greenhouse effect.

+
+
+

Incomes skyrocket in developing nations.

+
+
+


Ice caps melt. Industry booms at top of the world.

+ +
+
+ + +
+
+ +
+

2265

+
+ +
Teleportation
+ +
+ +
+ teleporting humans +

Try It Now

+
+ +

Teleportation, or Teletransportation, is the theoretical transfer of matter or energy from one point to another without traversing the physical space between them. It is a common subject of science fiction literature, film, and television.

+ +

The original Star Trek series is reported to have taken place from 2265 to 2271.

+ +
+
+
+ +
+ +
+

2888

+
+ +
Singularity
+ +
+ +
+ + +
+ +

The technological singularity hypothesis is that accelerating progress in technologies will cause a runaway effect wherein artificial intelligence will exceed human intellectual capacity and control, thus radically changing or even ending civilization in an event called the singularity.

+ +
+
+
+
+ + + +
+ +
+ +
+ + + + + + + + + \ No newline at end of file diff --git a/contact-center/app/src/main/resources/static/js/timeliner/images/timeline_century_tick.gif b/contact-center/app/src/main/resources/static/js/timeliner/images/timeline_century_tick.gif new file mode 100644 index 00000000..3b3d3075 Binary files /dev/null and b/contact-center/app/src/main/resources/static/js/timeliner/images/timeline_century_tick.gif differ diff --git a/contact-center/app/src/main/resources/static/js/timeliner/images/timeline_decade_tick.gif b/contact-center/app/src/main/resources/static/js/timeliner/images/timeline_decade_tick.gif new file mode 100644 index 00000000..534d2e14 Binary files /dev/null and b/contact-center/app/src/main/resources/static/js/timeliner/images/timeline_decade_tick.gif differ diff --git a/contact-center/app/src/main/resources/static/js/timeliner/inc/colorbox.css b/contact-center/app/src/main/resources/static/js/timeliner/inc/colorbox.css new file mode 100755 index 00000000..303b202b --- /dev/null +++ b/contact-center/app/src/main/resources/static/js/timeliner/inc/colorbox.css @@ -0,0 +1,69 @@ +/* + Colorbox Core Style: + The following CSS is consistent between example themes and should not be altered. +*/ +#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;} +#cboxOverlay{position:fixed; width:100%; height:100%;} +#cboxMiddleLeft, #cboxBottomLeft{clear:left;} +#cboxContent{position:relative;} +#cboxLoadedContent{overflow:auto; -webkit-overflow-scrolling: touch;} +#cboxTitle{margin:0;} +#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;} +#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;} +.cboxPhoto{float:left; margin:auto; border:0; display:block; max-width:none; -ms-interpolation-mode:bicubic;} +.cboxIframe{width:100%; height:100%; display:block; border:0;} +#colorbox, #cboxContent, #cboxLoadedContent{box-sizing:content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box;} + +/* + User Style: + Change the following styles to modify the appearance of Colorbox. They are + ordered & tabbed in a way that represents the nesting of the generated HTML. +*/ +#cboxOverlay{background:url(images/overlay.png) repeat 0 0;} +#colorbox{outline:0;} + #cboxTopLeft{width:21px; height:21px; background:url(images/controls.png) no-repeat -101px 0;} + #cboxTopRight{width:21px; height:21px; background:url(images/controls.png) no-repeat -130px 0;} + #cboxBottomLeft{width:21px; height:21px; background:url(images/controls.png) no-repeat -101px -29px;} + #cboxBottomRight{width:21px; height:21px; background:url(images/controls.png) no-repeat -130px -29px;} + #cboxMiddleLeft{width:21px; background:url(images/controls.png) left top repeat-y;} + #cboxMiddleRight{width:21px; background:url(images/controls.png) right top repeat-y;} + #cboxTopCenter{height:21px; background:url(images/border.png) 0 0 repeat-x;} + #cboxBottomCenter{height:21px; background:url(images/border.png) 0 -29px repeat-x;} + #cboxContent{background:#fff; overflow:hidden;} + .cboxIframe{background:#fff;} + #cboxError{padding:50px; border:1px solid #ccc;} + #cboxLoadedContent{margin-bottom:28px;} + #cboxTitle{position:absolute; bottom:4px; left:0; text-align:center; width:100%; color:#949494;} + #cboxCurrent{position:absolute; bottom:4px; left:58px; color:#949494;} + #cboxLoadingOverlay{background:url(images/loading_background.png) no-repeat center center;} + #cboxLoadingGraphic{background:url(images/loading.gif) no-repeat center center;} + + /* these elements are buttons, and may need to have additional styles reset to avoid unwanted base styles */ + #cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose {border:0; padding:0; margin:0; overflow:visible; width:auto; background:none; } + + /* avoid outlines on :active (mouseclick), but preserve outlines on :focus (tabbed navigating) */ + #cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active {outline:0;} + + #cboxSlideshow{position:absolute; bottom:4px; right:30px; color:#0092ef;} + #cboxPrevious{position:absolute; bottom:0; left:0; background:url(images/controls.png) no-repeat -75px 0; width:25px; height:25px; text-indent:-9999px;} + #cboxPrevious:hover{background-position:-75px -25px;} + #cboxNext{position:absolute; bottom:0; left:27px; background:url(images/controls.png) no-repeat -50px 0; width:25px; height:25px; text-indent:-9999px;} + #cboxNext:hover{background-position:-50px -25px;} + #cboxClose{position:absolute; bottom:0; right:0; background:url(images/controls.png) no-repeat -25px 0; width:25px; height:25px; text-indent:-9999px;} + #cboxClose:hover{background-position:-25px -25px;} + +/* + The following fixes a problem where IE7 and IE8 replace a PNG's alpha transparency with a black fill + when an alpha filter (opacity change) is set on the element or ancestor element. This style is not applied to or needed in IE9. + See: http://jacklmoore.com/notes/ie-transparency-problems/ +*/ +.cboxIE #cboxTopLeft, +.cboxIE #cboxTopCenter, +.cboxIE #cboxTopRight, +.cboxIE #cboxBottomLeft, +.cboxIE #cboxBottomCenter, +.cboxIE #cboxBottomRight, +.cboxIE #cboxMiddleLeft, +.cboxIE #cboxMiddleRight { + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF); +} \ No newline at end of file diff --git a/contact-center/app/src/main/resources/static/js/timeliner/inc/colorbox.js b/contact-center/app/src/main/resources/static/js/timeliner/inc/colorbox.js new file mode 100644 index 00000000..097d400b --- /dev/null +++ b/contact-center/app/src/main/resources/static/js/timeliner/inc/colorbox.js @@ -0,0 +1,6 @@ +/*! + jQuery Colorbox v1.4.15 - 2013-04-22 + (c) 2013 Jack Moore - jacklmoore.com/colorbox + license: http://www.opensource.org/licenses/mit-license.php +*/ +(function(t,e,i){function o(i,o,n){var r=e.createElement(i);return o&&(r.id=te+o),n&&(r.style.cssText=n),t(r)}function n(){return i.innerHeight?i.innerHeight:t(i).height()}function r(t){var e=H.length,i=(j+t)%e;return 0>i?e+i:i}function h(t,e){return Math.round((/%/.test(t)?("x"===e?E.width():n())/100:1)*parseInt(t,10))}function l(t,e){return t.photo||t.photoRegex.test(e)}function s(t,e){return t.retinaUrl&&i.devicePixelRatio>1?e.replace(t.photoRegex,t.retinaSuffix):e}function a(t){"contains"in x[0]&&!x[0].contains(t.target)&&(t.stopPropagation(),x.focus())}function d(){var e,i=t.data(A,Z);null==i?(_=t.extend({},Y),console&&console.log&&console.log("Error: cboxElement missing settings object")):_=t.extend({},i);for(e in _)t.isFunction(_[e])&&"on"!==e.slice(0,2)&&(_[e]=_[e].call(A));_.rel=_.rel||A.rel||t(A).data("rel")||"nofollow",_.href=_.href||t(A).attr("href"),_.title=_.title||A.title,"string"==typeof _.href&&(_.href=t.trim(_.href))}function c(i,o){t(e).trigger(i),se.trigger(i),t.isFunction(o)&&o.call(A)}function u(){var t,e,i,o,n,r=te+"Slideshow_",h="click."+te;_.slideshow&&H[1]?(e=function(){clearTimeout(t)},i=function(){(_.loop||H[j+1])&&(t=setTimeout(J.next,_.slideshowSpeed))},o=function(){M.html(_.slideshowStop).unbind(h).one(h,n),se.bind(ne,i).bind(oe,e).bind(re,n),x.removeClass(r+"off").addClass(r+"on")},n=function(){e(),se.unbind(ne,i).unbind(oe,e).unbind(re,n),M.html(_.slideshowStart).unbind(h).one(h,function(){J.next(),o()}),x.removeClass(r+"on").addClass(r+"off")},_.slideshowAuto?o():n()):x.removeClass(r+"off "+r+"on")}function f(i){G||(A=i,d(),H=t(A),j=0,"nofollow"!==_.rel&&(H=t("."+ee).filter(function(){var e,i=t.data(this,Z);return i&&(e=t(this).data("rel")||i.rel||this.rel),e===_.rel}),j=H.index(A),-1===j&&(H=H.add(A),j=H.length-1)),g.css({opacity:parseFloat(_.opacity),cursor:_.overlayClose?"pointer":"auto",visibility:"visible"}).show(),V&&x.add(g).removeClass(V),_.className&&x.add(g).addClass(_.className),V=_.className,K.html(_.close).show(),$||($=q=!0,x.css({visibility:"hidden",display:"block"}),W=o(ae,"LoadedContent","width:0; height:0; overflow:hidden").appendTo(v),D=b.height()+k.height()+v.outerHeight(!0)-v.height(),B=C.width()+T.width()+v.outerWidth(!0)-v.width(),N=W.outerHeight(!0),z=W.outerWidth(!0),_.w=h(_.initialWidth,"x"),_.h=h(_.initialHeight,"y"),J.position(),u(),c(ie,_.onOpen),O.add(F).hide(),x.focus(),e.addEventListener&&(e.addEventListener("focus",a,!0),se.one(he,function(){e.removeEventListener("focus",a,!0)})),_.returnFocus&&se.one(he,function(){t(A).focus()})),w())}function p(){!x&&e.body&&(X=!1,E=t(i),x=o(ae).attr({id:Z,"class":t.support.opacity===!1?te+"IE":"",role:"dialog",tabindex:"-1"}).hide(),g=o(ae,"Overlay").hide(),S=o(ae,"LoadingOverlay").add(o(ae,"LoadingGraphic")),y=o(ae,"Wrapper"),v=o(ae,"Content").append(F=o(ae,"Title"),I=o(ae,"Current"),P=t('