qms-angular 1.0.30 → 1.0.31

package/src/assets/qms-ckeditor-plugin/src/plugins/tooltip/tooltipediting.js

@@ -0,0 +1,280 @@
+import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
+import '../../themes/tyles/tooltip.css';
+import { TOOLTIP_CUSTOM_PROPERTY, TOOLTIP_ATTRIBUTE, INSERT_TOOLTIP_COMMAND, REMOVE_TOOLTIP_COMMAND, isTyping, shouldCopyAttributes} from './utils';
+import InsertTooltipCommand from './inserttooltipcommand';
+import RemoveTooltipCommand from './removetooltipcommand';
+import {MouseObserver} from '@ckeditor/ckeditor5-engine';
+import { keyCodes } from '@ckeditor/ckeditor5-utils';
+import { Input, TwoStepCaretMovement, findAttributeRange  } from '@ckeditor/ckeditor5-typing';
+import { ClipboardPipeline } from '@ckeditor/ckeditor5-clipboard';
+
+export default class TooltipEditing extends Plugin {
+ 
+	static get pluginName() {
+		return 'TooltipEditing';
+	} 
+
+	static get requires() {
+		// Clipboard is required for handling cut and paste events while typing over the tooltip.
+		return [ TwoStepCaretMovement, Input, ClipboardPipeline ];
+	}
+
+    init() {
+        const editor = this.editor;
+ 
+       editor.model.schema.extend('$text', { allowAttributes: TOOLTIP_ATTRIBUTE });
+       editor.conversion.for('upcast').elementToAttribute({
+            view: {
+                name: 'span',
+                attributes: {
+                    tooltip: true
+                }
+            },
+            model: {
+                key: TOOLTIP_ATTRIBUTE,
+                value: viewElement => viewElement.getAttribute(TOOLTIP_ATTRIBUTE)
+            }
+        });
+ 
+        editor.conversion.for('downcast').attributeToElement({ 
+            model: TOOLTIP_ATTRIBUTE,
+            view: (modelAttributeValue, { writer: viewWriter }) =>{
+                const attributes = { class: 'np-tooltip'};
+                attributes[TOOLTIP_ATTRIBUTE] = modelAttributeValue;
+                
+                const tooltipElement =  viewWriter.createAttributeElement('span', attributes);
+                viewWriter.setCustomProperty(TOOLTIP_CUSTOM_PROPERTY, true, tooltipElement);
+                return tooltipElement;
+            }
+        });
+
+        editor.commands.add(INSERT_TOOLTIP_COMMAND, new InsertTooltipCommand(editor));
+		editor.commands.add(REMOVE_TOOLTIP_COMMAND, new RemoveTooltipCommand(editor));
+
+		// Enable two-step caret movement for `data-tooltip` attribute.
+		const twoStepCaretMovementPlugin = editor.plugins.get(TwoStepCaretMovement);
+		twoStepCaretMovementPlugin.registerAttribute(TOOLTIP_ATTRIBUTE);
+
+		// Change the attributes of the selection in certain situations after the link was inserted into the document.
+		this._enableInsertContentSelectionAttributesFixer();
+
+        // Handle a click at the beginning/end of a tooltip element.
+		this._enableClickingAtBeginingOrEndTooltip();
+ 
+        // Handle typing over the tooltip element.
+		this._enableTypingOverTooltip();
+
+		// Handle removing the content after the tooltip element.
+		this._handleDeleteContent();
+    }
+
+	_enableInsertContentSelectionAttributesFixer() {
+		const editor = this.editor;
+		const model = editor.model;
+		const selection = model.document.selection;
+ 
+		this.listenTo(model, 'insertContent', () => {
+			const nodeBefore = selection.anchor.nodeBefore;
+			const nodeAfter = selection.anchor.nodeAfter;
+ 
+			if (!selection.hasAttribute(TOOLTIP_ATTRIBUTE)) {
+				return;
+			}
+ 
+			if (!nodeBefore) {
+				return;
+			}
+ 
+			if (!nodeBefore.hasAttribute(TOOLTIP_ATTRIBUTE)) {
+				return;
+			}
+ 
+			if (nodeAfter && nodeAfter.hasAttribute(TOOLTIP_ATTRIBUTE)) {
+				return;
+			}
+			//console.log('_enableInsertContentSelectionAttributesFixer==>insertContent==>writer.removeSelectionAttribute(TOOLTIP_ATTRIBUTE)');
+
+			model.change(writer => {
+				writer.removeSelectionAttribute(TOOLTIP_ATTRIBUTE);
+			});
+		}, { priority: 'low' });
+	}
+
+    _enableTypingOverTooltip() {
+		const editor = this.editor;
+		const view = editor.editing.view;
+
+		// Selection attributes when started typing over the tooltip.
+		let selectionAttributes;
+
+		// Whether pressed `Backspace` or `Delete`. If so, attributes should not be preserved.
+		let deletedContent;
+
+		// Detect pressing `Backspace` / `Delete`.
+	
+		this.listenTo(view.document, 'delete', () => {
+			deletedContent = true;
+		}, { priority: 'high' });
+
+		// Listening to `model#deleteContent` allows detecting whether selected content was the tooltip.
+		// If so, before removing the element, we will copy its attributes.
+		this.listenTo(editor.model, 'deleteContent', () => {
+			const selection = editor.model.document.selection; 
+
+			// Copy attributes only if anything is selected.
+			if (selection.isCollapsed) {
+				return;
+			}
+
+			// When the content was deleted, do not preserve attributes.
+			if (deletedContent) {
+				deletedContent = false;
+				return;
+			}
+
+			// Enabled only when typing.
+			if (!isTyping(editor)) {
+				return;
+			}
+
+			if (shouldCopyAttributes(editor.model)) {
+				selectionAttributes = selection.getAttributes();
+			}
+		}, { priority: 'high' });
+
+		// Listening to `model#insertContent` allows detecting the content insertion.
+		// We want to apply attributes that were removed while typing over the tooltip.
+		this.listenTo(editor.model, 'insertContent', (evt, [ element ]) => {
+			deletedContent = false;
+			//console.log('_enableTypingOverTooltip==>insertContent==>isTyping(editor): ' + isTyping(editor));
+ 
+			// Enabled only when typing.
+			if (!isTyping(editor)) {
+				return;
+			}
+
+			if (!selectionAttributes) {
+				return;
+			}
+			//console.log('_enableTypingOverTooltip==>insertContent==>selectionAttributes: ');
+			//console.log(selectionAttributes);
+
+			editor.model.change(writer => {
+				for (const [ attribute, value ] of selectionAttributes) {
+					writer.setAttribute(attribute, value, element);
+				}
+			});
+
+			selectionAttributes = null;
+		}, { priority: 'high' });
+	}
+
+    _enableClickingAtBeginingOrEndTooltip() {
+		const editor = this.editor;
+		const selection = editor.model.document.selection;
+		editor.editing.view.addObserver(MouseObserver);
+		let clicked = false;
+
+		// Detect the click.
+		this.listenTo(editor.editing.view.document, 'mousedown', () => {
+			clicked = true;
+		});
+
+		// When the selection has changed...
+		this.listenTo(editor.editing.view.document, 'selectionChange', () => {
+ 
+			if (!clicked) {
+				return;
+			}
+
+			// ...and it was caused by the click...
+			clicked = false;
+ 
+			// ...and no text is selected...
+			if (!selection.isCollapsed) {
+				return;
+			}
+
+			//console.log('_enableClickingAtBeginingOrEndTooltip==>selectionChange==>selection.hasAttribute(TOOLTIP_ATTRIBUTE): ' + selection.hasAttribute(TOOLTIP_ATTRIBUTE));
+			// ...and clicked text is the tooltip...
+			if (!selection.hasAttribute(TOOLTIP_ATTRIBUTE)) {
+				return;
+			}
+
+			const position = selection.getFirstPosition();
+			const selectedRange = findAttributeRange(position, TOOLTIP_ATTRIBUTE, selection.getAttribute(TOOLTIP_ATTRIBUTE), editor.model);
+
+			// ...check whether clicked start/end boundary of the tooltip.
+			// If so, remove the `tooltip` attribute.
+			const isTouching = position.isTouching(selectedRange.start) || position.isTouching(selectedRange.end);
+			//console.log('_enableClickingAtBeginingOrEndTooltip==>selectionChange==>isTouching: ' + isTouching);
+			if (isTouching) {
+				editor.model.change(writer => {
+					writer.removeSelectionAttribute(TOOLTIP_ATTRIBUTE);
+				});
+			}
+		});
+	}
+
+    _handleDeleteContent() {
+		const editor = this.editor;
+		const model = editor.model;
+		const selection = model.document.selection;
+		const view = editor.editing.view;
+
+		// A flag whether attributes `tooltip` attribute should be preserved.
+		let shouldPreserveAttributes = false;
+
+		// A flag whether the `Backspace` key was pressed.
+		let hasBackspacePressed = false;
+
+		// Detect pressing `Backspace`.
+		this.listenTo(view.document, 'delete', (evt, data) => {
+			hasBackspacePressed = data.domEvent.keyCode === keyCodes.backspace;
+		}, { priority: 'high' });
+
+		// Before removing the content, check whether the selection is inside a tooltip or at the end of tooltip but with 2-SCM enabled.
+		// If so, we want to preserve tooltip attributes.
+		this.listenTo(model, 'deleteContent', () => {
+			// Reset the state.
+			shouldPreserveAttributes = false;
+
+			const position = selection.getFirstPosition();
+			const tooltip = selection.getAttribute(TOOLTIP_ATTRIBUTE);
+
+			if (!tooltip) {
+				return;
+			}
+
+			const selectedRange = findAttributeRange(position, TOOLTIP_ATTRIBUTE, tooltip, model);
+
+			// Preserve `tooltip` attribute if the selection is in the middle of the tooltip or
+			// the selection is at the end of the tooltip and 2-SCM is activated.
+			shouldPreserveAttributes = selectedRange.containsPosition(position) || selectedRange.end.isEqual(position);
+		}, { priority: 'high' });
+
+		// After removing the content, check whether the current selection should preserve the `tooltip` attribute.
+		this.listenTo(model, 'deleteContent', () => {
+			// If didn't press `Backspace`.
+			if (!hasBackspacePressed) {
+				return;
+			}
+	 
+			//console.log('_handleDeleteContent==>deleteContent==>shouldPreserveAttributes: ' + shouldPreserveAttributes);
+
+			hasBackspacePressed = false;
+
+			// Disable the mechanism if inside a tooltip (`<$text url="foo">F[]oo</$text>` or <$text url="foo">Foo[]</$text>`).
+			if (shouldPreserveAttributes) {
+				return;
+			}
+
+			// Use `model.enqueueChange()` in order to execute the callback at the end of the changes process.
+			editor.model.enqueueChange(writer => {
+				writer.removeSelectionAttribute(TOOLTIP_ATTRIBUTE);
+			});
+		}, { priority: 'low' });
+	}
+
+}
+ 

package/src/assets/qms-ckeditor-plugin/src/plugins/tooltip/tooltipui.js

@@ -0,0 +1,203 @@
+
+import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
+import informationIcon from '../../themes/icons/information.svg';
+import * as QMSCKEditorConstant from '../common/qmsCKEditorConstant';
+import * as QMSCKEditorService from '../common/qmsCKEditorService';
+import ActionsView from './ui/actionsview';
+import { ClickObserver } from '@ckeditor/ckeditor5-engine';
+import { ButtonView, ContextualBalloon, clickOutsideHandler } from '@ckeditor/ckeditor5-ui';
+import { TOOLTIP_ATTRIBUTE, findTooltipElementAncestor, getSelectionParent, INSERT_TOOLTIP_COMMAND, REMOVE_TOOLTIP_COMMAND} from './utils';
+
+export default class TooltipUI extends Plugin {
+	static get requires() {
+		return [ContextualBalloon];
+	}
+ 
+	static get pluginName() {
+		return 'TooltipUI';
+	}
+
+	get _isVisible() {
+		return this._balloon.visibleView === this._actionView;
+	}
+
+	get _isInBalloon() {
+		return this._balloon.hasView(this._actionView);
+	}
+ 
+    init() {
+        const editor = this.editor;
+        const t = editor.t;
+        const view = editor.editing.view;
+ 
+        view.addObserver(ClickObserver);
+        this._createActionsView();
+ 
+        editor.ui.componentFactory.add('tooltip', locale => {
+            const buttonView = new ButtonView(locale);
+
+            buttonView.set({
+                label: t('Tooltip'),
+                icon: informationIcon,
+                withText: true,
+                tooltip: true
+            });
+ 
+			// Bind button to the command.
+            const insertTooltipCommand = editor.commands.get(INSERT_TOOLTIP_COMMAND);
+			buttonView.bind('isEnabled').to(insertTooltipCommand, 'isEnabled' );
+			buttonView.bind('isOn').to(insertTooltipCommand, 'value', value => !!value );
+
+            buttonView.on('execute', () => {
+				editor.execute(INSERT_TOOLTIP_COMMAND);
+            });
+
+            return buttonView;
+        });
+    }
+ 
+	destroy() {
+		super.destroy();
+		this._actionView.destroy();
+	}
+ 
+	_createActionsView() {
+		const editor = this.editor;
+		const view = editor.editing.view;
+		const viewDocument = view.document;
+		this._balloon = this.editor.plugins.get('ContextualBalloon');
+		this._actionView = new ActionsView(editor.locale); 
+
+		const insertTooltipCommand = editor.commands.get(INSERT_TOOLTIP_COMMAND);
+		const removeTooltipCommand = editor.commands.get(REMOVE_TOOLTIP_COMMAND);
+ 
+		this._actionView.bind(TOOLTIP_ATTRIBUTE).to( insertTooltipCommand, 'value');
+		this._actionView.editButtonView.bind('isEnabled').to(insertTooltipCommand);
+		this._actionView.removeButtonView.bind('isEnabled').to(removeTooltipCommand);
+	 
+		this.listenTo(this._actionView, 'edit', () => {
+            const tooltip = { text: '', content: '' };
+            const selectedElement = this._getSelectedTooltipElement();
+            if(selectedElement){
+                tooltip.content = selectedElement.getAttribute(TOOLTIP_ATTRIBUTE);
+                if(selectedElement.childCount > 0){
+                    tooltip.text = selectedElement.getChild(0).data;
+                }
+            }
+            QMSCKEditorService.tooltipNotify(tooltip);
+            window[QMSCKEditorConstant.QMSCK_TOOLTIP_IS_PROCESSING] = false;
+			this._hideActionsView(true);
+		});
+
+		this.listenTo(this._actionView, 'remove', () => {
+            editor.execute(REMOVE_TOOLTIP_COMMAND);
+			this._hideActionsView(true);
+		});
+ 
+		this._actionView.keystrokes.set('Esc', (data, cancel) => {
+			this._hideActionsView(true);
+			cancel();
+		});
+
+        this.listenTo(viewDocument, 'click', () => {
+            const selectedElement = this._getSelectedTooltipElement();
+			if (!!selectedElement) {
+				// Then show panel but keep focus inside editor editable.
+				this._showActionsView();
+			}
+		});
+ 
+		// Close on click outside of balloon panel element.
+		clickOutsideHandler({
+			emitter: this._actionView,
+			activator: () => this._isVisible,
+			contextElements: [ this._balloon.view.element ],
+			callback: () => this._hideActionsView()
+		});
+	}
+
+	_showActionsView() {
+		if (this._isVisible) {
+			return;
+		}
+		const editor = this.editor;
+		const viewDocument = editor.editing.view.document;
+		//const command = editor.commands.get('imageTextAlternative');
+		//const labeledInput = this._actionView.labeledInput;
+ 
+		if (!this._isInBalloon) {
+			this._balloon.add({
+				view: this._actionView,
+				position: this._getBalloonPositionData()
+			});
+		}
+ 
+		// Reposition the balloon or hide the form if an tooltip is no longer selected.
+		const prevSelectedElement = this._getSelectedTooltipElement();
+		const prevSelectionParent = getSelectionParent(viewDocument);
+		 
+		this.listenTo(editor.ui, 'update', () => {
+			const selectedElement = this._getSelectedTooltipElement();
+			const selectionParent = getSelectionParent(viewDocument);
+
+			if ((prevSelectedElement && !selectedElement) || (!prevSelectedElement && selectionParent !== prevSelectionParent)) {
+				this._hideActionsView(true);
+			}
+			else if (this._isVisible) 
+			{
+				this._balloon.updatePosition(this._getBalloonPositionData());              
+			}
+		});
+	}
+
+     _getBalloonPositionData() {
+        const editingView = this.editor.editing.view;
+        const selectedElement = this._getSelectedTooltipElement();
+        return {
+            target: editingView.domConverter.viewToDom(selectedElement)
+        };
+    }
+
+	_hideActionsView(focusEditable) {
+		if (!this._isInBalloon) {
+			return;
+		}
+ 
+		if (this._actionView.focusTracker.isFocused) {
+			this._actionView.removeButtonView.focus();
+		}
+        this.stopListening(this.editor.ui, 'update');
+		this._balloon.remove(this._actionView);
+
+		if (focusEditable) {
+			this.editor.editing.view.focus();
+		}
+	}
+
+    _getSelectedTooltipElement() {
+		const view = this.editor.editing.view;
+		const selection = view.document.selection;
+		if (selection.isCollapsed) {
+			return findTooltipElementAncestor(selection.getFirstPosition());
+		} 
+        else {
+			// The range for fully selected link is usually anchored in adjacent text nodes.
+			// Trim it to get closer to the actual link element.
+			const range = selection.getFirstRange().getTrimmed();
+			const startTooltip = findTooltipElementAncestor(range.start);
+			const endTooltip = findTooltipElementAncestor(range.end);
+			if (!startTooltip || startTooltip != endTooltip) {
+				return null;
+			}
+
+			// Check if the link element is fully selected.
+			if (view.createRangeIn(startTooltip).getTrimmed().isEqual(range)) {
+				return startTooltip;
+			} 
+			else {
+				return null;
+			}
+		}
+	}
+}
+ 

package/src/assets/qms-ckeditor-plugin/src/plugins/tooltip/ui/actionsview.js

@@ -0,0 +1,95 @@
+import { ButtonView, View, ViewCollection, FocusCycler } from '@ckeditor/ckeditor5-ui';
+import { FocusTracker, KeystrokeHandler } from '@ckeditor/ckeditor5-utils';
+import { icons } from '@ckeditor/ckeditor5-core';
+import '@ckeditor/ckeditor5-ui/theme/components/responsive-form/responsiveform.css';
+import '../../../themes/tyles/linkactions.css';
+import { TOOLTIP_ATTRIBUTE } from '../utils';
+export default class ActionsView extends View {
+	constructor( locale ) {
+		super( locale );
+
+		const t = locale.t;
+ 
+		this.focusTracker = new FocusTracker();
+ 
+		this.keystrokes = new KeystrokeHandler();
+  
+		this.removeButtonView = this._createButton(t('Remove tooltip'), icons.eraser, 'remove');
+ 
+		this.editButtonView = this._createButton(t('Edit tooltip'), icons.pencil, 'edit');
+ 
+		this.set(TOOLTIP_ATTRIBUTE);
+		 
+		this._focusables = new ViewCollection();
+ 
+		this._focusCycler = new FocusCycler( {
+			focusables: this._focusables,
+			focusTracker: this.focusTracker,
+			keystrokeHandler: this.keystrokes,
+			actions: {
+				// Navigate fields backwards using the Shift + Tab keystroke.
+				focusPrevious: 'shift + tab',
+				// Navigate fields forwards using the Tab key.
+				focusNext: 'tab'
+			}
+		} );
+
+		this.setTemplate( {
+			tag: 'div',
+
+			attributes: {
+				class: [
+					'ck',
+					'ck-link-actions',
+					'ck-responsive-form'
+				],
+				// https://github.com/ckeditor/ckeditor5-link/issues/90
+				tabindex: '-1'
+			},
+
+			children: [
+				this.editButtonView,
+				this.removeButtonView
+			]
+		} );
+	}
+
+	render() {
+		super.render();
+
+		const childViews = [
+			this.editButtonView,
+			this.removeButtonView
+		];
+
+		childViews.forEach( v => {
+			// Register the view as focusable.
+			this._focusables.add( v );
+
+			// Register the view in the focus tracker.
+			this.focusTracker.add( v.element );
+		} );
+
+		// Start listening for the keystrokes coming from #element.
+		this.keystrokes.listenTo( this.element );
+	}
+
+	focus() {
+		this._focusCycler.focusFirst();
+	}
+
+	_createButton( label, icon, eventName ) {
+		const button = new ButtonView( this.locale );
+
+		button.set( {
+			label,
+			icon,
+			tooltip: true
+		} );
+
+		button.delegate('execute').to(this, eventName);
+
+		return button;
+	}
+}
+	 

package/src/assets/qms-ckeditor-plugin/src/plugins/tooltip/utils.js

@@ -0,0 +1,70 @@
+
+export const TOOLTIP_CUSTOM_PROPERTY = 'tooltip';
+export const TOOLTIP_ATTRIBUTE = 'data-tooltip';
+export const INSERT_TOOLTIP_COMMAND = 'inserttooltip';
+export const REMOVE_TOOLTIP_COMMAND = 'removetooltip';
+
+export function isTooltipElement(node) {
+	return node.is('attributeElement') && !!node.getCustomProperty(TOOLTIP_CUSTOM_PROPERTY);
+}
+
+export function findTooltipElementAncestor(position) {
+	return position.getAncestors().find(ancestor => isTooltipElement(ancestor));
+}
+
+export function isTooltipAllowed(element, schema) {
+	if (!element) {
+		return false;
+	}
+	return element.is('element', 'span') && schema.checkAttribute('span', TOOLTIP_ATTRIBUTE);
+}
+
+export function getSelectionParent(viewDocument) {
+	return viewDocument.selection.focus.getAncestors()
+		.reverse()
+		.find(node => node.is('element'));
+}
+
+export function isTyping(editor) {
+	const input = editor.plugins.get('Input');
+	return input.isInput(editor.model.change(writer => writer.batch));
+}
+
+
+export function shouldCopyAttributes(model) {
+	const selection = model.document.selection;
+	const firstPosition = selection.getFirstPosition();
+	const lastPosition = selection.getLastPosition();
+	const nodeAtFirstPosition = firstPosition.nodeAfter;
+
+	// The text tooltip node does not exist...
+	if (!nodeAtFirstPosition) {
+		return false;
+	}
+
+	// ...or it isn't the text node...
+	if (!nodeAtFirstPosition.is('$text')) {
+		return false;
+	}
+
+	// ...or isn't the tooltip.
+	if (!nodeAtFirstPosition.hasAttribute(TOOLTIP_ATTRIBUTE)) {
+		return false;
+	}
+
+	// `textNode` = the position is inside the tooltip element.
+	// `nodeBefore` = the position is at the end of the tooltip element.
+	const nodeAtLastPosition = lastPosition.textNode || lastPosition.nodeBefore;
+
+	// If both references the same node selection contains a single text node.
+	if (nodeAtFirstPosition === nodeAtLastPosition) {
+		return true;
+	}
+
+	// If nodes are not equal, maybe the tooltip nodes has defined additional attributes inside.
+	// First, we need to find the entire tooltip range.
+	const tooltipRange = findAttributeRange(firstPosition, TOOLTIP_ATTRIBUTE, nodeAtFirstPosition.getAttribute(TOOLTIP_ATTRIBUTE), model);
+
+	// Then we can check whether selected range is inside the found tooltip range. If so, attributes should be preserved.
+	return tooltipRange.containsRange(model.createRange(firstPosition, lastPosition) , true);
+}

package/src/assets/qms-ckeditor-plugin/src/themes/icons/information.svg

@@ -0,0 +1,50 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
+<g>
+	<g>
+		<g>
+			<path d="M256,85.333c-23.531,0-42.667,19.135-42.667,42.667s19.135,42.667,42.667,42.667s42.667-19.135,42.667-42.667
+				S279.531,85.333,256,85.333z M256,149.333c-11.76,0-21.333-9.573-21.333-21.333s9.573-21.333,21.333-21.333
+				s21.333,9.573,21.333,21.333S267.76,149.333,256,149.333z"/>
+			<path d="M288,192h-85.333c-5.896,0-10.667,4.771-10.667,10.667v42.667c0,5.896,4.771,10.667,10.667,10.667h10.667v160
+				c0,5.896,4.771,10.667,10.667,10.667h64c5.896,0,10.667-4.771,10.667-10.667V202.667C298.667,196.771,293.896,192,288,192z
+				 M277.333,405.333h-42.667v-160c0-5.896-4.771-10.667-10.667-10.667h-10.667v-21.333h64V405.333z"/>
+			<path d="M256,0C114.844,0,0,114.844,0,256s114.844,256,256,256s256-114.844,256-256S397.156,0,256,0z M256,490.667
+				C126.604,490.667,21.333,385.396,21.333,256S126.604,21.333,256,21.333S490.667,126.604,490.667,256S385.396,490.667,256,490.667
+				z"/>
+		</g>
+	</g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>