diff --git a/application/modules/default/views/scripts/home/partials/common_rightsidebar.phtml b/application/modules/default/views/scripts/home/partials/common_rightsidebar.phtml index 7c298c5c4..485057399 100644 --- a/application/modules/default/views/scripts/home/partials/common_rightsidebar.phtml +++ b/application/modules/default/views/scripts/home/partials/common_rightsidebar.phtml @@ -1,228 +1,223 @@ . **/ $modelInfo = new Default_Model_Info(); //$this->supporters = $modelInfo->getNewActiveSupporters(9); $this->supporters = $modelInfo->getNewActiveSupportersForSectionAll(9); $helpPrintDate = new Default_View_Helper_PrintDate(); $git_url = Zend_Registry::get('config')->settings->server->opencode->host; ?>
is_startpage) { ?>
countSupporters?> people support those who create freedom
supporters as $user) { if($i++>6) break; ?>
see all
settings->client->default; $baseurlStore = $config->baseurl_store; $identity = Zend_Auth::getInstance()->getIdentity(); if(null == $identity || (null != $identity && !$this->isSupporter($identity->member_id))) { ?> Become a Supporter isSupporter($identity->member_id))) { ?> Thank you for your support!
storeabout) { ?>
storeabout; ?>
catabout) { ?>
catabout; ?>
config_id_name=='kde-store' || $storeConfig->config_id_name=='kde' ) { $this->moderators = $modelInfo->getModeratorsList(); ?> Moderators
moderators as $mod) { ?>
is_show_blog_news; if($is_show_blog_news==1 && $this->is_startpage == true) { ?> News
is_show_forum_news; if($is_show_forum_news==1) { ?> Forum
is_show_git_projects; if($is_show_git_projects==1 && $this->show_git == true) { ?> Git-Projects
comments) > 0) { ?> Comments
comments as $this->comment) { echo $this->render('explore/partials/comment.phtml'); } ?>
- - - Social -
- +
inlineScript()->appendScript( ' $(document).ready(function(){ RssNews.setup(); - BlogJson.setup(); - Mastodon.setup(); + BlogJson.setup(); GitlabNewProjectsJson.setup("'.$git_url.'"); }); '); \ No newline at end of file diff --git a/httpdocs/theme/react/app-carousel/__timeago.js b/httpdocs/theme/react/app-carousel/__timeago.js deleted file mode 100644 index 10f848bc7..000000000 --- a/httpdocs/theme/react/app-carousel/__timeago.js +++ /dev/null @@ -1,232 +0,0 @@ -/** - * Timeago is a jQuery plugin that makes it easy to support automatically - * updating fuzzy timestamps (e.g. "4 minutes ago" or "about 1 day ago"). - * - * @name timeago - * @version 1.6.4 - * @requires jQuery v1.2.3+ - * @author Ryan McGeary - * @license MIT License - http://www.opensource.org/licenses/mit-license.php - * - * For usage and examples, visit: - * http://timeago.yarp.com/ - * - * Copyright (c) 2008-2017, Ryan McGeary (ryan -[at]- mcgeary [*dot*] org) - */ - -(function (factory) { - if (typeof define === 'function' && define.amd) { - // AMD. Register as an anonymous module. - define(['jquery'], factory); - } else if (typeof module === 'object' && typeof module.exports === 'object') { - factory(require('jquery')); - } else { - // Browser globals - factory(jQuery); - } -}(function ($) { - $.timeago = function(timestamp) { - if (timestamp instanceof Date) { - return inWords(timestamp); - } else if (typeof timestamp === "string") { - return inWords($.timeago.parse(timestamp)); - } else if (typeof timestamp === "number") { - return inWords(new Date(timestamp)); - } else { - return inWords($.timeago.datetime(timestamp)); - } - }; - var $t = $.timeago; - - $.extend($.timeago, { - settings: { - refreshMillis: 60000, - allowPast: true, - allowFuture: false, - localeTitle: false, - cutoff: 0, - autoDispose: true, - strings: { - prefixAgo: null, - prefixFromNow: null, - suffixAgo: "ago", - suffixFromNow: "from now", - inPast: 'any moment now', - seconds: "less than a minute", - minute: "about a minute", - minutes: "%d minutes", - hour: "about an hour", - hours: "about %d hours", - day: "a day", - days: "%d days", - month: "about a month", - months: "%d months", - year: "about a year", - years: "%d years", - wordSeparator: " ", - numbers: [] - } - }, - - inWords: function(distanceMillis) { - if (!this.settings.allowPast && ! this.settings.allowFuture) { - throw 'timeago allowPast and allowFuture settings can not both be set to false.'; - } - - var $l = this.settings.strings; - var prefix = $l.prefixAgo; - var suffix = $l.suffixAgo; - if (this.settings.allowFuture) { - if (distanceMillis < 0) { - prefix = $l.prefixFromNow; - suffix = $l.suffixFromNow; - } - } - - if (!this.settings.allowPast && distanceMillis >= 0) { - return this.settings.strings.inPast; - } - - var seconds = Math.abs(distanceMillis) / 1000; - var minutes = seconds / 60; - var hours = minutes / 60; - var days = hours / 24; - var years = days / 365; - - function substitute(stringOrFunction, number) { - var string = $.isFunction(stringOrFunction) ? stringOrFunction(number, distanceMillis) : stringOrFunction; - var value = ($l.numbers && $l.numbers[number]) || number; - return string.replace(/%d/i, value); - } - - var words = seconds < 45 && substitute($l.seconds, Math.round(seconds)) || - seconds < 90 && substitute($l.minute, 1) || - minutes < 45 && substitute($l.minutes, Math.round(minutes)) || - minutes < 90 && substitute($l.hour, 1) || - hours < 24 && substitute($l.hours, Math.round(hours)) || - hours < 42 && substitute($l.day, 1) || - days < 30 && substitute($l.days, Math.round(days)) || - days < 45 && substitute($l.month, 1) || - days < 365 && substitute($l.months, Math.round(days / 30)) || - years < 1.5 && substitute($l.year, 1) || - substitute($l.years, Math.round(years)); - - var separator = $l.wordSeparator || ""; - if ($l.wordSeparator === undefined) { separator = " "; } - return $.trim([prefix, words, suffix].join(separator)); - }, - - parse: function(iso8601) { - var s = $.trim(iso8601); - s = s.replace(/\.\d+/,""); // remove milliseconds - s = s.replace(/-/,"/").replace(/-/,"/"); - s = s.replace(/T/," ").replace(/Z/," UTC"); - s = s.replace(/([\+\-]\d\d)\:?(\d\d)/," $1$2"); // -04:00 -> -0400 - s = s.replace(/([\+\-]\d\d)$/," $100"); // +09 -> +0900 - return new Date(s); - }, - datetime: function(elem) { - var iso8601 = $t.isTime(elem) ? $(elem).attr("datetime") : $(elem).attr("title"); - return $t.parse(iso8601); - }, - isTime: function(elem) { - // jQuery's `is()` doesn't play well with HTML5 in IE - return $(elem).get(0).tagName.toLowerCase() === "time"; // $(elem).is("time"); - } - }); - - // functions that can be called via $(el).timeago('action') - // init is default when no action is given - // functions are called with context of a single element - var functions = { - init: function() { - functions.dispose.call(this); - var refresh_el = $.proxy(refresh, this); - refresh_el(); - var $s = $t.settings; - if ($s.refreshMillis > 0) { - this._timeagoInterval = setInterval(refresh_el, $s.refreshMillis); - } - }, - update: function(timestamp) { - var date = (timestamp instanceof Date) ? timestamp : $t.parse(timestamp); - $(this).data('timeago', { datetime: date }); - if ($t.settings.localeTitle) { - $(this).attr("title", date.toLocaleString()); - } - refresh.apply(this); - }, - updateFromDOM: function() { - $(this).data('timeago', { datetime: $t.parse( $t.isTime(this) ? $(this).attr("datetime") : $(this).attr("title") ) }); - refresh.apply(this); - }, - dispose: function () { - if (this._timeagoInterval) { - window.clearInterval(this._timeagoInterval); - this._timeagoInterval = null; - } - } - }; - - $.fn.timeago = function(action, options) { - var fn = action ? functions[action] : functions.init; - if (!fn) { - throw new Error("Unknown function name '"+ action +"' for timeago"); - } - // each over objects here and call the requested function - this.each(function() { - fn.call(this, options); - }); - return this; - }; - - function refresh() { - var $s = $t.settings; - - //check if it's still visible - if ($s.autoDispose && !$.contains(document.documentElement,this)) { - //stop if it has been removed - $(this).timeago("dispose"); - return this; - } - - var data = prepareData(this); - - if (!isNaN(data.datetime)) { - if ( $s.cutoff === 0 || Math.abs(distance(data.datetime)) < $s.cutoff) { - $(this).text(inWords(data.datetime)); - } else { - if ($(this).attr('title').length > 0) { - $(this).text($(this).attr('title')); - } - } - } - return this; - } - - function prepareData(element) { - element = $(element); - if (!element.data("timeago")) { - element.data("timeago", { datetime: $t.datetime(element) }); - var text = $.trim(element.text()); - if ($t.settings.localeTitle) { - element.attr("title", element.data('timeago').datetime.toLocaleString()); - } else if (text.length > 0 && !($t.isTime(element) && element.attr("title"))) { - element.attr("title", text); - } - } - return element.data("timeago"); - } - - function inWords(date) { - return $t.inWords(distance(date)); - } - - function distance(date) { - return (new Date().getTime() - date.getTime()); - } - - // fix for IE6 suckage - document.createElement("abbr"); - document.createElement("time"); -})); diff --git a/httpdocs/theme/react/app-carousel/app.js b/httpdocs/theme/react/app-carousel/app.js deleted file mode 100644 index 1693f54e1..000000000 --- a/httpdocs/theme/react/app-carousel/app.js +++ /dev/null @@ -1,536 +0,0 @@ -window.hpHelpers = (function(){ - - function dechex(number) { - // discuss at: http://locutus.io/php/dechex/ - // original by: Philippe Baumann - // bugfixed by: Onno Marsman (https://twitter.com/onnomarsman) - // improved by: http://stackoverflow.com/questions/57803/how-to-convert-decimal-to-hex-in-javascript - // input by: pilus - // example 1: dechex(10) - // returns 1: 'a' - // example 2: dechex(47) - // returns 2: '2f' - // example 3: dechex(-1415723993) - // returns 3: 'ab9dc427' - - if (number < 0) { - number = 0xFFFFFFFF + number + 1 - } - return parseInt(number, 10).toString(16) - } - - function calculateScoreColor(score){ - let blue, red, green, defaultColor = 200; - if (score > 50){ - red = defaultColor - ((score-50)*4); - green = defaultColor; - blue = defaultColor - ((score-50)*4); - } else if (score < 51){ - red = defaultColor; - green = defaultColor - ((score-50)*4); - blue = defaultColor - ((score-50)*4); - } - - return "rgb("+red+","+green+","+blue+")"; - } - - return { - dechex, - calculateScoreColor - } -}()); - -class CarouselsModule extends React.Component { - constructor(props){ - super(props); - this.state = { - - }; - this.initCarouselModule = this.initCarouselModule.bind(this); - this.updateDimensions = this.updateDimensions.bind(this); - this.convertDataObject = this.convertDataObject.bind(this); - } - - componentWillMount() { - this.updateDimensions(); - } - - componentWillUnmount(){ - window.removeEventListener("resize", this.updateDimensions); - window.removeEventListener("orientationchange",this.updateDimensions); - } - - componentDidMount() { - this.initCarouselModule(); - } - - initCarouselModule(){ - - window.addEventListener("resize", this.updateDimensions); - window.addEventListener("orientationchange",this.updateDimensions); - - let env = "live"; - if (location.hostname.endsWith('cc')) { - env = "test"; - } else if (location.hostname.endsWith('localhost')) { - env = "test"; - } - - this.setState({env:env},function(){ - this.convertDataObject(); - }); - - } - - updateDimensions(){ - - const width = window.innerWidth; - let device; - if (width >= 910){ - device = "large"; - } else if (width < 910 && width >= 610){ - device = "mid"; - } else if (width < 610){ - device = "tablet"; - } - - this.setState({device:device}); - - } - - convertDataObject() { - let productGroupsArray = []; - for (var i in window.data) { - if (i !== "comments" && i !== "featureProducts"){ - const productGroup = { - title:window.data[i].title, - catIds:window.data[i].catIds, - products:JSON.parse(window.data[i].products) - } - productGroupsArray.push(productGroup); - } - } - this.setState({productGroupsArray:productGroupsArray,loading:false}); - } - - render(){ - - let productCarouselsContainer; - if (this.state.loading === false){ - productCarouselsContainer = this.state.productGroupsArray.map((pgc,index) => { - //if (pgc.catIds){ - return ( -
-
- -
-
- ); - //} - }); - } - - return ( -
- {productCarouselsContainer} -
- ) - } -} - -class Carousel extends React.Component { - constructor(props){ - super(props); - this.state = { - products:this.props.products, - disableleftArrow:true - }; - this.updateDimensions = this.updateDimensions.bind(this); - this.animateProductCarousel = this.animateProductCarousel.bind(this); - this.getNextProductsBatch = this.getNextProductsBatch.bind(this); - } - - componentWillMount() { - window.addEventListener("resize", this.updateDimensions); - } - - componentDidMount() { - this.updateDimensions(); - } - - updateDimensions(animateCarousel){ - let itemsPerRow = 5; - if (window.hpVersion === 2){ - if (this.props.device === 'large'){ - itemsPerRow = 6; - } else if (this.props.device === 'mid'){ - itemsPerRow = 6; - } else if (this.props.device === 'tablet'){ - itemsPerRow = 2; - } - } - - let containerWidth; - if (window.page === "opendesktop"){ - containerWidth = $('#main-content').width(); - - } else if (window.page === "appimages" || window.page === "libreoffice"){ - containerWidth = $('#introduction').find('.container').width(); - } - const containerNumber = Math.ceil(this.state.products.length / (itemsPerRow - 1)); - const itemWidth = containerWidth / itemsPerRow; - const sliderWidth = (containerWidth - itemWidth) * containerNumber; - let sliderPosition = 0; - if (this.state.sliderPosition){ - sliderPosition = this.state.sliderPosition; - } - - if (window.page === "appimages" || window.page === "libreoffice"){ - $('#carousel-module-container').width(containerWidth); - } - - this.setState({ - sliderPosition:sliderPosition, - containerWidth:containerWidth, - containerNumber:containerNumber, - sliderWidth:sliderWidth, - itemWidth:itemWidth, - itemsPerRow:itemsPerRow - 1 - },function(){ - if (animateCarousel){ - this.animateProductCarousel('right',animateCarousel); - } else if (this.state.finishedProducts){ - this.setState({disableRightArrow:true}); - } - }); - } - - animateProductCarousel(dir,animateCarousel){ - - let newSliderPosition = this.state.sliderPosition; - const endPoint = this.state.sliderWidth - (this.state.containerWidth - this.state.itemWidth); - - if (dir === 'left'){ - if (this.state.sliderPosition > 0){ - //newSliderPosition = this.state.sliderPosition - (this.state.containerWidth - this.state.itemWidth); - if(this.state.containerWidth<(this.state.itemWidth*3)) - { - newSliderPosition = this.state.sliderPosition - this.state.itemWidth; - }else { - newSliderPosition = this.state.sliderPosition - this.state.itemWidth *2 ; - } - - } - } else { - - if (Math.trunc(this.state.sliderPosition) < Math.trunc(endPoint)){ - //newSliderPosition = this.state.sliderPosition + (this.state.containerWidth - this.state.itemWidth); - if(this.state.containerWidth<(this.state.itemWidth*3)) - { - newSliderPosition = this.state.sliderPosition + this.state.itemWidth; - }else { - newSliderPosition = this.state.sliderPosition + this.state.itemWidth *2 ; - } - } else { - newSliderPosition = 0 - /*if (!animateCarousel){ - if (this.state.products.length >= 15 || this.state.finishedProducts){ - newSliderPosition = 0; - } else { - this.getNextProductsBatch(); - } - }*/ - } - } - - this.setState({sliderPosition:newSliderPosition},function(){ - - let disableleftArrow = false; - if (this.state.sliderPosition <= 0){ - disableleftArrow = true; - } - - let disableRightArrow = false; - /*if (this.state.sliderPosition >= endPoint && this.state.finishedProducts === true){ - disableRightArrow = true; - }*/ - - this.setState({disableRightArrow:disableRightArrow,disableleftArrow:disableleftArrow}); - - }); - } - - getNextProductsBatch(){ - - this.setState({disableRightArrow:true},function(){ - let limit = (this.state.itemsPerRow * (this.state.containerNumber + 1)) - this.state.products.length; - if (limit <= 0){ - limit = this.state.itemsPerRow; - } - - let url; - if (!this.props.catIds){ - url = "/home/getnewactiveplingedproductjson/?limit="+limit+"&offset="+this.state.offset; - } else { - url = "/home/showlastproductsjson/?page=1&limit="+limit+"&offset="+this.state.offset+"&catIDs="+this.props.catIds+"&isoriginal=0"; - } - - const self = this; - $.ajax({url: url,cache: false}).done(function(response){ - let products = self.state.products, - finishedProducts = false, - animateCarousel = true; - - if (response.length > 0){ - products = products.concat(response); - } else { - finishedProducts = true; - animateCarousel = false; - } - - if (response.length < limit){ - finishedProducts = true; - } - - self.setState({ - products:products, - offset:self.state.offset + response.length, - finishedProducts:finishedProducts},function(){ - self.updateDimensions(animateCarousel); - }); - }); - }); - } - - render(){ - let carouselItemsDisplay; - if (this.state.products && this.state.products.length > 0){ - let plingedProduct = false; - if (!this.props.catIds) plingedProduct = true; - carouselItemsDisplay = this.state.products.map((product,index) => ( - - )); - } - - let carouselArrowLeftDisplay; - if (this.state.disableleftArrow){ - carouselArrowLeftDisplay = ( - - - - ) - } else { - carouselArrowLeftDisplay = ( - this.animateProductCarousel('left')} className="carousel-arrow arrow-left"> - - - ); - } - - let carouselArrowRightDisplay; - if (this.state.disableRightArrow){ - carouselArrowRightDisplay = ( - - - - ) - } else { - carouselArrowRightDisplay = ( - this.animateProductCarousel('right')} className="carousel-arrow arrow-right"> - - - ); - } - - - let hpVersionClass = "one"; - let carouselWrapperStyling = {}; - let carouselArrowsMargin; - if (window.hpVersion === 2 && this.state.itemWidth){ - hpVersionClass = "two"; - let itemHeightMultiplier; - // if (this.state.itemWidth > 150){ - itemHeightMultiplier = 1.35; - /*} else { - itemHeightMultiplier = 1.85; - }*/ - carouselWrapperStyling = { - "paddingLeft":this.state.itemWidth / 2, - "paddingRight":this.state.itemWidth / 2, - "height":this.state.itemWidth * itemHeightMultiplier - } - carouselArrowsMargin = this.state.itemWidth / 4; - } - - let urlSuffix=''; - if (window.page === "libreoffice"){ - urlSuffix = "/s/LibreOffice"; - } - let titleLink = urlSuffix + "/browse/cat/" + this.props.catIds + "/"; - if (!this.props.catIds){ - titleLink = "/community#plingedproductsPanel"; - }else if(this.props.catIds.indexOf(',')>0){ - titleLink = urlSuffix + "/browse/"; - } - - - return ( -
-
-

{this.props.title}

-
-
-
- {carouselArrowLeftDisplay} -
-
-
- {carouselItemsDisplay} -
-
-
- {carouselArrowRightDisplay} -
-
-
- ) - } -} - -class CarouselItem extends React.Component { - constructor(props){ - super(props); - this.state = {}; - } - - render(){ - - let paddingTop; - let productInfoDisplay = ( -
- {this.props.product.title} - {this.props.product.username} -
- ); - - if (window.hpVersion === 2){ - - if (this.props.itemWidth){ - paddingTop = ((this.props.itemWidth * 1.35) / 2) - 10; - } - - let lastDate; - if (this.props.product.changed_at){ - lastDate = this.props.product.changed_at; - } else { - lastDate = this.props.product.created_at; - } - - let cDate = new Date(lastDate); - // cDate = cDate.toString(); - // const createdDate = cDate.split(' ')[1] + " " + cDate.split(' ')[2] + " " + cDate.split(' ')[3]; - const createdDate = jQuery.timeago(cDate) - // const productScoreColor = window.hpHelpers.calculateScoreColor(this.props.product.laplace_score); - - let infoDisplay; - let scoreDisplay=( -
-
- Score {(this.props.product.laplace_score/10).toFixed(1)}% -
-
-
-
-
- ); - infoDisplay = scoreDisplay; - - - if (this.props.plingedProduct){ - let plingDisplay = ( -
- - {this.props.product.sum_plings} -
- ); - - infoDisplay=( -
- {plingDisplay} - {scoreDisplay} -
- ); - } - - - /*let scoreDisplay; - if (this.props.plingedProduct){ - scoreDisplay = ( -
- - {this.props.product.sum_plings} -
- ); - } else { - scoreDisplay = ( -
-
- score {this.props.product.laplace_score + "%"} -
-
-
-
-
- ); - }*/ - - productInfoDisplay = ( -
- {this.props.product.title} - {this.props.product.cat_title} - {createdDate} - {infoDisplay} -
- ); - } - - let projectUrl =""; - if (window.page === "libreoffice"){ - projectUrl = window.baseUrl +"p/"+this.props.product.project_id; - }else - { - projectUrl = "/p/"+this.props.product.project_id; - } - - return ( -
-
- -
- -
- {productInfoDisplay} - -
-
- ) - } -} - -ReactDOM.render( - , - document.getElementById('carousel-module-container') -); diff --git a/httpdocs/theme/react/app-cat-tree/_app.js b/httpdocs/theme/react/app-cat-tree/_app.js deleted file mode 100644 index 93ed8a06e..000000000 --- a/httpdocs/theme/react/app-cat-tree/_app.js +++ /dev/null @@ -1,289 +0,0 @@ -class CategoryTree extends React.Component { - constructor(props){ - super(props); - this.state = { - categories:window.catTree, - categoryId:window.categoryId, - catTreeCssClass:"", - selectedCategories:[], - showCatTree:false, - backendView:window.backendView, - loading:true, - }; - this.getSelectedCategories = this.getSelectedCategories.bind(this); - this.updateDimensions = this.updateDimensions.bind(this); - this.toggleCatTree = this.toggleCatTree.bind(this); - } - - componentWillMount() { - this.updateDimensions(); - } - - componentWillUnmount(){ - window.removeEventListener("resize", this.updateDimensions); - } - - componentDidMount() { - window.addEventListener("resize", this.updateDimensions); - const urlContext = appHelpers.getUrlContext(window.location.href); - this.setState({urlContext:urlContext},function(){ - if (this.state.categoryId && this.state.categoryId !== 0){ - this.getSelectedCategories(this.state.categories,this.state.categoryId); - } else { - this.setState({loading:false}); - } - }); - } - - getSelectedCategories(categories,catId){ - const selectedCategory = appHelpers.getSelectedCategory(this.state.categories,catId); - const selectedCategories = this.state.selectedCategories; - if (typeof(selectedCategory) !== 'undefined'){ - selectedCategory.selectedIndex = selectedCategories.length; - selectedCategories.push(selectedCategory); - } - this.setState({selectedCategories:selectedCategories},function(){ - if (selectedCategory && selectedCategory.parent_id){ - this.getSelectedCategories(categories,parseInt(selectedCategory.parent_id)); - } else { - this.setState({loading:false}); - } - }); - } - - updateDimensions(){ - const device = appHelpers.getDeviceFromWidth(window.innerWidth); - this.setState({device:device}); - } - - toggleCatTree(){ - const showCatTree = this.state.showCatTree === true ? false : true; - const catTreeCssClass = this.state.catTreeCssClass === "open" ? "" : "open"; - this.setState({showCatTree:showCatTree,catTreeCssClass:catTreeCssClass}); - } - - render(){ - let categoryTreeDisplay, selectedCategoryDisplay; - if (!this.state.loading){ - - if (this.state.device === "tablet" && this.state.selectedCategories && this.state.selectedCategories.length > 0){ - selectedCategoryDisplay = ( - - ); - } - if (this.state.device === "tablet" && this.state.showCatTree || this.state.device !== "tablet" || this.state.selectedCategories && this.state.selectedCategories.length === 0) { - if (this.state.categories){ - const self = this; - const categoryTree = this.state.categories.sort(appHelpers.sortArrayAlphabeticallyByTitle).map((cat,index) => ( - - )); - - const allCatItemCssClass = appHelpers.getAllCatItemCssClass(window.location.href,window.baseUrl,this.state.urlContext, this.state.categoryId); - let baseUrl; - if (window.baseUrl !== window.location.origin){ - baseUrl = window.location.origin; - } - - const categoryItemLink = appHelpers.generateCategoryLink(window.baseUrl,this.state.urlContext,"all",window.location.href); - - categoryTreeDisplay = ( -
    -
  • - All -
    • - {categoryTree} -
- ); - } - } - - } - - return( -
- {selectedCategoryDisplay} - {categoryTreeDisplay} -
- ); - } -} - -class CategoryItem extends React.Component { - constructor(props){ - super(props); - this.state = { - showSubmenu:false - }; - this.toggleSubmenu = this.toggleSubmenu.bind(this); - } - - toggleSubmenu(){ - console.log('toggle sub menu'); - const showSubmenu = this.state.showSubmenu === true ? false : true; - console.log(showSubmenu); - this.setState({showSubmenu:showSubmenu}); - } - - render(){ - let categoryChildrenDisplay; - - const categoryType = appHelpers.getCategoryType(this.props.selectedCategories,this.props.categoryId,this.props.category.id); - if (this.props.category.has_children === true && categoryType && this.props.lastChild !== true || - this.props.category.has_children === true && this.props.backendView === true && this.state.showSubmenu === true){ - - const self = this; - - let lastChild; - if (categoryType === "selected"){ - lastChild = true; - } - - const children = appHelpers.convertObjectToArray(this.props.category.children); - const categoryChildren = children.sort(appHelpers.sortArrayAlphabeticallyByTitle).map((cat,index) => ( - - )); - - categoryChildrenDisplay = ( -
    - {categoryChildren} -
- ); - - } - - let categoryItemClass = "cat-item"; - if (this.props.categoryId === parseInt(this.props.category.id)){ - categoryItemClass += " active"; - } - - let productCountDisplay; - if (this.props.category.product_count !== "0"){ - productCountDisplay = this.props.category.product_count; - } - - const categoryItemLink = appHelpers.generateCategoryLink(window.baseUrl,this.props.urlContext,this.props.category.id,window.location.href); - - let catItemContentDisplay; - if (this.props.backendView === true){ - - let submenuToggleDisplay; - if (this.props.category.has_children === true){ - console.log(this.props.category.title); - console.log(this.props.category.has_children); - if (this.state.showSubmenu === true){ - submenuToggleDisplay = "[-]"; - } else { - submenuToggleDisplay = "[+]"; - } - } - - catItemContentDisplay = ( - - {this.props.category.title} - {productCountDisplay} - {submenuToggleDisplay} - - ); - } else { - catItemContentDisplay = ( - - {this.props.category.title} - {productCountDisplay} - - ); - } - - return( -
  • - {catItemContentDisplay} - {categoryChildrenDisplay} -
    • - ) - } -} - -class SelectedCategory extends React.Component { - constructor(props){ - super(props); - this.state = {}; - } - - render(){ - let selectedCategoryDisplay; - if (this.props.selectedCategory){ - selectedCategoryDisplay = ( - {this.props.selectedCategory.title} - ); - } - - let selectedCategoriesDisplay; - if (this.props.selectedCategories){ - const selectedCategoriesReverse = this.props.selectedCategories.slice(0); - selectedCategoriesDisplay = selectedCategoriesReverse.reverse().map((sc,index) => ( - {sc.title} - )); - } - - return ( -
    - {selectedCategoriesDisplay} - -
    - ) - } -} - -function CategorySidePanelContainer(){ - - const [ categories, setCategoies ] = React.useState(window.catTree); - const [ categoryId, setCategoryId ] = React.useState(window.categoryId); - const [ catTreeSccClass, setCatTreeCssClass ] = React.useState(''); - const [ showCatTree, setShowCatTree ] = React.useState(false); - const [ backendView, setBackendView ] = React.useState(window.backendView); - const [ loading, setLoading ] = React.useState(true); - - console.log(categories); - - const mainCategoriesDisplay = - - return( - - ) -} - -function CategorySidePanel(){ - -} - -ReactDOM.render( - , - document.getElementById('category-tree-container') -); diff --git a/httpdocs/theme/react/app-cat-tree/app-helpers.js b/httpdocs/theme/react/app-cat-tree/app-helpers.js deleted file mode 100644 index 3976f4ef2..000000000 --- a/httpdocs/theme/react/app-cat-tree/app-helpers.js +++ /dev/null @@ -1,114 +0,0 @@ -window.appHelpers = (function(){ - - function convertObjectToArray(object){ - let newArray = []; - for (var i in object){ - newArray.push(object[i]); - } - return newArray; - } - - function getSelectedCategory(categories,categoryId){ - let selectedCategory; - categories.forEach(function(cat,catIndex){ - if (!selectedCategory){ - if (parseInt(cat.id) === categoryId){ - selectedCategory = cat; - } else { - if (cat.has_children === true){ - const catChildren = appHelpers.convertObjectToArray(cat.children); - selectedCategory = appHelpers.getSelectedCategory(catChildren,categoryId); - } - } - } - }); - return selectedCategory; - } - - function getCategoryType(selectedCategories,selectedCategoryId,categoryId){ - let categoryType; - if (parseInt(categoryId) === selectedCategoryId){ - categoryType = "selected"; - } else { - selectedCategories.forEach(function(selectedCat,index){ - if (selectedCat.id === categoryId){ - categoryType = "parent"; - } - }); - } - return categoryType; - } - - function generateCategoryLink(baseUrl,urlContext,catId,locationHref){ - if (window.baseUrl !== window.location.origin){ - baseUrl = window.location.origin; - } - let link = baseUrl + urlContext + "/browse/"; - if (catId !== "all"){ - link += "cat/" + catId + "/"; - } - if (locationHref.indexOf('ord') > -1){ - link += "ord/" + locationHref.split('/ord/')[1]; - } - return link; - } - - function sortArrayAlphabeticallyByTitle(a, b){ - const titleA = a.title.toLowerCase(); - const titleB = b.title.toLowerCase(); - if(titleA < titleB) { return -1; } - if(titleA > titleB) { return 1; } - return 0; - } - - function getDeviceFromWidth(width){ - let device; - if (width >= 910){ - device = "large"; - } else if (width < 910 && width >= 610){ - device = "mid"; - } else if (width < 610){ - device = "tablet"; - } - return device; - } - - function getUrlContext(href){ - let urlContext = ""; - if (href.indexOf('/s/') > -1){ - urlContext = "/s/" + href.split('/s/')[1].split('/')[0]; - } - return urlContext; - } - - function getAllCatItemCssClass(href,baseUrl,urlContext,categoryId){ - if (baseUrl !== window.location.origin){ - baseUrl = window.location.origin; - } - let allCatItemCssClass; - if (categoryId && categoryId !== 0){ - allCatItemCssClass = ""; - } else { - if (href === baseUrl + urlContext || - href === baseUrl + urlContext + "/browse/" || href === baseUrl + urlContext + "/browse/ord/latest/" || href === baseUrl + urlContext + "/browse/ord/top/" || - href === "https://store.kde.org" || href === "https://store.kde.org/browse/ord/latest/" ||  href === "https://store.kde.org/browse/ord/top/" || - href === "https://addons.videolan.org" || href === "https://addons.videolan.org/browse/ord/latest/" ||  href === "https://addons.videolan.org/browse/ord/top/" || - href === "https://share.krita.org/" || href === "https://share.krita.org/browse/ord/latest/" ||  href === "https://share.krita.org/browse/ord/top/"){ - allCatItemCssClass = "active"; - } - } - return allCatItemCssClass; - } - - return { - convertObjectToArray, - getSelectedCategory, - getCategoryType, - generateCategoryLink, - sortArrayAlphabeticallyByTitle, - getDeviceFromWidth, - getUrlContext, - getAllCatItemCssClass - } - -}());